/* Phase 8X.2 (ADR-018 admin): operator-twin design tokens for the admin
   surface. Extracted from TRXC admin (~/Desktop/tradityqrr/admin/index.html)
   light-theme palette. Coexists with existing Tailwind utility classes —
   this file ONLY publishes CSS custom properties + a couple of base
   defaults. Pages can opt-in to operator-twin look via .op-twin-* classes
   without removing the existing Tailwind layout.

   Companion to algopartner-frontends/affiliate/css/operator-twin.css
   (Phase 8EF Slice 5) which is the dark-mode variant for end-user-facing
   surfaces. This file is the light-mode operator variant.
*/

:root {
  /* Surfaces (light mode default) */
  --op-bg:          #F5F5F0;
  --op-bg2:         #EFEEE8;
  --op-card:        #FFFFFF;
  --op-card2:       #FAFAF6;
  --op-border:      #E5E4DE;
  --op-border2:     #CECDC3;

  /* Text */
  --op-ink:         #0F1419;
  --op-ink-soft:    #1A2028;
  --op-muted:       #6B7280;
  --op-subtle:      #9CA3AF;

  /* Accents */
  --op-accent:      #059669;       /* emerald primary */
  --op-accent-deep: #064E3B;
  --op-accent-soft: #D1FAE5;
  --op-gold:        #D97706;       /* amber / warning */
  --op-gold-soft:   #FEF3C7;
  --op-red:         #DC2626;
  --op-red-soft:    #FEE2E2;
  --op-cyan:        #0891B2;       /* affiliate-related */

  /* Sidebar (always dark, even in light mode) */
  --op-sidebar-bg:    #0F1419;
  --op-sidebar-ink:   #F5F5F0;
  --op-sidebar-muted: #6B7280;
  --op-sidebar-hover: #1A2028;

  /* Per-brand accent: defaults to operator-twin emerald; brand-context.js
     overrides this via document.documentElement.style.setProperty when on a
     per-brand subdomain. */
  --brand-primary: var(--op-accent);

  /* Shadows */
  --op-shadow-sm:   0 1px 2px rgba(15,20,25,.04);
  --op-shadow-md:   0 2px 8px rgba(15,20,25,.06);
}

/* ── Body classes set by brand-context.js applyTheme() ───────────────
   • .master-view  → master admin (admin.algopartner.xyz). AlgoPartner
                     branding visible. Brand picker shown.
   • .brand-view   → per-brand subdomain (admin.trxcqrr.com etc.). Brand
                     picker hidden via _hideMasterOnlyElements. AlgoPartner
                     strings rewritten by _rewriteVisibleText.
   • .brand-<id>   → brand-specific class (e.g., .brand-trxc, .brand-etc)
                     for any per-brand CSS overrides Phase 8X.3+ may add.
*/

body.brand-view .master-only { display: none !important; }
body.brand-view .master-only-brand-picker { display: none !important; }
body.master-view .brand-only { display: none !important; }

/* ── Operator-twin opt-in components (rare / progressive enhancement) ──
   The existing admin pages use Tailwind utility classes. Pages can
   selectively adopt these classes during gradual visual cleanup without
   the file forcing a rewrite. */

.op-twin-card {
  background: var(--op-card);
  border: 1px solid var(--op-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--op-shadow-sm);
}

.op-twin-topbar-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--op-ink);
}

.op-twin-topbar-sub {
  font-size: 12px;
  color: var(--op-muted);
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace;
}

.op-twin-accent { color: var(--brand-primary); }
.op-twin-accent-bg { background-color: var(--brand-primary); color: #fff; }
.op-twin-accent-border { border-color: var(--brand-primary); }

/* Forbidden / 403 fallback when a master-only page is accessed on a
   per-brand subdomain. Used by brand-context.js requireMasterView(). */
.op-twin-forbidden {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 48px 24px;
  max-width: 520px;
  margin: 0 auto;
  color: var(--op-ink);
}

/* ─────────────────────────────────────────────────────────────────
   Phase 8X.7.3: master-admin sidebar nav layout (desktop only).
   Repositions the existing top-header structure into a left fixed
   sidebar at ≥1024px. Mobile keeps the original top-bar layout.

   Pages opt in by virtue of loading operator-twin-admin.css (all 16
   master pages). admin.html (TRXC SPA at admin.trxcqrr.com) does not
   load this file so it stays unaffected.

   Pure CSS override of Tailwind utilities — no HTML changes needed.
   Selectors chained off `body > header` give enough specificity to
   override the utility classes for layout-shaping properties.
   ───────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  body > header {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    height: 100vh;
    background: var(--op-sidebar-bg);
    border-bottom: 0;
    border-right: 1px solid #2A3038;
    overflow-y: auto;
    z-index: 40;
  }
  body > header > div {
    max-width: none;
    height: 100%;
    padding: 1.5rem 1rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
  }
  body > header > div > div:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  body > header > div > div:first-child > a {
    color: var(--op-sidebar-ink);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2A3038;
  }
  body > header > div > div:first-child > a span {
    color: var(--op-sidebar-ink);
  }
  body > header nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }
  body > header nav a {
    color: var(--op-sidebar-muted);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 13px;
    line-height: 1.4;
  }
  body > header nav a:hover {
    background: var(--op-sidebar-hover);
    color: var(--op-sidebar-ink);
  }
  /* Active page indicator — pages set this class. */
  body > header nav a.font-semibold {
    background: var(--op-sidebar-hover);
    color: var(--op-sidebar-ink);
  }
  /* Brand picker + user chip / logout: push to bottom of sidebar */
  body > header > div > div:last-child,
  body > header button#logout-btn {
    margin-top: auto;
  }
  body > header button#logout-btn {
    color: var(--op-sidebar-muted);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
  }
  body > header button#logout-btn:hover {
    background: var(--op-sidebar-hover);
    color: var(--op-sidebar-ink);
  }
  body > header #brand-picker-wrap,
  body > header #user-chip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  /* Main content offset by sidebar width. */
  body > main {
    margin-left: 240px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Phase 8X.7.6: master-admin pages mobile fallback (<1024px).
   The 16 master pages share a top-header with 14+ inline nav links.
   On mobile this overflows the viewport horizontally; the sidebar
   layout above only kicks in at ≥1024px, so mobile gets the original
   top-bar — but with the nav hidden so the layout doesn't break.
   Master pages are desktop-first by design; mobile users navigate by
   URL or via the dashboard's main content cards.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Hide the inline nav links on mobile master pages. Logo + (when present)
     brand picker + logout stay visible. */
  body > header nav {
    display: none;
  }
  /* Compact the header bar — when nav is hidden, the row only needs ~56px. */
  body > header > div {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
  }
  /* Prevent horizontal scroll if any inline content is wider than viewport. */
  body > main {
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
    overflow-x: hidden;
  }
  /* Tables: enable horizontal scroll on overflow rather than breaking layout. */
  body > main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}