:root{
  --bg:#f7fafc; --card:#ffffff; --muted:#64748b; --text:#0f172a;
  --blue:#0ea5e9; --blue-600:#0284c7; --red:#ef4444; --green:#22c55e; --orange:#f59e0b; --yellow:#eab308;
  --ring: rgba(2,132,199,0.25);
  --shadow:0 10px 24px rgba(2,6,23,.06), 0 3px 8px rgba(2,6,23,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Banner */
#brand-banner{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(90deg,#0ea5e9 0%, #ffffff 55%, rgba(239,68,68,.09) 100%);
  border-bottom:1px solid #e2e8f0; backdrop-filter:saturate(140%) blur(4px);
}
.brand-left{display:flex; gap:10px; align-items:center}
.brand-logo{width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow); background:#fff}
.brand-texts{display:flex; flex-direction:column; line-height:1.15}
.brand-title{font-weight:800; letter-spacing:.2px; font-size:14px}
.brand-tag{font-size:11px; color:#0f172a; opacity:.75}
.brand-right{font-size:12px;color:#0f172a}

/* Layout */
.container{max-width:1280px;margin:14px auto;padding:0 14px}
.grid-row{display:grid; gap:14px; margin-bottom:14px}

/* Row-1 and Row-3: 2 columns on desktop, 1 on small */
.row-2cols{grid-template-columns: repeat(12, minmax(0,1fr))}
.row-2cols > .card{grid-column: span 12}
@media(min-width:1024px){ .row-2cols > .card{grid-column: span 6} }

/* Row-2: single column full-width */
.row-1col{grid-template-columns: repeat(12, minmax(0,1fr))}
.row-1col > .card{grid-column: 1 / -1}

/* Cards */
.card{background:var(--card); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e2e8f0}
.card-head h3{margin:0;font-size:15px}
.card-body{padding:12px}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:7px 11px; font-weight:700;
  background:var(--blue); color:white; cursor:pointer; transition:transform .06s ease, filter .15s ease, background .2s ease;
  box-shadow:0 8px 16px rgba(14,165,233,.25);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn[data-busy="1"]{background:var(--blue-600)}

/* Tables */
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.table th, .table td{padding:9px 10px; border-bottom:1px solid #e5e7eb}
.table thead th{position:sticky; top:0; background:#f1f5f9; z-index:1;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid #dbe1e8}
.table tbody tr:hover{background:#f8fafc}
.table-wrap{max-height:420px; overflow:auto}

/* Badges */
.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:800}
.badge.ok{background:rgba(34,197,94,.12); color:#15803d; border:1px solid rgba(34,197,94,.25)}
.badge.fail{background:rgba(239,68,68,.12); color:#b91c1c; border:1px solid rgba(239,68,68,.25)}
.badge.warn{background:rgba(245,158,11,.12); color:#b45309; border:1px solid rgba(245,158,11,.25)}

/* Footnotes */
.footer-note{margin-top:6px;color:#475569;font-size:12px}

/* Ensure no hero logo in body; banner logo only */
main img[src*="assets/logo"]{ display:none !important; }

/* UI-FIX: ensure no hero/logo appears inside main; banner-only logo */
main img[src*="/healthdash/assets/logo"] { display: none !important; }
/* security-table polish */
.table th.th-right, .table td.td-right { text-align: right; }

/* === Compact, Balanced Widget Layout === */
.card, .widget, .table-wrap {
  margin-bottom: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.table th, .table td {
  padding: 4px 8px !important;
  line-height: 1.25 !important;
}

.table thead th {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.table tbody tr:nth-child(even) {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
}

.table tbody tr:hover {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
}

.badge.ok {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
  color: #047857 !important;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
}
.badge.fail {
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
  color: #b91c1c !important;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
}

.footer-note {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #666 !important;
}

.table th.th-right, .table td.td-right {
  text-align: right !important;
}

#main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  grid-gap: 16px !important;
}

#metrics-card canvas {
  height: 260px !important;
  max-height: 260px !important;
}

/* Slightly smaller Refresh button */
button, .btn, .refresh-btn {
  font-size: 13px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

/* ====== LOGIN PAGE POLISH (compact & colorful) ====== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(14,165,233,0.18), transparent 55%),
    radial-gradient(900px 600px at 120% 10%, rgba(239,68,68,0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}
.login-card{
  width:100%; max-width:420px; background:#fff; border-radius:18px;
  box-shadow:0 14px 28px rgba(2,6,23,.10), 0 6px 12px rgba(2,6,23,.05);
  overflow:hidden; border:1px solid #e6eef6;
}
.login-top{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:linear-gradient(90deg,#0ea5e9 0%, #ffffff 60%, rgba(239,68,68,.12) 100%);
  border-bottom:1px solid #e2e8f0;
}
.login-logo{
  width:40px; height:40px; border-radius:10px; background:#fff; flex:0 0 auto;
  box-shadow:0 6px 12px rgba(14,165,233,.25);
}
.login-brand{
  display:flex; flex-direction:column; line-height:1.15;
}
.login-brand .title{font-weight:800; font-size:15px; color:#0f172a}
.login-brand .tag{font-size:11px; color:#0f172a; opacity:.75}

.login-body{ padding:16px 16px 10px 16px; }
.login-field{ display:flex; flex-direction:column; gap:6px; margin:10px 0;}
.login-field label{ font-size:12px; color:#64748b; }
.login-field input{
  padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; outline:none;
  font-size:14px; background:#ffffff;
}
.login-field input:focus{ border-color:#0ea5e9; box-shadow:0 0 0 4px rgba(14,165,233,0.20); }

.login-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:6px;
  font-size:12px; color:#475569;
}
.login-meta .pw-toggle{ display:flex; align-items:center; gap:6px; cursor:pointer; }

.login-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.login-btn{
  appearance:none; border:0; border-radius:10px; padding:8px 12px; font-weight:700;
  background:#0ea5e9; color:#fff; cursor:pointer;
  box-shadow:0 8px 16px rgba(14,165,233,.25);
}
.login-btn:hover{ filter:brightness(1.05); }
.login-btn:active{ transform:translateY(1px); }

.login-notice{
  margin-top:10px; font-size:11px; color:#475569; background:#f8fafc; border:1px solid #e8eef5;
  padding:10px 12px; border-radius:10px;
}

.login-footer{
  text-align:center; padding:10px 12px 14px 12px; font-size:11px; color:#6b7280;
  border-top:1px solid #eef2f7; background:#fbfdff;
}

/* Make it compact overall on small screens too */
@media (max-width: 420px){
  .login-card{ border-radius:14px; }
  .login-body{ padding:14px; }
}

/* --- Banner Logout button --- */
.btn-logout{
  background:#ef4444; /* Tailwind red-500 */
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:700;
  box-shadow:0 6px 12px rgba(239,68,68,.22);
}
.btn-logout:hover{ filter:brightness(1.05); }
.btn-logout:active{ transform:translateY(1px); }
@media (prefers-contrast: more){
  .btn-logout{ background:#dc2626; }
}

/* --- Subtle vibrancy without heaviness --- */
.card-head{
  background: linear-gradient(0deg, rgba(14,165,233,0.04), rgba(14,165,233,0.04)), #fff;
}
.table thead th{
  background: linear-gradient(0deg, rgba(14,165,233,0.05), rgba(14,165,233,0.05)), #f1f5f9;
}

/* === WIDGET ACCENT STRIPS === */
.widget {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.widget::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  display: block;
}

.widget.services::before   { background: linear-gradient(90deg, #16a34a, #4ade80); } /* Green */
.widget.security::before   { background: linear-gradient(90deg, #dc2626, #f87171); } /* Red */
.widget.metrics::before    { background: linear-gradient(90deg, #0284c7, #38bdf8); } /* Blue */
.widget.disk::before       { background: linear-gradient(90deg, #f97316, #fb923c); } /* Orange */
.widget.backups::before    { background: linear-gradient(90deg, #eab308, #fde047); } /* Yellow */

/* Compact title strip styling */
.widget h2 {
  margin-top: 8px !important;
  padding-top: 8px !important;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

/* === Accent strips via card IDs (works with current markup) === */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:4px; display:block;
}

/* Services (green) */
#services-card::before{ background:linear-gradient(90deg,#16a34a,#4ade80); }
/* Security (red) */
#security-card::before{ background:linear-gradient(90deg,#dc2626,#f87171); }
/* Metrics (blue) */
#metrics-card::before{ background:linear-gradient(90deg,#0284c7,#38bdf8); }
/* Disk (orange) */
#disk-card::before{ background:linear-gradient(90deg,#f97316,#fb923c); }
/* Backups (yellow) */
#backups-card::before{ background:linear-gradient(90deg,#eab308,#fde047); }

/* Keep earlier .widget.* selectors for compatibility */
.widget{ position:relative; overflow:hidden; }
.widget::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; display:block; }
.widget.services::before { background:linear-gradient(90deg,#16a34a,#4ade80); }
.widget.security::before { background:linear-gradient(90deg,#dc2626,#f87171); }
.widget.metrics::before  { background:linear-gradient(90deg,#0284c7,#38bdf8); }
.widget.disk::before     { background:linear-gradient(90deg,#f97316,#fb923c); }
.widget.backups::before  { background:linear-gradient(90deg,#eab308,#fde047); }

/* === Hover Lift + Glow Animation === */
.card, .widget {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(14,165,233,0.15), 0 4px 10px rgba(0,0,0,0.04);
  cursor: default;
}

/* === OVERRIDES: Login page polish (2025-11-01) === */

/* Blue→White header strip on login card (no red tint) */
.login-top{
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
}

/* Brand-consistent login button (gradient + hover/active + focus ring) */
.login-btn{
  background: linear-gradient(90deg, #0369a1, #0ea5e9) !important;
  color:#ffffff !important;
  border: 1px solid rgba(2,132,199,0.25) !important;
  box-shadow: 0 10px 16px rgba(14,165,233,.22) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.login-btn:hover{
  filter: brightness(1.03) !important;
  box-shadow: 0 12px 20px rgba(14,165,233,.28) !important;
}
.login-btn:active{
  transform: translateY(1px) !important;
  box-shadow: 0 6px 12px rgba(14,165,233,.22) !important;
}
.login-btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 10px 16px rgba(14,165,233,.22) !important;
}

/* Inputs focus ring color to match blue theme */
.login-field input:focus{
  border-color:#0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,0.20) !important;
}

/* === LOGIN LOGO GLOW (2025-11-01) === */
.login-logo {
  box-shadow:
    0 0 6px rgba(255,255,255,0.5),     /* subtle white halo */
    0 4px 10px rgba(2,132,199,0.4);    /* soft blue depth */
  border-radius: 12px !important;
  background: #fff !important;
  padding: 4px !important;
  transition: box-shadow .3s ease;
}
.login-logo:hover {
  box-shadow:
    0 0 10px rgba(255,255,255,0.65),
    0 6px 14px rgba(2,132,199,0.55);
}
/* ===== DASHBOARD TABLE RESET (no blue bands) ===== */
/* Scope to cards so login page stays intact */
.card .table thead th,
.card .table thead th * {
  background: #f6f7fb !important;   /* light gray header */
  background-image: none !important;
  color: #0f172a !important;
}

.card .table tbody tr,
.card .table tbody td {
  background: #ffffff !important;    /* normal rows */
  background-image: none !important;
}

.card .table tbody tr:nth-child(even) td {
  background: #fbfcfe !important;    /* subtle zebra */
}

.card .table tbody tr:hover td {
  background: #f1f7ff !important;    /* light hover */
}

/* If any gradient slipped on <th>/<td> via inline or earlier rules, hard reset */
.card .table th, .card .table td {
  background-image: none !important;
}

/* === STATUS / BANS COLOR PILL FIX === */
.status-active,
.badge-green,
.status.ok,
.status.up {
  background: #16a34a !important;  /* vibrant green */
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(22,163,74,0.2) !important;
}

.status-inactive,
.badge-red,
.status.down,
.status.err {
  background: #dc2626 !important;  /* rich red */
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(220,38,38,0.25) !important;
}

/* Jail bans count badge fix */
.bans-badge,
.ban-count {
  background: #dc2626 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(220,38,38,0.3) !important;
}

/* === STATUS / BANS COLOR PILL FIX === */
.status-active,
.badge-green,
.status.ok,
.status.up {
  background: #16a34a !important;  /* vibrant green */
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(22,163,74,0.2) !important;
}

.status-inactive,
.badge-red,
.status.down,
.status.err {
  background: #dc2626 !important;  /* rich red */
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(220,38,38,0.25) !important;
}

/* Jail bans count badge fix */
.bans-badge,
.ban-count {
  background: #dc2626 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(220,38,38,0.3) !important;
}
/* === BADGE COLOR RESTORE (force) === */
.badge { border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 13px; }

.badge.ok,
.badge-ok,
.status-active,
.status.ok,
.status.up {
  background: #16a34a !important; /* green */
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(22,163,74,0.20) !important;
}

.badge.fail,
.badge-red,
.status-inactive,
.status.down,
.status.err {
  background: #dc2626 !important; /* red */
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(220,38,38,0.25) !important;
}

/* Ensure table/row resets don't wash badge colors */
.card .table .badge { background-image: none !important; }

/* === Modal (lightweight) === */
#hd-modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,0.35); z-index:9999;
  display:none; align-items:center; justify-content:center; padding:16px;
}
#hd-modal-backdrop .hd-modal{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; width:min(680px,calc(100vw - 32px));
  box-shadow:0 20px 40px rgba(2,6,23,0.22);
}
.hd-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid #eef2f7; background:#f8fbff;
}
.hd-modal-body{ padding:12px 16px; max-height:65vh; overflow:auto; }

/* Clickable bans pill (keeps your red/green .badge colors) */
a.ban-pill { text-decoration:none; }
a.ban-pill .badge { display:inline-block; min-width:2.5em; text-align:center; }

/* ===== Banner alignment fixes ===== */
#brand-banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px;
  background: linear-gradient(90deg,#0ea5e9,#f5f7fb 70%);  /* existing look */
  border-bottom: 1px solid rgba(2,6,23,.06);
}
#brand-banner .brand-left{ display:flex; align-items:center; gap:10px; min-width:0; }
#brand-banner .brand-logo{ width:34px; height:34px; object-fit:contain; border-radius:6px; background:#fff; padding:2px; box-shadow:0 6px 14px rgba(2,6,23,.18); }
#brand-banner .brand-title{ line-height:1.05; }
#brand-banner .brand-name{ font-weight:700; font-size:15px; color:#0f172a; }
#brand-banner .brand-tag{ font-size:12px; color:#475569; }

#brand-banner .brand-tools{
  display:flex; align-items:center; gap:12px;
  margin-left:auto; white-space:nowrap;
}
#brand-banner #clock-strip{
  font-size:12px; color:#334155; letter-spacing:.2px;
}

/* Logout as a proper pill button */
.btn{ border:0; border-radius:8px; padding:6px 12px; font-weight:600; cursor:pointer; }
.btn-logout{
  background:#ef4444; color:#fff; box-shadow:0 6px 14px rgba(239,68,68,.25);
  text-decoration:none; display:inline-block;
}
.btn-logout:hover{ filter:brightness(1.05); }
.btn-logout:active{ transform:translateY(1px); }

/* Small screens: stack neatly */
@media (max-width: 720px){
  #brand-banner{ flex-wrap:wrap; row-gap:8px; }
  #brand-banner .brand-tools{ width:100%; justify-content:flex-end; }
  #brand-banner #clock-strip{ font-size:11px; }
}

/* ===== LAYOUT: 2-1-2 grid exactly ===== */
.container{ max-width:1200px; margin:0 auto; padding:16px 12px; }
.grid{ display:grid; gap:18px; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.one{ grid-template-columns: 1fr; }

/* ===== WIDGET card styling (compact) ===== */
.widget{
  position:relative; background:#fff; border-radius:14px;
  box-shadow:0 8px 22px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.04);
  padding:14px 14px 12px; transition:transform .18s ease, box-shadow .18s ease;
}
.widget:hover{
  transform:translateY(-2px); /* 2px float */
  box-shadow:0 12px 26px rgba(2,6,23,.10), 0 1px 0 rgba(2,6,23,.04);
}

/* Accent strips per widget */
.widget::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:4px; display:block;
}
.widget.services::before  { background:linear-gradient(90deg,#16a34a,#4ade80); } /* green */
.widget.security::before  { background:linear-gradient(90deg,#dc2626,#f87171); } /* red */
.widget.metrics::before   { background:linear-gradient(90deg,#0284c7,#38bdf8); } /* blue */
.widget.disk::before      { background:linear-gradient(90deg,#f97316,#fb923c); } /* orange */
.widget.backups::before   { background:linear-gradient(90deg,#eab308,#fde047); } /* yellow */

.widget-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.widget-head h2{ font-size:16px; font-weight:800; color:#0f172a; margin:0; }

/* Buttons */
.btn{ border:0; border-radius:10px; padding:6px 12px; font-weight:700; cursor:pointer; }
.btn-refresh{ background:#0ea5e9; color:#fff; box-shadow:0 6px 14px rgba(14,165,233,.25); }
.btn-refresh:hover{ filter:brightness(1.05); }

/* ===== Tables inside widgets (NO BLUE BANDS) ===== */
.widget table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.widget thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#64748b; text-align:left; padding:6px 10px 2px 10px; }
.widget tbody td{ background:#ffffff !important; /* strip any gradient bars */ padding:10px; border-radius:10px; box-shadow:0 1px 0 rgba(2,6,23,.04); }
.widget tbody tr{ background:transparent !important; }

/* Right-align Status column in Services table */
#svc-status table thead th:nth-child(2),
#svc-status table tbody td:nth-child(2){ text-align:right; }

/* Status / Bans pills */
.pill{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.ok{ background:#10b9811a; color:#059669; border:1px solid #10b98140; }      /* active */
.pill.bad{ background:#ef44441a; color:#b91c1c; border:1px solid #ef444440; }     /* inactive */
.pill.alert{ background:#ef44441a; color:#b91c1c; border:1px solid #ef444440; }   /* bans count */

/* Security table: right-align Bans column */
#sec-summary table thead th:last-child,
#sec-summary table tbody td:last-child{ text-align:right; }

/* Chart area minor compactness */
.chart-wrap{ padding:6px 6px 0; }

/* Keep banner as-is but compact */
#brand-banner{ display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:linear-gradient(90deg,#0ea5e9,#f5f7fb 70%);
  border-bottom:1px solid rgba(2,6,23,.06); }
#brand-banner .brand-left{ display:flex; align-items:center; gap:10px; }
#brand-banner .brand-logo{ width:32px; height:32px; border-radius:6px; background:#fff; padding:2px; box-shadow:0 6px 14px rgba(2,6,23,.18); }
#brand-banner .brand-name{ font-weight:800; font-size:15px; color:#0f172a; }
#brand-banner .brand-tag{ font-size:12px; color:#475569; }

/* Small screens: stack rows neatly */
@media (max-width: 900px){
  .grid.two{ grid-template-columns: 1fr; } /* stack 2->1 on small widths */
}

/* === FIX: remove legacy blue band from table headers === */
.widget table thead tr{
  background: transparent !important;           /* kill the blue strip */
}

/* Compact, readable header cells */
.widget table thead th{
  background: #f8fafc !important;               /* soft light header */
  color: #0f172a !important;                     /* dark text */
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .35px;
  box-shadow: inset 0 -1px 0 rgba(2,6,23,.06);
}

/* Ensure body cells stay clean/white (no banding) */
.widget tbody tr{ background: transparent !important; }
.widget tbody td{
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Keep specific tables consistent */
#svc-status table thead th,
#sec-summary table thead th{ background:#f8fafc !important; }

/* Slight header spacing tweak */
.widget-head{ margin-bottom: 12px !important; }