/*
 * GOSTREAM NEXUS streaming visual system.
 * This file is presentation-only: existing IDs, actions and data states stay intact.
 */
:root {
  --stream-navy-950: #050a16;
  --stream-navy-900: #081225;
  --stream-navy-800: #0c1a32;
  --stream-cyan: #22d3ee;
  --stream-purple: #8b5cf6;
  --stream-radius: 14px;
  --stream-radius-sm: 10px;
  --stream-space-1: 6px;
  --stream-space-2: 10px;
  --stream-space-3: 14px;
  --stream-space-4: 20px;
  --stream-space-5: 28px;
  --stream-shadow: 0 16px 36px rgba(0, 0, 0, .22);
  --stream-glow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

html, body {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

body::before {
  background:
    radial-gradient(ellipse 72% 48% at 14% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    radial-gradient(ellipse 54% 42% at 86% 108%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 64%);
}

/* Shared navigation language */
.sidebar,
.topbar {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
}

.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar-solid) 92%, var(--accent) 8%), var(--bg-sidebar-solid));
  box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
}

.sidebar-logo {
  padding-block: 16px 15px;
}

.sidebar-brand,
.topbar-brand-name {
  letter-spacing: .04em;
}

.nav-group-label {
  color: color-mix(in srgb, var(--text-dim) 82%, var(--accent) 18%) !important;
  letter-spacing: .12em;
}

.nav-item {
  border: 1px solid transparent;
  border-radius: var(--stream-radius-sm);
  letter-spacing: .02em;
}

.nav-item:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 3px 0 0 var(--accent), var(--stream-glow);
}

.topbar {
  background: color-mix(in srgb, var(--bg-header) 92%, var(--stream-navy-900) 8%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.topbar-btn,
.topbar-clock,
.panel-role-badge {
  border-radius: var(--stream-radius-sm);
}

.content-area {
  padding: clamp(16px, 2.2vw, 28px);
}

/* Shared surfaces, tables, badges and controls */
:where(.panel-card, .card, .nx-card, .cyber-card, .chart-wrap, .quick-action-btn, .sc, .res-kpi-card) {
  border-radius: var(--stream-radius) !important;
  box-shadow: var(--stream-shadow);
}

:where(.nx-badge, .badge, .chip, .nav-badge, .dash-summary-pill, .gs-chip) {
  border-radius: 999px;
  font-weight: 750;
}

:where(.btn-primary, .btn, .nx-btn-primary, .res-btn-primary, .submit-btn) {
  border-radius: var(--stream-radius-sm);
  letter-spacing: .01em;
}

:where(table.nx-table, .ch-table-card table, table) thead th {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:where(table.nx-table, .ch-table-card table, table) tbody tr {
  border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
}

:where(table.nx-table, .ch-table-card table, table) tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Admin dashboard: broadcast-control hierarchy */
#dashboard-sortable-container {
  gap: clamp(12px, 1.4vw, 18px);
}

#dashboard-sortable-container .workspace-page-header {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    linear-gradient(300deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 48%),
    var(--bg-card) !important;
  box-shadow: var(--stream-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}

#dashboard-sortable-container .nx-title {
  font-size: clamp(24px, 2.5vw, 34px);
  letter-spacing: -.025em;
}

#dashboard-sortable-container .dash-summary-strip {
  gap: 8px;
  margin-top: 14px;
}

#dashboard-sortable-container .dash-summary-pill {
  min-width: 132px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--bg-soft) 78%, var(--bg-card));
}

#dashboard-sortable-container .ckpi-card {
  min-height: 132px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    var(--bg-card) !important;
}

#dashboard-sortable-container .ckpi-title {
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#dashboard-sortable-container .ckpi-value {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.04em;
}

#dashboard-sortable-container .cyber-table-wrap,
#dashboard-sortable-container .nx-card {
  border-color: color-mix(in srgb, var(--accent) 17%, var(--border)) !important;
}

#dashboard-sortable-container .nx-card-header {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%);
}

/* Channels: operational list with clearer health scanning */
.media-catalog-shell .channels-page-header {
  margin-bottom: 16px;
}

.media-catalog-shell .channels-page-title {
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.02em;
}

.media-catalog-shell .channels-kpi-grid {
  gap: 12px;
}

.media-catalog-shell .channels-kpi-card {
  min-height: 106px !important;
  border-radius: var(--stream-radius) !important;
  border-color: color-mix(in srgb, var(--kpi-clr) 28%, var(--border)) !important;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--kpi-clr) 10%, transparent), transparent 58%),
    var(--bg-card) !important;
  box-shadow: var(--stream-shadow) !important;
}

.media-catalog-shell .channels-kpi-card::after {
  opacity: .12 !important;
  filter: blur(48px) !important;
}

.media-catalog-shell .channels-kpi-val {
  font-size: 32px !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  filter: none !important;
}

.media-catalog-shell .workspace-toolbar {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
  border-radius: var(--stream-radius) !important;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%) !important;
}

.media-catalog-shell .ch-table-card {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  border-radius: var(--stream-radius) !important;
  box-shadow: var(--stream-shadow);
}

/* Reseller: same broadcast operations language without changing its flows */
#main-panel .topbar {
  border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

#main-panel .statbar {
  gap: 10px;
  padding: 16px clamp(16px, 2.4vw, 28px);
  background: color-mix(in srgb, var(--bg-header) 92%, transparent);
  border-bottom: 1px solid var(--border);
}

#main-panel .scard {
  border-radius: var(--stream-radius) !important;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  box-shadow: var(--stream-shadow);
}

#main-panel .scard .val {
  font-size: 26px;
}

#main-panel .sidebar {
  border-right-color: color-mix(in srgb, var(--accent) 14%, var(--border));
}

#main-panel .card,
#main-panel .res-kpi-card,
#main-panel .chart-wrap {
  border-radius: var(--stream-radius) !important;
  border-color: color-mix(in srgb, var(--accent) 15%, var(--border)) !important;
}

/* Login: focused, calm access surface */
body:has(.login-card) {
  background:
    radial-gradient(ellipse 70% 60% at 8% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 54% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 66%),
    var(--bg);
}

body:has(.login-card) .login-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255,255,255,.03);
}

body:has(.login-card) .brand p {
  max-width: 260px;
  margin-inline: auto;
}

body:has(.login-card) .submit-btn {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 72%, var(--accent) 28%));
  color: #04101b;
}

@media (max-width: 900px) {
  #dashboard-sortable-container .nx-col-3,
  #dashboard-sortable-container .nx-col-4 {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .content-area {
    padding: 14px;
  }

  #dashboard-sortable-container .nx-col-3,
  #dashboard-sortable-container .nx-col-4,
  #dashboard-sortable-container .nx-col-6,
  #dashboard-sortable-container .nx-col-8 {
    grid-column: span 12;
  }

  .media-catalog-shell .channels-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.login-card) .login-card {
    margin: 12px;
    padding: 36px 24px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}