/* ============================================
   WeeklyHoursEditor — shared weekly hours grid
   Pairs with js/weekly-hours-editor.js.

   Self-contained on purpose: this component renders on availability.html,
   settings.html and the Calendar page, so it cannot assume any host page's
   stylesheet is loaded. Every control it draws is styled here.
   ============================================ */

.whe-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* "All times shown in PDT" — required on every surface that shows or takes a
   wall-clock time. Empty until TimezoneUtils resolves the business zone. */
.whe-zone-note {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

.whe-zone-note:empty {
    display: none;
}

.whe-day {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 8px;
}

.whe-day-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
    /* Keep the checkbox aligned with the first interval row, not the block. */
    padding-top: 9px;
    cursor: pointer;
    user-select: none;
}

.whe-day-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #155DFC;
    cursor: pointer;
    flex-shrink: 0;
}

.whe-day-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

.whe-day-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.whe-intervals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.whe-interval {
    display: flex;
    align-items: center;
    gap: 8px;
}

.whe-time {
    padding: 8px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    /* 14px matches the day labels and the page's other inputs. Larger reads as a
       different typeface next to them even though both are Inter. The 16px that
       keeps iOS from zooming on focus is applied at the mobile breakpoint only,
       where nothing sits beside these fields to compare against. */
    font-size: 14px;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-weight: 500;
    color: #111827;
    background: #FFFFFF;
    min-height: 38px;
}

.whe-time:focus {
    outline: none;
    border-color: #155DFC;
    box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.15);
}

.whe-sep {
    color: #6B7280;
    font-size: 14px;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

.whe-interval--error .whe-time {
    border-color: #DC2626;
    background: #FEF2F2;
}

.whe-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    flex-shrink: 0;
}

.whe-remove:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #DC2626;
}

.whe-remove:focus-visible {
    outline: 2px solid #155DFC;
    outline-offset: 1px;
}

/* Holds the remove button's width when a day has a single block, so the
   time inputs don't shift sideways as blocks are added and removed. */
.whe-remove-spacer {
    display: inline-block;
    width: 32px;
    flex-shrink: 0;
}

.whe-day-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.whe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    cursor: pointer;
    line-height: 1;
}

.whe-btn:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}

.whe-btn:focus-visible {
    outline: 2px solid #155DFC;
    outline-offset: 1px;
}

.whe-closed-label {
    display: none;
    font-size: 14px;
    color: #9CA3AF;
    font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    padding-top: 9px;
}

/* A closed day keeps its remembered times in state but hides the controls —
   reopening restores them rather than resetting to 9–5. */
.whe-day--closed .whe-intervals,
.whe-day--closed .whe-day-actions {
    display: none;
}

.whe-day--closed .whe-closed-label {
    display: block;
}

@media (max-width: 768px) {
    .whe-day {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .whe-day-toggle {
        padding-top: 0;
        min-width: 0;
        /* 44px touch target on the day toggle. */
        min-height: 44px;
    }

    .whe-closed-label {
        padding-top: 0;
    }

    .whe-interval {
        flex-wrap: nowrap;
    }

    .whe-time {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        /* Below 16px, iOS Safari zooms the viewport when the field takes focus. */
        font-size: 16px;
    }

    .whe-remove {
        width: 44px;
        height: 44px;
    }

    .whe-remove-spacer {
        width: 44px;
    }

    .whe-btn {
        min-height: 40px;
    }
}