/*
 * Premium shell shared by every authenticated ZamDir page.
 * It changes presentation only: no page order, ids or business behaviour.
 */

html[data-panel-look="atelier"] body {
  --bg:#12100e;
  --card:#1d1916;
  --text:#eee5d8;
  --muted:#9c9184;
  --line:#3a3129;
  --accent:#c5a56d;
  --good:#79a98d;
  --bad:#cf7b70;
  --zd-shell-surface:#1d1916;
  --zd-shell-surface-2:#25201b;
  --zd-shell-line:rgba(210,188,151,.2);
  --zd-shell-soft:rgba(197,165,109,.07);
  --zd-shell-shadow:0 18px 46px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,244,222,.045);
  color-scheme:dark;
}

html[data-panel-look="porcelain"] body {
  --bg:#eeeae2;
  --card:#faf8f3;
  --text:#251f20;
  --muted:#786f70;
  --line:#d7cfc5;
  --accent:#7d2c42;
  --good:#3c8060;
  --bad:#ad4c4c;
  --zd-shell-surface:#faf8f3;
  --zd-shell-surface-2:#fffdf9;
  --zd-shell-line:rgba(71,56,55,.16);
  --zd-shell-soft:rgba(125,44,66,.045);
  --zd-shell-shadow:0 22px 54px rgba(68,50,45,.08), inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light;
}

html[data-panel-look="titanium"] body {
  --bg:#11171d;
  --card:#18212a;
  --text:#eef3f6;
  --muted:#929eaa;
  --line:#33414e;
  --accent:#a5bfd4;
  --good:#6db397;
  --bad:#d57972;
  --zd-shell-surface:#18212a;
  --zd-shell-surface-2:#1d2933;
  --zd-shell-line:rgba(180,205,224,.19);
  --zd-shell-soft:rgba(165,191,212,.07);
  --zd-shell-shadow:0 24px 58px rgba(2,8,13,.32), inset 0 1px 0 rgba(225,240,250,.07);
  color-scheme:dark;
}

html[data-panel-look="ocean"] body {
  --bg:#07151c;
  --card:#0d222b;
  --text:#edf7f8;
  --muted:#8ca9b0;
  --line:#24434d;
  --accent:#72b9c6;
  --good:#69b8a0;
  --bad:#d47d76;
  --zd-shell-surface:#0d222b;
  --zd-shell-surface-2:#12303a;
  --zd-shell-line:rgba(146,205,215,.18);
  --zd-shell-soft:rgba(114,185,198,.07);
  --zd-shell-shadow:0 24px 62px rgba(0,7,12,.38), inset 0 1px 0 rgba(217,249,252,.065);
  color-scheme:dark;
}

html[data-panel-look="sapphire"] body {
  --bg:#0b1728;
  --card:#162640;
  --text:#e8effc;
  --muted:#91a4c2;
  --line:#2a4668;
  --accent:#6090ed;
  --good:#62bc8d;
  --bad:#d47b79;
  --zd-shell-surface:#162640;
  --zd-shell-surface-2:#1a2d49;
  --zd-shell-line:rgba(116,158,222,.22);
  --zd-shell-soft:rgba(96,144,237,.08);
  --zd-shell-shadow:0 24px 60px rgba(2,8,20,.38), inset 0 1px 0 rgba(220,233,255,.065);
  color-scheme:dark;
}

html[data-panel-look] body {
  min-height:100vh;
  color:var(--text) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  letter-spacing:-.008em;
  background:var(--bg) !important;
  transition:background-color .18s ease,color .18s ease;
}

html[data-panel-look="atelier"] body {
  background:
    radial-gradient(900px 440px at 16% 0,rgba(168,119,65,.13),transparent 66%),
    linear-gradient(145deg,#12100e,#15120f 52%,#100e0c) !important;
}

html[data-panel-look="porcelain"] body {
  background:
    radial-gradient(850px 430px at 7% 1%,rgba(148,109,85,.08),transparent 64%),
    linear-gradient(180deg,#f4f1ea 0%,#eeeae2 42%,#ebe6de 100%) !important;
}

html[data-panel-look="titanium"] body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  background:
    radial-gradient(940px 480px at 76% -6%,rgba(115,157,190,.16),transparent 64%),
    linear-gradient(145deg,#11171d 0%,#131a21 48%,#0e1419 100%) !important;
}

html[data-panel-look="ocean"] body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  background:
    radial-gradient(980px 540px at 18% -8%,rgba(55,146,165,.23),transparent 65%),
    radial-gradient(720px 460px at 92% 38%,rgba(23,88,111,.16),transparent 68%),
    linear-gradient(145deg,#06141b 0%,#09202a 48%,#061219 100%) !important;
}

html[data-panel-look="sapphire"] body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  background:
    radial-gradient(980px 500px at 78% -8%,rgba(69,111,190,.2),transparent 64%),
    linear-gradient(145deg,#0a1626 0%,#0d1b2e 52%,#091423 100%) !important;
}

html[data-panel-look] body > header:first-of-type {
  position:relative;
  border-color:var(--zd-shell-line) !important;
  background:color-mix(in srgb,var(--card) 94%,transparent) !important;
  box-shadow:0 15px 38px color-mix(in srgb,var(--bg) 32%,transparent),inset 0 -1px 0 var(--zd-shell-soft);
  backdrop-filter:blur(20px) saturate(112%);
}

html[data-panel-look="atelier"] body > header:first-of-type {
  background:linear-gradient(180deg,rgba(33,28,24,.98),rgba(20,17,15,.96)) !important;
}

html[data-panel-look="porcelain"] body > header:first-of-type {
  background:rgba(250,248,243,.91) !important;
}

html[data-panel-look="titanium"] body > header:first-of-type {
  background:linear-gradient(180deg,rgba(30,41,52,.96),rgba(17,24,31,.94)) !important;
}

html[data-panel-look="ocean"] body > header:first-of-type {
  background:linear-gradient(180deg,rgba(15,43,54,.96),rgba(7,24,32,.94)) !important;
}

html[data-panel-look="sapphire"] body > header:first-of-type {
  background:linear-gradient(180deg,rgba(15,29,50,.97),rgba(9,21,37,.95)) !important;
}

html[data-panel-look] body > header:first-of-type > h1:first-child {
  color:var(--text) !important;
}

html[data-panel-look="atelier"] body > header:first-of-type > h1:first-child,
html[data-panel-look="porcelain"] body > header:first-of-type > h1:first-child {
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
}

html[data-panel-look] body > header:first-of-type nav a {
  border-color:var(--zd-shell-line) !important;
  background:color-mix(in srgb,var(--card) 86%,transparent) !important;
  color:var(--muted) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 5%,transparent);
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease;
}

html[data-panel-look] body > header:first-of-type nav a:hover {
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line)) !important;
  color:var(--text) !important;
  transform:translateY(-1px);
}

html[data-panel-look] body > header:first-of-type nav a:is(.zd-current,[aria-current="page"]),
html[data-panel-look] body > header:first-of-type nav a[style*="background:var(--accent)"] {
  border-color:var(--accent) !important;
  background:var(--accent) !important;
  color:color-mix(in srgb,var(--bg) 92%,black) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 18px color-mix(in srgb,var(--accent) 19%,transparent);
}

html[data-panel-look] body > main h1,
html[data-panel-look] body > main h2,
html[data-panel-look] body > main h3 {
  color:var(--text);
  letter-spacing:-.025em;
}

html[data-panel-look="atelier"] body > main h1,
html[data-panel-look="atelier"] body > main h2,
html[data-panel-look="porcelain"] body > main h1,
html[data-panel-look="porcelain"] body > main h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

/* Preview selector. One choice is remembered and follows navigation. */
#panelLookPicker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:auto;
  margin:18px 0 0;
  padding:8px 9px 8px 14px;
  border:1px solid var(--zd-shell-line,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,var(--card) 78%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 7%,transparent),0 9px 25px color-mix(in srgb,var(--bg) 18%,transparent);
  backdrop-filter:blur(14px);
}

body > #panelLookPicker {
  margin:18px auto;
  width:min(1100px,calc(100% - 32px));
}

#panelLookPicker .zd-look-label {
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  white-space:nowrap;
}

#panelLookPicker .zd-look-buttons {
  display:inline-flex;
  gap:4px;
  padding:3px;
  border:1px solid var(--zd-shell-line,var(--line));
  border-radius:11px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  box-shadow:inset 0 2px 4px color-mix(in srgb,var(--bg) 26%,transparent);
}

#panelLookPicker button {
  min-height:30px !important;
  padding:5px 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--muted) !important;
  font:650 12px/18px inherit !important;
  box-shadow:none !important;
  cursor:pointer;
}

#panelLookPicker button[aria-pressed="true"] {
  background:var(--zd-shell-surface-2,var(--card)) !important;
  color:var(--text) !important;
  box-shadow:0 2px 8px color-mix(in srgb,var(--bg) 28%,transparent),inset 0 1px 0 color-mix(in srgb,white 8%,transparent) !important;
}

html[data-panel-look="porcelain"] #panelLookPicker button[aria-pressed="true"] {
  background:#fffdf9 !important;
}

html[data-panel-look="titanium"] #panelLookPicker button[aria-pressed="true"] {
  background:linear-gradient(180deg,rgba(94,124,147,.32),rgba(46,64,78,.42)) !important;
}

html[data-panel-look="ocean"] #panelLookPicker button[aria-pressed="true"] {
  background:linear-gradient(180deg,rgba(59,138,154,.4),rgba(23,76,89,.48)) !important;
}

html[data-panel-look="sapphire"] #panelLookPicker button[aria-pressed="true"] {
  background:linear-gradient(180deg,rgba(80,125,210,.5),rgba(43,76,137,.5)) !important;
}

/* Shared controls and data surfaces keep page-specific dimensions. */
html[data-panel-look] body > main :is(button,input,select,textarea) {
  border-color:var(--zd-shell-line) !important;
  border-radius:10px !important;
  color:var(--text);
  font-family:inherit;
}

html[data-panel-look] body > main :is(input,select,textarea),
html[data-panel-look] body > main button:not(.main):not([style*="background:var(--accent)"]) {
  background:color-mix(in srgb,var(--bg) 76%,var(--card)) !important;
  box-shadow:inset 0 2px 5px color-mix(in srgb,var(--bg) 22%,transparent),0 1px 0 color-mix(in srgb,white 6%,transparent);
}

html[data-panel-look] body > main :is(input,select,textarea):focus,
html[data-panel-look] body > main button:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 24%,transparent) !important;
  outline-offset:1px;
}

html[data-panel-look] body > main :is(.card,.chart,.item,.kpi,.panel,.box) {
  border-color:var(--zd-shell-line) !important;
  background-color:var(--zd-shell-surface) !important;
  box-shadow:var(--zd-shell-shadow);
}

html[data-panel-look] body > main :is(table,details) {
  border-color:var(--zd-shell-line) !important;
}

html[data-panel-look] body > main table {
  background-color:color-mix(in srgb,var(--card) 94%,transparent) !important;
}

html[data-panel-look] body > main :is(th,td) {
  border-color:var(--zd-shell-line) !important;
}

/* Legacy pages contain a few dark inline surfaces. Make them theme-safe. */
html[data-panel-look] body #callPopup {
  background:var(--zd-shell-surface-2) !important;
  color:var(--text) !important;
  border-color:var(--accent) !important;
}

html[data-panel-look] body tr.grp > td,
html[data-panel-look] body [style*="background:#20242e"] {
  background:color-mix(in srgb,var(--card) 86%,var(--bg)) !important;
  color:var(--accent) !important;
}

html[data-panel-look] body .alert {
  background:color-mix(in srgb,var(--bad) 12%,var(--card)) !important;
  border-color:color-mix(in srgb,var(--bad) 45%,var(--line)) !important;
  color:color-mix(in srgb,var(--bad) 78%,var(--text)) !important;
}

html[data-panel-look] #zd-whoami {
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 7px 5px 11px;
  border-radius:18px;
  border:1px solid var(--zd-shell-line) !important;
  background:color-mix(in srgb,var(--card) 94%,transparent) !important;
  color:var(--text) !important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--bg) 38%,transparent) !important;
  backdrop-filter:blur(16px);
}

html[data-panel-look] #zd-whoami .zd-whoami-name {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html[data-panel-look] #zd-whoami .zd-notification-toggle {
  min-height:28px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  border-radius:12px;
  background:transparent;
  color:var(--accent);
  font:650 11px/18px inherit;
  white-space:nowrap;
  cursor:pointer;
}

html[data-panel-look] #zd-whoami .zd-notification-toggle[data-state="granted"] {
  border-color:color-mix(in srgb,var(--good) 55%,var(--line));
  color:var(--good);
}

html[data-panel-look] #zd-whoami .zd-notification-toggle[data-state="denied"],
html[data-panel-look] #zd-whoami .zd-notification-toggle:disabled {
  border-color:var(--line);
  color:var(--muted);
}

html[data-panel-look] #zd-whoami .zd-logout {
  padding-left:8px;
  border-left:1px solid var(--zd-shell-line);
}

html[data-panel-look] #zd-whoami a { color:var(--accent) !important; }

@media (max-width:720px) {
  #panelLookPicker {
    align-items:flex-start;
    flex-direction:column;
    padding:10px;
  }
  #panelLookPicker .zd-look-buttons { width:100%; }
  #panelLookPicker button { flex:1; }
}