/* Author: Steven Thefaine */
/* =====================================================================
   ESI Portal — shared theme layer (E-Sign palette + ◐ menu-bar toggle)

   Injected into every signed-in portal/plugin page by main.py
   (ThemeInjectionMiddleware) together with /static/esi-theme.js, AFTER the
   page's own styles. Plugins don't need to link it themselves.

   Theme contract
     - localStorage['esiTheme'] = 'light' | 'dark'   (user's explicit choice)
     - no stored choice -> follow the OS (prefers-color-scheme)
     - the resolved value is ALWAYS written to <html data-theme="...">, so
       both old "dark default / [data-theme=light]" CSS and the E-Sign
       "light default / [data-theme=dark]" CSS resolve correctly.

   Specificity: tokens use html:root / html:root[data-theme=..] so they win
   over a plugin's own :root / :root[data-theme=..] blocks regardless of
   source order. Per-section accents set on <main class="sec-*"> still win
   because they sit lower in the tree.
   ===================================================================== */

/* ---- palette (from E-Sign) ------------------------------------------ */
html:root,
html:root[data-theme="light"]{
  --esi-bg:#f3f5f8; --esi-panel:#ffffff; --esi-panel-2:#f8fafc; --esi-ink:#1d2733;
  --esi-muted:#5f6b7a; --esi-soft:#8a95a3; --esi-line:#dde3ea; --esi-chip:#eef2f7;
  --esi-brand:#1f4e79; --esi-brand-ink:#ffffff; --esi-accent:#2e7dd7;
  --esi-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"]){
    --esi-bg:#0f141a; --esi-panel:#18202a; --esi-panel-2:#1d2632; --esi-ink:#e6ebf1;
    --esi-muted:#97a3b2; --esi-soft:#6f7b8a; --esi-line:#2a3542; --esi-chip:#223040;
    --esi-brand:#2b6aa5; --esi-accent:#5aa2f0; --esi-shadow:0 10px 28px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
html:root[data-theme="dark"]{
  --esi-bg:#0f141a; --esi-panel:#18202a; --esi-panel-2:#1d2632; --esi-ink:#e6ebf1;
  --esi-muted:#97a3b2; --esi-soft:#6f7b8a; --esi-line:#2a3542; --esi-chip:#223040;
  --esi-brand:#2b6aa5; --esi-accent:#5aa2f0; --esi-shadow:0 10px 28px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---- map the palette onto every token name the plugins use ---------- */
html:root,
html:root[data-theme="light"],
html:root[data-theme="dark"]{
  --bg:var(--esi-bg); --canvas:var(--esi-bg);
  --surface:var(--esi-panel); --card:var(--esi-panel); --panel:var(--esi-panel);
  --surface2:var(--esi-panel-2); --surface-2:var(--esi-panel-2); --surf2:var(--esi-panel-2); --s2:var(--esi-panel-2);
  --input-bg:var(--esi-panel); --hover:var(--esi-panel-2);
  --line:var(--esi-line); --line-2:var(--esi-line); --border:var(--esi-line);
  --text:var(--esi-ink); --ink:var(--esi-ink); --ink-2:var(--esi-muted);
  --muted:var(--esi-muted); --text-muted:var(--esi-muted); --soft:var(--esi-soft);
  --chip:var(--esi-chip); --neutral-bg:var(--esi-chip);
  --brand:var(--esi-brand); --brand-ink:var(--esi-brand-ink);
  --accent:var(--esi-accent);
  --accent-soft:color-mix(in srgb,var(--esi-accent) 16%,var(--esi-panel));
  --shadow:var(--esi-shadow);
}
html body{background:var(--esi-bg);color:var(--esi-ink)}

/* ---- the menu bar (E-Sign .topbar look) ------------------------------ */
/* header.top / header.topbar / .console-top are the shared portal bars;
   .esi-menubar is added by esi-theme.js to a plugin's own header. */
html body header.top,
html body header.topbar,
html body .console-top,
html body .esi-menubar{
  background:var(--esi-brand) !important;
  color:var(--esi-brand-ink) !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none;
}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.brand,.brand .mark,h1,strong,.name b,.mailbox-name,.header-title){color:#fff !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.tagline,.name,.who,.sub,small){color:#dbe7f3 !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) nav a,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .ddbtn,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .nav-link{
  color:#dbe7f3 !important;padding:7px 11px;border-radius:6px;background:none;
}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) nav a:hover,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) nav a.on,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) nav a.active,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .ddbtn:hover,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .dd.open .ddbtn{
  background:rgba(255,255,255,.14) !important;color:#fff !important;text-decoration:none;
}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .caret{color:#b9cde2}
/* dropdown panels drop OUT of the bar, so they keep the page colours */
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .ddmenu{background:var(--esi-panel);border-color:var(--esi-line)}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .ddmenu a{color:var(--esi-ink) !important;padding:8px 12px;border-radius:7px}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .ddmenu a:hover{background:var(--esi-chip) !important;color:var(--esi-ink) !important}

/* user badge + role pill + selects inside the bar */
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .user-badge{
  display:flex;align-items:center;gap:8px;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;color:#fff !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .user-badge strong{color:#fff !important;font-size:13px;font-weight:600}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .avatar{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18) !important;color:#fff !important;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.role,.pill,.scopebadge){
  background:rgba(255,255,255,.16) !important;color:#fff !important;border-color:transparent !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) select{
  background:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.35) !important;width:auto}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) select option{background:var(--esi-panel);color:var(--esi-ink)}

/* Portal Home / Logout / ◐ — all share the E-Sign .iconbtn style in the bar */
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(a.portal-link,.btn-logout,.esi-theme-btn,#themeBtn),
html body .esi-chrome :is(a.portal-link,.btn-logout,.esi-theme-btn){
  display:inline-flex;align-items:center;gap:6px;
  background:none !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important;
  border-radius:6px !important;padding:4px 10px !important;margin:0;
  font:600 13px/1.4 var(--esi-font,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif) !important;
  cursor:pointer;text-decoration:none !important;white-space:nowrap;box-shadow:none !important;height:auto;width:auto;
}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(a.portal-link,.btn-logout,.esi-theme-btn,#themeBtn):hover,
html body .esi-chrome :is(a.portal-link,.btn-logout,.esi-theme-btn):hover{
  background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.6) !important;color:#fff !important;transform:none}
html body .esi-theme-btn{min-width:32px;justify-content:center;font-size:14px !important;line-height:1.2 !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) form[action="/logout"]{display:inline-flex;margin:0}
html body .esi-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}

/* Pages with no menu bar (full-screen apps, popups): a small floating
   cluster in the old toggle's corner carries ◐ / Portal Home / Logout. */
html body .esi-chrome{
  position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;align-items:center;gap:6px;
  background:var(--esi-brand);padding:6px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
html body .esi-chrome form{display:inline-flex;margin:0}
@media print{html body .esi-chrome{display:none}}

/* other controls that live in a plugin's bar: outline-on-brand */
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.btn,.topbar-btn,.view-tab,.tu-link,.tu-logout,button.info){
  background:none !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important;box-shadow:none !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.btn,.topbar-btn,.view-tab,.tu-link,.tu-logout,button.info):hover,
html body :is(header.top,header.topbar,.console-top,.esi-menubar) .view-tab.active{
  background:rgba(255,255,255,.18) !important;color:#fff !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.view-tabs){background:none !important;border-color:rgba(255,255,255,.25) !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(input[type=text],input[type=search],input:not([type])){
  background:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.35) !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) ::placeholder{color:#c7d6e6 !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.brand,.topbar-brand,.logo,.topbar-title,.topbar-title span,.tu-name,.header-title,.title,label,.mailbox-sub,.subtitle){
  color:#fff !important;-webkit-text-fill-color:currentColor !important;background:none !important}
html body :is(header.top,header.topbar,.console-top,.esi-menubar) :is(.tu-avatar){background:rgba(255,255,255,.18) !important;color:#fff !important}
/* the inner .bar wrapper of header.top must stay transparent (some plugins
   also use .bar for progress bars) */
html body header.top > .bar{background:transparent !important;height:auto !important;border-radius:0 !important;overflow:visible !important;flex:initial}

/* dark mode: form fields with a hard-coded white fill follow the theme */
html:root[data-theme="dark"] body :is(input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],input[type=password],input[type=url],input:not([type]),select,textarea):not([disabled]){
  background-color:var(--esi-panel);color:var(--esi-ink);border-color:var(--esi-line)}

/* the old floating 🌙/☀️ buttons are superseded by ◐ */
html body #esi-theme-toggle{display:none !important}