/* ==========================================================================
   STAFF HOME
   Shares index.html's palette and type, but not its pacing. A landing page
   is meant to be lingered over; an operations hub is meant to be read in
   four seconds and acted on. So: tighter rhythm, denser rows, numbers doing
   the talking, and colour reserved for things that are actually wrong.
   ========================================================================== */

.sh-home {
    --sh-purple:#8B5CF6; --sh-purple-light:#A78BFA; --sh-purple-deep:#5B21B6;
    --sh-silver:#C3C6D4; --sh-silver-bright:#EEEFF5; --sh-silver-dim:#8C90A4;
    --sh-gold:#d4af37; --sh-line:rgba(167,139,250,0.18);
    --sh-panel:rgba(14,12,22,0.72); --sh-panel-2:rgba(24,18,40,0.78);
    --sh-ok:#4ade80; --sh-watch:#facc15; --sh-warn:#fb923c; --sh-critical:#f87171;
    font-family:'Crimson Text', Georgia, serif;
    color: var(--sh-silver);
}

.sh-home h1, .sh-home h2, .sh-home h3 {
    font-family:'Cinzel', serif; color: var(--sh-silver-bright); margin: 0;
}

/* ---------- greeting ---------- */
.sh-greet {
    display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between;
    padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--sh-line);
}
.sh-greet h1 { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 2.4px; }
.sh-greet p { margin: 8px 0 0; font-size: 1.05rem; color: var(--sh-silver-dim); }
.sh-greet-meta { display:flex; gap:10px; align-items:center; }
.sh-role, .sh-duty {
    font-family:'Cinzel', serif; font-size:0.58rem; letter-spacing:2px; text-transform:uppercase;
    padding:6px 12px; border:1px solid var(--sh-line); background:rgba(139,92,246,0.10); color:var(--sh-silver);
}
.sh-role { border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.09); color:#e8d8a0; }
.sh-duty.on { border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.10); color: var(--sh-ok); }

/* ---------- stats ---------- */
.sh-stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:26px; }
.sh-stat {
    background: var(--sh-panel); border:1px solid var(--sh-line);
    border-top: 2px solid rgba(139,92,246,0.55);
    padding: 18px 20px; display:flex; flex-direction:column; gap:6px;
}
.sh-stat-label {
    font-family:'Cinzel', serif; font-size:0.58rem; letter-spacing:2.2px;
    text-transform:uppercase; color: var(--sh-silver-dim);
}
.sh-stat-value {
    font-family:'Cinzel', serif; font-size:1.9rem; line-height:1;
    color: var(--sh-silver-bright); display:flex; align-items:baseline; gap:10px;
}
.sh-stat-sub { font-size:0.9rem; color: var(--sh-silver-dim); }
.sh-trend { font-size:0.68rem; font-family:'Cinzel',serif; letter-spacing:1px; }
.sh-trend.good { color: var(--sh-ok); }
.sh-trend.bad  { color: var(--sh-critical); }

/* ---------- layout ---------- */
.sh-cols { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:22px; align-items:start; }
.sh-section { margin-bottom:24px; }
.sh-section-head {
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--sh-line);
}
.sh-section-head h2 { font-size:0.86rem; letter-spacing:2.4px; text-transform:uppercase; color:var(--sh-gold); }
.sh-section-aside { font-size:0.86rem; color: var(--sh-silver-dim); }

/* ---------- queues ---------- */
.sh-queues { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:14px; }
.sh-queue {
    display:block; text-decoration:none !important; padding:16px 18px;
    background: var(--sh-panel); border:1px solid var(--sh-line);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.sh-queue:hover { border-color: rgba(167,139,250,0.5); background: var(--sh-panel-2); transform: translateY(-2px); }
.sh-queue-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sh-queue-name {
    font-family:'Cinzel',serif; font-size:0.74rem; letter-spacing:1.4px;
    text-transform:uppercase; color: var(--sh-silver-bright);
}
.sh-queue-total { font-family:'Cinzel',serif; font-size:1.5rem; color: var(--sh-silver-bright); }
.sh-queue-bar { height:3px; background: rgba(255,255,255,0.07); margin:12px 0 10px; }
.sh-queue-fill { display:block; height:100%; background: var(--sh-purple); }
.sh-queue-fill.watch { background: var(--sh-watch); }
.sh-queue-fill.warn { background: var(--sh-warn); }
.sh-queue-fill.critical { background: var(--sh-critical); }
.sh-queue-foot { display:flex; justify-content:space-between; gap:10px; font-size:0.9rem; color: var(--sh-silver-dim); }
.sh-flag.critical { color: var(--sh-critical); font-weight:600; }
.sh-dim { color: var(--sh-silver-dim); }

/* ---------- rows ---------- */
.sh-rows { background: var(--sh-panel); border:1px solid var(--sh-line); }
.sh-row {
    display:flex; align-items:center; gap:14px; padding:13px 18px;
    border-bottom:1px solid rgba(255,255,255,0.05); text-decoration:none !important;
    transition: background .18s ease;
}
.sh-row:last-child { border-bottom:none; }
.sh-row:hover { background: rgba(139,92,246,0.08); }
.sh-row-dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; background: var(--sh-ok); }
.sh-row-dot.watch { background: var(--sh-watch); }
.sh-row-dot.warn { background: var(--sh-warn); }
.sh-row-dot.critical { background: var(--sh-critical); }
.sh-row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sh-row-title {
    color: var(--sh-silver-bright); font-size:1rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sh-row-sub { font-size:0.86rem; color: var(--sh-silver-dim); }
.sh-row-age {
    font-family:'Cinzel',serif; font-size:0.66rem; letter-spacing:1.2px;
    color: var(--sh-silver-dim); flex:0 0 auto;
}
.sh-row-age.warn { color: var(--sh-warn); }
.sh-row-age.critical { color: var(--sh-critical); }

/* ---------- side column ---------- */
.sh-actions { display:flex; flex-direction:column; gap:8px; }
.sh-action {
    display:flex; align-items:center; gap:12px; padding:12px 15px;
    background: var(--sh-panel); border:1px solid var(--sh-line);
    text-decoration:none !important; color: var(--sh-silver) !important;
    font-size:0.98rem; transition: all .18s ease;
}
.sh-action:hover { border-color: rgba(167,139,250,0.5); background: var(--sh-panel-2); color:#fff !important; }
.sh-action i { color: var(--sh-purple-light); width:16px; text-align:center; }
.sh-badge {
    margin-left:auto; font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:1px;
    padding:2px 8px; background: rgba(139,92,246,0.2); border:1px solid rgba(167,139,250,0.35);
    color: var(--sh-silver-bright);
}
.sh-acts { background: var(--sh-panel); border:1px solid var(--sh-line); padding:6px 0; }
.sh-act { padding:9px 16px; font-size:0.92rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.sh-act:last-child { border-bottom:none; }
.sh-act-who { color: var(--sh-silver-bright); font-weight:600; }
.sh-act-what { color: var(--sh-silver-dim); }
.sh-act-when { float:right; font-family:'Cinzel',serif; font-size:0.62rem; color: var(--sh-silver-dim); }

.sh-empty { background: var(--sh-panel); border:1px solid var(--sh-line); padding:26px; text-align:center; }
.sh-empty p { margin:0; color: var(--sh-silver-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .sh-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1080px) { .sh-cols { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 620px)  { .sh-stats { grid-template-columns: minmax(0,1fr); } .sh-greet { align-items:flex-start; } }
@media (prefers-reduced-motion: reduce) { .sh-queue, .sh-action, .sh-row { transition:none !important; } }