:root{
  --bg:#0f172a;
  --panel:#111827;
  --card:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22c55e;
  --accent2:#60a5fa;
  --danger:#ef4444;
  --warn:#f59e0b;
  --pill:#334155;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;background:#e5e7eb;color:#0b1220}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--bg);color:#fff;position:sticky;top:0;z-index:10}
.topbar .brand{font-weight:700}
.topbar a{color:#cbd5e1;text-decoration:none;margin-left:14px}
.topbar a:hover{color:#fff}
.container{max-width:1100px;margin:24px auto;padding:0 14px}
.page-title{margin:8px 0 16px}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}

.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 30px rgba(2,8,23,.08)}
.card h2{margin-top:0;font-size:1.05rem}

select,input[type=text],input[type=password],textarea{
  width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;outline:none
}
textarea{min-height:90px;resize:vertical}

.actions{margin-top:18px;text-align:center}
button, .button{
  background:#0f172a;color:#fff;border:none;padding:10px 16px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-block
}
button.primary{background:var(--accent)}
button.danger{background:var(--danger)}
button.ghost{background:#e5e7eb;color:#111827}
button.small,.button.small{padding:6px 10px;font-size:.9rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.assign-row{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:14px}
.assign-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #e5e7eb}
.assign-form{display:flex;gap:8px;padding:10px 12px;flex-wrap:wrap}
.task-list{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.task-list li{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px}
.pill{background:var(--pill);color:#e5e7eb;border-radius:999px;padding:3px 8px;font-size:.8rem}
.badge{padding:3px 8px;border-radius:999px;color:#fff;font-size:.8rem}
.badge.good{background:var(--accent)}
.badge.warn{background:var(--warn)}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(2,8,23,.08)}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:10px 12px;text-align:left}
.muted{color:#64748b}
.flash-wrap{max-width:1100px;margin:10px auto;padding:0 14px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:8px}
.flash.success{background:#ecfdf5;color:#065f46}
.flash.warning{background:#fffbeb;color:#92400e}
.flash.danger{background:#fef2f2;color:#991b1b}
.footer{text-align:center;color:#94a3b8;margin:24px 0}

/* --- Modern User page styling --- */
.page-hero{
  margin-bottom:18px;
}
.page-hero h1{ margin:0 0 6px 0; font-size:1.6rem; }
.page-hero .subtitle{ margin:0; color:#64748b; }

.modern-form{ display:flex; flex-direction:column; gap:16px; }
.step-card{
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,8,23,.06);
}
.step-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.step-dot{
  width:28px;height:28px;border-radius:50%;
  display:inline-grid;place-items:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;font-weight:700;
  box-shadow:0 6px 18px rgba(34,197,94,.35);
}

.field label{ display:block; font-size:.9rem; color:#475569; margin-bottom:6px; }
.select-wrap select, .modern-form textarea{
  width:100%; padding:14px 12px; font-size:1rem;
  border:1px solid #d6dae1; border-radius:12px; background:#fff;
}
.select-wrap select:disabled{ background:#f3f4f6; color:#9ca3af; }

.segmented{
  display:flex; gap:8px; background:#f3f4f6; padding:6px;
  border-radius:12px; border:1px solid #e5e7eb; width:max-content;
}
.segmented .seg-btn{
  border:none; background:transparent; padding:10px 14px; border-radius:10px;
  font-weight:600; cursor:pointer;
}
.segmented .seg-btn.selected{
  background:#111827; color:#fff; box-shadow:0 6px 16px rgba(2,8,23,.2);
}
.segmented .seg-btn:hover{ background:#e5e7eb; }

.empty-state{
  margin-top:10px; padding:16px; border:1px dashed #d1d5db; border-radius:12px; background:#fafafa; text-align:center;
}
.empty-state .empty-icon{ font-size:1.6rem; margin-bottom:6px; }

.sticky-cta{
  position:sticky; bottom:10px; display:flex; gap:14px; align-items:center;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border:1px solid #e6e8ee; border-radius:14px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(2,8,23,.08);
}
.sticky-cta .large{ padding:12px 18px; font-size:1rem; border-radius:12px; }
.cta-hint{ font-size:.9rem; }

@media (max-width:720px){
  .segmented{ width:100%; justify-content:space-between; }
  .sticky-cta{ flex-direction:column; align-items:stretch; }
}
/* Make segmented status buttons colorful & modern */
.segmented .seg-btn { 
  transition: all .18s ease; 
  border: 1px solid transparent;
}

/* DONE (green) */
.segmented .seg-btn[data-status="COMPLETED"] {
  color: #16a34a;                           /* text green */
  border-color: rgba(34,197,94,.35);
}
.segmented .seg-btn[data-status="COMPLETED"]:hover {
  background: rgba(34,197,94,.12);          /* subtle green hover */
}
.segmented .seg-btn[data-status="COMPLETED"].selected {
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #fff;
  box-shadow: 0 6px 16px rgba(34,197,94,.35);
}

/* NOT DONE (red) */
.segmented .seg-btn[data-status="NOT_COMPLETED"] {
  color: #dc2626;                           /* text red */
  border-color: rgba(239,68,68,.35);
}
.segmented .seg-btn[data-status="NOT_COMPLETED"]:hover {
  background: rgba(239,68,68,.12);          /* subtle red hover */
}
.segmented .seg-btn[data-status="NOT_COMPLETED"].selected {
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color: #fff;
  box-shadow: 0 6px 16px rgba(239,68,68,.35);
}
/* admin search */
.row input[name="q"] {
  height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border, #dfe3ea);
  border-radius: 10px;
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:10px;
}
.admin-search{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}
.admin-search input[name="q"]{
  min-width:260px;
  height:38px;
  padding:8px 12px;
  border:1px solid var(--border, #dfe3ea);
  border-radius:10px;
}
.card-head{
  display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:10px;
}
.admin-search{ display:flex; gap:8px; align-items:center; }
.admin-search #adminLiveSearch{
  min-width:260px; height:38px; padding:8px 12px;
  border:1px solid var(--border, #dfe3ea); border-radius:10px;
}
.live-search-wrap{ margin-top:8px; }

.kpi-grid{
  display:grid; grid-template-columns: repeat(5, minmax(140px,1fr));
  gap:12px; margin-top:8px;
}
.kpi{
  background: var(--surface, #f6f8fb);
  border:1px solid var(--border, #e3e7ef);
  border-radius:12px; padding:14px;
}
.kpi-label{ font-size:.9rem; color:#6c7788; }
.kpi-value{ font-size:1.6rem; font-weight:700; margin-top:4px; }
@media (max-width: 900px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(140px,1fr)); }
}
/* Page-local styles (or move to style.css) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.kpi {
  background: var(--surface, #f6f8fb);
  border: 1px solid var(--border, #e3e7ef);
  border-radius: 12px;
  padding: 14px;
}
.kpi-label { font-size: .9rem; color: #6c7788; }
.kpi-value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}