:root {
  --navy: #1F3864;
  --bg: #EAF0F7;
  --card: #FFFFFF;
  --border: #D0D7E2;
  --text: #1F2937;
  --muted: #6B7280;
  --blue: #2F6DB5;
  --blue-light: #DCEBFA;
  --blue-mid: #5B8CC7;
  --blue-deep: #173B70;
  --yellow: #F6C343;
  --yellow-light: #FFF4C7;
  --orange: #E98B2A;
  --green: #58A65C;
  --green-light: #DFF2E1;
  --green-deep: #2F7D32;
  --red: #D9534F;
  --red-light: #FBE1E0;
  --red-deep: #A9322E;
  --purple: #7B61A8;
  --hold-bg: #E9DDF5;
  --gray: #BFBFBF;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar .brand { font-size: 18px; font-weight: 700; }
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar nav a {
  color: #cfe0f7;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.topbar nav a:hover, .topbar nav a.active { background: rgba(255,255,255,.15); color: #fff; }
.user-box { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #cfe0f7; }
.user-box .logout { color: #fff; text-decoration: none; background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 6px; }
.container { max-width: 1200px; margin: 24px auto; padding: 0 20px; }

h1 { color: var(--navy); font-size: 24px; margin: 0 0 4px; }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}
.filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.filters .field { display: flex; flex-direction: column; gap: 4px; }
.filters label { font-size: 12px; color: var(--muted); font-weight: 600; }
.filters input, .filters select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 150px;
  background: #fff;
}
.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { opacity: .9; }
.btn.secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn.danger { background: var(--red); }
.btn.small { padding: 5px 10px; font-size: 12px; }

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; }
.kpi { border-radius: 8px; padding: 14px; text-align: center; color: #fff; }
.kpi .num { font-size: 26px; font-weight: 700; display: block; }
.kpi .lbl { font-size: 12px; opacity: .9; }
.kpi.total { background: var(--navy); }
.kpi.Examined { background: var(--blue); }
.kpi.ReportSent { background: var(--yellow); color: #3a2f00; }
.kpi.Fees { background: var(--green); }
.kpi.Paid { background: #E67E22; }
.status-row-Paid td{background:#FDEEDC}.status-row-Paid:hover td{background:#FBE0C0}
.kpi.Closed { background: var(--red); }
.kpi.Hold { background: var(--purple); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; }
th { background: var(--navy); color: #fff; font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: #F5F8FC; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; color: #fff; font-weight: 600; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.chart-card h3 { margin: 0 0 12px; font-size: 15px; color: var(--navy); }

form.stacked { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
form.stacked label { font-size: 13px; font-weight: 600; color: var(--muted); }
form.stacked input, form.stacked select, form.stacked textarea {
  border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; font-size: 14px; width: 100%;
}
.error { background: #FCE8E6; color: #B00020; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 14px; }
.success { background: #E6F4EA; color: #1E7E34; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 14px; }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 32px; border-radius: 12px; width: 340px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.login-box h1 { text-align: center; }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #eee; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .charts { grid-template-columns: 1fr; }
}

.status-row-Examined td{background:#EAF3FF}.status-row-Report-Sent td{background:#FFF7D6}.status-row-Fees td{background:#EAF7EB}.status-row-Closed td{background:#FCE8E7}.status-row-Hold td{background:#F0E8F8}.status-row-Not-Served td{background:#fff;color:#333}
.status-row-Examined:hover td{background:#DCEBFA}.status-row-Report-Sent:hover td{background:#FFEEB0}.status-row-Fees:hover td{background:#DDF0DF}.status-row-Closed:hover td{background:#F7D2D0}.status-row-Hold:hover td{background:#E7D8F1}
.lang-switch{display:flex;gap:4px}.lang-switch a{color:#fff;text-decoration:none;padding:5px 8px;border-radius:5px;font-size:11px;background:rgba(255,255,255,.12)}.lang-switch a.active{background:#fff;color:var(--navy)}
.notification-bell{position:relative;cursor:pointer}.notification-count{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:1px 5px}
.reminder-box{position:fixed;bottom:18px;left:18px;z-index:9999;max-width:380px}
.reminder-item{background:#fff;border-right:5px solid var(--blue);box-shadow:0 8px 30px rgba(0,0,0,.18);padding:12px 15px;border-radius:8px;margin-top:8px}
.tele-fields{display:none}.tele-fields.show{display:block}
.autocomplete-box{position:relative;z-index:30;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.suggest-item{border:1px solid #d7e0ea;background:#fff;border-radius:6px;padding:6px 9px;cursor:pointer;font-size:13px}.suggest-item:hover{background:#eef6ff}