/* ============================================================
   K-Care Procurement — Admin Theme
   Palette: Slate-blue primary, teal accent, clinical white base
   ============================================================ */

:root{
  --c-bg:#f4f7f9;
  --c-surface:#ffffff;
  --c-surface-alt:#eef2f5;
  --c-border:#dde4e9;
  --c-text:#1c2b36;
  --c-text-dim:#5c7080;
  --c-primary:#1d5b8f;
  --c-primary-dark:#124467;
  --c-teal:#0f9b8e;
  --c-teal-light:#e3f6f3;
  --c-danger:#c1443a;
  --c-warn:#c98a1a;
  --c-good-bg:#e2f6e6;
  --c-good-text:#1f7a3d;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,40,60,.08), 0 1px 2px rgba(20,40,60,.06);
  --sidebar-w:230px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-data: "Consolas", "SFMono-Regular", Menlo, monospace;
}

[data-theme="dark"]{
  --c-bg:#0f1720;
  --c-surface:#17222c;
  --c-surface-alt:#1e2b37;
  --c-border:#2b3a47;
  --c-text:#e6edf2;
  --c-text-dim:#8ea0ac;
  --c-primary:#4f9cd6;
  --c-primary-dark:#3a80b6;
  --c-teal:#3bcdbd;
  --c-teal-light:#123934;
  --c-good-bg:#123825;
  --c-good-text:#5fd487;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui);
  background:var(--c-bg);
  color:var(--c-text);
  font-size:14.5px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}

.app-shell{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--c-primary-dark),var(--c-primary));
  color:#fff;
  flex-shrink:0;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  transition:margin-left .2s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.brand-mark{
  width:36px;height:36px;border-radius:8px;background:var(--c-teal);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0;
}
.brand-text{font-size:13px;font-weight:600;line-height:1.3;}
.brand-text small{font-weight:400;opacity:.75;}
.sidebar-nav{display:flex;flex-direction:column;padding:12px 10px;gap:2px;}
.sidebar-nav a{
  padding:10px 12px;border-radius:8px;font-size:13.5px;
  color:rgba(255,255,255,.85);
}
.sidebar-nav a:hover{background:rgba(255,255,255,.1);color:#fff;}
.sidebar-nav a.active{background:var(--c-teal);color:#fff;font-weight:600;}

/* ---------- Main / topbar ---------- */
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 22px;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  position:sticky;top:0;z-index:20;
}
.icon-btn{
  background:none;border:1px solid var(--c-border);border-radius:8px;
  width:36px;height:36px;cursor:pointer;font-size:15px;color:var(--c-text);
}
.icon-btn:hover{background:var(--c-surface-alt);}
.global-search{flex:1;}
.global-search input{
  width:100%;max-width:420px;padding:9px 14px;border-radius:20px;
  border:1px solid var(--c-border);background:var(--c-surface-alt);color:var(--c-text);
  font-size:13.5px;
}
.content{padding:22px;max-width:1400px;}

/* ---------- Page header ---------- */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-header h1{font-size:20px;margin:0;font-weight:700;}
.page-header p{margin:2px 0 0;color:var(--c-text-dim);font-size:13px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:8px;border:1px solid transparent;
  background:var(--c-primary);color:#fff;font-size:13.5px;font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--c-primary-dark);}
.btn.secondary{background:var(--c-surface-alt);color:var(--c-text);border-color:var(--c-border);}
.btn.secondary:hover{background:var(--c-border);}
.btn.teal{background:var(--c-teal);}
.btn.danger{background:var(--c-danger);}
.btn.small{padding:5px 10px;font-size:12px;}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.stat-card .label{font-size:12px;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.03em;}
.stat-card .value{font-size:22px;font-weight:700;margin-top:6px;color:var(--c-primary);}
.stat-card.teal .value{color:var(--c-teal);}

.panel{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:20px;
}
.panel h2{font-size:15px;margin:0 0 12px;}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--c-border);white-space:nowrap;}
thead th{
  background:var(--c-surface-alt);font-weight:600;color:var(--c-text-dim);
  font-size:12px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;user-select:none;
  position:sticky;top:0;
}
thead th:hover{color:var(--c-text);}
tbody tr:hover{background:var(--c-surface-alt);}
td.lowest{background:var(--c-good-bg);color:var(--c-good-text);font-weight:700;border-radius:6px;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--c-teal-light);color:var(--c-teal);}

/* ---------- Forms / Modals ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid.full{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12.5px;font-weight:600;color:var(--c-text-dim);}
.field input,.field select,.field textarea{
  padding:9px 12px;border-radius:8px;border:1px solid var(--c-border);
  background:var(--c-bg);color:var(--c-text);font-size:13.5px;font-family:inherit;
}
.field textarea{resize:vertical;min-height:60px;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(10,20,30,.45);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--c-surface);border-radius:var(--radius);padding:22px;
  width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.modal h3{margin:0 0 16px;font-size:16px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

/* ---------- Utility ---------- */
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.text-dim{color:var(--c-text-dim);}
.mt-0{margin-top:0;}
.empty-state{padding:40px 20px;text-align:center;color:var(--c-text-dim);}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.btn,.no-print{display:none !important;}
  .content{padding:0;}
  body{background:#fff;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:50;margin-left:calc(-1 * var(--sidebar-w));box-shadow:0 0 20px rgba(0,0,0,.2);}
  .sidebar.open{margin-left:0;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:14px;}
}