/* ---------------------------------------------------------------------------
   Weekly opening-hours editor (Organization area).

   One row per weekday, each holding a closed/open switch and up to two sessions.
   Project tokens rather than literals so the panel follows light and dark mode,
   and logical properties so the row mirrors in Arabic.
   --------------------------------------------------------------------------- */

.care-hours-editor {
    display: grid;
    gap: .75rem;
}

.care-hours-day {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.5fr);
    align-items: start;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--care-border, #e2e8f0);
    border-radius: .75rem;
    background: var(--care-card, #fff);
}

/* A real <legend> inside a <fieldset>, so a screen reader announces which day a
   time field belongs to instead of reading four unlabelled clocks. */
.care-hours-day-name {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--care-ink, #0f172a);
}

.care-hours-open {
    grid-column: 1;
    margin: 0;
}

.care-hours-sessions {
    display: grid;
    gap: .625rem;
    grid-column: 2;
}

.care-hours-session-label {
    display: block;
    margin-block-end: .25rem;
    font-size: .8125rem;
    color: var(--care-muted, #64748b);
}

.care-hours-pair {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* A deliberate exception to the logical-property rule. "opens – closes" is a
       range whose order carries the meaning, and the public page already prints it
       as 08:00–21:00 inside a dir="ltr" span. Left in the page's RTL direction the
       opening time is placed on the right, so the row read "21:00 – 08:00" and
       looked like a pharmacy that opens at nine in the evening. Forcing LTR here
       keeps opening-then-closing in both cultures; the row as a whole still sits at
       the start of the line because the parent stays RTL. */
    direction: ltr;
}

/* The pair is forced LTR above, so in Arabic it has to be pushed back to the
   right-hand edge to stay aligned with the label sitting above it. */
[dir="rtl"] .care-hours-pair {
    justify-content: flex-end;
}

/* The time inputs keep a fixed comfortable width rather than stretching: a clock
   is a short value and a full-width field invites the reader to expect more. */
.care-hours-pair .form-control {
    max-width: 9rem;
}

.care-hours-dash {
    color: var(--care-muted, #64748b);
}

@media (max-width: 767.98px) {
    /* One column: the day name, then the switch, then the sessions beneath, so
       nothing is squeezed into a half-width field on a phone. */
    .care-hours-day {
        grid-template-columns: minmax(0, 1fr);
    }

    .care-hours-open,
    .care-hours-sessions {
        grid-column: 1;
    }

    .care-hours-pair .form-control {
        max-width: none;
        flex: 1;
    }
}