/* Eduport Help Center - Notion-style look. LOOK ONLY.
   Loaded after css/app.css. Nothing is added, removed, renamed or moved: every screen,
   tab, button, status and popup is exactly where it was. Only colour, type, borders and
   shadows change.

   The rule, from the user (2026-10-06): "dont use too much color ... make it simple as
   notion". So:
     - white and warm-grey surfaces, near-black text, hairline grey borders;
     - no gradients, no glows, almost no shadows;
     - one colour for the main action (Notion's blue), used sparingly;
     - colour that MEANS something stays (status, priority, danger), but as Notion's
       soft tints, never as solid blocks.
   Palette values are Notion's own published light/dark greys and tag tints. */

:root{
  --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:#F7F7F5; --panel-3:#F1F1EF;
  --line:#E9E9E7; --line2:#F1F1EF; --line3:#DFDFDE;
  --ink:#37352F; --ink2:#5F5E5B; --muted:#6B6A66;
  --accent:#1F6FC5; --accent2:#9CC7EE; --accent-soft:#E7F2FC; --accent-ink:#1F6FBF;
  --tint:#F7F7F5; --tint2:#F1F1EF; --glow1:transparent; --glow2:transparent;
  --sidebar:#F7F7F5; --sidebar-dim:#6B6A66; --sidebar-ink:#37352F;
  /* meaning colours, as Notion's soft tags */
  --green:#448361;  --green-soft:#EDF3EC; --green-soft2:#DBEDDB; --green-ink:#2B593F; --green-line:#DBEDDB;
  --amber:#D9730D;  --amber-soft:#FBF3DB; --amber-ink:#89632A; --amber-line:#F2E4BE;
  --sky:#337EA9;    --sky-soft:#F7F7F5;   --sky-ink:#28456C;  --sky-line:#E9E9E7;
  --note-soft:#FBF3DB; --note-soft2:#F6EBC8; --note-line:#E9DDB4; --note-ink:#89632A;
  --danger:#D44C47; --danger-soft:#FDEBEC; --danger-soft2:#FBDCDD; --danger-ink:#9F2F2D; --danger-line:#F5C7C8;
  --radius:8px; --radius-sm:6px;
  --shadow:none;
  --shadow-md:0 4px 12px rgba(15,15,15,.08);
  --shadow-lg:0 12px 32px rgba(15,15,15,.14), 0 0 0 1px rgba(15,15,15,.05);
  --ring:0 0 0 2px rgba(35,131,226,.35);
  --display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
/* Dark, but not black (2026-10-07: "easy to the eyes"). A soft slate -- the
   "dimmed" dark that code editors use for long sessions -- instead of near-black
   #191919, and text a step off pure white so it does not glare. Body text is
   about 8:1 on the page, muted text above 4.5:1. */
:root[data-theme="dark"]{
  --bg:#22272E; --panel:#2A3038; --panel-2:#2F363F; --panel-3:#363E48;
  --line:#3A424D; --line2:#2F363F; --line3:#444C56;
  --ink:#C9D1D9; --ink2:#ADBAC7; --muted:#96A2AF;
  --accent:#1F6FC5; --accent2:#3C6FA0; --accent-soft:#25384D; --accent-ink:#8CC4F5;
  --tint:#2A3038; --tint2:#2F363F; --glow1:transparent; --glow2:transparent;
  --sidebar:#262C34; --sidebar-dim:#96A2AF; --sidebar-ink:#C9D1D9;
  --green:#4DAB9A;  --green-soft:#1F2B26; --green-soft2:#243329; --green-ink:#6BC2A6; --green-line:#2C3D33;
  --amber:#FFA344;  --amber-soft:#2E2618; --amber-ink:#E3B26B; --amber-line:#4A3A20;
  --sky:#529CCA;    --sky-soft:#252525;   --sky-ink:#8DBFE0;  --sky-line:#2F2F2F;
  --note-soft:#2E2618; --note-soft2:#3A2F1C; --note-line:#4A3A20; --note-ink:#E3B26B;
  --danger:#E16F64; --danger-soft:#332220; --danger-soft2:#3E2724; --danger-ink:#F0938A; --danger-line:#5A302C;
  --shadow:none;
  --shadow-md:0 6px 16px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  --ring:0 0 0 2px rgba(35,131,226,.5);
}

/* ---- type and canvas: Notion's system font, plain background ---- */
body{font-family:var(--display) !important;background:var(--bg) !important;color:var(--ink)}
h1,h2,h3,.tab{font-family:var(--display) !important;letter-spacing:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- sidebar: light grey panel, dark text, quiet selection (Notion) ---- */
.sidebar{background:var(--sidebar) !important;border-right:1px solid var(--line);box-shadow:none !important}
.sidebar .brand{color:var(--sidebar-ink) !important}
.navsec{color:var(--muted) !important}
.navitem{color:var(--ink2) !important;border-radius:6px;font-weight:500}
.navitem:hover{background:rgba(55,53,47,.06) !important;color:var(--ink) !important}
.navitem.on{background:rgba(55,53,47,.08) !important;color:var(--ink) !important;font-weight:600;box-shadow:none !important}
:root[data-theme="dark"] .navitem:hover{background:rgba(255,255,255,.055) !important}
:root[data-theme="dark"] .navitem.on{background:rgba(255,255,255,.09) !important}
.navfoot{border-top:1px solid var(--line) !important;color:var(--muted)}
.navfoot .who{color:var(--ink)}
.navtoggle{background:var(--panel) !important;border:1px solid var(--line) !important;box-shadow:none !important;color:var(--ink2) !important}

/* ---- logo and avatars: flat, neutral ---- */
/* The logo keeps its own dark tile in both themes (app.css). Painting it with
   --ink turned it light grey in dark mode (2026-10-07). */
.logo{box-shadow:none !important}
.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}
.prole .pic{background:var(--panel-3) !important;color:var(--ink2) !important;box-shadow:none !important}

/* ---- buttons: one solid blue for the main action; everything else plain ---- */
.btn,:root[data-theme="dark"] .btn:not(.ghost):not(.danger){
  background:var(--accent) !important;color:#fff !important;box-shadow:none !important;
  border-radius:6px;font-weight:600}
.btn:hover{filter:brightness(.94)}
.btn.ghost,:root[data-theme="dark"] .btn.ghost{
  background:var(--panel) !important;color:var(--ink) !important;border:1px solid var(--line) !important}
.btn.ghost:hover{background:var(--panel-2) !important;filter:none}
.btn.green{background:var(--green) !important}
.btn.danger{background:var(--danger) !important}

/* ---- tabs, filter chips and the outcome buttons: selected = soft grey + bold,
        not a solid purple block (like Notion's view tabs) ---- */
.tab,.rtab,.ctab,.bpill{box-shadow:none !important;border-radius:6px}
.tab.on,.rtab.on,.ctab.on,.bpill.on,
.tab.on:hover,.rtab.on:hover,.ctab.on:hover,.bpill.on:hover{
  background:rgba(55,53,47,.08) !important;border-color:var(--line3) !important;
  color:var(--ink) !important;font-weight:650;box-shadow:none !important}
:root[data-theme="dark"] .tab.on,:root[data-theme="dark"] .rtab.on,
:root[data-theme="dark"] .ctab.on,:root[data-theme="dark"] .bpill.on{background:rgba(255,255,255,.09) !important}
.tab:hover,.rtab:hover,.ctab:hover,.bpill:hover{border-color:var(--line3) !important;background:var(--panel-2) !important}
.bkchip{border-radius:6px}
.bkchip.on{background:rgba(55,53,47,.08) !important;border-color:var(--line3) !important;color:var(--ink) !important;font-weight:650}
:root[data-theme="dark"] .bkchip.on{background:rgba(255,255,255,.09) !important}

/* ---- surfaces: hairline borders, no shadows, no gradient washes ---- */
.panel,.card,.composer,.ent,.tblwrap,.kcol,.kcard{box-shadow:none !important}
.ent{border-left-width:1px !important}
/* The student's message: Notion's quote-block look - a grey bar, no blue box. */
.ent.student{background:var(--panel-2) !important;border-color:var(--line) !important;
  border-left:3px solid var(--line3) !important}
.ent.agent{border-left:3px solid var(--accent2) !important}
.ent.question{border-left:3px solid var(--amber) !important}
#overlay,#overlay2{backdrop-filter:none !important;background:rgba(15,15,15,.45) !important}

/* ---- status, priority: soft tags, the dot carries the colour ---- */
.pill{font-weight:600;border-radius:4px}
.prio{border-radius:4px;font-weight:600}
.prio.high{background:var(--danger-soft) !important;color:var(--danger-ink) !important}
.prio.medium{background:var(--amber-soft) !important;color:var(--amber-ink) !important}
.prio.low{background:var(--panel-3) !important;color:var(--ink2) !important}

/* ---- the multi-select bar: plain white card ---- */
.bulkbar{border-radius:8px}

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

/* Fix: the priority button has line-height 0, so the HIGH/MEDIUM/LOW tag inside it
   collapsed to its 4px of padding with the word spilling over (live app too). */
.priobtn .prio{line-height:1.45}

/* Contrast (measured 2026-10-06): Notion's own greys and blue are a touch too faint for
   small text, so secondary grey and the button blue are one step darker than Notion's,
   and the last two hard-coded colours follow the palette. */
.navfoot .role{color:var(--muted) !important}
.nil{color:var(--muted) !important}
.seg button:not(.on),.segbtn:not(.on){color:var(--ink2)}

/* ---- dashboards: flat, like a Notion database view ---- */
/* table headers: no shading gradient */
table.tbl tr,table.tbl thead tr,table.tbl th{background-image:none !important}
table.tbl thead tr,table.tbl th{background-color:var(--panel-2) !important}
/* number cards on Time: plain card */
.stat{background-image:none !important;background-color:var(--panel) !important;box-shadow:none !important}
.stat:hover{transform:none !important;box-shadow:none !important}
/* department chips (Overview, Tickets): selected = soft grey, like the tabs */
.chip{border-radius:6px;box-shadow:none !important}
.chip.on,.chip.on:hover{background:rgba(55,53,47,.08) !important;border-color:var(--line3) !important;
  color:var(--ink) !important;font-weight:650}
:root[data-theme="dark"] .chip.on{background:rgba(255,255,255,.09) !important}
/* the "spiking" alert: a plain card with an amber edge - still noticeable, not loud */
.trendstrip{background-image:none !important;background-color:var(--panel) !important;
  border:1px solid var(--line) !important;border-left:3px solid var(--amber) !important;box-shadow:none !important}

/* ---- tags: each tag keeps the colour an admin gave it, but as a soft Notion tint
        with dark text - never a solid block ---- */
.tag.hi,:root[data-theme="dark"] .tag.hi{
  background:color-mix(in srgb, var(--tagc, var(--danger)) 18%, var(--panel)) !important;
  color:var(--ink) !important;box-shadow:none !important;font-weight:600}
.tag.mid{background:var(--panel-3) !important;color:var(--ink2) !important}
.tag.mid .tprio,.tag.lo .tprio,
:root[data-theme="dark"] .tag.mid .tprio,:root[data-theme="dark"] .tag.lo .tprio{background:rgba(127,127,127,.14) !important}
.tag{border-radius:4px}