/*
 * TIMETRACKER // SEVERANCE COMMAND INTERFACE
 * Monochrome space-gray palette. Muted. Clinical.
 */

/* ── Palette ─────────────────────────────────────────── */
:root {
  --void:          #07090d;
  --surface:       #0c1018;
  --surface-2:     #111820;
  --surface-3:     #161e28;
  --border:        #1a2233;
  --border-bright: #253046;
  --text:          #6b7a8d;
  --text-mid:      #8b9bb0;
  --text-bright:   #b0bec5;
  --text-heading:  #cfd8dc;
  --accent:        #5c8ab5;
  --accent-dim:    #3d6a95;
  --accent-bright: #7eb8da;
  --danger:        #8b4049;
  --danger-bright: #c75050;
  --success:       #3d7a5a;
  --success-bright:#5aaa6e;
  --warning:       #8b7530;
  --warning-bright:#c7a030;
  --glow-accent:   0 0 12px rgba(92,138,181,0.2);
  --glow-danger:   0 0 12px rgba(199,80,80,0.2);
  --glow-success:  0 0 12px rgba(90,170,110,0.2);
  color-scheme: dark;
}

/* ── Light Theme ─────────────────────────────────────── */
[data-theme="light"] {
  --void:          #eef0f4;
  --surface:       #ffffff;
  --surface-2:     #f5f6f9;
  --surface-3:     #eaecf2;
  --border:        #d0d5e0;
  --border-bright: #b8c0d0;
  --text:          #7a8599;
  --text-mid:      #4a5568;
  --text-bright:   #2d3748;
  --text-heading:  #1a202c;
  --accent:        #3d6a95;
  --accent-dim:    #2c5580;
  --accent-bright: #2b6cb0;
  --danger:        #c53030;
  --danger-bright: #e53e3e;
  --success:       #2f855a;
  --success-bright:#38a169;
  --warning:       #b7791f;
  --warning-bright:#d69e2e;
  --glow-accent:   0 0 8px rgba(61,106,149,0.15);
  --glow-danger:   0 0 8px rgba(229,62,62,0.15);
  --glow-success:  0 0 8px rgba(56,161,105,0.15);
  color-scheme: light;
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  color-scheme: light;
}

/* Scanline overlay: lighter in light mode */
[data-theme="light"] body::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
}

/* ── Base ────────────────────────────────────────────── */
html { background: var(--void); }

body {
  background: var(--void);
  color: var(--text-mid);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Scanlines overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
}

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'Datatype', ui-monospace, monospace;
  color: var(--text-heading);
  letter-spacing: 0.05em;
}

a { color: var(--accent); }
a:hover { color: var(--accent-bright); }

::selection {
  background: var(--accent-dim);
  color: var(--text-heading);
}

/* ── Scrollbars ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── Panels ──────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.panel-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}

.panel-header h2,
.panel-header .panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  margin: 0;
}

.panel-body {
  padding: 16px;
}

/* ── Threat Levels (urgency sections) ───────────────── */
.threat-critical {
  border-color: var(--danger);
}
.threat-critical .panel-header {
  background: rgba(139,64,73,0.15);
  border-bottom-color: var(--danger);
}
.threat-critical .panel-header h2,
.threat-critical .panel-header .panel-title {
  color: var(--danger-bright);
}
.threat-critical .threat-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger-bright);
  animation: pulse-glow 2s ease-in-out infinite;
  margin-right: 8px;
}

.threat-priority {
  border-color: var(--warning);
}
.threat-priority .panel-header {
  background: rgba(139,117,48,0.1);
  border-bottom-color: var(--warning);
}
.threat-priority .panel-header h2,
.threat-priority .panel-header .panel-title {
  color: var(--warning-bright);
}

.threat-queue .panel-header h2,
.threat-queue .panel-header .panel-title {
  color: var(--text);
}

.threat-backlog .panel-header {
  background: var(--surface);
}
.threat-backlog .panel-header h2,
.threat-backlog .panel-header .panel-title {
  color: var(--text);
  opacity: 0.6;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px var(--danger-bright), 0 0 8px rgba(199,80,80,0.4); opacity: 1; }
  50% { box-shadow: 0 0 2px var(--danger-bright); opacity: 0.5; }
}

/* ── Metric Cards ────────────────────────────────────── */
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-bright);
}

.metric-card.metric-accent::before { background: var(--accent); }
.metric-card.metric-danger::before { background: var(--danger-bright); }
.metric-card.metric-success::before { background: var(--success-bright); }
.metric-card.metric-warning::before { background: var(--warning-bright); }

.metric-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text);
  margin-bottom: 8px;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  line-height: 1;
}

.metric-value.accent { color: var(--accent-bright); }
.metric-value.danger { color: var(--danger-bright); }
.metric-value.success { color: var(--success-bright); }
.metric-value.warning { color: var(--warning-bright); }

.metric-sub {
  font-size: 10px;
  color: var(--text);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Tables ──────────────────────────────────────────── */
.data-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.data-table thead {
  background: var(--surface-2);
}

.data-table thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:not(.row-overdue) {
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table tbody td {
  padding: 6px 12px;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

/* ── Forms ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-bright);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  color-scheme: dark;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

input::placeholder,
textarea::placeholder {
  color: var(--border-bright);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-dim);
  color: var(--text-heading);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}

.btn-danger {
  background: rgba(139,64,73,0.3);
  color: var(--danger-bright);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger);
  color: #fff;
  box-shadow: var(--glow-danger);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--text-bright);
  border-color: var(--border-bright);
  background: var(--surface-2);
}

/* ── Status Badges ───────────────────────────────────── */
.status-select {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  padding: 2px 8px;
  cursor: pointer;
  background: var(--surface-3);
  color: var(--text-mid);
}
.status-select:focus {
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── Progress Bar ────────────────────────────────────── */
.progress-track {
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.6s ease;
}

.progress-fill.success { background: var(--success-bright); }
.progress-fill.warning { background: var(--warning-bright); }
.progress-fill.danger { background: var(--danger-bright); }

/* ── Progress Ring ───────────────────────────────────── */
.progress-ring {
  transform: rotate(-90deg);
}
.progress-ring__track {
  fill: none;
  stroke: var(--surface-3);
}
.progress-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.progress-ring__fill.success { stroke: var(--success-bright); }

/* ── Sparkline ───────────────────────────────────────── */
.sparkline-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.sparkline-area {
  fill: url(#sparkline-gradient);
  opacity: 0.3;
}
.sparkline-dot {
  fill: var(--accent-bright);
}

/* ── Bar Chart (horizontal) ──────────────────────────── */
.bar-chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.bar-chart-label {
  font-size: 11px;
  color: var(--text-mid);
  width: 80px;
  flex-shrink: 0;
  text-align: right;
}

.bar-chart-track {
  flex: 1;
  height: 14px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.bar-chart-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.bar-chart-value {
  font-size: 10px;
  color: var(--text);
  width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Nav ─────────────────────────────────────────────── */
.nav-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 16px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover {
  color: var(--text-bright);
  border-bottom-color: var(--border-bright);
}
.nav-link.active {
  color: var(--accent-bright);
  border-bottom-color: var(--accent);
}

.nav-brand {
  font-family: 'Datatype', ui-monospace, monospace;
  font-size: 14px;
  color: var(--text-heading);
  text-decoration: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.nav-brand:hover { color: var(--accent-bright); }

/* ── Theme Toggle ────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--accent-bright);
  border-color: var(--border-bright);
  background: var(--surface-2);
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-brand .brand-light {
  font-weight: 300;
  opacity: 0.6;
}

/* ── Blinking Prompt ─────────────────────────────────── */
.prompt-blink {
  color: var(--accent);
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Typing Animation ────────────────────────────────── */
.typing-brand {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  animation:
    typing 2s steps(15, end) 0.5s both,
    cursor-blink 1s step-end infinite;
  width: 0;
}

/* After typing completes, hold then reset */
@keyframes typing {
  0%   { width: 0; }
  100% { width: 15ch; }
}

@keyframes cursor-blink {
  0%, 100% { border-right-color: var(--accent); }
  50% { border-right-color: transparent; }
}

/* ── Flash Messages ──────────────────────────────────── */
.flash-alert {
  background: rgba(139,64,73,0.15);
  border: 1px solid var(--danger);
  color: var(--danger-bright);
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 12px;
}

.flash-notice {
  background: rgba(61,122,90,0.15);
  border: 1px solid var(--success);
  color: var(--success-bright);
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 12px;
}

/* ── Dashboard desktop-only cells ────────────────────── */
.dashboard-desktop-cell {
  display: none;
}
@media (min-width: 768px) {
  .dashboard-desktop-cell {
    display: table-cell;
  }
  .dashboard-desktop-cell.column-hidden {
    display: none;
  }
}

.dashboard-mobile-cell {
  display: table-cell;
}
@media (min-width: 768px) {
  .dashboard-mobile-cell {
    display: none;
  }
}

/* ── Urgency Colors ──────────────────────────────────── */
.urgency-critical { color: var(--danger-bright); font-weight: 700; }

/* ── Overdue Row Pulse ───────────────────────────────── */
.row-overdue td {
  animation: row-pulse 3s ease-in-out infinite;
}
@keyframes row-pulse {
  0%, 100% { background: transparent; }
  50% { background: rgba(199,80,80,0.15); }
}
.urgency-high { color: var(--warning-bright); }
.urgency-medium { color: var(--text-mid); }
.urgency-low { color: var(--text); }

/* ── Details/Summary ─────────────────────────────────── */
details.panel > summary {
  cursor: pointer;
  list-style: none;
}
details.panel > summary::-webkit-details-marker { display: none; }

/* ── Inline Editable ─────────────────────────────────── */
.inline-input {
  background: transparent;
  border: none;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12px;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.inline-input:focus {
  outline: none;
  color: var(--text-bright);
  border-bottom: 1px solid var(--accent);
  box-shadow: none;
}
.inline-input::placeholder {
  color: var(--border-bright);
}

/* ── Empty State ─────────────────────────────────────── */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text);
  font-size: 12px;
}

/* ── Checkbox Override ───────────────────────────────── */
input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ── Divider ─────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
}

/* ── Row Actions ─────────────────────────────────────── */
.row-actions {
  opacity: 0;
  transition: opacity 0.15s;
}
tr:hover .row-actions,
.group:hover .row-actions {
  opacity: 1;
}

/* ── Mobile Menu ─────────────────────────────────────── */
.mobile-nav {
  display: none;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.mobile-nav.open { display: block; }

.mobile-nav-link {
  display: block;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s;
}
.mobile-nav-link:hover {
  background: var(--surface-2);
  color: var(--text-bright);
}

/* ── Glow Keyframes ──────────────────────────────────── */
@keyframes subtle-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Section Label ───────────────────────────────────── */
.section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text);
}

/* ── Login Page ──────────────────────────────────────── */
.login-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
}

/* ── Utility ─────────────────────────────────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }