/* ------------------------------------------------------------------ *
 * TeamScheduleViewer + ShiftPickerDialog
 * Shared "team schedule" calendar surface for team members.
 * Hosted on /my-events/{loc}/{slug}/team-schedule, EventSummary, and
 * /my-schedule. Visuals deliberately track the admin team-schedule
 * cards (var(--cum-bg) etc.) so member + admin views stay coherent.
 * ------------------------------------------------------------------ */

.tsv-root {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.tsv-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: var(--cum-bg, #faf7ff);
    border: 1px dashed var(--cum-border, #e2d6f3);
    border-radius: 12px;
    color: var(--cum-text-muted, #6b6478);
}

.tsv-empty__icon {
    font-size: 24px;
    color: var(--cum-text-muted, #6b6478);
}

.tsv-empty__text strong { display: block; margin-bottom: 4px; }

/* Header strip ----------------------------------------------------- */
.tsv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cum-bg, #faf7ff);
    border: 1px solid var(--cum-border, #e2d6f3);
    border-radius: 12px;
}

.tsv-header__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cum-text, #2a2535);
}

.tsv-header__limits { display: inline-flex; gap: 8px; }

.tsv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--cum-border, #e2d6f3);
    font-size: 13px;
    color: var(--cum-text, #2a2535);
}

.tsv-chip--danger {
    background: #fdecec;
    border-color: #f5b7b1;
    color: #8a1c14;
}

/* Day group -------------------------------------------------------- */
.tsv-day {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tsv-day__heading {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cum-text, #2a2535);
}

.tsv-day__weekday { font-size: 16px; }
.tsv-day__date    { font-size: 13px; font-weight: 500; color: var(--cum-text-muted, #6b6478); }

.tsv-day__shifts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Shift card ------------------------------------------------------- */
.tsv-shift {
    --tsv-role-color: #6B4C9A;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--cum-border, #e2d6f3);
    border-left: 4px solid var(--tsv-role-color);
    border-radius: 10px;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.tsv-shift:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }

.tsv-shift--disabled {
    background: #faf9fc;
    box-shadow: none;
    opacity: 0.85;
}

.tsv-shift__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tsv-shift__role {
    font-weight: 600;
    color: var(--tsv-role-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsv-shift__badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eee;
    color: #444;
    flex: 0 0 auto;
}

.tsv-shift__badge--preview { background: #fff3cd; color: #7a5a00; }
.tsv-shift__badge--full    { background: #fde4e4; color: #8a1c14; }

.tsv-shift__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cum-text, #2a2535);
}

.tsv-shift__time .fas { color: var(--cum-text-muted, #6b6478); }

.tsv-shift__fill { display: flex; flex-direction: column; gap: 4px; }

.tsv-shift__fill-bar {
    height: 6px;
    background: #eef0f5;
    border-radius: 999px;
    overflow: hidden;
}

.tsv-shift__fill-fill {
    height: 100%;
    background: var(--tsv-role-color);
    border-radius: 999px;
    transition: width 200ms ease;
}

.tsv-shift__fill-line {
    font-size: 12px;
    color: var(--cum-text-muted, #6b6478);
}

.tsv-shift__credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cum-text-muted, #6b6478);
}

.tsv-shift__cta { margin-top: 4px; }

.tsv-shift__mine {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--brand-success-fg, #2c6e3f);
}

.tsv-shift__mine--muted { color: var(--cum-text-muted, #6b6478); }

/* ShiftPickerDialog ------------------------------------------------ */
.spd-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 8px 0;
}

.spd-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: #faf9fc;
    border: 1px solid var(--cum-border, #e2d6f3);
    border-radius: 10px;
}

.spd-summary__role {
    --spd-role-color: #6B4C9A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    color: var(--spd-role-color);
}

.spd-summary__role-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--spd-role-color);
    display: inline-block;
}

.spd-summary__role-sub {
    font-size: 13px;
    color: var(--cum-text-muted, #6b6478);
}

.spd-summary__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cum-text, #2a2535);
}

.spd-summary__time-sep { color: var(--cum-text-muted, #6b6478); }

.spd-summary__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--cum-text-muted, #6b6478);
}

.spd-summary__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spd-counter {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: var(--cum-text-muted, #6b6478);
}

/* Compact procedural note (auto-approve / pending-approval) - replaces
   the prior full-width filled RadzenAlert blocks so the dialog reads as
   a confirm sheet, not a celebration banner. Icon color carries the
   semantic; the text stays neutral so it sits comfortably with the
   surrounding shift summary. */
.spd-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cum-text, #2a2535);
}

.spd-note__icon {
    font-size: 14px;
    line-height: 1.45;
    flex-shrink: 0;
}

.spd-note--success .spd-note__icon { color: var(--jbf-mint); }
.spd-note--info    .spd-note__icon { color: var(--jbf-cyan); }

.spd-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}

/* Role disclaimer (location_schedule_role.disclaimer_text). Amber accent
   to match the brand "guidance / heads-up" affordance used elsewhere
   (see ui-css-consistency.mdc -> Common Usage Patterns). The bg uses 10%
   amber as documented for amber callouts. */
.spd-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(253, 181, 38, 0.10);
    border: 1px solid rgba(253, 181, 38, 0.45);
}

.spd-disclaimer__heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jbf-amber);
}

.spd-disclaimer__body {
    font-size: 14px;
    line-height: 1.45;
    color: var(--cum-text, #2a2535);
    white-space: pre-wrap;
}

/* ShiftPickerDialog uses the shared `.jbf-resource-dialog` chrome (rounded
   corners + pink centered title + 1px title-border) so it lines up with the
   seller-resource and event modals. Add a tad of body padding so the
   summary card and disclaimer don't bleed into the title border. */
.jbf-shift-picker-dialog .rz-dialog-content {
    padding: 16px 18px 18px 18px;
}

/* Mobile ----------------------------------------------------------- */
@media (max-width: 640px) {
    .tsv-day__shifts { grid-template-columns: 1fr; }
    .tsv-header { flex-direction: column; align-items: flex-start; }
}