/* ===========================================================
   PHAZOR panel — "Ops console" alternate theme (ops-theme.css)
   Loaded AFTER panel-theme.css. Active ONLY when the root
   element carries data-dash="ops", and scoped ONLY to the
   three logged-in views (#accountView / #mediaView / #adminView)
   plus their app-route chrome (topbar / sidebar).

   Reproduces the _mock/dash-b.html "ops console" look on the
   panel's real classes: near-black surfaces, a faint 1px grid,
   sharp ~5px corners, hairline rules, JetBrains Mono labels,
   dense compact tiles/tables, cyan (#45e6ff) used sparingly.

   Pure visual: never touches .hidden / display / visibility.
   When data-dash is absent or "cosmic", every rule below is
   inert (all gated behind [data-dash="ops"]).

   The .dash-switch control styling at the bottom is UN-gated
   so the switch looks correct in BOTH themes.
   =========================================================== */

/* ---------- ops palette (scoped to the three views) ---------- */
[data-dash="ops"] #accountView,
[data-dash="ops"] #mediaView,
[data-dash="ops"] #adminView {
  --ops-bg: #050507;
  --ops-bg-2: #08080b;
  --ops-panel: #0a0a0e;
  --ops-panel-2: #040406;
  --ops-line: rgba(255, 255, 255, 0.10);
  --ops-line-2: rgba(255, 255, 255, 0.18);
  --ops-ink: #e8e8ee;
  --ops-ink-2: #9a9aab;
  --ops-ink-3: #5f5f70;
  --ops-cyan: #45e6ff;
  --ops-ok: #57e39b;
  --ops-warn: #ffce5c;
  --ops-err: #ff6b6b;
  --ops-mono: "JetBrains Mono", ui-monospace, monospace;
  --ops-r: 5px;
}

/* ---------- 1. view canvas: near-black + faint 1px grid ---------- */
[data-dash="ops"] #accountView,
[data-dash="ops"] #mediaView,
[data-dash="ops"] #adminView {
  background-color: var(--ops-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ops-ink);
}

/* kill the cosmic aurora/field bleed-through under ops views */
[data-dash="ops"] body:has(#accountView:not(.hidden)) #phzField,
[data-dash="ops"] body:has(#mediaView:not(.hidden)) #phzField,
[data-dash="ops"] body:has(#adminView:not(.hidden)) #phzField { opacity: 0.12; }

/* mono for kickers / labels / metric numbers inside ops views */
[data-dash="ops"] #accountView .mono,
[data-dash="ops"] #mediaView .mono,
[data-dash="ops"] #adminView .mono { color: var(--ops-cyan); letter-spacing: .16em; }

/* ---------- 2. app-route chrome: sidebar + topbars ---------- */
[data-dash="ops"] .dashboard-sidebar {
  border-right: 1px solid var(--ops-line);
  background: var(--ops-panel);
  backdrop-filter: none;
}
[data-dash="ops"] .admin-topbar {
  border-bottom: 1px solid var(--ops-line);
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(8px);
}
[data-dash="ops"] .dashboard-sidebar .brand,
[data-dash="ops"] .admin-topbar .brand { color: var(--ops-ink); }
[data-dash="ops"] .admin-topbar .brand-build { color: var(--ops-ink-3); background: var(--ops-panel); border-radius: 3px; }

/* side navigation links — console rail */
[data-dash="ops"] .side-link {
  color: var(--ops-ink-3);
  font-family: var(--ops-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  border-radius: 0;
}
[data-dash="ops"] .side-link:hover { color: var(--ops-ink-2); background: rgba(255, 255, 255, 0.02); }
[data-dash="ops"] .side-link.active {
  color: var(--ops-cyan);
  background: rgba(69, 230, 255, 0.06);
  border-left-color: var(--ops-cyan);
  box-shadow: none;
}
[data-dash="ops"] .media-side-link { color: var(--ops-cyan); }
[data-dash="ops"] .sidebar-bottom { border-top: 1px solid var(--ops-line); }
[data-dash="ops"] .sidebar-bottom a,
[data-dash="ops"] .sidebar-bottom button { color: var(--ops-ink-3); font-family: var(--ops-mono); font-size: 11.5px; }
[data-dash="ops"] .sidebar-bottom a:hover,
[data-dash="ops"] .sidebar-bottom button:hover { color: var(--ops-ink); }

/* ---------- 3. dashboard heads / title rows ---------- */
[data-dash="ops"] .dashboard-head,
[data-dash="ops"] .panel-page-head { border-bottom: 1px solid var(--ops-line); }
[data-dash="ops"] .dashboard-head h1,
[data-dash="ops"] .panel-page-head h2,
[data-dash="ops"] .admin-title-row h1,
[data-dash="ops"] .media-title-row h1 { color: var(--ops-ink); letter-spacing: -.01em; }
[data-dash="ops"] .account-chip {
  border: 1px solid var(--ops-line-2);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .account-chip > span {
  background: linear-gradient(135deg, var(--ops-cyan), #ff4fd8);
  color: #050507;
  border-radius: 3px;
}
[data-dash="ops"] .account-chip b { color: var(--ops-ink); }
[data-dash="ops"] .account-chip small { color: var(--ops-ink-3); font-family: var(--ops-mono); }

/* ---------- 4. metric tiles / panel cards — dense + sharp ---------- */
[data-dash="ops"] .metric-card,
[data-dash="ops"] .panel-card,
[data-dash="ops"] .admin-metrics article,
[data-dash="ops"] .media-metrics article {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
  padding: 16px 18px;
  transition: border-color .15s ease, background .15s ease;
  transform: none;
}
[data-dash="ops"] .metric-card:hover,
[data-dash="ops"] .panel-card:hover,
[data-dash="ops"] .admin-metrics article:hover,
[data-dash="ops"] .media-metrics article:hover {
  border-color: var(--ops-line-2);
  background: var(--ops-panel);
  transform: none;
}
/* labels above each tile */
[data-dash="ops"] .metric-card > span,
[data-dash="ops"] .admin-metrics article > span,
[data-dash="ops"] .media-metrics article > span {
  font-family: var(--ops-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ops-ink-3);
  text-transform: uppercase;
}
/* the big numbers — mono, tight */
[data-dash="ops"] .metric-value,
[data-dash="ops"] .admin-metrics b,
[data-dash="ops"] .media-metrics b,
[data-dash="ops"] .license-state b {
  font-family: var(--ops-mono);
  color: var(--ops-ink);
  letter-spacing: -.02em;
}
[data-dash="ops"] .metric-card p,
[data-dash="ops"] .admin-metrics small,
[data-dash="ops"] .media-metrics small { color: var(--ops-ink-3); }
[data-dash="ops"] .metric-value.metric-small { font-size: 15px; }

/* license state dots — cyan sparingly */
[data-dash="ops"] .license-state i { background: var(--ops-ink-3); box-shadow: none; border-radius: 50%; }
[data-dash="ops"] .license-state.active i { background: var(--ops-ok); box-shadow: 0 0 8px var(--ops-ok); }
[data-dash="ops"] .license-state.lifetime i,
[data-dash="ops"] .license-state.admin i { background: var(--ops-cyan); box-shadow: 0 0 8px var(--ops-cyan); }
[data-dash="ops"] .license-state.expired i,
[data-dash="ops"] .license-state.revoked i { background: var(--ops-err); box-shadow: 0 0 8px var(--ops-err); }

/* download banner + redemption — console framing */
[data-dash="ops"] .download-banner {
  border: 1px solid var(--ops-line);
  border-left: 2px solid var(--ops-cyan);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .download-banner h2 { color: var(--ops-ink); }
[data-dash="ops"] .redemption-card { background: var(--ops-panel); }
[data-dash="ops"] .panel-title h3,
[data-dash="ops"] .settings-form h3 { color: var(--ops-ink); }
[data-dash="ops"] .profile-list > div,
[data-dash="ops"] .mini-release { border-top: 1px solid var(--ops-line); }
[data-dash="ops"] .profile-list dt { font-family: var(--ops-mono); color: var(--ops-ink-3); font-size: 12px; }
[data-dash="ops"] .profile-list dd { color: var(--ops-ink); }

/* artifact / device / empty tiles */
[data-dash="ops"] .artifact-card,
[data-dash="ops"] .device-item,
[data-dash="ops"] .empty-state {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .artifact-icon {
  background: linear-gradient(135deg, var(--ops-cyan), #ff4fd8);
  color: #050507;
  border-radius: 3px;
}
[data-dash="ops"] .artifact-card h3,
[data-dash="ops"] .device-item b { color: var(--ops-ink); }

/* ---------- 5. bootstrap operator card ---------- */
[data-dash="ops"] .bootstrap-card {
  border: 1px solid var(--ops-line-2);
  border-left: 2px solid var(--ops-cyan);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .bootstrap-card h2 { color: var(--ops-ink); }
[data-dash="ops"] .bootstrap-kicker { color: var(--ops-cyan); }
[data-dash="ops"] .bootstrap-facts b { color: var(--ops-cyan); }
[data-dash="ops"] .bootstrap-console {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel-2);
}
[data-dash="ops"] .bootstrap-console-head { border-bottom: 1px solid var(--ops-line); }
[data-dash="ops"] .bootstrap-console-head > span:last-child { background: rgba(69, 230, 255, 0.1); color: var(--ops-cyan); border-radius: 3px; }

/* ---------- 6. media view ---------- */
[data-dash="ops"] .media-live { color: var(--ops-ok); font-family: var(--ops-mono); }
[data-dash="ops"] .media-live i { background: var(--ops-ok); box-shadow: 0 0 8px var(--ops-ok); border-radius: 50%; }
[data-dash="ops"] .media-chart-card,
[data-dash="ops"] .media-link-card {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .media-promo-card {
  background: var(--ops-panel) !important;
  border: 1px solid var(--ops-line-2) !important;
  border-left: 2px solid var(--ops-cyan) !important;
}
[data-dash="ops"] .media-promo-card b { color: var(--ops-cyan); background: none; -webkit-text-fill-color: currentColor; }
[data-dash="ops"] .media-promo-card strong { color: var(--ops-cyan); }
[data-dash="ops"] .media-metrics b { font-family: var(--ops-mono); }
[data-dash="ops"] .media-card-head h2,
[data-dash="ops"] .media-link-card h2 { color: var(--ops-ink); }
[data-dash="ops"] .media-legend { font-family: var(--ops-mono); color: var(--ops-ink-2); }
[data-dash="ops"] .media-legend .visits { background: var(--ops-cyan); }
[data-dash="ops"] .media-legend .purchases { background: #ff4fd8; }
[data-dash="ops"] .media-grid-line { stroke: rgba(255, 255, 255, 0.07); }
[data-dash="ops"] .media-line.visits { stroke: var(--ops-cyan); }
[data-dash="ops"] .media-line.purchases { stroke: #ff4fd8; }
[data-dash="ops"] .media-dot.visits { fill: var(--ops-cyan); }
[data-dash="ops"] .media-dot.purchases { fill: #ff4fd8; }
[data-dash="ops"] .media-axis-label { fill: var(--ops-ink-3); }
[data-dash="ops"] .media-referral-link,
[data-dash="ops"] #mediaReferralLink { color: var(--ops-cyan); font-family: var(--ops-mono); }

/* ---------- 7. admin view: panels ---------- */
[data-dash="ops"] .admin-panel {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
}
[data-dash="ops"] .admin-panel-head { border-bottom: 1px solid var(--ops-line); }
[data-dash="ops"] .admin-panel-head h2 { color: var(--ops-ink); font-size: 15px; }
[data-dash="ops"] .create-grid { border-top: 1px solid var(--ops-line); }
[data-dash="ops"] .create-grid label {
  color: var(--ops-ink-3);
  font-family: var(--ops-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-dash="ops"] .create-grid small { color: var(--ops-ink-3); text-transform: none; letter-spacing: 0; }

/* ---------- 8. tables — dense, mono, hairline ---------- */
[data-dash="ops"] #adminView table,
[data-dash="ops"] #accountView table,
[data-dash="ops"] #mediaView table {
  color: var(--ops-ink-2);
  font-family: var(--ops-mono);
  font-size: 12px;
}
[data-dash="ops"] #adminView th,
[data-dash="ops"] #adminView td,
[data-dash="ops"] #accountView th,
[data-dash="ops"] #accountView td {
  border-top: 1px solid var(--ops-line);
  padding: 8px 12px;
  white-space: nowrap;
}
[data-dash="ops"] #adminView th,
[data-dash="ops"] #accountView th {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ops-ink-3);
  font-weight: 500;
}
[data-dash="ops"] #adminView td,
[data-dash="ops"] #accountView td { color: var(--ops-ink-2); }
[data-dash="ops"] #adminView td.cell-muted { color: var(--ops-ink-3); }
[data-dash="ops"] #adminView tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
[data-dash="ops"] #adminView .license-key { color: var(--ops-ink); }

/* status badges — sharp, hairline, near-mono */
[data-dash="ops"] .table-badge {
  background: transparent;
  color: var(--ops-ink-2);
  border: 1px solid var(--ops-line);
  border-radius: 3px;
  font-family: var(--ops-mono);
  font-size: 10px;
  padding: 2px 7px;
}
[data-dash="ops"] .table-badge.active,
[data-dash="ops"] .table-badge.online { color: var(--ops-ok); border-color: rgba(87, 227, 155, 0.3); background: rgba(87, 227, 155, 0.1); }
[data-dash="ops"] .table-badge.revoked,
[data-dash="ops"] .table-badge.expired { color: var(--ops-err); border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.1); }
[data-dash="ops"] .table-badge.maintenance { color: var(--ops-warn); border-color: rgba(255, 206, 92, 0.3); background: rgba(255, 206, 92, 0.1); }
[data-dash="ops"] .table-badge.media { color: var(--ops-cyan); border-color: rgba(69, 230, 255, 0.3); background: rgba(69, 230, 255, 0.1); }

[data-dash="ops"] .empty-table { color: var(--ops-ink-3); font-family: var(--ops-mono); }
[data-dash="ops"] .role-select {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-bg);
  color: var(--ops-ink);
  font-family: var(--ops-mono);
}
[data-dash="ops"] .row-menu {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-panel);
  backdrop-filter: none;
}

/* ---------- 9. buttons + inputs inside ops views ---------- */
[data-dash="ops"] #accountView .button,
[data-dash="ops"] #mediaView .button,
[data-dash="ops"] #adminView .button {
  border-radius: var(--ops-r);
  font-family: var(--ops-mono);
  font-size: 12px;
  letter-spacing: .04em;
  border: 1px solid var(--ops-line-2);
}
[data-dash="ops"] #accountView .button-primary,
[data-dash="ops"] #mediaView .button-primary,
[data-dash="ops"] #adminView .button-primary,
[data-dash="ops"] #accountView .button-light,
[data-dash="ops"] #mediaView .button-light,
[data-dash="ops"] #adminView .button-light {
  background: rgba(69, 230, 255, 0.07);
  color: var(--ops-cyan);
  border-color: var(--ops-cyan);
}
[data-dash="ops"] #accountView .button-primary:hover,
[data-dash="ops"] #mediaView .button-primary:hover,
[data-dash="ops"] #adminView .button-primary:hover,
[data-dash="ops"] #accountView .button-light:hover,
[data-dash="ops"] #mediaView .button-light:hover,
[data-dash="ops"] #adminView .button-light:hover {
  background: rgba(69, 230, 255, 0.15);
  filter: none;
  box-shadow: none;
}
[data-dash="ops"] #accountView input,
[data-dash="ops"] #accountView select,
[data-dash="ops"] #mediaView input,
[data-dash="ops"] #adminView input,
[data-dash="ops"] #adminView select {
  border: 1px solid var(--ops-line);
  border-radius: var(--ops-r);
  background: var(--ops-bg);
  color: var(--ops-ink);
  font-family: var(--ops-mono);
}
[data-dash="ops"] #accountView input:focus,
[data-dash="ops"] #accountView select:focus,
[data-dash="ops"] #mediaView input:focus,
[data-dash="ops"] #adminView input:focus,
[data-dash="ops"] #adminView select:focus {
  border-color: var(--ops-cyan);
  box-shadow: 0 0 0 2px rgba(69, 230, 255, 0.14);
}

/* ============================================================
   dash-switch control — UN-gated (works in BOTH themes)
   ============================================================ */
.dash-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}
.dash-switch-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9a9aab;
  padding-left: 6px;
}
.dash-switch button {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .03em;
  color: #a7a7b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dash-switch button:hover { color: #f3f3f7; }
.dash-switch button.is-active,
.dash-switch button[aria-pressed="true"] {
  color: #050507;
  background: linear-gradient(100deg, #45e6ff, #7c5cff 55%, #ff4fd8);
  box-shadow: 0 6px 20px -10px rgba(124, 92, 255, 0.9);
}

/* in the ops theme the switch turns sharp + cyan to match the console */
[data-dash="ops"] .dash-switch {
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  backdrop-filter: none;
}
[data-dash="ops"] .dash-switch button { border-radius: 4px; }
[data-dash="ops"] .dash-switch button.is-active,
[data-dash="ops"] .dash-switch button[aria-pressed="true"] {
  color: #45e6ff;
  background: rgba(69, 230, 255, 0.1);
  border-color: #45e6ff;
  box-shadow: none;
}