/* Fonts are self-hosted via @fontsource (imported in main.tsx) - no external CDN. */
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ── AirIT brand tokens ────────────────────────────────────────── */
:root {
  --airit-navy:      #003A70;
  --airit-navy-dark: #002B55;
  --airit-blue:      #005AA0;
  --airit-gray:      #6F7478;
  --airit-text:      #1F2933;
  --airit-bg:        #FFFFFF;
  --airit-bg-soft:   #F3F5F7;
  --airit-border:    #D6DADF;
}

/* ── CSS custom properties ─────────────────────────────────────── */
:root {
  --bg:          #0b0f19;
  --bg-header:   #0f172a;
  --bg-card:     #1e293b;
  --bg-inner:    #090d16;
  --bg-input:    #020408;
  --border:      #1e293b;
  --border-muted:#334155;
  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --text-label:  #cbd5e1;
}

:root.light {
  --bg:          #f1f5f9;
  --bg-header:   #ffffff;
  --bg-card:     #ffffff;
  --bg-inner:    #f8fafc;
  --bg-input:    #ffffff;
  --border:      #e2e8f0;
  --border-muted:#cbd5e1;
  --text:        #0f172a;
  --text-muted:  #475569;
  --text-label:  #334155;
}

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────────── */

/* Root / body */
:root.light body,
:root.light #main-root {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* ── Backgrounds: all dark hex variants → card/inner */
:root.light .bg-\[\#0B0F19\],
:root.light .bg-\[\#0b0f19\] {
  background-color: var(--bg) !important;
}

:root.light .bg-\[\#0F172A\],
:root.light .bg-\[\#0f172a\] {
  background-color: var(--bg-header) !important;
  border-color: var(--border) !important;
}

:root.light .bg-\[\#1E293B\],
:root.light .bg-\[\#1e293b\] {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Amber-tinted warning/safety card used in Dashboard */
:root.light .bg-\[\#1D2535\],
:root.light .bg-\[\#1d2535\] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

/* ── Header & nav ─────────────────────────────────────────────── */
:root.light header,
:root.light #app-header {
  background-color: var(--bg-header) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root.light aside,
:root.light #nav-sidebar {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

/* ── Slate utility backgrounds ────────────────────────────────── */
:root.light .bg-slate-950,
:root.light .bg-slate-900 {
  background-color: #f1f5f9 !important;
  border-color: var(--border) !important;
}

:root.light .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

/* opacity variants */
:root.light .bg-slate-950\/10,
:root.light .bg-slate-950\/20,
:root.light .bg-slate-950\/30,
:root.light .bg-slate-950\/40,
:root.light .bg-slate-950\/60,
:root.light .bg-slate-950\/80 {
  background-color: rgba(241, 245, 249, 0.85) !important;
}

:root.light .bg-slate-900\/10,
:root.light .bg-slate-900\/35,
:root.light .bg-slate-900\/40,
:root.light .bg-slate-900\/60,
:root.light .bg-slate-900\/80 {
  background-color: #f8fafc !important;
}

:root.light .bg-slate-800\/50,
:root.light .bg-slate-800\/60,
:root.light .bg-slate-800\/80 {
  background-color: #e9ecf0 !important;
}

/* ── Dashboard banner gradient ────────────────────────────────── */
:root.light .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #ffffff, #f1f5f9) !important;
  border-color: var(--border) !important;
}

/* ── Inputs, selects, textareas ───────────────────────────────── */
:root.light input,
:root.light select,
:root.light textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-muted) !important;
  color: var(--text) !important;
}

:root.light option {
  background-color: #ffffff !important;
  color: var(--text) !important;
}

:root.light input:focus,
:root.light select:focus,
:root.light textarea:focus {
  border-color: #6366f1 !important;
}

/* ── Borders ──────────────────────────────────────────────────── */
:root.light .border-slate-800,
:root.light .border-slate-850,
:root.light .border-slate-855,
:root.light .border-slate-700,
:root.light .border-\[\#1E293B\],
:root.light .border-\[\#1e293b\] {
  border-color: var(--border) !important;
}

:root.light .divide-slate-800 > *,
:root.light .divide-slate-850 > * {
  border-color: var(--border) !important;
}

/* ── Text colours ─────────────────────────────────────────────── */
:root.light .text-white,
:root.light .text-slate-100,
:root.light .text-slate-200 {
  color: var(--text) !important;
}

:root.light .text-slate-300 {
  color: #334155 !important;
}

:root.light .text-slate-400 {
  color: #64748b !important;
}

:root.light .text-slate-500 {
  color: #94a3b8 !important;
}

/* Accent colours - slightly darkened for readability on white */
:root.light .text-emerald-400 {
  color: #059669 !important;
}

:root.light .text-cyan-400 {
  color: #0891b2 !important;
}

:root.light .text-indigo-400 {
  color: #4f46e5 !important;
}

:root.light .text-amber-400,
:root.light .text-amber-500 {
  color: #d97706 !important;
}

:root.light .text-rose-400,
:root.light .text-rose-450 {
  color: #be123c !important;
}

/* ── Accent / status badge backgrounds ───────────────────────── */
:root.light .bg-emerald-950\/60,
:root.light .bg-emerald-950\/50,
:root.light .bg-emerald-950\/40,
:root.light .bg-emerald-950\/20,
:root.light .bg-emerald-950\/80 {
  background-color: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}

:root.light .bg-indigo-950\/60,
:root.light .bg-indigo-950\/50,
:root.light .bg-indigo-950\/40 {
  background-color: #e0e7ff !important;
  border-color: #a5b4fc !important;
  color: #3730a3 !important;
}

:root.light .bg-rose-950\/60,
:root.light .bg-rose-950\/40,
:root.light .bg-rose-950\/20 {
  background-color: #ffe4e6 !important;
  border-color: #fca5a5 !important;
  color: #9f1239 !important;
}

:root.light .bg-cyan-950\/40 {
  background-color: #cffafe !important;
  border-color: #67e8f9 !important;
  color: #155e75 !important;
}

:root.light .bg-amber-950\/40,
:root.light .bg-amber-900\/30 {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

/* ── Nav sidebar active item ──────────────────────────────────── */
:root.light #nav-sidebar button {
  color: #475569 !important;
}

:root.light #nav-sidebar button:hover:not(.bg-gradient-to-r) {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--text) !important;
}

/* ── Sidebar telemetry box ────────────────────────────────────── */
:root.light #nav-sidebar .bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: var(--border-muted) !important;
}

/* ── Dropdown panels (mail, bell) ─────────────────────────────── */
:root.light .bg-\[\#1E293B\].rounded-xl,
:root.light .shadow-2xl.rounded-xl {
  background-color: #ffffff !important;
  border-color: var(--border-muted) !important;
}

/* ── Table internals ──────────────────────────────────────────── */
:root.light table {
  color: var(--text) !important;
}

:root.light thead {
  background-color: #f8fafc !important;
}

:root.light tbody tr:hover {
  background-color: #f1f5f9 !important;
}

:root.light .bg-\[\#0f172a\]\/60,
:root.light tr.bg-\[\#0f172a\] {
  background-color: #f1f5f9 !important;
}

/* ── Dashed empty states ──────────────────────────────────────── */
:root.light .border-dashed {
  border-color: var(--border-muted) !important;
}

/* ── DeviceInventory ──────────────────────────────────────────── */

/* Emergency Sheet container (amber-tinted dark card) */
:root.light .bg-\[\#1D2432\],
:root.light .bg-\[\#1d2432\] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

/* Emergency sheet markdown content area - light in light mode */
:root.light .bg-\[\#1D2432\] .bg-slate-950\/80,
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 {
  background-color: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root.light .bg-\[\#1D2432\] .bg-slate-950\/80 *,
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 * {
  color: var(--text) !important;
}

/* Keep emerald headings readable */
:root.light .bg-\[\#1D2432\] .bg-slate-950\/80 h5,
:root.light .bg-\[\#1d2432\] .bg-slate-950\/80 h5 {
  color: #059669 !important;
}

/* Device type icon pill backgrounds */
:root.light .bg-rose-950\/20   { background-color: #fff1f2 !important; border-color: #fecdd3 !important; }
:root.light .bg-amber-950\/20  { background-color: #fffbeb !important; border-color: #fde68a !important; }
:root.light .bg-cyan-950\/20   { background-color: #ecfeff !important; border-color: #a5f3fc !important; }
:root.light .bg-teal-950\/20   { background-color: #f0fdfa !important; border-color: #99f6e4 !important; }

/* Filter toolbar type-filter buttons */
:root.light .bg-slate-850,
:root.light .hover\:bg-slate-850:hover {
  background-color: #e2e8f0 !important;
}

/* Device card selected state */
:root.light #inventory-list-container .bg-slate-900.border-emerald-500\/80 {
  background-color: #f0fdf4 !important;
  border-color: #10b981 !important;
}

/* Device card unselected/hover */
:root.light #inventory-list-container .bg-slate-900\/40 {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

:root.light #inventory-list-container .hover\:bg-slate-900\/60:hover {
  background-color: #f1f5f9 !important;
}

/* SPECS ID badge and code block inside right panel */
:root.light #inventory-details-container .bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root.light #inventory-details-container .bg-slate-900\/50,
:root.light #inventory-details-container .bg-slate-900\/60 {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

/* Amber rescue badge */
:root.light .bg-amber-950 {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

/* ── Dashboard "NET" watermark: invisible in light mode ───────── */
:root.light #dashboard-cockpit-root .text-slate-800 {
  color: transparent !important;
}

/* ── Modal overlays ───────────────────────────────────────────── */
:root.light .fixed.inset-0 {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

:root.light .fixed.inset-0 > div,
:root.light .bg-\[\#0F172A\].rounded-2xl {
  background-color: #ffffff !important;
  border-color: var(--border-muted) !important;
}

/* ── Lab Template Modal internals ─────────────────────────────── */

/* Modal header bar */
:root.light .fixed.inset-0 .bg-slate-900.border-b {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

/* Modal form body */
:root.light .fixed.inset-0 form {
  background-color: #ffffff !important;
}

/* Device-toggle buttons inside modal */
:root.light .fixed.inset-0 .bg-slate-900.border-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: var(--border) !important;
  color: var(--text-label) !important;
}

:root.light .fixed.inset-0 .bg-slate-900.border-slate-850 {
  background-color: #f1f5f9 !important;
}

/* Device grid area */
:root.light .bg-slate-950\/60 {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

/* Link builder row */
:root.light .bg-slate-1000,
:root.light .bg-slate-1000\/40 {
  background-color: #f1f5f9 !important;
  border-color: var(--border) !important;
}

/* Existing link row badges */
:root.light .fixed.inset-0 .bg-slate-900\/40 {
  background-color: #f8fafc !important;
}

/* border-slate-700 in modal context */
:root.light .border-slate-700 {
  border-color: var(--border) !important;
}

/* ── Login / Register pages ───────────────────────────────────── */
:root.light .min-h-screen.bg-\[\#0B0F19\] {
  background-color: var(--bg) !important;
}

:root.light .bg-slate-950\/80 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--border) !important;
}

/* ── Code / terminal blocks - always dark ─────────────────────── */
:root.light pre,
:root.light code,
:root.light .font-mono.bg-slate-950 {
  background-color: #0d1117 !important;
  color: #00f0ff !important;
  border-color: #1f242c !important;
}

:root.light pre *,
:root.light code * {
  color: inherit !important;
}

/* ── Settings page – blue (Entra ID) tokens ─────────────────────── */
:root.light .bg-blue-950\/60,
:root.light .bg-blue-950\/50,
:root.light .bg-blue-950\/40 {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

:root.light .border-blue-900\/50,
:root.light .border-blue-900\/40 {
  border-color: #93c5fd !important;
}

:root.light .text-blue-400 {
  color: #1d4ed8 !important;
}

/* ── AirIT badge - always white text on navy, regardless of theme ─ */
.airit-badge {
  color: #ffffff !important;
  background-color: var(--airit-navy) !important;
}

/* ── Text selection ───────────────────────────────────────────── */
:root.light ::selection {
  background-color: rgba(5, 150, 105, 0.2) !important;
  color: #047857 !important;
}

/* ── Reservation Details Modal (BookingDetailsModal) ──────────── */

/* Device node cards inside right panel */
:root.light #booking-details-modal .bg-slate-950\/65 {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
}

/* Developer panel wrapper - restore dark terminal feel */
:root.light #booking-details-modal .font-mono.bg-slate-950 {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* Terminal output area bg-slate-1000 */
:root.light #booking-details-modal .bg-slate-1000 {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* Ansible/terminal button trigger row bg-slate-900/40 - keep readable */
:root.light #booking-details-modal .bg-slate-900\/40 {
  background-color: #f1f5f9 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Reserve Slot selects & date pickers (BookingCalendar) ───── */
:root.light #booking-actions-card select,
:root.light #booking-actions-card input[type="text"],
:root.light #booking-actions-card input[type="date"],
:root.light #booking-actions-card textarea {
  background-color: #ffffff !important;
  border-color: var(--border-muted) !important;
  color: var(--text) !important;
}

/* Date picker calendar icon - invert to dark in light mode */
:root.light input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
}

/* ── Define Ports dropdowns & Link Builder (LabTemplates modal) ── */

/* Non-standard text/border classes used in the link builder */
:root.light .text-slate-250 {
  color: var(--text) !important;
}

:root.light .border-slate-805 {
  border-color: var(--border) !important;
}

/* Selects and inputs inside any fixed modal overlay */
:root.light .fixed.inset-0 select,
:root.light .fixed.inset-0 input[type="text"],
:root.light .fixed.inset-0 input[type="email"],
:root.light .fixed.inset-0 input[type="password"],
:root.light .fixed.inset-0 input[type="date"],
:root.light .fixed.inset-0 textarea {
  background-color: #ffffff !important;
  border-color: var(--border-muted) !important;
  color: var(--text) !important;
}

/* Link row items inside modal */
:root.light .fixed.inset-0 .bg-slate-950.font-mono {
  background-color: #f8fafc !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* "Add Link" button - keep readable white label on indigo in light mode
   (the global :root.light .text-white override would otherwise darken it) */
:root.light #add-link-btn {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

:root.light #add-link-btn:hover {
  background-color: #6366f1 !important;
}