/* =========================================================
   Compact Light Blue Theme  (drop-in replacement)
   ========================================================= */

:root{
  /* Light bright blue background */
  --bg-1: #e9f6ff;   /* top */
  --bg-2: #d7f0ff;   /* middle */
  --bg-3: #c6e8ff;   /* bottom */

  --card: #ffffff;
  --ink: #102431;
  --sub: #4d6276;
  --primary: #0ea5e9;
  --danger: #ef4444;
  --success: #16a34a;
  --muted: #c7d7e6;
  --shadow: 0 6px 18px rgba(0,70,120,.12);

  /* Typography (kept readable, compact spacing elsewhere) */
  --fs-base: 16px;
  --fs-h1: 34px;
  --fs-h3: 15px;
  --fs-badge: 15px;
  --fs-btn: 15px;
  --fs-table: 16px;
  --fs-th: 15px;
  --fs-label: 13px;
  --fs-big: 28px;

  /* Layout */
  --container-w: 1320px;
  --radius-card: 12px;
  --radius-btn: 9px;
}

/* Base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
}

.container{ max-width: var(--container-w); margin: 20px auto; padding: 0 14px; }

/* Topbar */
h1{ font-size: var(--fs-h1); margin: 0 0 12px; }
.topbar{ display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.badge{
  background:#d9f1ff; color:#035a91;
  padding:5px 10px; border-radius:999px; font-size: var(--fs-badge);
}

/* Cards (tighter) */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px; margin:12px 0 18px;
}
.card{
  background:var(--card); border-radius:var(--radius-card);
  padding:14px; box-shadow:var(--shadow); border:1px solid #e5f1fb;
}
.card h3{ margin:0 0 6px; font-size:var(--fs-h3); color:var(--sub); font-weight:600; }
.card .big{ font-size:var(--fs-big); font-weight:700; }

/* Tabs */
.tabs{ display:flex; gap:6px; margin:8px 0 14px; flex-wrap:wrap; }
.tab-btn{
  border: 1.5px solid var(--muted);
  background:#ffffff;
  padding:8px 12px; border-radius:var(--radius-btn);
  cursor:pointer; transition: background .2s, transform .02s;
  font-size: var(--fs-btn);
}
.tab-btn:active{ transform: translateY(1px); }
.tab-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Grids */
.grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap:12px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* Tables (tighter rows) */
.tablewrap{
  background:var(--card); border-radius:12px; padding:10px; box-shadow:var(--shadow);
}
table{ width:100%; border-collapse:collapse; font-size:var(--fs-table); }
thead th{
  text-align:left; font-size:var(--fs-th); color:var(--sub);
  border-bottom:2px solid var(--muted); padding:10px;
}
tbody td{
  padding:10px; border-bottom:1.25px solid var(--muted); font-size:var(--fs-table);
}
tbody tr:hover{ background:#eef7ff; }

/* Buttons (compact) */
.actions{ display:flex; gap:6px; flex-wrap:wrap; }
.btn{
  border:1px solid var(--muted); border-radius:var(--radius-btn);
  padding:8px 12px; background:#fff; cursor:pointer; font-size:var(--fs-btn);
  transition: background .2s, box-shadow .2s, transform .02s;
}
.btn:hover{ background:#f2f9ff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.btn:active{ transform: translateY(1px); }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.success{ background:var(--success); color:#fff; border-color:var(--success); }
.btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.muted{ color:#334155; }
.btn.xs{ padding:6px 9px; font-size:14px; border-radius:7px; }

/* Forms (compact inputs) */
.form{ background:var(--card); border-radius:12px; padding:14px; box-shadow:var(--shadow); }
.form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.form .row.single{ grid-template-columns: 1fr; }
.form label{ font-size:var(--fs-label); color:var(--sub); display:block; margin-bottom:5px; }
.form input, .form select, .form textarea{
  width:100%; padding:9px 11px;   /* tighter inputs */
  border:1px solid var(--muted); border-radius:9px; background:#fff; font-size:var(--fs-table);
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:#9ed9ff; box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.form .submit{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

/* Toolbars & notices */
.toolbar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.notice{
  margin:10px 0; font-size:var(--fs-table); color:#064a72;
  background:#e6f5ff; border: 1.5px solid #bfe6ff; padding:8px 10px; border-radius:9px;
}
.notice.error, .error{ color:#991b1b; background:#fef2f2; border:1px solid #fecaca; }

/* Pills (for dashboard “Ready/Missing”) */
.pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-size:12px;
  padding:5px 9px; border:1px solid var(--muted); background:#eef7ff; color:#0b6093;
}
.pill.ok{ background:#eafaf1; color:#065f46; border-color:#a7f3d0; }
.pill.warn{ background:#fff7ed; color:#92400e; border-color:#fed7aa; }

/* Responsive */
@media (max-width: 1100px){
  .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .tab-btn{ padding:8px 10px; }
  .card{ padding:12px; }
  tbody td, thead th{ padding:9px; }
}