/*


 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --enq-accent:        #7C3AED;
  --enq-accent-dark:   #6D28D9;
  --enq-accent-text:   #ffffff;
  --enq-accent-light:  #EDE9FE;

  /* Light mode */
  --enq-sidebar:       #1E1B4B;
  --enq-sidebar-hover: rgba(255,255,255,0.06);
  --enq-sidebar-border:rgba(255,255,255,0.08);
  --enq-surface:       #F1F5F9;
  --enq-surface-2:     #ffffff;
  --enq-border:        #E2E8F0;
  --enq-text:          #1E1B4B;
  --enq-text-2:        #475569;
  --enq-text-3:        #94A3B8;
  --enq-card-bg:       #ffffff;
  --enq-card-shadow:   0 1px 3px 0 rgba(0,0,0,0.08);
  --enq-input-bg:      #ffffff;
  --enq-input-border:  #E2E8F0;
  --enq-row-hover:     #f8fafc;
  --enq-divider:       #F1F5F9;
}

/* Dark mode overrides */
html.dark {
  --enq-surface:       #0F0D1A;
  --enq-surface-2:     #1E1B4B;
  --enq-border:        #334155;
  --enq-text:          #FAFBFC;
  --enq-text-2:        #94A3B8;
  --enq-text-3:        #475569;
  --enq-card-bg:       #1E1B4B;
  --enq-card-shadow:   0 1px 3px 0 rgba(0,0,0,0.3);
  --enq-input-bg:      #0F0D1A;
  --enq-input-border:  #334155;
  --enq-row-hover:     #2D2A5E;
  --enq-divider:       #334155;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--enq-surface);
  color: var(--enq-text);
  transition: background-color 0.2s, color 0.2s;
}

.font-mono, code, .serial, .qr-token {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Components ─────────────────────────────────────────────── */
.enq-card {
  background: var(--enq-card-bg);
  border: 1px solid var(--enq-border);
  border-radius: 0.75rem;
  box-shadow: var(--enq-card-shadow);
  transition: background-color 0.2s, border-color 0.2s;
}

.nav-active {
  background-color: rgba(124, 58, 237, 0.15);
  color: #ffffff;
}
.nav-active svg { color: #7C3AED; }

.btn-accent { background-color: var(--enq-accent); color: var(--enq-accent-text); font-weight: 600; }
.btn-accent:hover { background-color: var(--enq-accent-dark); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge-ok          { background: #dcfce7; color: #15803d; }
.badge-warning     { background: #fef9c3; color: #a16207; }
.badge-critical    { background: #fee2e2; color: #b91c1c; }
.badge-inactive    { background: #f1f5f9; color: #64748b; }
.badge-maintenance { background: #fef3c7; color: #92400e; }

html.dark .badge-ok          { background: rgba(21,128,61,0.2);  color: #4ade80; }
html.dark .badge-warning     { background: rgba(161,98,7,0.2);   color: #fbbf24; }
html.dark .badge-critical    { background: rgba(185,28,28,0.2);  color: #f87171; }
html.dark .badge-inactive    { background: rgba(100,116,139,0.2);color: #94a3b8; }
html.dark .badge-maintenance { background: rgba(146,64,14,0.2);  color: #fcd34d; }

/* ── Inputs ─────────────────────────────────────────────────── */
input, select, textarea {
  background-color: var(--enq-input-bg);
  border-color: var(--enq-input-border);
  color: var(--enq-text);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #7C3AED;
}
input::placeholder, textarea::placeholder { color: var(--enq-text-3); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display: flex; gap: 0.25rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
  border: 1px solid var(--enq-border); color: var(--enq-text);
  background: var(--enq-card-bg); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pagination a:hover { background: var(--enq-accent); color: #ffffff; border-color: var(--enq-accent); }
.pagination .current { background: var(--enq-accent); color: #ffffff; border-color: var(--enq-accent); }
.pagination .disabled { opacity: 0.4; pointer-events: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.main-authenticated { margin-left: 0; }
@media (min-width: 768px) {
  .main-authenticated { margin-left: 15rem; }
}
.main-public { padding-top: 4rem; }

/* Mobile sidebar overlay */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 15;
  background: rgba(0,0,0,0.5);
}
#sidebar-overlay.active { display: block; }

/* Sidebar mobile — hidden by default, shown when open */
#app-sidebar {
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
@media (min-width: 768px) {
  #app-sidebar { transform: translateX(0) !important; }
  #sidebar-overlay { display: none !important; }
}
#app-sidebar.sidebar-open { transform: translateX(0); }

/* ── Dark mode — text/bg overrides for inline styles ────────── */
html.dark .bg-white { background-color: var(--enq-card-bg) !important; }
html.dark .text-slate-900 { color: var(--enq-text) !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #8b949e !important; }
html.dark .text-slate-400 { color: #6e7681 !important; }
html.dark .bg-slate-50  { background-color: #1c2128 !important; }
html.dark .bg-slate-100 { background-color: #21262d !important; }
html.dark .bg-slate-200 { background-color: #30363d !important; }
html.dark .border-slate-200 { border-color: #30363d !important; }
html.dark .border-slate-100 { border-color: #21262d !important; }
html.dark .divide-slate-50 > :not(:last-child)  { border-color: #21262d !important; }
html.dark .divide-slate-100 > :not(:last-child) { border-color: #30363d !important; }
html.dark [style*="background:#f8fafc"] { background: #1c2128 !important; }
html.dark [style*="background:#f1f5f9"] { background: #21262d !important; }
html.dark [style*="border-top:1px solid #f1f5f9"] { border-top-color: #21262d !important; }
html.dark [style*="border-bottom:1px solid #f1f5f9"] { border-bottom-color: #21262d !important; }
html.dark [style*="border:1px solid #f1f5f9"] { border-color: #21262d !important; }
html.dark [style*="border:1px solid #e2e8f0"] { border-color: #30363d !important; }
html.dark [style*="background:#fff7ed"] { background: rgba(146,64,14,0.15) !important; }
html.dark [style*="border:1px solid #fed7aa"] { border-color: rgba(146,64,14,0.4) !important; }
html.dark [style*="background:#fef9c3"] { background: rgba(161,98,7,0.15) !important; }
html.dark [style*="background:#fee2e2"] { background: rgba(185,28,28,0.15) !important; }
html.dark [style*="background:#dcfce7"] { background: rgba(21,128,61,0.15) !important; }
html.dark [style*="background:rgba(124,58,237,0.08)"] { background: rgba(124,58,237,0.06) !important; }
html.dark [style*="background:rgba(124,58,237,0.12)"] { background: rgba(124,58,237,0.15) !important; }
html.dark [style*="background:rgba(124,58,237,0.15)"] { background: rgba(124,58,237,0.18) !important; }
html.dark [style*="background:#1E1B4B"] { background: #0d1117 !important; }
html.dark [style*="color:#1e293b"] { color: #e6edf3 !important; }
html.dark [style*="color:#1E1B4B"] { color: #e6edf3 !important; }
html.dark tr:hover td { background-color: var(--enq-row-hover) !important; }
html.dark .hover\:bg-slate-50:hover  { background-color: #1c2128 !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #21262d !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #30363d !important; }

/* ── Safelist ───────────────────────────────────────────────── */
.hover\:bg-slate-50:hover   { background-color: oklch(98.4% .003 247.858); }
.hover\:bg-slate-100:hover  { background-color: oklch(96.8% .007 247.896); }
.hover\:bg-slate-200:hover  { background-color: oklch(92.9% .013 255.508); }
.hover\:bg-slate-300:hover  { background-color: oklch(86.9% .022 252.894); }
.hover\:text-slate-600:hover { color: oklch(44.6% .043 257.281); }
.hover\:text-slate-700:hover { color: oklch(37.2% .044 257.287); }
.hover\:text-slate-900:hover { color: oklch(20.8% .042 265.755); }
.hover\:text-violet-600:hover { color: #6D28D9; }
.hover\:underline:hover { text-decoration-line: underline; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, #7C3AED); }
.focus\:ring-violet-400:focus { --tw-ring-color: #7C3AED; }

/* ── Drag & Drop ────────────────────────────────────────────── */
[data-field-id].drag-over-top    { border-top: 2px solid #7C3AED !important; margin-top: -2px; }
[data-field-id].drag-over-bottom { border-bottom: 2px solid #7C3AED !important; margin-bottom: -2px; }
[data-drag-handle] { touch-action: none; }