/**
 * Terminal Hub Theme - Unified Platform Theme
 * Matches home_hub.html terminal aesthetic
 * Font: Courier New, Consolas, monospace
 * Dark background with accent colors
 */

/* ── CSS Variables ─────────────────────────────────── */
:root {
  --bg: #080c10;
  --panel: #0d1117;
  --border: #21262d;
  --accent: #e34c26;
  --green: #3fb950;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --orange: #f0883e;
  --pink: #f778ba;
  --yellow: #e3b341;
  --dim: #484f58;
  --text: #c9d1d9;
  --heading: #f0f6fc;
  --font: 'Courier New', 'Consolas', monospace;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
}

/* ── Base Reset ────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Override Tailwind/Other Styles ───────────────── */
.bg-gray-900, .bg-gray-800, .bg-slate-900, 
[class*="bg-gradient"], [class*="from-gray"],
[class*="via-purple"], [class*="to-gray"] {
  background: var(--bg) !important;
  background-image: none !important;
}

.text-white, .text-gray-100 {
  color: var(--heading) !important;
}

.text-gray-300, .text-gray-400 {
  color: var(--text) !important;
}

.text-gray-500, .text-gray-600 {
  color: var(--dim) !important;
}

/* ── Typography ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
  color: var(--heading) !important;
  font-weight: 600;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p, span, div, a, li, td, th, label, input, button, textarea {
  font-family: var(--font) !important;
  font-size: var(--font-size-base) !important;
}

small, .text-xs, .text-sm {
  font-size: var(--font-size-sm) !important;
}

/* ── Panels & Cards ────────────────────────────────── */
.panel, .card, [class*="card"], [class*="panel"],
.rounded-xl, .rounded-lg, .rounded-md {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

/* ── Buttons ───────────────────────────────────────── */
button, .btn, [class*="button"] {
  font-family: var(--font) !important;
  font-size: var(--font-size-sm) !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

button:hover, .btn:hover {
  border-color: var(--accent) !important;
  color: var(--heading) !important;
}

button.primary, .btn-primary {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

button.success, .btn-success {
  border-color: var(--green) !important;
  color: var(--green) !important;
}

button.danger, .btn-danger {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Inputs ────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font) !important;
  font-size: var(--font-size-base) !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--blue) !important;
}

/* ── Links ─────────────────────────────────────────── */
a, a:link, a:visited {
  color: var(--blue) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--heading) !important;
  text-decoration: underline !important;
}

/* ── Tables ────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm) !important;
}

th, td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-xs) !important;
  letter-spacing: 0.05em;
}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dim);
}

/* ── Header/Topbar ─────────────────────────────────── */
.topbar, .header, [class*="header"] {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 20px !important;
}

/* ── Status Indicators ─────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-online { background: var(--green); }
.status-warning { background: var(--yellow); }
.status-offline { background: var(--accent); }

/* ── Code/Terminal Text ────────────────────────────── */
code, pre, .code, .terminal {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--font-size-sm) !important;
}

pre {
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
}

/* ── Utility Classes ───────────────────────────────── */
.text-accent { color: var(--accent) !important; }
.text-green { color: var(--green) !important; }
.text-blue { color: var(--blue) !important; }
.text-purple { color: var(--purple) !important; }
.text-orange { color: var(--orange) !important; }
.text-pink { color: var(--pink) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-dim { color: var(--dim) !important; }

.border-accent { border-color: var(--accent) !important; }
.border-green { border-color: var(--green) !important; }
.border-blue { border-color: var(--blue) !important; }