/* Eduport Help Center -- "Professional" look. LOOK ONLY. Live since 2026-10-07.

   Loaded after app.css and look.css. Tried first in helpcenter-redesign-test
   (css/reskin-pro.css), where the user approved it. Nothing is added, removed or moved: every screen, tab,
   button and popup is where it was. Only type, colour, spacing, borders and
   shadows change.

   Direction, from the UI/UX Pro Max skill (2026-10-07), style "Data-Dense
   Dashboard" for an internal operations tool:
     - one neutral family (slate) and ONE action colour (trust blue #2563EB);
     - Inter, with tabular figures so numbers line up in tables and cards;
     - compact, readable tables: sticky header, 40px rows, a hover highlight;
     - cards lifted by a hairline border and a very soft shadow, not by colour;
     - status and priority as small soft badges -- colour only where it means
       something;
     - underline tabs for the queue tabs (where am I?), segmented controls for
       view switches (how am I looking?);
     - visible keyboard focus, 150-200ms hover transitions, reduced motion
       respected; text at 4.5:1 or better in both themes.
   Dark mode stays the soft slate the live app uses -- not black. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F8FB; --panel:#FFFFFF; --panel-2:#F8FAFC; --panel-3:#F1F5F9;
  --line:#E2E8F0; --line2:#EEF2F6; --line3:#CBD5E1;
  --ink:#0F172A; --ink2:#334155; --muted:#536175;   /* 5:1 on the grey page and the switch track */
  --accent:#2563EB; --accent2:#93C5FD; --accent-soft:#EFF4FF; --accent-ink:#1D4ED8;
  --tint:#F8FAFC; --tint2:#F1F5F9;
  --sidebar:#FFFFFF; --sidebar-dim:#64748B; --sidebar-ink:#0F172A;
  --green:#16A34A;  --green-soft:#F0FDF4; --green-soft2:#DCFCE7; --green-ink:#15803D; --green-line:#BBF7D0;
  --amber:#D97706;  --amber-soft:#FFFBEB; --amber-ink:#B45309; --amber-line:#FDE68A;
  --sky:#0284C7;    --sky-soft:#F0F9FF;   --sky-ink:#0369A1;  --sky-line:#BAE6FD;
  --danger:#DC2626; --danger-soft:#FEF2F2; --danger-soft2:#FEE2E2; --danger-ink:#B91C1C; --danger-line:#FECACA;
  --radius:10px; --radius-sm:8px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-3:0 10px 30px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  --shadow:var(--sh-1); --shadow-md:var(--sh-2); --shadow-lg:var(--sh-3);
  --ring:0 0 0 3px rgba(37,99,235,.25);
  --display:'Inter',ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hover:rgba(15,23,42,.045); --sel:rgba(37,99,235,.08);
}
:root[data-theme="dark"]{
  --bg:#1F242C; --panel:#262C35; --panel-2:#2B323C; --panel-3:#323A45;
  --line:#363F4B; --line2:#2F3741; --line3:#46505E;
  --ink:#E2E8F0; --ink2:#CBD5E1; --muted:#9AA6B6;
  --accent:#2563EB; --accent2:#3B5B8F; --accent-soft:#25344B; --accent-ink:#93C5FD;
  --tint:#262C35; --tint2:#2B323C;
  --sidebar:#232930; --sidebar-dim:#9AA6B6; --sidebar-ink:#E2E8F0;
  --green:#22C55E;  --green-soft:#1E3329; --green-soft2:#21392D; --green-ink:#86EFAC; --green-line:#2B4A38;
  --amber:#F59E0B;  --amber-soft:#3A3020; --amber-ink:#FCD34D; --amber-line:#57472A;
  --sky:#38BDF8;    --sky-soft:#1F3341;   --sky-ink:#7DD3FC;  --sky-line:#2C4A5E;
  --danger:#EF4444; --danger-soft:#3D2527; --danger-soft2:#47292B; --danger-ink:#FCA5A5; --danger-line:#5E3134;
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 2px 6px rgba(0,0,0,.3);
  --sh-3:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  --ring:0 0 0 3px rgba(96,165,250,.35);
  --hover:rgba(255,255,255,.045); --sel:rgba(96,165,250,.12);
}

/* ---------------------------------------------------------------- type */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--display) !important;background:var(--bg) !important;color:var(--ink);
  font-size:14px;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.tab,.vsw,.btn{font-family:var(--display) !important}
h2{font-size:20px !important;font-weight:650 !important;letter-spacing:-.015em !important;color:var(--ink)}
h3{font-weight:650 !important;letter-spacing:-.01em}
/* numbers line up: tables, cards, counts */
table,.kpi,.kn,.ovbig,.stat,.kct,.totalpill,.tno,.kno,.kdays,.l2days{font-variant-numeric:tabular-nums}
:focus-visible{outline:none !important;box-shadow:var(--ring) !important;border-radius:6px}
a{color:var(--accent-ink)}
::selection{background:rgba(37,99,235,.18)}

/* ---------------------------------------------------------------- sidebar */
.sidebar{background:var(--sidebar) !important;border-right:1px solid var(--line) !important;box-shadow:none !important}
.sidebar .brand{padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.sidebar .brand,.sidebar .brand *{color:var(--sidebar-ink) !important}
.sidebar .brand .sub{color:var(--muted) !important;font-weight:500}
.navsec{color:var(--muted) !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.07em !important;text-transform:uppercase}
.navitem{color:var(--ink2) !important;border-radius:8px !important;font-weight:500 !important;
  font-size:13.5px;transition:background-color .15s,color .15s;position:relative}
.navitem:hover{background:var(--hover) !important;color:var(--ink) !important}
.navitem.on,.navitem.on:hover{background:var(--sel) !important;color:var(--accent-ink) !important;
  font-weight:600 !important;box-shadow:none !important}
.navitem.on::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
:root[data-theme="dark"] .navitem:hover{background:var(--hover) !important}
:root[data-theme="dark"] .navitem.on{background:var(--sel) !important}
.navfoot{border-top:1px solid var(--line) !important}
.navfoot .who{color:var(--ink) !important;font-weight:600}
.navfoot .role{color:var(--muted) !important}
.navtoggle,.msgbtn{transition:background-color .15s,box-shadow .15s}
.navtoggle{background:var(--panel) !important;border:1px solid var(--line) !important;
  box-shadow:var(--sh-1) !important;color:var(--ink2) !important;border-radius:8px !important}
.navtoggle:hover{background:var(--panel-3) !important}
.msgbtn{box-shadow:0 4px 14px rgba(37,99,235,.35) !important}

/* ---------------------------------------------------------------- page top */
.topbar{gap:10px;margin-bottom:16px}
.totalpill{background:var(--panel-3) !important;color:var(--ink2) !important;border:0 !important;
  font-weight:600 !important;border-radius:999px !important;padding:2px 9px !important;font-size:12px !important}

/* Online / Offline and List / Board: segmented controls */
.chswitch,.viewsw,.seg{background:var(--panel-3) !important;border:1px solid var(--line) !important;
  border-radius:9px !important;padding:3px !important;box-shadow:none !important}
.chswitch button,.vsw,.seg button{border-radius:6px !important;font-size:13px !important;font-weight:600 !important;
  color:var(--muted) !important;transition:background-color .15s,color .15s,box-shadow .15s}
.chswitch button:hover,.vsw:hover,.seg button:hover{color:var(--ink) !important}
.chswitch button.on,.vsw.on,.seg button.on{background:var(--panel) !important;color:var(--ink) !important;
  box-shadow:var(--sh-2) !important}

/* the queue tabs (To do, In progress...): underline tabs on one rule */
.tabs{gap:2px !important;border-bottom:1px solid var(--line) !important;margin-bottom:14px !important;
  flex-wrap:wrap}
.tabs .tab{background:transparent !important;border:0 !important;border-bottom:2px solid transparent !important;
  border-radius:0 !important;box-shadow:none !important;padding:9px 12px 10px !important;margin-bottom:-1px;
  color:var(--muted) !important;font-weight:500 !important;font-size:13.5px !important;
  transition:color .15s,border-color .15s}
.tabs .tab:hover{color:var(--ink) !important;background:transparent !important;border-bottom-color:var(--line3) !important}
.tabs .tab.on,.tabs .tab.on:hover{color:var(--ink) !important;font-weight:600 !important;
  border-bottom-color:var(--accent) !important;background:transparent !important}
/* On a phone the underline tabs wrapped onto three lines with the rule under the
   last one only; one row that scrolls sideways keeps them reading as tabs. */
@media (max-width:760px){
  .tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{white-space:nowrap;flex:none}
}
/* other tab rows and chips: quiet pills, blue when chosen */
.rtab,.ctab,.bpill,.chip,.bkchip{border-radius:8px !important;box-shadow:none !important;
  transition:background-color .15s,border-color .15s,color .15s}
.rtab.on,.ctab.on,.bpill.on,.chip.on,.bkchip.on,
.rtab.on:hover,.ctab.on:hover,.bpill.on:hover,.chip.on:hover{
  background:var(--sel) !important;border-color:rgba(37,99,235,.35) !important;color:var(--accent-ink) !important;
  font-weight:600 !important}
:root[data-theme="dark"] .rtab.on,:root[data-theme="dark"] .ctab.on,:root[data-theme="dark"] .bpill.on,
:root[data-theme="dark"] .chip.on,:root[data-theme="dark"] .bkchip.on{background:var(--sel) !important;
  border-color:rgba(96,165,250,.4) !important}

/* ---------------------------------------------------------------- inputs */
.finput,.searchbox,input[type=text],input[type=search],select,textarea{
  border-radius:8px !important;border-color:var(--line3) !important;background-color:var(--panel) !important;
  color:var(--ink) !important;transition:border-color .15s,box-shadow .15s}
.finput:hover,.searchbox:hover{border-color:var(--muted) !important}
.finput:focus,.searchbox:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent) !important;box-shadow:var(--ring) !important;outline:none !important}
::placeholder{color:var(--muted) !important;opacity:1}

/* ---------------------------------------------------------------- buttons */
.btn{border-radius:8px !important;font-weight:600 !important;letter-spacing:0;
  transition:background-color .15s,box-shadow .15s,filter .15s;cursor:pointer}
.btn,:root[data-theme="dark"] .btn:not(.ghost):not(.danger):not(.green){
  background:var(--accent) !important;color:#fff !important;box-shadow:var(--sh-1) !important;border:1px solid transparent !important}
.btn:hover{filter:none !important;background:#1D4ED8 !important}
.btn.ghost,:root[data-theme="dark"] .btn.ghost{background:var(--panel) !important;color:var(--ink) !important;
  border:1px solid var(--line3) !important;box-shadow:var(--sh-1) !important}
.btn.ghost:hover{background:var(--panel-3) !important}
.btn.green{background:var(--green) !important;color:#fff !important}
.btn.green:hover{background:#15803D !important}
.btn.danger{background:var(--danger) !important;color:#fff !important}
.btn.danger:hover{background:#B91C1C !important}
.iconbtn{border-radius:8px !important;border:1px solid var(--line3) !important;background:var(--panel) !important;
  box-shadow:var(--sh-1);transition:background-color .15s}
.iconbtn:hover{background:var(--panel-3) !important}

/* ---------------------------------------------------------------- surfaces */
.panel,.card,.composer,.tblwrap,.setcard,.kpi,.stat,.formcard{
  background:var(--panel) !important;border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;box-shadow:var(--sh-1) !important}
.setcard{transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
.setcard:hover{border-color:var(--line3) !important;box-shadow:var(--sh-2) !important;transform:translateY(-1px)}
.kpi{transition:border-color .15s,box-shadow .15s}
.kpi:hover{transform:none !important;box-shadow:var(--sh-2) !important}
.ovbig{color:var(--ink) !important;font-weight:700 !important;letter-spacing:-.02em}
/* The status cards' words (To do, Completed...) in the darker shade of their
   colour: the bright one is kept for the bar, but as small text it read at 3:1. */
.snew .kl{color:var(--amber-ink) !important}
.sopen .kl{color:var(--accent-ink) !important}
.swait .kl{color:var(--sky-ink) !important}
.sdone .kl{color:var(--green-ink) !important}
th.colh .colcar{opacity:.8 !important}
/* the spiking-phrase count: white on the brighter dark-mode red was 3.8:1 */
:root[data-theme="dark"] .tsn{background:#DC2626 !important}

/* ---------------------------------------------------------------- tables */
.tblwrap{overflow:auto}
table.tbl{border-collapse:separate;border-spacing:0}
table.tbl th,table.tbl thead tr{background:var(--panel-2) !important;background-image:none !important}
table.tbl th{color:var(--muted) !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.01em;text-transform:none;border-bottom:1px solid var(--line) !important;
  position:sticky;top:0;z-index:2;padding-top:10px !important;padding-bottom:10px !important}
table.tbl td{border-bottom:1px solid var(--line2) !important;vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:0 !important}
table.tbl tbody tr{transition:background-color .12s}
table.tbl tbody tr:hover td{background:var(--panel-2) !important}
table.tbl .nm{font-weight:600;color:var(--ink)}
table.tbl .ph,table.tbl .mnt{color:var(--muted) !important}

/* avatars: neutral initials */
.av,.av.stu,.av.int,.av.men,:root[data-theme="dark"] .av:not(.stu):not(.int):not(.men){
  background:var(--panel-3) !important;color:var(--ink2) !important;box-shadow:none !important;
  border:1px solid var(--line) !important;font-weight:600}

/* ---------------------------------------------------------------- badges */
.pill{border-radius:999px !important;font-weight:600 !important;font-size:12px !important;
  padding:3px 9px !important;border:1px solid transparent}
.prio{border-radius:6px !important;font-weight:600 !important;font-size:11px !important;letter-spacing:.03em;
  border:1px solid transparent}
.prio.high,.prio.urgent{background:var(--danger-soft) !important;color:var(--danger-ink) !important;border-color:var(--danger-line) !important}
.prio.medium{background:var(--amber-soft) !important;color:var(--amber-ink) !important;border-color:var(--amber-line) !important}
.prio.low{background:var(--panel-3) !important;color:var(--ink2) !important;border-color:var(--line) !important}
.priobtn .prio{line-height:1.45}
.tag{border-radius:6px !important}
.tag .x{opacity:1 !important}   /* the remove cross was faded to 2.3:1 */

/* ---------------------------------------------------------------- board */
.kboard{gap:14px !important}
.kcol{background:var(--panel-2) !important;border:1px solid var(--line) !important;border-radius:12px !important;
  box-shadow:none !important}
:root[data-theme="dark"] .kcol{background:#22282F !important}
.kcolh{padding:4px 4px 12px !important}
.kname{font-weight:600 !important;font-size:13.5px}
.kct{background:var(--panel-3) !important;color:var(--ink2) !important;border-radius:999px !important;
  font-weight:600 !important;font-size:11.5px !important;padding:1px 8px !important}
.kcard{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:10px !important;
  box-shadow:var(--sh-1) !important;transition:border-color .15s,box-shadow .15s,transform .15s !important}
.kcard:hover{border-color:var(--line3) !important;box-shadow:var(--sh-2) !important;transform:translateY(-1px)}
.kcard .knm{font-weight:600}
.kcard .kmeta,.kcard .mnt,.kcard .kdays{color:var(--muted) !important}
.klist.over{background:var(--sel) !important;box-shadow:inset 0 0 0 2px var(--accent) !important;border-radius:10px}

/* ---------------------------------------------------------------- the ticket */
#overlay,#overlay2{background:rgba(15,23,42,.45) !important;backdrop-filter:blur(2px) !important}
#modal,#modal2{border-radius:14px !important;box-shadow:var(--sh-3) !important;border:1px solid var(--line) !important}
.actionbar{background:var(--panel) !important;border-bottom:1px solid var(--line) !important;box-shadow:none !important}
.tno{font-weight:600;color:var(--muted) !important}
.ent{border:1px solid var(--line) !important;border-radius:10px !important;box-shadow:none !important;
  background:var(--panel) !important}
.ent.student{background:var(--panel-2) !important;border-left:3px solid var(--line3) !important}
.ent.agent{border-left:3px solid var(--accent) !important}
.ent.question{border-left:3px solid var(--amber) !important}
.tkrail .card{box-shadow:none !important}
.frow .k{color:var(--muted) !important}
.frow .v{color:var(--ink) !important;font-weight:500}

/* ---------------------------------------------------------------- misc */
.trendstrip{background:var(--panel) !important;background-image:none !important;border:1px solid var(--line) !important;
  border-left:3px solid var(--amber) !important;box-shadow:var(--sh-1) !important;border-radius:var(--radius) !important}
.bulkbar{border-radius:12px !important;box-shadow:var(--sh-3) !important;border:1px solid var(--line) !important}
#toasts > *{border-radius:10px !important;box-shadow:var(--sh-3) !important}
.nil,.quiet{color:var(--muted) !important}

/* thin, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line3);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;transform:none !important}}