/**
 * Estimated Finish Time Calculator — Tool Styles
 *
 * Single-column layout throughout. The form occupies the full card width
 * with inputs arranged in a horizontal row. Results appear below after
 * calculate with no layout shift.
 *
 * All rules prefixed with #dadjogger-finish-time-calculator to win
 * against theme element styles loaded after plugin CSS.
 *
 * @package DadJogger_Tools
 * @author  Will Elnick
 * @since   1.0.0
 */


/* ==========================================================================
   Container and inner wrapper
   ========================================================================== */

#dadjogger-finish-time-calculator {
    font-family: var(--djt-font-family);
    font-size: var(--djt-font-size-base);
    line-height: var(--djt-line-height);
    color: var(--djt-color-text-primary);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__inner {
    max-width: 900px;
    border: 1px solid var(--djt-color-border);
    border-radius: var(--djt-border-radius-lg);
    overflow: hidden;
    background: var(--djt-color-bg);
}


/* ==========================================================================
   Form area — horizontal row of fields + buttons
   ========================================================================== */

/**
 * The form area lays out as a single flex row:
 *   [Pace input] [Unit toggle] ............ [Calculate] [Reset]
 *
 * The field group clusters the inputs together on the left.
 * The actions sit to the right, vertically aligned to the bottom
 * of the fields so the buttons sit next to the inputs naturally.
 */

#dadjogger-finish-time-calculator .dadjogger-ftc__form-area {
    display: flex;
    align-items: flex-end;
    gap: var(--djt-spacing-lg);
    padding: var(--djt-spacing-lg) var(--djt-spacing-lg) var(--djt-spacing-md);
    border-bottom: 1px solid var(--djt-color-border-light);
}

/* Groups the pace and unit fields side by side */
#dadjogger-finish-time-calculator .dadjogger-ftc__field-group {
    display: flex;
    align-items: flex-end;
    gap: var(--djt-spacing-lg);
    flex: 0 0 auto;
}

/* Individual field — label above, input below */
#dadjogger-finish-time-calculator .dadjogger-ftc__field {
    display: flex;
    flex-direction: column;
    gap: var(--djt-spacing-xs);
    margin: 0;
}


/* ==========================================================================
   Form labels and inputs
   ========================================================================== */

#dadjogger-finish-time-calculator label {
    display: block;
    font-size: var(--djt-font-size-sm);
    font-weight: bold;
    color: #444;
    margin: 0;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__field-note {
    font-weight: normal;
    font-size: var(--djt-font-size-xs);
    color: var(--djt-color-text-muted);
}

#dadjogger-finish-time-calculator input[type="text"] {
    display: block;
    width: 120px;
    padding: 8px 12px;
    border: 1px solid var(--djt-color-border);
    border-radius: var(--djt-border-radius);
    font-size: 15px;
    color: var(--djt-color-text-primary);
    background: var(--djt-color-bg);
    box-sizing: border-box;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

#dadjogger-finish-time-calculator input[type="text"]:focus {
    outline: 2px solid var(--djt-color-accent);
    outline-offset: 1px;
    border-color: var(--djt-color-accent);
    box-shadow: none;
}


/* ==========================================================================
   Radio group — unit toggle
   ========================================================================== */

#dadjogger-finish-time-calculator .dadjogger-ftc__radio-group {
    display: flex;
    gap: var(--djt-spacing-md);
    align-items: center;
    /* Match the height of the text input so both fields bottom-align cleanly */
    min-height: 37px;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__radio-label {
    display: flex !important;
    align-items: center;
    gap: var(--djt-spacing-xs);
    font-size: var(--djt-font-size-sm);
    font-weight: normal !important;
    color: #444;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__radio-label input[type="radio"] {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    accent-color: var(--djt-color-accent);
    cursor: pointer;
}


/* ==========================================================================
   Action buttons
   ========================================================================== */

#dadjogger-finish-time-calculator .dadjogger-ftc__actions {
    display: flex;
    gap: var(--djt-spacing-sm);
    align-items: center;
    margin-left: auto; /* Push buttons to the right */
    flex-shrink: 0;
}

#dadjogger-finish-time-calculator button,
#dadjogger-finish-time-calculator .dadjogger-ftc__actions button {
    padding: 8px 20px;
    border: none;
    border-radius: var(--djt-border-radius);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: center;
    text-decoration: none;
    line-height: normal;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

#dadjogger-finish-time-calculator #dadjogger-ftc-calculate,
#dadjogger-finish-time-calculator button#dadjogger-ftc-calculate {
    background: var(--djt-color-accent);
    color: var(--djt-color-header-bg);
}

#dadjogger-finish-time-calculator #dadjogger-ftc-calculate:hover,
#dadjogger-finish-time-calculator #dadjogger-ftc-calculate:focus {
    background: #1ab8e6;
    outline: none;
    box-shadow: none;
}

#dadjogger-finish-time-calculator #dadjogger-ftc-reset,
#dadjogger-finish-time-calculator button#dadjogger-ftc-reset {
    background: var(--djt-color-surface-muted);
    color: #444;
}

#dadjogger-finish-time-calculator #dadjogger-ftc-reset:hover,
#dadjogger-finish-time-calculator #dadjogger-ftc-reset:focus {
    background: #e0e0e0;
    outline: none;
    box-shadow: none;
}


/* ==========================================================================
   Validation message
   ========================================================================== */

#dadjogger-finish-time-calculator .dadjogger-ftc__message {
    min-height: 20px;
    padding: 0 var(--djt-spacing-lg);
    font-size: var(--djt-font-size-xs);
    line-height: var(--djt-line-height);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__message--error {
    color: #c00;
    padding-top: var(--djt-spacing-xs);
}


/* ==========================================================================
   Results table
   ========================================================================== */

/**
 * Hidden by default. JS sets display:block when results are populated.
 * The wrapper provides consistent padding matching the form area above.
 */

#dadjogger-finish-time-calculator .dadjogger-ftc__results {
    display: none;
    padding: var(--djt-spacing-md) var(--djt-spacing-lg) var(--djt-spacing-lg);
    overflow-x: auto;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--djt-font-size-sm);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table th,
#dadjogger-finish-time-calculator .dadjogger-ftc__table td {
    border: 1px solid var(--djt-color-border);
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table th {
    background: var(--djt-color-surface-muted);
    font-weight: bold;
    font-size: var(--djt-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--djt-color-text-secondary);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table td:first-child {
    text-align: left;
    font-weight: normal;
    color: var(--djt-color-text-secondary);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table tbody tr:nth-child(even) {
    background: #fafafa;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table tbody tr:hover {
    background: #f0f7fc;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table .dadjogger-ftc__col--selected {
    background: #eaf7fd;
    font-weight: bold;
    color: var(--djt-color-text-primary);
    border-left-color: var(--djt-color-accent);
    border-right-color: var(--djt-color-accent);
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table .dadjogger-ftc__row--race td {
    background: var(--djt-color-surface-muted);
    font-weight: bold;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table .dadjogger-ftc__row--race .dadjogger-ftc__col--selected {
    background: #d4f0fa;
}

#dadjogger-finish-time-calculator .dadjogger-ftc__table .dadjogger-ftc__row--race td:first-child {
    color: var(--djt-color-text-primary);
    font-weight: bold;
}


/* ==========================================================================
   Disclaimer placement override
   ========================================================================== */

#dadjogger-finish-time-calculator .dadjogger-tool__disclaimer {
    margin: 0 var(--djt-spacing-lg) var(--djt-spacing-lg);
    padding-top: var(--djt-spacing-md);
}


/* ==========================================================================
   Responsive — narrow viewports
   ========================================================================== */

@media ( max-width: 600px ) {

    /* Stack form fields vertically on mobile */
    #dadjogger-finish-time-calculator .dadjogger-ftc__form-area {
        flex-direction: column;
        align-items: stretch;
        gap: var(--djt-spacing-md);
        padding: var(--djt-spacing-md);
    }

    #dadjogger-finish-time-calculator .dadjogger-ftc__field-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--djt-spacing-md);
    }

    #dadjogger-finish-time-calculator input[type="text"] {
        width: 100%;
    }

    #dadjogger-finish-time-calculator .dadjogger-ftc__actions {
        margin-left: 0;
    }

    #dadjogger-finish-time-calculator .dadjogger-ftc__results {
        padding: var(--djt-spacing-md);
    }

    #dadjogger-finish-time-calculator .dadjogger-ftc__table th,
    #dadjogger-finish-time-calculator .dadjogger-ftc__table td {
        padding: 5px 8px;
        font-size: var(--djt-font-size-xs);
    }

    #dadjogger-finish-time-calculator .dadjogger-tool__disclaimer {
        margin: 0 var(--djt-spacing-md) var(--djt-spacing-md);
    }

}