/*
Signal Labs
Area: Signal Schedule
File: schedule/pages/people/timeline.css
Version: v5.14.0
Purpose: Employee Timeline & Audit Trail preview styles
*/
.timeline-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto 48px; color: #e5eefb; }
.timeline-hero, .timeline-card, .timeline-panel { border: 1px solid rgba(148,163,184,.24); border-radius: 24px; background: rgba(15,23,42,.72); box-shadow: 0 18px 40px rgba(15,23,42,.16); }
.timeline-hero { display:flex; justify-content:space-between; gap:18px; align-items:stretch; padding:28px; margin-bottom:18px; }
.timeline-hero h1 { margin:0 0 10px; font-size:clamp(2rem,4vw,3.35rem); }
.timeline-hero p, .timeline-card p, .timeline-panel p { color:rgba(226,232,240,.78); line-height:1.65; }
.timeline-kicker { margin:0 0 8px; color:rgba(125,211,252,.92); font-weight:850; letter-spacing:.09em; text-transform:uppercase; font-size:.78rem; }
.timeline-status-card { min-width:220px; border:1px solid rgba(125,211,252,.28); border-radius:20px; padding:18px; background:rgba(14,165,233,.12); display:grid; gap:8px; align-content:center; }
.timeline-status-card span, .timeline-status-card small { color:rgba(226,232,240,.72); }
.timeline-status-card strong { font-size:1.55rem; }
.timeline-layout { display:grid; grid-template-columns: 300px 1fr; gap:18px; align-items:start; }
.timeline-panel, .timeline-card { padding:22px; margin-bottom:18px; }
.timeline-identity { display:grid; gap:8px; }
.timeline-avatar { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(14,165,233,.38), rgba(34,197,94,.26)); font-weight:900; font-size:1.25rem; }
.timeline-stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:16px; }
.timeline-stat { border:1px solid rgba(148,163,184,.2); border-radius:16px; padding:12px; background:rgba(30,41,59,.5); }
.timeline-stat strong { display:block; font-size:1.25rem; }
.timeline-stat span { color:rgba(226,232,240,.68); font-size:.84rem; }
.timeline-filters { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.timeline-filter { border:1px solid rgba(148,163,184,.28); background:rgba(30,41,59,.72); color:#f8fafc; border-radius:999px; padding:8px 12px; font-weight:800; }
.timeline-filter[aria-pressed="true"] { border-color:rgba(34,197,94,.68); background:rgba(34,197,94,.14); }
.timeline-list { display:grid; gap:12px; }
.timeline-event { display:grid; grid-template-columns: 150px 1fr; gap:14px; border:1px solid rgba(148,163,184,.22); border-radius:18px; padding:16px; background:rgba(30,41,59,.46); }
.timeline-event__time { color:rgba(226,232,240,.72); font-weight:800; font-size:.86rem; }
.timeline-event__body { display:grid; gap:8px; }
.timeline-event__head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.timeline-event h3 { margin:0; font-size:1.05rem; }
.timeline-chip { display:inline-flex; align-items:center; border:1px solid rgba(148,163,184,.26); border-radius:999px; padding:5px 9px; font-size:.75rem; font-weight:850; color:#e2e8f0; background:rgba(15,23,42,.55); }
.timeline-chip--request { border-color:rgba(59,130,246,.55); background:rgba(59,130,246,.14); }
.timeline-chip--system { border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.13); }
.timeline-chip--profile { border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.13); }
.timeline-values { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.timeline-value { border:1px solid rgba(148,163,184,.18); border-radius:12px; padding:10px; background:rgba(15,23,42,.42); }
.timeline-value span { display:block; color:rgba(226,232,240,.62); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:850; }
.timeline-policy-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.timeline-policy { border:1px solid rgba(148,163,184,.2); border-radius:16px; padding:14px; background:rgba(30,41,59,.46); }
.timeline-policy strong { display:block; margin-bottom:6px; }
@media (max-width: 860px){ .timeline-hero, .timeline-layout { grid-template-columns:1fr; display:grid; } .timeline-event { grid-template-columns:1fr; } .timeline-values { grid-template-columns:1fr; } }
@media (max-width: 720px){ .timeline-shell { width:min(100% - 20px,1180px); } .timeline-hero, .timeline-card, .timeline-panel { padding:18px; border-radius:20px; } }