/* ============================================================================
   BAW DASHBOARD — Industrial Refinery theme
   Pantone 172C orange (#F7941D) on graphite, with Cool Gray accents.
   Hot reload: just save and refresh.
   ============================================================================ */

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

:root {
  --baw-orange:        #F7941D;   /* Pantone 172C */
  --baw-orange-hot:    #FFA53D;
  --baw-orange-deep:   #C9700A;
  --baw-graphite:      #0E0E10;
  --baw-graphite-2:    #161618;
  --baw-graphite-3:    #1F1F22;
  --baw-line:          #2A2A2E;
  --baw-line-bright:   #3A3A40;
  --baw-text:          #E5E5E7;
  --baw-text-dim:      #8A8A92;
  --baw-display:       'Oswald', 'Bebas Neue', Impact, 'Haettenschweiler', sans-serif;
  --baw-mono:          'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --baw-body:          'Inter', system-ui, sans-serif;
}

/* -------- Page background: graphite + faint blueprint grid -------- */
html, body {
  background:
    linear-gradient(180deg, rgba(247,148,29,0.05) 0%, rgba(0,0,0,0) 30%),
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(255,255,255,0.025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.025) 39px 40px),
    var(--baw-graphite) !important;
  background-attachment: fixed !important;
  color: var(--baw-text);
  font-family: var(--baw-body);
}

/* -------- BAW wordmark + tagline above the widgets -------- */
#information-widgets {
  flex-wrap: wrap !important;
  border-bottom: 2px solid var(--baw-orange) !important;
  padding-top: 0.5rem !important;
}

#information-widgets::before {
  content: 'BAW';
  flex: 0 0 100%;
  order: -2;
  font-family: var(--baw-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--baw-orange);
  text-shadow: 0 0 24px rgba(247,148,29,0.3);
  margin-bottom: -4px;
}

#information-widgets::after {
  content: 'DASHBOARD // GAMEROOM PC // TAILSCALE';
  flex: 0 0 100%;
  order: -1;
  font-family: var(--baw-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--baw-text-dim);
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--baw-line-bright);
}

/* -------- Top widget bar (CPU / RAM / Disk / DateTime) -------- */
.information-widget-resource .text-xs {
  font-family: var(--baw-mono) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--baw-text-dim) !important;
}

.resource-usage > div { background-color: var(--baw-orange) !important; }

.information-widget-datetime span {
  font-family: var(--baw-display) !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: var(--baw-text) !important;
  text-shadow: 0 0 12px rgba(247,148,29,0.15);
}

#information-widgets > div > .ml-6 {
  font-family: var(--baw-mono) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--baw-orange) !important;
  font-size: 11px !important;
}

/* -------- Section group headers -------- */
.service-group-name,
#page_wrapper h2 {
  font-family: var(--baw-display) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 5px !important;
  color: var(--baw-text) !important;
  border-bottom: 1px solid var(--baw-line-bright) !important;
  padding: 1.4rem 0 0.6rem 20px !important;
  position: relative;
  margin-top: 1.25rem !important;
  display: block !important;
}

.service-group-name::before,
#page_wrapper h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.7rem;
  bottom: 0.8rem;
  width: 7px;
  background: var(--baw-orange);
  box-shadow: 0 0 10px rgba(247,148,29,0.55);
}


/* -------- Service cards -------- */
.service-card {
  background: var(--baw-graphite-2) !important;
  border: 1px solid var(--baw-line) !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: border-color 0.18s ease-out, background 0.18s ease-out, transform 0.18s ease-out !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--baw-line-bright);
  transition: background 0.18s ease-out, box-shadow 0.18s ease-out;
  z-index: 2;
  pointer-events: none;
}

.service-card:hover {
  border-color: var(--baw-orange) !important;
  background: var(--baw-graphite-3) !important;
  transform: translateY(-1px);
}

.service-card:hover::before {
  background: var(--baw-orange);
  box-shadow: 0 0 14px rgba(247,148,29,0.7);
}

/* Reset roundness for everything inside cards (preserve dots/pills) */
.service-card *,
.service-card *::before,
.service-card *::after { border-radius: 0 !important; }
.service-card [class*='rounded-full'] { border-radius: 9999px !important; }

/* Card title text */
.service-name {
  font-family: var(--baw-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  font-size: 1.05rem !important;
  color: var(--baw-text) !important;
  padding-left: 14px !important;
  padding-top: 8px !important;
}

/* Card description */
.service-description {
  font-family: var(--baw-mono) !important;
  letter-spacing: 1.2px !important;
  color: var(--baw-text-dim) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Widget stat row (the .service-container inside cards is the stat-block row) */
.service-card .service-container {
  background: transparent !important;
  border-top: 1px dashed var(--baw-line-bright) !important;
  margin-top: 4px !important;
  padding: 4px !important;
}

/* Individual widget stat blocks */
.service-block {
  background: rgba(247,148,29,0.04) !important;
  border: 1px solid var(--baw-line) !important;
  border-radius: 0 !important;
  margin: 3px !important;
  padding: 6px 4px !important;
}
.service-block .font-thin,
.service-block .text-sm {
  font-family: var(--baw-mono) !important;
  color: var(--baw-orange) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.5px !important;
}
.service-block .font-bold,
.service-block .text-xs {
  font-family: var(--baw-mono) !important;
  letter-spacing: 1.5px !important;
  color: var(--baw-text-dim) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Status / ping dots — ONLINE = brand orange */
.service-card [class*='bg-emerald'],
.service-card [class*='bg-green'],
.service-tags [class*='bg-emerald'],
.service-tags [class*='bg-green'] {
  background-color: var(--baw-orange) !important;
  box-shadow: 0 0 8px rgba(247,148,29,0.7);
  color: var(--baw-graphite) !important;
}

.service-card [class*='bg-rose'],
.service-card [class*='bg-red'] {
  background-color: #C0392B !important;
  color: white !important;
}

/* Service-tag pills (e.g. ping latency 50 MS) */
.service-tags > div {
  font-family: var(--baw-mono) !important;
  letter-spacing: 1px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* Service icon column — keep its width tight */
.service-icon {
  background: rgba(247,148,29,0.04) !important;
  border-right: 1px solid var(--baw-line) !important;
}

/* Service group spacing */
.services-group { margin-bottom: 1.5rem; }

/* -------- Footer -------- */
#footer {
  border-top: 1px dashed var(--baw-line);
  padding: 1.5rem 2rem !important;
  margin-top: 3rem !important;
  position: relative;
  font-family: var(--baw-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--baw-text-dim);
  text-transform: uppercase;
}

#footer::before {
  content: 'BAW // SYSTEM ONLINE // EOF';
  position: absolute;
  left: 2rem;
  top: 1.5rem;
  color: var(--baw-orange);
  opacity: 0.55;
}

#footer #revalidate {
  background: var(--baw-graphite-2);
  border: 1px solid var(--baw-line);
  padding: 5px;
  border-radius: 0;
  transition: border-color 0.18s;
}
#footer #revalidate:hover { border-color: var(--baw-orange); }
#footer #revalidate svg { fill: var(--baw-orange); color: var(--baw-orange); }

/* -------- Search dialog -------- */
dialog {
  background: var(--baw-graphite-2) !important;
  border: 1px solid var(--baw-orange) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 30px rgba(247,148,29,0.25) !important;
}
dialog input {
  background: var(--baw-graphite-2) !important;
  color: var(--baw-text) !important;
  font-family: var(--baw-display) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
  border-color: var(--baw-line-bright) !important;
}

/* -------- Theme color overrides — bend zinc toward graphite -------- */
.theme-zinc {
  --color-50:  245 245 245;
  --color-100: 229 229 229;
  --color-200: 212 212 215;
  --color-300: 161 161 170;
  --color-400: 113 113 122;
  --color-500: 113 113 122;
  --color-600: 82 82 91;
  --color-700: 42 42 46;
  --color-800: 22 22 24;
  --color-900: 14 14 16;
  --color-logo-start: 247 148 29;
  --color-logo-stop:  201 112 10;
}

/* -------- Mobile -------- */
@media (max-width: 640px) {
  #information-widgets::before { font-size: 44px; letter-spacing: -2px; }
  #information-widgets::after  { font-size: 9px; letter-spacing: 3px; }
  .service-group-name,
  #page_wrapper h2             { font-size: 1.35rem !important; letter-spacing: 3px !important; }
  .service-group-name::after,
  #page_wrapper h2::after      { display: none; }
  .service-name                { font-size: 0.95rem !important; }
}