/* SEL PNL web - the look shared by every page: colours, light/dark, left menu, top bar,
   "Change the look" panel. Chosen look is set as attributes on <html>:
   data-color, data-mode, data-side, data-top, data-cards, data-menu, data-size */
:root{
  --p:#2563eb; --p2:#06b6d4;
  --bg:#f3f6fb; --card:#ffffff; --card2:#f8fafd; --line:#e3e8f0; --line2:#eef2f7;
  --text:#1e293b; --muted:#64748b; --head:#1e3a8a;
  --green:#15803d; --red:#c62828; --amber:#b45309; --amber-soft:#fff7e6;
  --zebra:#f8fafc; --hover:color-mix(in srgb,var(--p) 7%,#fff); --total:color-mix(in srgb,var(--p) 11%,#fff);
  --th-bg:color-mix(in srgb,var(--p) 42%,#0d1b45); --th-ink:#fff;
  --p-soft:color-mix(in srgb,var(--p) 11%,#fff); --p-ink:color-mix(in srgb,var(--p) 78%,#000);
  --shadow:0 1px 2px rgba(15,30,60,.05),0 4px 14px rgba(15,30,60,.05);
  /* chart colours (validated set: blue, orange, aqua, violet + more) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#6250d6; --s5:#eda100; --s6:#e87ba4; --s7:#008300; --s8:#e34948;
  --s-other:#a3acb9; --c-grid:#e8edf3; --c-axis:#94a3b8; --c-ink:#5b6b80;
  --div-pos:#2a78d6; --div-neg:#e34948; --div-mid:#f0efec;
  --sw:258px; --th:64px;
}
/* 12 main colours: [main, second colour for the two-colour top bar] */
html[data-color=ocean]{--p:#2563eb;--p2:#06b6d4}
html[data-color=royal]{--p:#4338ca;--p2:#7c3aed}
html[data-color=violet]{--p:#7c3aed;--p2:#c026d3}
html[data-color=grape]{--p:#9333ea;--p2:#db2777}
html[data-color=rose]{--p:#e11d48;--p2:#f97316}
html[data-color=ruby]{--p:#b91c1c;--p2:#e11d48}
html[data-color=sunset]{--p:#ea580c;--p2:#e11d48}
html[data-color=gold]{--p:#d97706;--p2:#ea580c}
html[data-color=emerald]{--p:#059669;--p2:#0d9488}
html[data-color=selgreen]{--p:#15803d;--p2:#65a30d}
html[data-color=sky]{--p:#0284c7;--p2:#2563eb}
html[data-color=slate]{--p:#475569;--p2:#1e3a8a}

/* dark */
html[data-mode=dark]{
  --bg:#0b1220; --card:#131c2e; --card2:#18233a; --line:#26324a; --line2:#1e2a40;
  --text:#e2e8f0; --muted:#94a3b8; --head:#c7d7fe;
  --green:#4ade80; --red:#f87171; --amber:#fbbf24; --amber-soft:#3a2a10;
  --zebra:#151f33; --hover:color-mix(in srgb,var(--p) 18%,#131c2e); --total:color-mix(in srgb,var(--p) 22%,#131c2e);
  --th-bg:color-mix(in srgb,var(--p) 45%,#0b1220);
  --p-soft:color-mix(in srgb,var(--p) 22%,#131c2e); --p-ink:color-mix(in srgb,var(--p) 45%,#fff);
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#9085e9; --s5:#c98500; --s6:#d55181; --s7:#008300; --s8:#e66767;
  --s-other:#5d6878; --c-grid:#223049; --c-axis:#55657e; --c-ink:#9aa8bd; --div-mid:#383835;
  color-scheme:dark;
}
html[data-size=s]{zoom:.92} html[data-size=l]{zoom:1.1}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--p)}
svg{flex:none}

/* ---------------------------------------------------------------- left menu */
.sh-side{position:fixed;left:0;top:0;bottom:0;width:var(--sw);background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:60;transition:width .18s,transform .2s}
.sh-logo{height:var(--th);display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--line2);flex:none;text-decoration:none}
.sh-logo img{height:40px;max-width:100%;object-fit:contain}
.sh-logo .lw{display:none}
.sh-logo .mini{display:none;width:38px;height:38px;border-radius:10px}
.sh-me{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line2);flex:none}
.sh-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}
.sh-me b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-me span{font-size:12px;color:var(--muted)}
.sh-nav{flex:1;overflow-y:auto;padding:8px 12px 16px;scrollbar-width:thin}
.sh-g{margin-top:6px}
.sh-gh{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);padding:12px 8px 6px}
.sh-gh i{font-style:normal;font-size:10px;transition:transform .15s}
.sh-g.shut .sh-gh i{transform:rotate(-90deg)}
.sh-g.shut .sh-gb{display:none}
.sh-it{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;margin:2px 0;cursor:pointer;white-space:nowrap}
.sh-it svg{width:19px;height:19px;opacity:.85}
.sh-it:hover{background:var(--p-soft)}
.sh-it.on{background:var(--p);color:#fff;font-weight:600;box-shadow:0 6px 16px color-mix(in srgb,var(--p) 32%,transparent)}
.sh-it.on svg{opacity:1}
.sh-it span{overflow:hidden;text-overflow:ellipsis}
.sh-foot{flex:none;padding:10px 18px 12px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--muted)}
.sh-foot a{color:var(--muted);text-decoration:none}
.sh-foot a:hover{color:var(--p)}
/* menu: dark */
html[data-side=dark] .sh-side{background:#0f172a;border-color:#0f172a;color:#cbd5e1}
html[data-side=dark] .sh-logo,html[data-side=dark] .sh-me,html[data-side=dark] .sh-foot{border-color:rgba(255,255,255,.07)}
html[data-side=dark] .sh-it{color:#cbd5e1} html[data-side=dark] .sh-it:hover{background:rgba(255,255,255,.07)}
html[data-side=dark] .sh-gh,html[data-side=dark] .sh-me span,html[data-side=dark] .sh-foot,html[data-side=dark] .sh-foot a{color:#7c8ba1}
html[data-side=dark] .sh-me b{color:#fff}
/* menu: colour */
html[data-side=colour] .sh-side{background:linear-gradient(180deg,var(--p),color-mix(in srgb,var(--p) 70%,#0b1430));border-color:transparent;color:#fff}
html[data-side=colour] .sh-logo,html[data-side=colour] .sh-me,html[data-side=colour] .sh-foot{border-color:rgba(255,255,255,.14)}
html[data-side=colour] .sh-it{color:rgba(255,255,255,.9)} html[data-side=colour] .sh-it:hover{background:rgba(255,255,255,.12)}
html[data-side=colour] .sh-it.on{background:#fff;color:var(--p-ink);box-shadow:0 6px 16px rgba(0,0,0,.18)}
html[data-side=colour] .sh-gh,html[data-side=colour] .sh-me span,html[data-side=colour] .sh-foot,html[data-side=colour] .sh-foot a{color:rgba(255,255,255,.7)}
html[data-side=colour] .sh-av{background:rgba(255,255,255,.22);box-shadow:none}
html[data-side=dark] .sh-logo .lc,html[data-side=colour] .sh-logo .lc,html[data-mode=dark] .sh-logo .lc{display:none}
html[data-side=dark] .sh-logo .lw,html[data-side=colour] .sh-logo .lw,html[data-mode=dark] .sh-logo .lw{display:block}
/* menu: icons only */
html[data-menu=icons]{--sw:78px}
html[data-menu=icons] .sh-logo{padding:0;justify-content:center}
html[data-menu=icons] .sh-logo img.lc,html[data-menu=icons] .sh-logo img.lw{display:none!important}
html[data-menu=icons] .sh-logo .mini{display:block}
html[data-menu=icons] .sh-me{justify-content:center;padding:12px 0}
html[data-menu=icons] .sh-me>div:not(.sh-av),html[data-menu=icons] .sh-it span,html[data-menu=icons] .sh-gh span,html[data-menu=icons] .sh-gh i,html[data-menu=icons] .sh-foot,html[data-menu=icons] .bs-slot{display:none}
html[data-menu=icons] .sh-gh{padding:8px 0 4px;justify-content:center;border-top:1px solid var(--line2);margin-top:6px}
html[data-menu=icons] .sh-g.shut .sh-gb{display:block}
html[data-menu=icons] .sh-it{justify-content:center;padding:10px 0}
html[data-menu=icons] .sh-nav{padding:6px 10px}

/* ---------------------------------------------------------------- main column + top bar */
.sh-main{margin-left:var(--sw);height:100vh;display:flex;flex-direction:column;min-width:0;transition:margin .18s}
.sh-top{height:var(--th);flex:none;display:flex;align-items:center;gap:12px;padding:0 22px 0 14px;position:relative;z-index:50;
  background:var(--p);color:#fff;box-shadow:0 2px 10px color-mix(in srgb,var(--p) 25%,transparent)}
html[data-top=two] .sh-top{background:linear-gradient(90deg,var(--p),var(--p2))}
html[data-top=plain] .sh-top{background:var(--card);color:var(--text);box-shadow:none;border-bottom:1px solid var(--line)}
.sh-burger{all:unset;cursor:pointer;width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.sh-burger:hover{background:rgba(255,255,255,.14)} html[data-top=plain] .sh-burger:hover{background:var(--p-soft)}
.sh-burger svg{width:22px;height:22px}
.sh-title{min-width:0;flex:1}
.sh-title b{display:block;font-size:19px;font-weight:700;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-title span{display:block;font-size:12.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-pill{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.16);font-size:13.5px;font-weight:600;white-space:nowrap}
.sh-pill:hover{background:rgba(255,255,255,.26)}
.sh-pill.ghost{background:transparent;padding:0 10px} .sh-pill.ghost:hover{background:rgba(255,255,255,.16)}
.sh-pill svg{width:18px;height:18px}
.sh-pill.date{cursor:default;font-weight:500} .sh-pill.date:hover{background:rgba(255,255,255,.16)}
html[data-top=plain] .sh-pill{background:var(--p-soft);color:var(--p-ink)}
html[data-top=plain] .sh-pill.ghost{background:transparent;color:var(--text)}
.sh-user{position:relative}
.sh-user>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:24px;font-weight:600;font-size:14px}
.sh-user>button:hover{background:rgba(255,255,255,.14)}
.sh-user .sh-av{width:34px;height:34px;font-size:13px;background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
html[data-top=plain] .sh-user .sh-av{background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:none}
.sh-menu{position:absolute;right:0;top:48px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,30,60,.2);min-width:250px;padding:6px;display:none}
.sh-menu.open{display:block}
.sh-menu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line2);margin-bottom:4px;font-size:12.5px;color:var(--muted)}
.sh-menu .who b{display:block;color:var(--text);font-size:14.5px}
.sh-menu a,.sh-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--text)}
.sh-menu a:hover,.sh-menu button:hover{background:var(--p-soft)}
.sh-menu svg{width:17px;height:17px;color:var(--muted)}
.sh-menu hr{border:0;border-top:1px solid var(--line2);margin:4px 0}
.sh-role{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;padding:2px 8px;border-radius:99px;background:var(--p-soft);color:var(--p-ink);font-weight:700;margin-left:6px}
#main{flex:1;overflow:auto;min-height:0;position:relative}
.sh-veil{display:none}

/* ---------------------------------------------------------------- "Change the look" panel */
.lk-veil{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:300;display:flex;justify-content:flex-end}
.lk{width:370px;max-width:100%;height:100%;background:var(--card);color:var(--text);display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.18);animation:lkin .18s}
@keyframes lkin{from{transform:translateX(30px);opacity:.4}}
.lk header{height:var(--th);flex:none;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--p);color:#fff;font-size:17px;font-weight:700}
.lk header svg{width:20px;height:20px}
.lk header button{all:unset;cursor:pointer;margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border-radius:8px}
.lk header button:hover{background:rgba(255,255,255,.18)}
.lk .lb{flex:1;overflow:auto;padding:6px 18px 18px}
.lk h4{margin:18px 0 8px;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.lk .sw{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px}
.lk .sw button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.lk .sw i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:18px;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.lk .sw button.on{color:var(--text);font-weight:700}
.lk .sw button.on i{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--p)}
.lk .seg{display:flex;background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:3px}
.lk .seg button{all:unset;cursor:pointer;flex:1;text-align:center;padding:8px 4px;border-radius:9px;font-size:13.5px;color:var(--muted)}
.lk .seg button.on{background:var(--card);color:var(--text);font-weight:700;box-shadow:0 1px 4px rgba(15,30,60,.14)}
.lk .note{font-size:12.5px;color:var(--muted);margin-top:18px;line-height:1.5}
.lk footer{flex:none;padding:14px 18px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}
.lk footer button{all:unset;cursor:pointer;text-align:center;padding:10px;border-radius:10px;font-weight:700;font-size:14px;border:1px solid var(--line)}
.lk footer button.pri{background:var(--p);color:#fff;border-color:var(--p)}
.lk footer button{display:flex;align-items:center;justify-content:center;gap:8px}
.lk footer svg,.sh-menu svg,.lk header svg{width:17px;height:17px;flex:none}
.veil .modal svg{width:16px;height:16px}

/* ---------------------------------------------------------------- toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;padding:11px 18px;border-radius:11px;font-size:13.5px;opacity:0;transition:.2s;z-index:400;pointer-events:none;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.err{background:#b91c1c}

/* ---------------------------------------------------------------- phone / small screens */
@media(max-width:900px){
  :root,html[data-menu]{--sw:0px}
  .sh-side{width:270px;transform:translateX(-100%);box-shadow:none}
  body.menu-open .sh-side{transform:none;box-shadow:10px 0 30px rgba(0,0,0,.25)}
  body.menu-open .sh-veil{display:block;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:55}
  html[data-menu=icons] .sh-side .sh-it span,html[data-menu=icons] .sh-side .sh-gh span{display:inline}
  .sh-top{padding:0 10px 0 6px;gap:6px}
  .sh-pill.date,.sh-pill .lbl,.sh-user .nm{display:none}
  .sh-title b{font-size:16px}
}

/* ---------------------------------------------------------------- print */
@media print{
  html{zoom:1!important}
  .sh-side,.sh-top,.lk-veil,#toast,.sh-veil{display:none!important}
  .sh-main{margin:0!important;height:auto;display:block}
  #main{overflow:visible}
  body{background:#fff!important;color:#000}
}