/* ==========================================================================
   GEXTON ADMIN CONSOLE  ·  admin.css
   Sign-in, dashboard, submission queues, full submission view.
   Requires theme.css.
   ========================================================================== */

/* ---------- 1. Shell ----------------------------------------------------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:246px;flex:none;
  position:fixed;inset:0 auto 0 0;
  background:var(--char-900);
  color:#fff;
  padding:20px 14px 18px;
  display:flex;flex-direction:column;
  z-index:60;
  border-right:1px solid rgba(255,255,255,.06);
}

.side-brand{
  display:flex;align-items:center;gap:11px;
  padding:8px 8px 20px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.side-brand .gx-tag{color:rgba(255,255,255,.42)}
.side-brand .gx-word{color:#fff}

.side-label{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
  padding:0 10px;margin:16px 0 8px;
}

.side-nav{display:grid;gap:3px}

.side-nav a{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;
  color:rgba(255,255,255,.66);
  text-decoration:none;
  font-size:13.5px;font-weight:600;
  border-radius:var(--r-sm);
  transition:all .16s var(--ease);
}
.side-nav a svg{flex:none;opacity:.85}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}

.side-nav a.active{
  background:linear-gradient(100deg,rgba(242,106,33,.2),rgba(242,106,33,.06));
  color:#fff;
}
/* Active marker sits on the rail edge, not under the label. */
.side-nav a.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;
  background:var(--ember-500);
}
.side-nav a.active svg{opacity:1;color:var(--ember-400)}

.side-nav .count{
  margin-left:auto;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);
  padding:2px 7px;border-radius:var(--r-pill);
}
.side-nav a.active .count{background:var(--ember-500);color:#fff}

.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}

.side-user{
  display:flex;align-items:center;gap:10px;
  padding:10px;margin-bottom:6px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
}
.side-user .av{
  width:32px;height:32px;flex:none;border-radius:9px;
  background:linear-gradient(150deg,var(--ember-400),var(--ember-600));
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
}
.side-user b{display:block;font-size:13px;line-height:1.2}
.side-user span{font-size:10.5px;color:rgba(255,255,255,.45);font-family:var(--mono);letter-spacing:.06em}

.side-out{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.55);text-decoration:none;
  font-size:13px;font-weight:600;
  transition:all .16s var(--ease);
}
.side-out:hover{background:rgba(209,67,67,.16);color:#FF9B9B}

.main{margin-left:246px;flex:1;min-width:0;padding:26px 30px 50px}

/* Mobile drawer */
.side-toggle{display:none}
.scrim{display:none}

/* ---------- 2. Topbar ---------------------------------------------------- */
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:24px;
}
.topbar h1{font-size:27px;margin:7px 0 5px}
.topbar > div > p{color:var(--ink-3);font-size:14px}
.topbar-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.crumb{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--ink-3);margin-bottom:9px;
}
.crumb a{color:var(--ink-3);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--ember-600)}

/* ---------- 3. KPI cards ------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}

.kpi{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 19px;
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ember-500);
}
.kpi.i-blue::before{background:var(--info)}
.kpi.i-amber::before{background:var(--warn)}
.kpi.i-green::before{background:var(--ok)}

.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi-top span{font-size:12.5px;font-weight:650;color:var(--ink-3)}
.kpi-ico{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--ember-50);color:var(--ember-600);
}
.kpi.i-blue .kpi-ico{background:var(--info-bg);color:var(--info)}
.kpi.i-amber .kpi-ico{background:var(--warn-bg);color:var(--warn)}
.kpi.i-green .kpi-ico{background:var(--ok-bg);color:var(--ok)}

.kpi strong{
  display:block;font-size:31px;font-weight:800;letter-spacing:-.03em;
  font-family:var(--mono);line-height:1;
}
.kpi small{display:block;margin-top:9px;font-size:12px;color:var(--ink-3);font-weight:550}
.kpi small b{color:var(--ok);font-weight:750}
.kpi small b.down{color:var(--risk)}

/* ---------- 4. Panels ---------------------------------------------------- */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  margin-bottom:16px;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;
  border-bottom:1px solid var(--line-2);
}
.panel-head h2{font-size:16px;margin-bottom:3px}
.panel-head p{font-size:12.5px;color:var(--ink-3)}
.panel-body{padding:20px}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}

.grid-2col{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;align-items:start}

/* ---------- 5. Charts (pure CSS/SVG, no library) ------------------------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:168px;padding-top:10px}

.bar-col{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:8px;height:100%;min-width:0;
}
.bar{
  width:100%;max-width:34px;
  border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,var(--ember-400),var(--ember-600));
  min-height:3px;
  position:relative;
  transition:opacity .16s var(--ease);
  animation:grow .6s var(--ease) both;
}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.bar.empty{background:var(--sand-2)}
.bar-col:hover .bar{opacity:.82}
.bar-col:hover .bar::after{
  content:attr(data-v);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--char-900);color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:3px 7px;border-radius:5px;white-space:nowrap;
}
.bar-lbl{
  font-family:var(--mono);font-size:9.5px;color:var(--ink-4);
  white-space:nowrap;letter-spacing:.02em;
}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{position:relative;width:132px;height:132px;flex:none}
.donut svg{transform:rotate(-90deg)}
.donut-mid{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
}
.donut-mid b{display:block;font-family:var(--mono);font-size:24px;font-weight:800;line-height:1}
.donut-mid span{font-size:10.5px;color:var(--ink-3);font-weight:600}

.legend{flex:1;min-width:150px;display:grid;gap:11px}
.legend div{display:flex;align-items:center;gap:9px;font-size:13px}
.legend i{width:9px;height:9px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font-family:var(--mono);font-weight:700}
.legend span{color:var(--ink-2);font-weight:600}

/* Horizontal meters */
.meters{display:grid;gap:15px}
.meter-row span{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;font-weight:600;margin-bottom:7px;
}
.meter-row span b{font-family:var(--mono);color:var(--ink-2);font-size:12.5px}
.meter{height:8px;border-radius:var(--r-pill);background:var(--sand-2);overflow:hidden}
.meter i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--ember-500);
  animation:slide .7s var(--ease) both;
}
@keyframes slide{from{width:0!important}}
.meter i.urgent{background:var(--risk)}
.meter i.high{background:var(--warn)}
.meter i.medium{background:var(--info)}
.meter i.low{background:var(--ink-4)}

/* ---------- 6. Table ----------------------------------------------------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}

th{
  text-align:left;
  padding:11px 14px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:var(--sand);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
th a:hover{color:var(--ember-600)}
th a.sorted{color:var(--ember-600)}

td{
  padding:13px 14px;
  border-bottom:1px solid var(--line-2);
  font-size:13.5px;vertical-align:middle;
}
tbody tr{transition:background .14s var(--ease)}
tbody tr:hover{background:var(--sand)}
tbody tr:last-child td{border-bottom:0}

/* The priority spine: a queue should show urgency before you read it. */
td.spine{
  position:relative;
  border-left:3px solid transparent;
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink-2);
}
tr.p-urgent td.spine{border-left-color:var(--risk)}
tr.p-high td.spine{border-left-color:var(--warn)}
tr.p-medium td.spine{border-left-color:var(--info)}
tr.p-low td.spine{border-left-color:var(--ink-4)}
tr.unread td.spine{background:linear-gradient(90deg,var(--ember-50),transparent)}

.who b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.who span{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;
}
.cell-sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.when{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.when b{display:block;color:var(--ink-2);font-weight:600}

.row-open{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface);
  font-size:12px;font-weight:700;color:var(--ink);
  text-decoration:none;white-space:nowrap;
  transition:all .16s var(--ease);
}
.row-open:hover{background:var(--ember-500);border-color:var(--ember-500);color:#fff}

/* ---------- 7. Empty state ----------------------------------------------- */
.empty{padding:56px 24px;text-align:center}
.empty-ico{
  width:56px;height:56px;border-radius:16px;margin:0 auto 16px;
  display:grid;place-items:center;
  background:var(--ember-50);color:var(--ember-400);
  border:1px solid var(--ember-100);
}
.empty h3{font-size:16px;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--ink-3);max-width:38ch;margin:0 auto 18px}

/* ---------- 8. Filter bar ------------------------------------------------ */
.filters{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
  margin-bottom:14px;
  box-shadow:var(--sh-1);
}
.filters form{display:grid;grid-template-columns:1fr 160px 160px auto;gap:9px;align-items:center}

.search{
  display:flex;align-items:center;gap:9px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);padding-left:13px;color:var(--ink-3);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search:focus-within{border-color:var(--ember-500);box-shadow:0 0 0 4px var(--ember-50)}
.search input{border:0!important;box-shadow:none!important;padding-left:0}
.search input:focus{box-shadow:none!important}

.filter-go{display:flex;gap:8px}

.chips-row{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:14px;
}
.active-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 8px 5px 12px;
  background:var(--ember-50);border:1px solid var(--ember-200);
  border-radius:var(--r-pill);
  font-size:12px;font-weight:650;color:var(--ember-800);
}
.active-chip a{
  display:grid;place-items:center;width:16px;height:16px;
  border-radius:50%;background:var(--ember-200);color:var(--ember-800);
  text-decoration:none;font-size:11px;line-height:1;font-weight:700;
}
.active-chip a:hover{background:var(--ember-500);color:#fff}

.result-line{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.result-line b{color:var(--ink);font-family:var(--mono);font-weight:700}

/* ---------- 9. Pagination ------------------------------------------------ */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.pager-info{font-size:12.5px;color:var(--ink-3)}
.pager-info b{font-family:var(--mono);color:var(--ink)}
.pager-links{display:flex;gap:5px;align-items:center}
.pager-links a,.pager-links span{
  min-width:34px;height:34px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-xs);
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  text-decoration:none;color:var(--ink-2);background:var(--surface);
  transition:all .15s var(--ease);
}
.pager-links a:hover{border-color:var(--ember-300);color:var(--ember-600);background:var(--ember-50)}
.pager-links .now{background:var(--ember-500);border-color:var(--ember-500);color:#fff}
.pager-links .gap{border:0;background:none;color:var(--ink-4)}

/* ---------- 10. Detail view ---------------------------------------------- */
.detail-head{
  background:linear-gradient(150deg,var(--char-900),var(--char-700));
  color:#fff;border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;position:relative;overflow:hidden;
}
.detail-head::after{
  content:"";position:absolute;right:-70px;top:-70px;width:250px;height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,106,33,.36),transparent 62%);
}
.detail-head > *{position:relative}
.detail-ref{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--ember-300);margin-bottom:8px;
}
.detail-head h1{font-size:25px;margin-bottom:8px}
.detail-sub{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.detail-sub .badge{background:rgba(255,255,255,.12);color:#fff}
.detail-sub .badge.new{background:rgba(47,107,228,.28);color:#BFD4FF}
.detail-sub .badge.in-review{background:rgba(184,115,9,.3);color:#FFD9A0}
.detail-sub .badge.resolved{background:rgba(14,156,107,.28);color:#A6EBCF}
.detail-sub .badge.closed{background:rgba(255,255,255,.14);color:#D9CFC8}

.detail-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}

.facts{display:grid;gap:0}
.facts > div{
  display:grid;grid-template-columns:150px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-2);
}
.facts > div:last-child{border-bottom:0}
.facts dt,.facts .k{font-size:12.5px;color:var(--ink-3);font-weight:600}
.facts .v{font-size:13.5px;font-weight:650;word-break:break-word}
.facts .v.mono{font-size:13px}
.facts .v a{text-decoration:none;font-weight:700}
.facts .v a:hover{text-decoration:underline}

.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.answer{
  border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;background:var(--sand);
  border-left:3px solid var(--ember-200);
}
.answer.long{grid-column:1/-1;background:var(--surface)}
.answer span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.answer strong{font-size:13.5px;font-weight:650;line-height:1.6;word-break:break-word}
.answer .tagline{display:flex;flex-wrap:wrap;gap:6px}

/* Rating answers carry their score colour so weak areas surface fast. */
.answer.r5{border-left-color:var(--ok)}
.answer.r4{border-left-color:#5BB98C}
.answer.r3{border-left-color:var(--ember-400)}
.answer.r2{border-left-color:var(--warn)}
.answer.r1{border-left-color:var(--risk)}
.answer .score{
  float:right;font-family:var(--mono);font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-pill);background:var(--sand-2);color:var(--ink-2);
}
.answer.r5 .score{background:var(--ok-bg);color:var(--ok)}
.answer.r4 .score{background:var(--ok-bg);color:#3E8F68}
.answer.r3 .score{background:var(--ember-50);color:var(--ember-700)}
.answer.r2 .score{background:var(--warn-bg);color:var(--warn)}
.answer.r1 .score{background:var(--risk-bg);color:var(--risk)}

.score-summary{
  display:flex;align-items:center;gap:16px;
  padding:15px 18px;margin-bottom:16px;
  background:var(--ember-50);border:1px solid var(--ember-100);
  border-radius:var(--r);
}
.score-summary .big{
  font-family:var(--mono);font-size:30px;font-weight:800;color:var(--ember-700);line-height:1;
}
.score-summary p{font-size:13px;color:var(--ember-800);font-weight:600}
.score-summary small{display:block;font-size:11.5px;color:var(--ember-700);opacity:.8;margin-top:3px;font-weight:500}

/* ---------- 11. Sign in -------------------------------------------------- */
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}

.auth-brand{
  background:linear-gradient(158deg,var(--char-900) 0%,var(--char-800) 45%,#61300F 100%);
  color:#fff;padding:48px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.auth-brand::after{
  content:"";position:absolute;left:-120px;bottom:-160px;width:460px;height:460px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,106,33,.32),transparent 62%);
}
.auth-brand > *{position:relative;z-index:1}
.auth-brand h2{font-size:32px;line-height:1.22;margin-bottom:14px;max-width:16ch}
.auth-brand h2 em{font-style:normal;color:var(--ember-400)}
.auth-brand > div > p{color:rgba(255,255,255,.62);font-size:15px;max-width:40ch;line-height:1.65}

.auth-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:13px}
.auth-points li{
  display:flex;align-items:center;gap:11px;
  font-size:14px;color:rgba(255,255,255,.8);font-weight:550;
}
.auth-points i{
  width:26px;height:26px;flex:none;border-radius:8px;
  background:rgba(242,106,33,.18);color:var(--ember-400);
  display:grid;place-items:center;
}
.auth-foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.3);text-transform:uppercase}

.auth-form{display:grid;place-items:center;padding:40px 24px;background:var(--sand)}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font-size:26px;margin-bottom:8px}
.auth-card > p{color:var(--ink-3);font-size:14px;margin-bottom:26px}
.auth-card form{display:grid;gap:16px}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:none;cursor:pointer;
  color:var(--ink-3);border-radius:var(--r-xs);
  display:grid;place-items:center;
}
.pw-toggle:hover{background:var(--sand-2);color:var(--ink)}

.auth-back{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  margin-top:22px;font-size:13px;color:var(--ink-3);
  text-decoration:none;font-weight:600;
}
.auth-back:hover{color:var(--ember-600)}

/* ---------- 12. Responsive ----------------------------------------------- */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2col{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .answers{grid-template-columns:1fr}
}

@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .filters form{grid-template-columns:1fr 1fr}
  .search{grid-column:1/-1}
}

@media (max-width:820px){
  /* Sidebar becomes a drawer driven by a checkbox — no JS needed. */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .28s var(--ease);
    box-shadow:var(--sh-3);
  }
  .side-toggle:checked ~ .app .sidebar{transform:none}
  .side-toggle:checked ~ .app .scrim{display:block}
  .scrim{
    position:fixed;inset:0;background:rgba(23,19,16,.45);z-index:50;
    backdrop-filter:blur(2px);
  }
  .main{margin-left:0;padding:16px 16px 40px}

  .burger{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:42px;height:42px;flex:none;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-sm);color:var(--ink);cursor:pointer;
    box-shadow:var(--sh-1);margin-bottom:14px;
  }
  .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .topbar{flex-direction:column;gap:14px}
  .topbar h1{font-size:22px}
}

@media (min-width:821px){
  .burger,.mobile-bar{display:none}
}

@media (max-width:600px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px}
  .kpi strong{font-size:25px}
  .filters form{grid-template-columns:1fr}
  .panel-head{flex-direction:column;align-items:flex-start;gap:11px}
  .facts > div{grid-template-columns:1fr;gap:3px}
  .donut-wrap{justify-content:center}
  table{min-width:620px}
}

/* ---------- 13. Print ---------------------------------------------------- */
@media print{
  .sidebar,.scrim,.topbar-actions,.pager,.filters,.burger,.mobile-bar{display:none!important}
  .main{margin:0;padding:0}
  .panel,.detail-head{box-shadow:none;break-inside:avoid}
  .detail-head{background:var(--char-900)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .answers{grid-template-columns:repeat(2,1fr)}
}