/* =============================================================================
   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 in the top bar (Aries widget) */
.aries-bug-slot { display: inline-flex; }
.aries-bug-btn svg { display: block; }