:root{
  --bg:#f3f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  --primary:#2563eb;
  --primary-hover:#1d4ed8;

  --btn:#e0e7ff;
  --btn-hover:#c7d2fe;

  --danger:#fee2e2;
  --warnbg:#fef9c3;
  --warnbd:#fde047;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  color:white;
  position:sticky;
  top:0;
  box-shadow:0 4px 20px rgba(37,99,235,0.25);
}
.topbar a{
  color:white;
  font-weight:500;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 20px rgba(15,23,42,0.05);
  transition:all .2s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(37,99,235,0.12);
}/* Pills */

.pill{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  border:1px solid transparent;
}

/* Today - Blue */
.pill-today{
  background:#dbeafe;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

/* Week - Amber */
.pill-week{
  background:#fef3c7;
  color:#b45309;
  border-color:#fde68a;
}

/* None - Red */
.pill-none{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fecaca;
}


/* Card Text */

.card-title{
  font-size:18px;
  font-weight:600;
  color:var(--text);
}

.card-sub{
  color:var(--muted);
  font-size:13px;
}


/* Card Status Variants */

.card-today{
  border-left:4px solid #2563eb;
}

.card-week{
  border-left:4px solid #f59e0b;
}

.card-none{
  border-left:4px solid #ef4444;
}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:14px 0}
.form{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:560px;
}

/* Inputs & Selects */
.form input,
.form select{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:white;
  color:var(--text);
  font-size:15px;
  transition:all .2s ease;
}

/* Focus state */
.form input:focus,
.form select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/* Inline forms */
.form-inline{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Labels cleaner */
.form label{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:4px;
}
.chk{color:var(--muted);display:flex;align-items:center;gap:8px}
.row{display:flex;gap:10px;align-items:center}
.btn{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-weight:500;
  transition:all .2s ease;
  cursor:pointer;
}

.btn:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
}

.btn.primary{
  background:var(--primary);
  color:white;
  border:none;
}

.btn.primary:hover{
  background:var(--primary-hover);
  box-shadow:0 4px 14px rgba(37,99,235,0.35);
}
/* Brand */
.brand a{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:18px;
  color:white;
  text-decoration:none;
}

.brand img{
  height:28px;
  width:auto;
  display:block;
}
/* Navigation */
.nav a{
  margin-left:18px;
  color:rgba(255,255,255,.85);
  font-weight:500;
  transition:opacity .2s ease;
}

.nav a:hover{
  opacity:.75;
}


/* Headings */
h1{
  margin:12px 0 18px;
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.3px;
  color:var(--text);
}

h2{
  margin:0 0 12px;
  font-size:17px;
  font-weight:600;
  color:var(--text);
}

.muted{
  color:var(--muted);
  margin-top:0;
}


/* Legend */
.legend{
  display:flex;
  gap:10px;
  margin:14px 0 18px;
  flex-wrap:wrap;
}


/* Grid layout */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}


/* Danger button */
.btn.danger{
  background:#ef4444;
  color:white;
  border:none;
}

.btn.danger:hover{
  background:#dc2626;
  box-shadow:0 4px 14px rgba(239,68,68,.25);
}


/* Table layout */
.table{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tr{
  display:grid;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:white;
  transition:all .15s ease;
}

.tr:hover{
  box-shadow:0 6px 18px rgba(37,99,235,.08);
}

.th{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}


/* Action buttons container */
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* Error message */
.error{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#b91c1c;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
}


/* Warning message */
.warn{
  background:#fef3c7;
  border:1px solid #fde68a;
  color:#92400e;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
}


/* Separator */
.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:18px 0;
}


/* Footer */
.footer{
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin:20px 0 30px;
}

.kpi{
  background:white;
  border-radius:18px;
  padding:22px;
  text-align:center;
  border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.kpi:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(37,99,235,0.15);
}

.kpi-big{
  font-size:34px;
  font-weight:700;
  color:var(--primary);
}

.kpi-label{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

/* Progress bar */
.progress{
  margin-top:14px;
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.progress-bar{
  height:100%;
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  border-radius:999px;
  transition:width .4s ease;
}