/* ===================================================================================
   BABUBA SKINS - one panel, two looks, driven by the tenant's COHORT.

   Loaded AFTER babuba-theme.css, unlayered, so these values win with no !important.

     data-skin="ghost"   -> warm black + lime, the default Babuba look
     data-skin="traders" -> a trading terminal, in BOTH themes:
                            full token set for dark AND for light (not a dark patch),
                            dense mono/tabular figures, hairline panels, sharp corners,
                            market green/red/amber semantics, tape strip + status line.

   Source of truth: /opt/ghost_agent/ops/panel/skin/. Installed by
   ops/panel/skin/install-skin.sh. Tenants read the master's panel (read-only bind),
   so ONE copy here styles every tenant.
   =================================================================================== */

/* ==================================================================================
   TRADERS - DARK
   ================================================================================== */
html.dark[data-skin="traders"] {
  /* surfaces: colder and flatter than the warm ghost black */
  --ta-canvas:   #05070A;
  --ta-panel:    #0C1014;
  --ta-raised:   #11161B;
  --ta-well:     #080B0F;
  --ta-line:     #1B222A;
  --ta-line-2:   #2A333D;
  --ta-text:     #E6EBF2;
  --ta-muted:    #8A96A3;
  --ta-faint:    #5C6773;
  --ta-up:       #12B981;
  --ta-down:     #F04A54;
  --ta-flat:     #8A96A3;
  --ta-amber:    #F2A93B;
  --ta-blue:     #4C9EFF;
  --ta-accent:   #12B981;
  --ta-on-accent:#04120C;
  --ta-grid:     rgba(255, 255, 255, 0.022);
  --ta-hover:    rgba(18, 185, 129, 0.07);
  --ta-sel:      rgba(18, 185, 129, 0.13);
  --ta-tape-bg:  #070A0E;

  --color-gray-50: #05070A;
  --color-gray-100: #0C1014;
  --color-gray-200: #141A20;
  --color-gray-300: #1B222A;
  --color-gray-400: #8A96A3;
  --color-gray-500: #9AA5B1;
  --color-gray-600: #B4BEC9;
  --color-gray-700: #CBD4DD;
  --color-gray-800: #E1E8EF;
  --color-gray-900: #F0F4F8;
  --color-gray-950: #F8FAFC;

  --color-slate-50: #05070A;
  --color-slate-100: #0C1014;
  --color-slate-200: #141A20;
  --color-slate-300: #1B222A;
  --color-slate-400: #8A96A3;
  --color-slate-500: #9AA5B1;
  --color-slate-600: #B4BEC9;
  --color-slate-700: #CBD4DD;
  --color-slate-800: #E1E8EF;
  --color-slate-900: #F0F4F8;
  --color-slate-950: #F8FAFC;

  --color-zinc-50: #05070A;
  --color-zinc-100: #0C1014;
  --color-zinc-200: #141A20;
  --color-zinc-300: #1B222A;
  --color-zinc-400: #8A96A3;
  --color-zinc-500: #9AA5B1;
  --color-zinc-600: #B4BEC9;
  --color-zinc-700: #CBD4DD;
  --color-zinc-800: #E1E8EF;
  --color-zinc-900: #F0F4F8;

  --color-blue-50: #080D14;
  --color-blue-100: #0D1520;
  --color-blue-200: #12202F;
  --color-blue-300: #1A2C3F;
  --color-blue-400: #4C9EFF;
  --color-blue-500: #4C9EFF;
  --color-blue-600: #6FB2FF;
  --color-blue-700: #93C6FF;
  --color-blue-800: #B8DAFF;
  --color-blue-900: #DDEEFF;
  --color-indigo-300: #22303C;
  --color-indigo-400: #8A96A3;
  --color-indigo-500: #6FB2FF;
  --color-indigo-600: #4C9EFF;

  /* market semantics - up/down/etc. read the same in every chart and table */
  --color-emerald-300: #4FE3AE;
  --color-emerald-400: #2ACF97;
  --color-emerald-500: #12B981;
  --color-emerald-600: #0EA271;
  --color-emerald-700: #0B8760;
  --color-green-400: #2ACF97;
  --color-green-500: #12B981;
  --color-green-600: #0EA271;
  --color-teal-400: #2ACF97;
  --color-teal-500: #12B981;
  --color-red-300: #F5838A;
  --color-red-400: #F2626B;
  --color-red-500: #F04A54;
  --color-red-600: #D93641;
  --color-rose-400: #F2626B;
  --color-rose-500: #F04A54;
  --color-rose-600: #D93641;
  --color-amber-300: #F7CE85;
  --color-amber-400: #F2B65A;
  --color-amber-500: #F2A93B;
  --color-amber-600: #DE9327;

  --ba-bg: #05070A;
  --ba-fg: #E6EBF2;
  --ba-dim: #8A96A3;
  --ba-border: #1B222A;
  --ba-code-bg: #080B0F;
  --ba-blue: #4C9EFF;
  --ba-green: #12B981;
  --ba-violet: #8A7CFF;
  --bb-ink: #05070A;
  --bb-panel: #11161B;
  --bb-lime: #12B981;
  --bb-text: #E6EBF2;
  --bb-amber: #F2A93B;
  --bb-green: #12B981;
  --bb-muted: #8A96A3;
  --bb-line: #1B222A;
}

/* ==================================================================================
   TRADERS - LIGHT. Same structure, inverted ramp. This is the half that was missing:
   the skin is a theme PAIR, so it survives the dark/light toggle.
   ================================================================================== */
html:not(.dark)[data-skin="traders"] {
  --ta-canvas:   #F1F4F8;
  --ta-panel:    #FFFFFF;
  --ta-raised:   #FFFFFF;
  --ta-well:     #F7F9FC;
  --ta-line:     #DCE3EB;
  --ta-line-2:   #C3CDD8;
  --ta-text:     #0C1218;
  --ta-muted:    #56626F;
  --ta-faint:    #808C99;
  --ta-up:       #0B8F5F;
  --ta-down:     #CE2B34;
  --ta-flat:     #6B7784;
  --ta-amber:    #9A6603;
  --ta-blue:     #0B67C2;
  --ta-accent:   #0B8F5F;
  --ta-on-accent:#FFFFFF;
  --ta-grid:     rgba(12, 18, 24, 0.030);
  --ta-hover:    rgba(11, 143, 95, 0.07);
  --ta-sel:      rgba(11, 143, 95, 0.11);
  --ta-tape-bg:  #FFFFFF;

  --color-gray-50: #FFFFFF;
  --color-gray-100: #F6F8FB;
  --color-gray-200: #E9EDF2;
  --color-gray-300: #DCE3EB;
  --color-gray-400: #808C99;
  --color-gray-500: #6B7784;
  --color-gray-600: #56626F;
  --color-gray-700: #3E4A56;
  --color-gray-800: #2A3440;
  --color-gray-900: #0C1218;
  --color-gray-950: #060A0E;

  --color-slate-50: #FFFFFF;
  --color-slate-100: #F6F8FB;
  --color-slate-200: #E9EDF2;
  --color-slate-300: #DCE3EB;
  --color-slate-400: #808C99;
  --color-slate-500: #6B7784;
  --color-slate-600: #56626F;
  --color-slate-700: #3E4A56;
  --color-slate-800: #2A3440;
  --color-slate-900: #0C1218;
  --color-slate-950: #060A0E;

  --color-zinc-50: #FFFFFF;
  --color-zinc-100: #F6F8FB;
  --color-zinc-200: #E9EDF2;
  --color-zinc-300: #DCE3EB;
  --color-zinc-400: #808C99;
  --color-zinc-500: #6B7784;
  --color-zinc-600: #56626F;
  --color-zinc-700: #3E4A56;
  --color-zinc-800: #2A3440;
  --color-zinc-900: #0C1218;

  --color-blue-50: #F1F7FE;
  --color-blue-100: #E2EFFD;
  --color-blue-200: #C6DFFB;
  --color-blue-300: #9CC7F7;
  --color-blue-400: #4C9EFF;
  --color-blue-500: #0B67C2;
  --color-blue-600: #0A5AA9;
  --color-blue-700: #084C90;
  --color-blue-800: #063D74;
  --color-blue-900: #042E58;
  --color-indigo-300: #C6D3E2;
  --color-indigo-400: #6B7784;
  --color-indigo-500: #0B67C2;
  --color-indigo-600: #0A5AA9;

  --color-emerald-300: #12B981;
  --color-emerald-400: #0EA271;
  --color-emerald-500: #0B8F5F;
  --color-emerald-600: #0A7C52;
  --color-emerald-700: #086846;
  --color-green-400: #0EA271;
  --color-green-500: #0B8F5F;
  --color-green-600: #0A7C52;
  --color-teal-400: #0EA271;
  --color-teal-500: #0B8F5F;
  --color-red-300: #F0A0A6;
  --color-red-400: #DE5A62;
  --color-red-500: #CE2B34;
  --color-red-600: #B02229;
  --color-rose-400: #DE5A62;
  --color-rose-500: #CE2B34;
  --color-rose-600: #B02229;
  --color-amber-300: #E0B45C;
  --color-amber-400: #C68B12;
  --color-amber-500: #9A6603;
  --color-amber-600: #855701;

  --ba-bg: #F1F4F8;
  --ba-fg: #0C1218;
  --ba-dim: #56626F;
  --ba-border: #DCE3EB;
  --ba-code-bg: #F7F9FC;
  --ba-blue: #0B67C2;
  --ba-green: #0B8F5F;
  --bb-ink: #F1F4F8;
  --bb-panel: #FFFFFF;
  --bb-lime: #0B8F5F;
  --bb-text: #0C1218;
  --bb-amber: #9A6603;
  --bb-green: #0B8F5F;
  --bb-muted: #56626F;
  --bb-line: #DCE3EB;
}

/* ----------------------------------------------------------------------------------
   BASE - paint the canvas in both themes
   ---------------------------------------------------------------------------------- */
html.dark[data-skin="traders"],
html.dark[data-skin="traders"] body { background: var(--ta-canvas); color: var(--ta-text); }
html:not(.dark)[data-skin="traders"],
html:not(.dark)[data-skin="traders"] body { background: var(--ta-canvas); color: var(--ta-text); }

/* faint data lattice behind everything - the terminal desk feel */
html[data-skin="traders"] body {
  background-image:
    linear-gradient(var(--ta-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ta-grid) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  font-variant-numeric: tabular-nums;
}

/* every number, ticker and code column is mono + tabular, never proportional */
html[data-skin="traders"] code,
html[data-skin="traders"] pre,
html[data-skin="traders"] table,
html[data-skin="traders"] th,
html[data-skin="traders"] td,
html[data-skin="traders"] [class*="font-mono"],
html[data-skin="traders"] [class*="tabular"],
html[data-skin="traders"] input,
html[data-skin="traders"] select {
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------------------------
   TAPE - the top market strip (markup injected by babuba-skin.js)
   ---------------------------------------------------------------------------------- */
html[data-skin="traders"] #ba-tape {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 70;
  display: flex; align-items: center; gap: 0;
  background: var(--ta-tape-bg);
  border-bottom: 1px solid var(--ta-line);
  color: var(--ta-muted);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1;
  overflow: hidden;
}
html[data-skin="traders"] #ba-tape .ta-session {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 100%; flex: 0 0 auto;
  border-right: 1px solid var(--ta-line);
  color: var(--ta-text); font-weight: 600; letter-spacing: 0.08em;
}
html[data-skin="traders"] #ba-tape .ta-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ta-faint);
}
html[data-skin="traders"] #ba-tape .ta-dot.open { background: var(--ta-up); animation: ta-pulse 1.6s ease-in-out infinite; }
html[data-skin="traders"] #ba-tape .ta-dot.pre { background: var(--ta-amber); }
@keyframes ta-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

html[data-skin="traders"] #ba-tape .ta-scroll {
  display: flex; align-items: center; gap: 22px; flex: 1 1 auto;
  overflow: hidden; white-space: nowrap; padding: 0 14px;
}
html[data-skin="traders"] #ba-tape .ta-item { display: inline-flex; align-items: baseline; gap: 6px; }
html[data-skin="traders"] #ba-tape .ta-label { color: var(--ta-faint); letter-spacing: 0.06em; }
html[data-skin="traders"] #ba-tape .ta-price { color: var(--ta-text); font-weight: 600; }
html[data-skin="traders"] #ba-tape .ta-chg { font-weight: 600; }
html[data-skin="traders"] #ba-tape .ta-chg.up { color: var(--ta-up); }
html[data-skin="traders"] #ba-tape .ta-chg.down { color: var(--ta-down); }
html[data-skin="traders"] #ba-tape .ta-chg.flat { color: var(--ta-flat); }
html[data-skin="traders"] #ba-tape .ta-clock {
  flex: 0 0 auto; padding: 0 12px; height: 100%; display: flex; align-items: center;
  border-left: 1px solid var(--ta-line); color: var(--ta-text); letter-spacing: 0.06em;
}

/* the app shell slides down under the tape - nothing else moves */
html[data-skin="traders"] body > #root > div:first-child {
  margin-top: 30px;
  height: calc(100vh - 30px);
}

/* ----------------------------------------------------------------------------------
   STATUS LINE - bottom rail (injected), the "terminal" signature
   ---------------------------------------------------------------------------------- */
html[data-skin="traders"] #ba-status {
  position: fixed; bottom: 0; left: 0; right: 0; height: 22px; z-index: 70;
  display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: var(--ta-tape-bg);
  border-top: 1px solid var(--ta-line);
  color: var(--ta-faint);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-skin="traders"] #ba-status b { color: var(--ta-text); font-weight: 600; }
html[data-skin="traders"] #ba-status .ok { color: var(--ta-up); }

/* ----------------------------------------------------------------------------------
   SHELL - rail, panels, headings
   ---------------------------------------------------------------------------------- */
html[data-skin="traders"] aside {
  background: var(--ta-panel);
  border-right: 1px solid var(--ta-line);
}
html[data-skin="traders"] aside a,
html[data-skin="traders"] aside button,
html[data-skin="traders"] nav a,
html[data-skin="traders"] nav button {
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-skin="traders"] aside ::-webkit-scrollbar { width: 6px; }

html[data-skin="traders"] h1 { font-size: 19px; letter-spacing: 0.01em; text-transform: none; }
html[data-skin="traders"] h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ta-muted); }

/* panels: hairline, sharp, flat */
html[data-skin="traders"] [class*="rounded-xl"],
html[data-skin="traders"] [class*="rounded-2xl"],
html[data-skin="traders"] [class*="rounded-lg"] { border-radius: 3px; }
html[data-skin="traders"] [class~="bg-white"],
html[data-skin="traders"] [class~="bg-gray-100"],
html[data-skin="traders"] [class~="bg-slate-800"],
html[data-skin="traders"] [class~="bg-slate-900"] {
  border: 1px solid var(--ta-line);
}
html[data-skin="traders"] [class*="shadow"] { box-shadow: none; }

/* ----------------------------------------------------------------------------------
   TABLES - dense, mono, hover rail
   ---------------------------------------------------------------------------------- */
html[data-skin="traders"] table { border-collapse: collapse; width: 100%; font-size: 12px; }
html[data-skin="traders"] thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ta-faint); font-weight: 600;
  border-bottom: 1px solid var(--ta-line-2);
  padding: 7px 10px; text-align: left;
}
html[data-skin="traders"] tbody td {
  padding: 6px 10px; border-bottom: 1px solid var(--ta-line); color: var(--ta-text);
}
html[data-skin="traders"] tbody tr:nth-child(even) { background: var(--ta-hover); background: rgba(125, 135, 145, 0.04); }
html[data-skin="traders"] tbody tr:hover { background: var(--ta-sel); box-shadow: inset 2px 0 0 var(--ta-accent); }
html[data-skin="traders"] td[class*="text-right"], html[data-skin="traders"] th[class*="text-right"] { text-align: right; }

/* ----------------------------------------------------------------------------------
   CONTROLS - terminal keys
   ---------------------------------------------------------------------------------- */
html[data-skin="traders"] button:not([class*="rounded-full"]) {
  border-radius: 2px; letter-spacing: 0.04em;
}
html[data-skin="traders"] input,
html[data-skin="traders"] select,
html[data-skin="traders"] textarea {
  background: var(--ta-well);
  border: 1px solid var(--ta-line-2);
  border-radius: 2px;
  color: var(--ta-text);
  font-size: 12px;
}
html[data-skin="traders"] input:focus,
html[data-skin="traders"] select:focus,
html[data-skin="traders"] textarea:focus {
  outline: none; border-color: var(--ta-accent);
  box-shadow: 0 0 0 2px var(--ta-sel);
}
html[data-skin="traders"] [class~="bg-indigo-500"],
html[data-skin="traders"] [class~="bg-indigo-600"] {
  background-color: var(--ta-accent); color: var(--ta-on-accent);
}

/* scrollbars */
html[data-skin="traders"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-skin="traders"] ::-webkit-scrollbar-track { background: transparent; }
html[data-skin="traders"] ::-webkit-scrollbar-thumb { background: var(--ta-line-2); border-radius: 2px; }
html[data-skin="traders"] ::-webkit-scrollbar-thumb:hover { background: var(--ta-muted); }

/* ----------------------------------------------------------------------------------
   GHOST - untouched. The default look stays exactly as it was.
   ---------------------------------------------------------------------------------- */