/* ============================================================
   scheduling.css — Calendar (S109). Hour-row time grid (day/week),
   appointment blocks, toolbar. Tokens only; no inline positioning.
   ============================================================ */

.cc-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-space-3);
    flex-wrap: wrap;
}

.cc-cal-viewtoggle { display: inline-flex; gap: var(--cc-space-1); }
.cc-cal-provider { min-width: 160px; }
.cc-cal-range { margin-left: var(--cc-space-2); }

.cc-cal-grid {
    display: grid;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-card-radius);
    overflow: hidden;
    background: var(--cc-card-bg);
}

.cc-cal-grid--day  { grid-template-columns: 64px 1fr; }
.cc-cal-grid--week { grid-template-columns: 64px repeat(7, 1fr); }

.cc-cal-corner {
    border-bottom: 1px solid var(--cc-border);
    background: var(--cc-surface-subtle);
}

.cc-cal-dayhead {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--cc-space-2);
    border-bottom: 1px solid var(--cc-border);
    border-left: 1px solid var(--cc-border);
    background: var(--cc-surface-subtle);
}

.cc-cal-dayhead-dow {
    font-size: var(--cc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cc-text-muted);
}

.cc-cal-dayhead-date { font-weight: 600; color: var(--cc-text-primary); }
.cc-cal-dayhead.is-today { background: var(--cc-brand-primary-subtle); }

.cc-cal-hourlabel {
    padding: var(--cc-space-2);
    font-size: var(--cc-text-xs);
    color: var(--cc-text-muted);
    border-top: 1px solid var(--cc-border-subtle);
    text-align: right;
}

.cc-cal-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
    padding: 2px;
    border-top: 1px solid var(--cc-border-subtle);
    border-left: 1px solid var(--cc-border);
    cursor: pointer;
}

.cc-cal-cell:hover { background: var(--cc-surface-subtle); }

.cc-appt {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 3px 6px;
    border: none;
    border-left: 3px solid var(--cc-brand-primary);
    border-radius: 6px;
    background: var(--cc-brand-primary-subtle);
    color: var(--cc-text-primary);
    cursor: pointer;
}

.cc-appt-time { font-size: var(--cc-text-xs); color: var(--cc-text-secondary); }
.cc-appt-name { font-size: var(--cc-text-sm); font-weight: 600; }
.cc-appt-type { font-size: var(--cc-text-xs); color: var(--cc-text-muted); }

.cc-appt--checkedin { border-left-color: var(--cc-success); background: var(--cc-success-subtle); }
.cc-appt--completed { border-left-color: var(--cc-text-muted); background: var(--cc-surface-subtle); }
.cc-appt--noshow    { border-left-color: var(--cc-error); background: var(--cc-error-subtle); }

/* S155 patient-arrival emphasis — a ring + thicker accent bar so the patient's
   appointments stand out on any status color. Render-only: every appt still shows. */
.cc-appt--highlight {
    border-left-width: 4px;
    box-shadow: 0 0 0 2px var(--cc-brand-primary);
}

.cc-cal-cancelrow {
    display: flex;
    align-items: center;
    gap: var(--cc-space-2);
    margin-top: var(--cc-space-3);
    padding-top: var(--cc-space-3);
    border-top: 1px solid var(--cc-border);
}

/* A cell outside the provider's working hours (S111 shading). */
.cc-cal-cell--off { background: var(--cc-surface-subtle); }
.cc-cal-cell--off:hover { background: var(--cc-border-subtle); }

/* Check-in (S113) */
.cc-cal-checkinrow {
    margin-bottom: var(--cc-space-3);
    padding-bottom: var(--cc-space-3);
    border-bottom: 1px solid var(--cc-border);
}

/* Today's appointments list (S113) */
.cc-today-list { display: flex; flex-direction: column; border: 1px solid var(--cc-border); border-radius: var(--cc-card-radius); overflow: hidden; }
.cc-today-row {
    display: flex;
    align-items: center;
    gap: var(--cc-space-3);
    padding: var(--cc-space-3);
    border-bottom: 1px solid var(--cc-border-subtle);
    background: var(--cc-card-bg);
}
.cc-today-row:last-child { border-bottom: none; }
.cc-today-time { min-width: 84px; font-weight: 600; color: var(--cc-text-primary); font-size: var(--cc-text-sm); }
.cc-today-who { flex: 1; min-width: 0; }
.cc-today-name { font-weight: 600; color: var(--cc-text-primary); }
.cc-today-case { font-size: var(--cc-text-xs); color: var(--cc-text-muted); }
.cc-today-action { margin-left: auto; display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-today-empty { padding: var(--cc-space-5); text-align: center; color: var(--cc-text-muted); }

/* Recurring series (S112) */
.cc-appt-time { display: inline-flex; align-items: center; gap: var(--cc-space-1); }
.cc-appt-series { width: 11px; height: 11px; color: var(--cc-brand-primary); }

.cc-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-2);
    cursor: pointer;
    font-size: var(--cc-text-sm);
    color: var(--cc-text-primary);
}

.cc-recur-fields {
    padding: var(--cc-space-3);
    margin-top: var(--cc-space-2);
    border: 1px solid var(--cc-border-subtle);
    border-radius: var(--cc-card-radius);
    background: var(--cc-surface-subtle);
}

.cc-recur-days { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }

.cc-recur-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-card-radius);
    background: var(--cc-card-bg);
    font-size: var(--cc-text-xs);
    cursor: pointer;
}

.cc-recur-scope {
    display: flex;
    align-items: center;
    gap: var(--cc-space-3);
    flex-wrap: wrap;
    padding: var(--cc-space-2) var(--cc-space-3);
    margin-bottom: var(--cc-space-3);
    border: 1px solid var(--cc-brand-primary-border);
    border-radius: var(--cc-card-radius);
    background: var(--cc-brand-primary-subtle);
}

.cc-recur-scope-icon { width: 16px; height: 16px; color: var(--cc-brand-primary); }
.cc-recur-scope-label { font-size: var(--cc-text-sm); font-weight: 600; color: var(--cc-text-primary); }

/* S165: the calendar appointment modals get extra width so the series-scope row
   (This appointment / This & future / Entire series) sits on one line. Specific
   selector so it wins over the shared 640px .cc-casemodal-dialog without touching
   the patient case modals. */
.cc-casemodal-dialog.cc-casemodal-dialog--wide { max-width: 780px; }

/* Availability management (S111) */
.cc-avail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cc-space-4);
}

.cc-avail-list { display: flex; flex-direction: column; }

.cc-avail-item {
    display: flex;
    align-items: center;
    gap: var(--cc-space-3);
    padding: var(--cc-space-2) 0;
    border-bottom: 1px solid var(--cc-border-subtle);
}

.cc-avail-day { min-width: 96px; font-weight: 600; color: var(--cc-text-primary); font-size: var(--cc-text-sm); }
.cc-avail-range { flex: 1; color: var(--cc-text-secondary); font-size: var(--cc-text-sm); }
.cc-avail-remove { margin-left: auto; }

.cc-avail-addform {
    display: flex;
    align-items: flex-end;
    gap: var(--cc-space-2);
    flex-wrap: wrap;
}

.cc-avail-addform .cc-form-group { margin-bottom: 0; }

@media (max-width: 720px) {
    .cc-cal-grid--week {
        grid-template-columns: 48px repeat(7, minmax(72px, 1fr));
        overflow-x: auto;
    }
    .cc-avail-grid { grid-template-columns: 1fr; }
}

/* The time-off add form (S111/S121) — stacked: date/time grid, reason, then the button. */
.cc-avail-addform-off {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-3);
}

.cc-avail-addform-off .cc-form-group {
    margin-bottom: 0;
}