/* =============================================================================
   Aries Training skin for CDS — colors, fonts and styling only (layout untouched).
   Dark = "Control Room", light = "Instrument Panel". Loaded after dashboard.css.
   Design: aries-training/docs, mockups "Aries Training Skins".
   ============================================================================= */

:root {
  --color-bg-primary:      #070a10;
  --color-bg-secondary:    #0b1119;
  --color-bg-tertiary:     #0d131d;
  --color-bg-elevated:     #101a28;
  --color-bg-surface:      #132033;
  --color-bg-hover:        #16243a;
  --color-bg-active:       #1c2d47;

  --color-border:          #1a2636;
  --color-border-light:    #2a3a52;
  --color-border-focus:    #b81237;

  --color-text-primary:    #e6edf3;
  --color-text-secondary:  #9fb0c3;
  --color-text-muted:      #5d6e83;
  --color-text-inverse:    #070a10;

  /* Aries red for actions; signal cyan for live data */
  --color-accent:          #b81237;
  --color-accent-hover:    #a31d32;
  --color-accent-glow:     rgba(184, 18, 55, 0.28);
  --color-accent-subtle:   rgba(184, 18, 55, 0.12);
  --color-accent-border:   rgba(184, 18, 55, 0.35);
  --color-data:            #7dd3e8;
  --color-grid-line:       rgba(125, 211, 232, 0.05);

  --color-success:         #22c55e;
  --color-info:            #7dd3e8;
  --color-info-bg:         rgba(125, 211, 232, 0.1);
  --color-feed-tx:         #e0718a;
  --color-feed-rx:         #7dd3e8;

  --color-sidebar-bg:      #0b1119;
  --color-sidebar-text:    #8a9bb0;
  --color-sidebar-active-bg: #132033;
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-active-icon: #7dd3e8;

  --font-sans:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-condensed: 'Roboto Condensed', 'Roboto', 'Arial Narrow', sans-serif;
  --font-display:   'Zilla Slab', Rockwell, Georgia, serif;
  --font-mono:      'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
}

[data-theme="light"] {
  --color-bg-primary:      #e9e7e2;
  --color-bg-secondary:    #f6f5f1;
  --color-bg-tertiary:     #ffffff;
  --color-bg-elevated:     #ffffff;
  --color-bg-surface:      #f4f2ed;
  --color-bg-hover:        #efede8;
  --color-bg-active:       #e4e1da;

  --color-border:          #d9d6cf;
  --color-border-light:    #c9c5bc;
  --color-border-focus:    #b81237;

  --color-text-primary:    #1f1f22;
  --color-text-secondary:  #4a4d53;
  --color-text-muted:      #6f7885;
  --color-text-inverse:    #ffffff;

  --color-accent:          #b81237;
  --color-accent-hover:    #a31d32;
  --color-accent-glow:     rgba(184, 18, 55, 0.2);
  --color-accent-subtle:   rgba(184, 18, 55, 0.08);
  --color-accent-border:   rgba(184, 18, 55, 0.3);
  --color-data:            #a86b00;
  --color-grid-line:       rgba(38, 41, 46, 0.05);

  --color-success:         #0a8a10;
  --color-info:            #a86b00;
  --color-info-bg:         rgba(243, 181, 74, 0.16);
  --color-feed-tx:         #b81237;
  --color-feed-rx:         #a86b00;

  /* Graphite sidebar with the red active pill */
  --color-sidebar-bg:      #26292e;
  --color-sidebar-text:    #b8bcc3;
  --color-sidebar-active-bg: #b81237;
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-active-icon: #ffffff;
}

/* --- Type ------------------------------------------------------------------ */

.sidebar-header h1,
.top-bar-title,
.login-logo h1,
.login-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}

.sidebar-link,
.sidebar-section-label,
.panel-title,
.dash-panel-title,
.login-tab,
.btn,
.hw-status,
.bus-devices-title,
.admin-stat-label,
.admin-table th,
.telemetry-card-label,
.telem-field-label {
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Buttons: Aries pill buttons ------------------------------------------- */

.btn { border-radius: var(--radius-full); }
.btn-primary { background: var(--color-accent); color: #ffffff; }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }

/* --- Sidebar ---------------------------------------------------------------- */

.sidebar { background: var(--color-sidebar-bg); }
.sidebar .sidebar-link { color: var(--color-sidebar-text); }
.sidebar .sidebar-link.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active-text);
}
.sidebar .sidebar-link.active .icon { color: var(--color-sidebar-active-icon); }
[data-theme="light"] .sidebar .sidebar-link.active { border-radius: var(--radius-full); }
[data-theme="light"] .sidebar,
[data-theme="light"] .sidebar-header h1,
[data-theme="light"] .sidebar-user-name { color: #ffffff; }
[data-theme="light"] .sidebar .sidebar-section-label,
[data-theme="light"] .sidebar-user-role,
[data-theme="light"] .sidebar-header .version { color: #8d939c; }
[data-theme="light"] .sidebar { border-right-color: #1c1f23; }

/* --- Live data -------------------------------------------------------------- */

.can-feed-row .can-id { color: var(--color-data); }
[data-theme="light"] .can-feed { background: #1c1f23; color: #e9ecef; }
[data-theme="light"] .can-feed-row .timestamp { color: #6f7885; }
[data-theme="light"] .can-feed-row .can-id { color: #f3b54a; }
[data-theme="light"] .can-feed-row:hover { background: rgba(255, 255, 255, 0.05); }

/* --- Login ------------------------------------------------------------------ */

.login-page {
  background-color: var(--color-bg-primary);
}
.login-tab.active { color: var(--color-text-primary); }

/* Shared bug report button (Aries widget): floats in the top-right corner on its own,
   as on the game, centred on the top bar; the bar keeps its right end clear for it. */
.aries-bug-slot {
  position: fixed;
  top: calc((var(--header-height) - 36px) / 2);
  right: var(--space-4);
  z-index: calc(var(--z-sticky) + 20);
  display: inline-flex;
}
.aries-bug-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-full);
}
.aries-bug-btn svg { display: block; }
.top-bar-right { padding-right: 44px; }
.hw-status { cursor: pointer; }

/* --- The CDS thread of teal --------------------------------------------------
   CDS's notifications are teal (#0d9488) wherever they show up on the platform, so the
   site wears just enough of it to be recognised: a line along the top of the bar, the
   live-data icon in the sidebar, the focus ring and selected text. Aries red stays the
   colour of the buttons; the signal cyan of the CAN feed is untouched. */
:root {
  --site-accent: #14b8a6;          /* lifted off the dark chrome; #0d9488 in daylight */
  --color-sidebar-active-icon: #2dd4bf;
}
[data-theme="light"] :root, [data-theme="light"] { --site-accent: #0d9488; }
.top-bar, .sidebar { box-shadow: inset 0 2px 0 var(--site-accent); }
:focus-visible { outline-color: var(--site-accent); }
::selection { background: rgba(20, 184, 166, 0.3); }

/* Toasts start under the top bar, clear of the floating bug button */
.toast-container { top: calc(var(--header-height) + var(--space-2)); }
.can-feed-empty { padding: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }