:root{
  --bg:#f5f8ff;          /* light blue canvas */
  --panel:#ffffff;       /* white cards */
  --muted:#eef3ff;       /* pale blue panels */
  --ink:#1f2937;         /* dark gray text */
  --ink-dim:#4b5563;     /* medium gray text */
  --primary:#2b6ef3;     /* clean blue */
  --primary-600:#2259c4; /* darker blue */
  --accent:#0ea5e9;      /* sky accent */
  --danger:#dc2626;
  --green:#16a34a;
  --gray:#94a3b8;
  --border:#e5e7eb;
  --shadow: 0 6px 24px rgba(24,39,75,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 500px at 10% -10%, rgba(43,110,243,.10), transparent 60%),
    radial-gradient(1000px 500px at 120% 10%, rgba(14,165,233,.10), transparent 60%),
    var(--bg);
  color:var(--ink); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar .brand{font-weight:700; letter-spacing:.3px; color:var(--primary)}
.topbar nav a{
  color:var(--ink); text-decoration:none; margin-left:1rem; padding:.4rem .6rem; border-radius:8px;
}
.topbar nav a:hover{background:var(--muted)}
.topbar nav a.active{background:var(--primary); color:white; box-shadow: var(--shadow);}

/* Layout */
.container{max-width:1100px; margin:2rem auto; padding:0 1rem}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
h1,h2,h3{margin:.2rem 0 .6rem 0}

/* Cards & panels */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px; padding:1.1rem; box-shadow: var(--shadow);
}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.kpi{display:flex; flex-direction:column; gap:.25rem}
.kpi .label{color:var(--ink-dim); font-size:.9rem}
.kpi .value{font-size:1.6rem; font-weight:700}

/* Table */
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px}
.table-card{padding:0}
.table thead th{
  text-align:left; font-weight:600; color:#334155;
  background:var(--muted); padding:.8rem; border-bottom:1px solid var(--border);
}
.table td{padding:.75rem; border-bottom:1px solid var(--border); color:var(--ink)}
.table tr:hover{background:#f8fbff}
.table td.actions{text-align:right}

/* Forms */
.form label{display:block; margin:.7rem 0; color:var(--ink)}
.form input, .form select{
  width:100%; padding:.65rem .7rem; color:var(--ink); background:#fff;
  border:1px solid var(--border); border-radius:10px; outline:none;
}
.form input:focus,.form select:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,110,243,.15)}
.form .checkbox{display:flex; align-items:center; gap:.5rem}
.form-actions{display:flex; gap:.6rem; margin-top:1rem}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); background:#f3f6ff; color:var(--ink);
  padding:.55rem .9rem; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
}
.btn:hover{filter:brightness(1.02)}
.btn.primary{background:linear-gradient(180deg, var(--primary), var(--primary-600)); border-color:transparent; color:#fff}
.btn.ghost{background:transparent}
.btn.danger{background:linear-gradient(180deg, #f87171, #ef4444); border-color:transparent; color:#fff}

/* Badges & dots */
.badge{
  display:inline-block; padding:.2rem .45rem; border-radius:999px;
  background:#e8f0ff; color:#2952b6; font-size:.8rem; border:1px solid #cfe0ff;
}
.dot{padding:.15rem .5rem; border-radius:999px; font-size:.8rem}
.dot.green{background:#e7f9ef; color:#178d43; border:1px solid #c2f0d4}
.dot.gray{background:#f2f5f9; color:#64748b; border:1px solid #e2e8f0}

/* Alerts */
.alert{border-radius:10px; padding:.7rem .9rem; margin:.8rem 0}
.alert.error{background:#fff1f2; border:1px solid #fecdd3; color:#b91c1c}

/* Chart card */
.chart-card{padding:1rem}
canvas{max-width:100%}
/* Widget spacing */
.widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* KPI rows */
.widget-kpi-row {
    display: grid;
    gap: 1.25rem;
}

/* KPI cards */
.kpi-card {
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
}

.kpi-label {
    font-size: 0.8rem;
    opacity: 0.75;
}

.kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Add breathing room around chart canvases */
.widget-chart {
    margin-top: 1.5rem;
    padding: 1rem;
}

/* Utility spacing */
.section {
    margin-top: 2.5rem;
}
/* ---------------------------------------------------------
   DASHBOARD HEADER
----------------------------------------------------------*/
.dash-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:1.5rem 1rem 2rem;
    margin-bottom:2rem;
    border-bottom:1px solid rgba(0,0,0,0.08);
}

.dash-header-left { max-width: 70%; }

.dash-title {
    font-size:2rem;
    margin:0;
    font-weight:800;
    letter-spacing:-.5px;
    color:#1f2937;
}

.dash-sub {
    margin:.15rem 0 1rem;
    font-size:.9rem;
    opacity:.65;
}

/* FILTER ROW */
.dash-filters {
    display:flex;
    gap:1.1rem;
    flex-wrap:wrap;
    margin-bottom:1rem;
}
.df-group label {
    font-size:.7rem;
    opacity:.7;
    margin-bottom:2px;
    display:block;
}
.df-group select,
.df-group input {
    padding:.5rem .6rem;
    border-radius:8px;
    border:1px solid var(--border);
}

/* DATES DISPLAY */
.dash-date-display {
    opacity:.75;
    font-size:.85rem;
    line-height:1.3;
}

/* RIGHT SIDE */
.dash-header-right {
    display:flex;
    align-items:flex-start;
    gap:1rem;
}

.logout-btn {
    padding:.55rem 1rem;
    border-radius:8px;
}

/* ---------------------------------------------------------
   COLUMNS & WIDGET SPACING
----------------------------------------------------------*/
.kpidock-main {
    display:flex;
    gap:2rem;
}

.kpidock-column {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2rem;
}

/* Proper widget spacing */
.widget {
    border-radius:14px;
    padding:1.5rem;
    background:white;
    border:1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow);
}