/*
Signal Labs
Area: Signal Schedule
File: schedule/pages/calendar/schedule-calendar.css
Version: v5.14.1
Purpose: Week/day calendar views and shortcode rendering
*/
.calendar-shell { max-width: 1180px; margin: 0 auto; padding: 28px 20px 8px; }
.calendar-hero { display:flex; justify-content:space-between; gap:20px; align-items:stretch; padding:28px; border:1px solid rgba(148,163,184,.22); border-radius:24px; background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.86)); box-shadow:0 22px 60px rgba(2,6,23,.28); }
.calendar-hero h1 { margin:.2rem 0 .4rem; color:#f8fafc; font-size:clamp(2rem,4vw,3.4rem); line-height:1; }
.calendar-subtitle { max-width:840px; color:#cbd5e1; line-height:1.65; }
.calendar-status-card { min-width:220px; border:1px solid rgba(129,140,248,.3); border-radius:18px; padding:18px; background:rgba(15,23,42,.72); display:flex; flex-direction:column; justify-content:center; gap:6px; color:#cbd5e1; }
.calendar-status-card strong { color:#fff; font-size:1.35rem; }
.calendar-toolbar { margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.calendar-control { border:1px solid rgba(148,163,184,.28); background:rgba(15,23,42,.72); color:#e5e7eb; border-radius:12px; padding:10px 12px; font-weight:700; }
.calendar-control--wide { min-width: 190px; }
.calendar-board { margin-top:18px; border:1px solid rgba(148,163,184,.2); border-radius:18px; overflow:hidden; background:rgba(15,23,42,.68); box-shadow:0 18px 50px rgba(2,6,23,.24); }
.week-grid { display:grid; grid-template-columns: 170px repeat(7, minmax(112px, 1fr)); min-width: 980px; }
.week-scroll { overflow-x:auto; }
.week-header, .employee-header, .employee-cell, .day-cell { padding:14px; border-bottom:1px solid rgba(148,163,184,.14); border-right:1px solid rgba(148,163,184,.12); }
.week-header, .employee-header { background:rgba(2,6,23,.42); color:#e5e7eb; font-weight:800; }
.employee-cell strong { display:block; color:#f8fafc; }
.employee-cell span { color:#94a3b8; font-size:.9rem; }
.shift-pill { display:block; min-height:32px; margin:3px 0; padding:7px 8px; border-radius:9px; text-align:center; font-weight:800; font-size:.88rem; color:#e5e7eb; background:rgba(59,130,246,.18); border:1px solid rgba(96,165,250,.22); }
.code-vac { color:#166534; background:#bbf7d0; border-color:#86efac; }
.code-sp { color:#1d4ed8; background:#dbeafe; border-color:#93c5fd; }
.code-sf { color:#991b1b; background:#fecaca; border-color:#fca5a5; }
.code-p { color:#9a3412; background:#fed7aa; border-color:#fdba74; }
.code-ct { color:#5b21b6; background:#ddd6fe; border-color:#c4b5fd; }
.code-hol { color:#9d174d; background:#fbcfe8; border-color:#f9a8d4; }
.code-vot { color:#4c1d95; background:#ddd6fe; border-color:#a78bfa; }
.code-t { color:#854d0e; background:#fef3c7; border-color:#fde68a; }
.calendar-section { margin-top:18px; padding:22px; border:1px solid rgba(148,163,184,.2); border-radius:18px; background:rgba(15,23,42,.68); }
.calendar-section h2 { margin:0 0 4px; color:#f8fafc; }
.calendar-section p { color:#cbd5e1; }
.day-layout { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap:16px; margin-top:14px; }
.day-timeline { border:1px solid rgba(148,163,184,.18); border-radius:14px; overflow:hidden; }
.day-event { display:grid; grid-template-columns:120px 1fr auto; gap:12px; padding:16px; border-bottom:1px solid rgba(148,163,184,.14); align-items:center; }
.day-event:last-child { border-bottom:0; }
.day-event__time { color:#cbd5e1; font-weight:800; }
.day-event__title { color:#f8fafc; font-weight:900; }
.day-event__detail { color:#94a3b8; margin-top:4px; }
.day-side { display:grid; gap:12px; }
.day-card { border:1px solid rgba(148,163,184,.18); border-radius:14px; padding:16px; background:rgba(2,6,23,.24); }
.day-card h3 { margin:0 0 8px; color:#f8fafc; }
.day-card dl { display:grid; gap:6px; margin:0; }
.day-card div { display:flex; justify-content:space-between; gap:12px; color:#cbd5e1; }
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.legend span { display:inline-flex; gap:6px; align-items:center; color:#cbd5e1; }
@media (max-width: 860px) { .calendar-hero, .day-layout { grid-template-columns:1fr; flex-direction:column; } .day-event { grid-template-columns:1fr; } }