/* BRAC Liberia IT Service Desk - gradient theme (primary magenta #EC008C) */
:root{
  --magenta:#EC008C; --dark:#A8006A; --deep:#7A004D; --pink:#FCE4F3;
  --grad:linear-gradient(135deg,#EC008C 0%,#A8006A 100%);
  --grad-strong:linear-gradient(135deg,#EC008C 0%,#A8006A 55%,#7A004D 100%);
  --ink:#2b2b30; --muted:#7b7b85; --line:#ececf1; --bg:#f5f5f8;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#fdf3f9 0%,#f5f5f8 240px,#f5f5f8 100%);min-height:100vh}
a{color:var(--dark)}
h2.page{margin:6px 0 16px;font-size:22px}
h3{margin:0 0 12px;font-size:16px}
small{color:var(--muted)}

/* top bar + nav */
.topbar{display:flex;align-items:center;gap:10px;background:var(--grad);color:#fff;
  padding:13px 22px;box-shadow:0 2px 10px rgba(168,0,106,.25)}
.topbar .brand{font-weight:bold;font-size:21px;letter-spacing:1px}
.topbar .sub{font-size:13px;opacity:.92}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px;text-align:right;line-height:1.2;margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.35)}
.topbar .who small{display:block;color:#ffd5ee}
.topbar .who a{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.6)}
.topbar .logout{color:#fff;font-size:13px;text-decoration:none;border:1px solid rgba(255,255,255,.7);
  padding:6px 12px;border-radius:7px;margin-left:14px}
.topbar .logout:hover{background:rgba(255,255,255,.18)}
.topbar .clock{text-align:right;line-height:1.15;font-variant-numeric:tabular-nums;min-width:92px}
.topbar .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;text-decoration:none}
.topbar .bell:hover{background:rgba(255,255,255,.18)}
.topbar .bell .badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:#fff;color:var(--dark);border-radius:9px;font-size:10px;font-weight:bold;line-height:17px;
  text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.topbar .clock .cd{display:block;font-size:11px;color:#ffe3f2;letter-spacing:.3px}
.topbar .clock .ct{display:block;font-size:15px;font-weight:bold;color:#fff;letter-spacing:1px}
.nav{display:flex;gap:2px;background:#fff;padding:0 14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.nav a{padding:13px 16px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:bold;
  border-bottom:3px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--magenta);border-bottom-color:var(--magenta)}

.banner{background:#fff6d6;border-bottom:1px solid #f0dfa0;color:#8a6d00;padding:10px 22px;font-size:13px}
.banner.warn{background:#ffe9f4;border-bottom:1px solid #f4b9db;color:var(--dark)}
.banner a{color:var(--dark);font-weight:bold}
.flash{padding:12px 22px;font-size:14px}
.flash.ok{background:#d9f5e6;color:#127a41}
.flash.err{background:#fde2e2;color:#b3261e}

.wrap{max-width:1120px;margin:22px auto;padding:0 18px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;
  box-shadow:0 1px 3px rgba(30,10,25,.04)}
.muted{color:var(--muted)}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}

/* forms */
label{display:block;font-size:13px;font-weight:bold;margin-bottom:5px;color:#555}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #d6d6de;border-radius:8px;
  font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px var(--pink)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1;min-width:180px}
.btn{background:var(--grad);color:#fff;border:none;padding:11px 20px;border-radius:8px;font-size:14px;
  font-weight:bold;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 2px 8px rgba(236,0,140,.28);transition:transform .05s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{filter:brightness(1.05);box-shadow:0 4px 14px rgba(236,0,140,.36)}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%;text-align:center}
.btn.sm{padding:7px 13px;font-size:13px;box-shadow:none}
.btn.grey{background:#8a8a95}.btn.grey:hover{filter:brightness(1.03)}
.btn.ghost{background:#fff;color:var(--dark);border:1px solid var(--dark);box-shadow:none}
.btn.ghost:hover{background:var(--pink)}
select.mini{width:auto;display:inline-block;padding:6px 9px;font-size:13px}

/* tables */
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{text-align:left;padding:11px;border-bottom:2px solid var(--line);color:var(--muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.3px}
table.grid td{padding:11px;border-bottom:1px solid var(--line);vertical-align:top}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--pink)}

/* chips + tags */
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:bold}
.c-New{background:#e7effe;color:#1c50c9}
.c-Assigned{background:#eae3fb;color:#5b34c9}
.c-InProgress{background:#fff0cc;color:#a06f00}
.c-OnHold{background:#f2f2f2;color:#777}
.c-Resolved{background:#d9f5e6;color:#127a41}
.c-Closed{background:#e2f0e6;color:#3b7d55}
.c-Reopened{background:#ffe0e0;color:#c0392b}
.c-Cancelled{background:#eee;color:#999;text-decoration:line-through}
.prio{font-weight:bold}
.p-Critical{color:#c0392b}.p-High{color:#e07b00}.p-Medium{color:#2b7a3b}.p-Low{color:#777}
.tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:bold}
.t-pending{background:#fff0cc;color:#a06f00}
.t-approved{background:#d9f5e6;color:#127a41}
.t-disabled{background:#f2f2f2;color:#999}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.kpis-4{grid-template-columns:repeat(4,1fr)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center;
  position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(30,10,25,.05)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.kpi.solved::before{background:linear-gradient(135deg,#1fbf6b,#127a41)}
.kpi.ongoing::before{background:linear-gradient(135deg,#ffc861,#e07b00)}
.kpi.pending::before{background:linear-gradient(135deg,#c9c9d2,#8a8a95)}
.kpi .n{font-size:32px;font-weight:bold;color:var(--magenta)}
.kpi.solved .n{color:#127a41}.kpi.ongoing .n{color:#a06f00}.kpi.pending .n{color:#777}
.kpi .l{font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}

/* live board */
.live{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.live .agent{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;position:relative;overflow:hidden}
.live .agent::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--grad)}
.live .agent h4{margin:0 0 4px;font-size:15px;padding-left:6px}
.live .agent .status{font-size:12px;color:var(--muted);margin-bottom:8px;padding-left:6px}
.live .agent .working{background:rgba(255,255,255,.7);border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:6px}
.live .agent .working b{color:var(--dark)}
/* status colours (light) */
.live .agent.s-idle{background:#f3f3f7}
.live .agent.s-idle::before{background:#d3d3dc}
.live .agent.s-pickup{background:#fff6e0}
.live .agent.s-pickup::before{background:linear-gradient(180deg,#ffcf66,#e0951f)}
.live .agent.s-working{background:#e9f9f0}
.live .agent.s-working::before{background:linear-gradient(180deg,#28c76f,#159a54)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:2px 0 14px;font-size:12px;color:var(--muted)}
.legend i.lg{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.legend .lg-idle{background:#dcdce4}
.legend .lg-pickup{background:#ffd98a}
.legend .lg-working{background:#a9e8c2}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.on{background:#2ecc71}.dot.off{background:#c9c9c9}.dot.warn{background:#e0951f}

/* bars */
.bar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.bar .lab{width:160px;color:#555}
.bar .track{flex:1;background:#f0f0f4;border-radius:6px;height:16px;overflow:hidden}
.bar .fill{height:100%;background:var(--grad)}
.bar .val{width:40px;text-align:right;font-weight:bold}

/* auth screens - full-screen gradient */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--grad-strong);padding:24px}
.auth .box{width:100%;max-width:420px}
.auth .logo{text-align:center;margin-bottom:18px}
.auth .logo .b{color:#fff;font-weight:bold;font-size:34px;letter-spacing:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.15)}
.auth .logo .s{display:block;color:#ffe3f2;font-size:13px;margin-top:4px}
.auth .card{padding:28px;border-radius:16px;border:none;box-shadow:0 18px 50px rgba(60,0,40,.35);position:relative;overflow:hidden}
.auth .card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad)}
.auth h2.page{color:var(--dark)}
.auth .swap{text-align:center;margin-top:16px;font-size:14px}
.auth .swap a{font-weight:bold}
.linkrow{text-align:right;margin:-4px 0 12px}
.linkrow a{font-size:13px;color:var(--dark);text-decoration:none;font-weight:bold}
.linkrow a:hover{text-decoration:underline}

/* ticket detail */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:14px;margin:10px 0}
.detail-grid .k{color:var(--muted)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.timeline li .when{color:var(--muted);font-size:12px}
.comment{background:#fafafc;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.comment.internal{background:#fff8e6;border-color:#f0e2b8}
.comment .meta{font-size:12px;color:var(--muted);margin-bottom:4px}

/* notifications list */
.notif{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.notif:last-child{border-bottom:none}
.notif:hover{background:var(--pink)}
.notif.unread{background:#fff4fb}
.notif .msg{font-size:14px;color:var(--ink)}
.notif.unread .msg{font-weight:bold}
.notif .meta{font-size:12px;color:var(--muted);margin-top:3px}
.notif .ndot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.notif .ndot.on{background:var(--magenta)}
.notif .ndot.off{background:#d3d3dc}

/* notification history table */
.notif-history .nh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.notif-history .nh-controls{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.notif-history .nh-hint{font-size:12px;color:var(--muted);transition:opacity .3s ease}
.notif-history:hover .nh-hint{opacity:.35}
.nh-scroll{max-height:186px;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1);
  border:1px solid var(--line);border-radius:10px}
.notif-history:hover .nh-scroll{max-height:520px;overflow-y:auto}
.nh-table{width:100%}
.nh-table th{position:sticky;top:0;background:#faf7f9;z-index:1}
.nh-row{cursor:pointer;transition:filter .15s ease}
.nh-row:hover{filter:brightness(.96)}
/* row tints (light, by type) */
.row-new{background:#eaf2ff}
.row-prog{background:#fff5e0}
.row-solved{background:#e8f8ef}
.row-hold{background:#f2f2f6}
.row-alert{background:#ffecec}
.row-comment{background:#f8edfb}
/* type chips (stronger) */
.nchip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:bold;white-space:nowrap}
.chip-new{background:#cfe0ff;color:#1c50c9}
.chip-prog{background:#ffe4ad;color:#a06f00}
.chip-solved{background:#c9f0d8;color:#127a41}
.chip-hold{background:#e2e2ea;color:#666}
.chip-alert{background:#ffcccc;color:#c0392b}
.chip-comment{background:#eccdf6;color:#8e2fb0}
/* pager */
.nh-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pager a,.pager .pg{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;
  padding:0 10px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:bold;background:#fff;transition:all .15s ease}
.pager a:hover{border-color:var(--magenta);color:var(--magenta)}
.pager .cur{background:var(--grad);color:#fff;border:none;box-shadow:0 2px 8px rgba(236,0,140,.3)}
.pager .gap{border:none;background:none;min-width:20px;color:var(--muted)}
.pager .disabled{opacity:.4;pointer-events:none}

/* collapsible add-user panel */
.panel-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.panel-head h3{margin:0}
.hidden{display:none}

@media(max-width:820px){
  .kpis,.kpis-4{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .bar .lab{width:110px}
}

/* ===== Queue master-detail (3 panes) ===== */
.queue3{position:relative;left:50%;transform:translateX(-50%);
  width:min(1460px, calc(100vw - 36px));
  display:grid;grid-template-columns:310px minmax(0,1fr) 340px;gap:16px;align-items:start}
.queue3 .card{margin-bottom:16px}
/* left: query list */
.q-list{padding:14px;position:sticky;top:14px}
.q-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:var(--pink);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font:inherit;font-weight:bold;color:var(--dark);cursor:pointer;transition:all .15s ease}
.q-toggle:hover{border-color:var(--magenta)}
.q-toggle .q-toggle-ic{transition:transform .3s ease;font-size:12px}
.q-toggle.open .q-toggle-ic{transform:rotate(180deg)}
.q-toggle .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--magenta);vertical-align:middle;margin-left:4px}
.q-filter-wrap{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q-filter-wrap.open{max-height:460px}
.q-filter{display:flex;flex-direction:column;gap:4px;padding:10px 2px 2px}
.q-filter label{font-size:12px;color:var(--muted);margin:6px 0 0}
.q-filter select,.q-filter input{width:100%}
.q-search{display:flex;gap:6px}
.q-search input{flex:1}
.q-count{font-size:12px;color:var(--muted);margin:10px 2px 8px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em}
.q-items{max-height:calc(100vh - 300px);overflow:auto;margin:0 -6px;padding:0 6px}
.qi{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-left:4px solid transparent;border-radius:10px;padding:10px 12px;margin-bottom:8px;
  transition:all .15s ease;background:#fff}
.qi:hover{border-color:var(--magenta);box-shadow:0 3px 10px rgba(236,0,140,.10)}
.qi.on{border-left-color:var(--magenta);background:var(--pink);box-shadow:0 3px 12px rgba(236,0,140,.14)}
.qi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.qi-code{font-weight:bold;font-size:13px}
.qi .chip{font-size:10px;padding:2px 8px}
.qi-subj{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi-meta{font-size:12px;margin-top:3px}
.qi-ag{color:var(--magenta);margin-left:4px;font-weight:bold}
/* center + right panes */
.q-right{position:sticky;top:14px}
.ti-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ti-code{font-size:18px;font-weight:bold}
.ti-subj{margin:2px 0 0}
.ti-desc{white-space:pre-wrap;margin-top:4px}
.resbox{background:var(--pink);border-radius:8px;padding:12px;margin-top:8px}
.acts{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.conv-h{margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.ti-history .timeline{max-height:calc(100vh - 170px);overflow:auto}
.tl-note{font-size:13px;margin-top:2px}
.q-empty{text-align:center;color:var(--muted);padding:48px 18px}
.q-empty-ic{font-size:40px;margin-bottom:8px}
.q-empty.small{padding:22px;text-align:left}

@media(max-width:1040px){
  .queue3{position:static;left:auto;transform:none;width:auto;grid-template-columns:1fr}
  .q-list,.q-right{position:static}
  .q-items{max-height:360px}
  .ti-history .timeline{max-height:none}
}

/* ===== Analytics dashboard ===== */
.an-toggle{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.an-tab{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer;transition:all .15s}
.an-tab:hover{border-color:var(--magenta)}
.an-tab.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:bold}
.an-ctx{font-size:13px;color:var(--muted);line-height:1.6;max-width:900px;margin:0 2px 16px}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:18px}
.an-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.an-kpi .k{font-size:12px;color:var(--muted);margin-bottom:8px}
.an-kpi .v{font-size:26px;font-weight:bold;line-height:1;color:var(--ink)}
.an-kpi .v.accent{color:var(--magenta)}.an-kpi .v.good{color:#1b8f5e}.an-kpi .v.warn{color:#b5820a}.an-kpi .v.bad{color:#c0392b}
.an-kpi .s{font-size:11px;color:var(--muted);margin-top:8px}
.an-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.an-panel h3{margin:0 0 2px;font-size:15px}
.an-panel .note{font-size:12px;color:var(--muted);margin:0 0 10px}
.an-cwrap{position:relative}
.an-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.an-lg{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 8px;font-size:12px;color:var(--muted)}
.an-lg span{display:flex;align-items:center;gap:5px}
.an-lg i{width:11px;height:11px;border-radius:2px;display:inline-block}
@media(max-width:760px){.an-2{grid-template-columns:1fr}}
@media print{.an-toggle,.topbar .logout,.nav{display:none}}

/* ===== presence (online) indicator ===== */
.presence{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:var(--muted)}
.presence b{font-weight:bold;color:var(--ink)}
.pr-dot{width:9px;height:9px;border-radius:50%;background:#2ec07a;animation:livep 1.8s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(46,192,122,.6)}70%{box-shadow:0 0 0 7px rgba(46,192,122,0)}100%{box-shadow:0 0 0 0 rgba(46,192,122,0)}}

/* ===== closed ticket list (queue left column) ===== */
.q-closed{padding:14px}
.qc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:14px}
.qc-n{background:var(--pink);color:var(--dark);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:bold}
.q-closed .q-items{max-height:340px}
.q-closed .qi .chip{opacity:.95}

/* ===== simplified submit form ===== */
.sub-card{max-width:760px;margin:0 auto}
.sub-lead{color:var(--muted);font-size:14px;margin:0 0 14px}
.sub-lead b{color:var(--ink)}
.sub-from{display:flex;align-items:center;gap:8px;background:var(--pink);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:20px}
.sub-from-ic{font-size:15px}
.hero-field{margin-bottom:18px}
.hero-field label{display:block;font-size:15px;font-weight:bold;margin-bottom:8px}
.glow{position:relative;border-radius:14px}
.glow::before{content:'';position:absolute;inset:-2px;border-radius:16px;z-index:0;opacity:0;pointer-events:none;
  background:linear-gradient(120deg,#EC008C,#A8006A,#f79ac9,#EC008C);background-size:300% 300%;filter:blur(7px);transition:opacity .35s ease}
.glow:focus-within::before{opacity:.5;animation:glowmove 4s linear infinite}
.hero-field input,.hero-field textarea{position:relative;z-index:1;width:100%;font-size:15px;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .2s}
.hero-field:focus-within input,.hero-field:focus-within textarea{border-color:var(--magenta);outline:none}
@keyframes glowmove{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.sub-details{background:#faf7f9;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:6px 0 20px}
.sub-details-h{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.sub-details-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.sub-details-row label{font-size:12px;color:var(--muted);margin:0 0 4px;display:block}
.sub-details-row select{width:100%}
.sub-attach{display:block;margin-top:14px;font-size:13px}
.sub-attach span{display:block;margin-bottom:6px}
.sub-submit{margin-top:6px;font-size:16px;padding:14px}
@media(max-width:640px){.sub-details-row{grid-template-columns:1fr}.presence{display:none}}

/* queue left column holds open list + closed list */
.q-col-left{display:flex;flex-direction:column}
.q-col-left .q-list{position:static}

/* ================= Sidebar layout ================= */
body.has-side{display:flex;min-height:100vh}
.side{position:fixed;left:0;top:0;bottom:0;width:262px;z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#2a0f20 0%,#170a12 100%);color:#f3e9ef;transition:width .25s ease}
.main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:262px;transition:margin-left .25s ease}
body.side-collapsed .side{width:74px}
body.side-collapsed .main{margin-left:74px}

.side-top{display:flex;align-items:center;gap:8px;padding:16px 14px 12px}
.side-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:1;min-width:0}
.sb-logo{font-weight:bold;font-size:20px;letter-spacing:1px;color:#fff}
.sb-name{font-size:12px;color:#d9c3d0;white-space:nowrap;overflow:hidden}
.side-toggle{background:rgba(255,255,255,.08);border:none;color:#e8d7e1;width:28px;height:28px;border-radius:8px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.side-toggle .ic{width:16px;height:16px}
body.side-collapsed .sb-name{display:none}
body.side-collapsed .side-toggle .ic{transform:rotate(180deg)}
body.side-collapsed .side-top{justify-content:center;padding:16px 8px 12px}

.side-nav{flex:1;overflow:visible;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.ni{display:flex;align-items:center;gap:11px;padding:10px 11px;font-size:13.5px;border-radius:10px;color:#d7c4cf;text-decoration:none;
  font-size:14px;font-weight:500;border:none;background:none;width:100%;cursor:pointer;text-align:left;position:relative;font-family:inherit}
.ni:hover{background:rgba(255,255,255,.07);color:#fff}
.ni.on{background:var(--magenta);color:#fff;font-weight:bold;box-shadow:0 4px 14px rgba(236,0,140,.35)}
.ni .ic{width:20px;height:20px;flex:0 0 20px}
.ni-l{white-space:nowrap;overflow:hidden}
.ni-caret{margin-left:auto;display:inline-flex;transition:transform .2s}
.ni-caret .ic{width:15px;height:15px}
.ni-group.open > .ni-parent .ni-caret{transform:rotate(90deg)}
.ni-sub{overflow:hidden;max-height:0;transition:max-height .25s ease;display:flex;flex-direction:column;gap:1px;margin:1px 0 3px}
.ni-group.open > .ni-sub{max-height:340px}
.ni-sub-h{display:none}
.ni-c{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 42px;color:#c3aeba;text-decoration:none;font-size:13px;border-radius:8px}
.ni-c:hover{background:rgba(255,255,255,.06);color:#fff}
.ni-c.on{color:#fff;font-weight:bold}
.ni-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:0 0 5px}

/* collapsed sidebar: icons only, submenus become hover flyouts */
body.side-collapsed .ni-l,body.side-collapsed .ni-caret{display:none}
body.side-collapsed .ni{justify-content:center;padding:11px}
body.side-collapsed .ni-group{position:relative}
body.side-collapsed .ni-group > .ni-sub{position:absolute;left:calc(100% + 10px);top:0;max-height:none;min-width:200px;
  background:#2a0f20;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px;
  box-shadow:0 16px 44px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateX(-6px);transition:all .15s;z-index:60}
body.side-collapsed .ni-group:hover > .ni-sub{opacity:1;visibility:visible;transform:none}
body.side-collapsed .ni-sub-h{display:block;font-size:12px;font-weight:bold;color:#fff;padding:4px 10px 8px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}
body.side-collapsed .ni-c{padding-left:12px}

.side-bottom{padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.side-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--magenta);color:#fff;text-decoration:none;
  font-weight:bold;padding:11px;border-radius:12px;font-size:14px;margin-bottom:10px;box-shadow:0 6px 18px rgba(236,0,140,.35)}
.side-cta:hover{background:var(--dark)}
.side-cta .ic{width:18px;height:18px}
.side-foot{display:flex;align-items:center;gap:8px}
.side-user{display:flex;align-items:center;gap:10px;text-decoration:none;color:#eadbe3;flex:1;min-width:0;padding:6px;border-radius:10px}
.side-user:hover{background:rgba(255,255,255,.07)}
.su-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:15px}
.su-meta{display:flex;flex-direction:column;min-width:0}
.su-name{font-size:13px;font-weight:bold;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-role{font-size:11px;color:#c3aeba}
.side-out{color:#c3aeba;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.side-out:hover{background:rgba(255,255,255,.09);color:#fff}
.side-out .ic{width:18px;height:18px}
body.side-collapsed .su-meta{display:none}
body.side-collapsed .side-foot{flex-direction:column}
body.side-collapsed .side-cta .ni-l{display:none}

/* top strip (white) */
.topstrip{display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:0 20px;height:60px;position:sticky;top:0;z-index:20}
.tp-title{font-size:17px;font-weight:bold;margin:0;color:var(--ink)}
.topstrip .spacer{flex:1}
.topstrip .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#6a6470;text-decoration:none}
.topstrip .bell:hover{background:#f3eef1;color:var(--magenta)}
.topstrip .bell .badge{position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 4px;background:var(--magenta);color:#fff;border-radius:9px;font-size:10px;font-weight:bold;line-height:16px;text-align:center}
.topstrip .clock{text-align:right;line-height:1.15;font-variant-numeric:tabular-nums;min-width:90px;color:var(--ink)}
.topstrip .clock .cd{display:block;font-size:11px;color:var(--muted)}
.topstrip .clock .ct{display:block;font-size:15px;font-weight:bold;letter-spacing:.5px}
.side-open{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px}
.side-open span{width:20px;height:2px;background:var(--ink);border-radius:2px;display:block}

.content{flex:1}
body.has-side .wrap{max-width:1120px;margin:22px auto;padding:0 22px}
body.has-side .wrap.wide{max-width:1480px}
body.has-side .foot{padding:20px}
.side-scrim{position:fixed;inset:0;background:rgba(20,10,16,.45);opacity:0;visibility:hidden;transition:opacity .2s;z-index:35}
body.side-show .side-scrim{opacity:1;visibility:visible}

/* queue no longer needs the viewport breakout (it lives inside main now) */
.queue3{position:static;left:auto;transform:none;width:100%}

@media(max-width:900px){
  .side{transform:translateX(-100%);width:248px;transition:transform .25s ease}
  body.side-show .side{transform:none}
  body.side-collapsed .side{width:248px}
  .main,body.side-collapsed .main{margin-left:0}
  body.side-collapsed .ni-l,body.side-collapsed .ni-caret{display:inline}
  body.side-collapsed .sb-name{display:inline}
  .side-open{display:inline-flex}
}

/* ============ Sidebar: magenta background + iOS glass items ============ */
.side{background:linear-gradient(180deg,#EC008C 0%,#C4007A 100%)}
.sb-name{color:rgba(255,255,255,.85)}
.side-top{border-bottom:1px solid rgba(255,255,255,.14)}
.side-toggle{background:rgba(255,255,255,.16);color:#fff}
.side-toggle:hover{background:rgba(255,255,255,.28)}

/* base item on magenta */
.ni{color:rgba(255,255,255,.9)}
/* glass hover (frosted, like iPhone control tiles) */
.ni:hover{color:#fff;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
/* glass active (brighter, with soft glow) */
.ni.on{color:#fff;font-weight:bold;background:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(120,0,70,.28)}

/* submenu (inline + flyout) on magenta */
.ni-c{color:rgba(255,255,255,.82)}
.ni-c:hover{color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ni-c.on{color:#fff}
body.side-collapsed .ni-group > .ni-sub{
  background:linear-gradient(180deg,rgba(236,0,140,.96),rgba(168,0,106,.96));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 44px rgba(90,0,52,.5)}
body.side-collapsed .ni-sub-h{color:#fff;border-bottom-color:rgba(255,255,255,.22)}

/* bottom area on magenta */
.side-bottom{border-top:1px solid rgba(255,255,255,.16)}
.side-cta{background:#fff;color:var(--magenta);box-shadow:0 6px 18px rgba(120,0,70,.28)}
.side-cta:hover{background:#fff;color:var(--dark);box-shadow:0 8px 22px rgba(120,0,70,.36)}
.side-user{color:#fff}
.side-user:hover{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.su-av{background:#fff;color:var(--magenta)}
.su-role{color:rgba(255,255,255,.82)}
.side-out{color:rgba(255,255,255,.85)}
.side-out:hover{background:rgba(255,255,255,.18);color:#fff}

/* ===== permission matrix ===== */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.perm-block{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.perm-res{font-weight:bold;font-size:13px;margin-bottom:8px;color:var(--dark)}
.perm-actions{display:flex;flex-wrap:wrap;gap:8px 16px}
.perm-chk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:normal;margin:0}
.perm-chk input{width:auto;margin:0}