:root{
  --color-primary:#C1121F;
  --color-primary-2:#E11D48;
  --color-bg:#F6F6F7;
  --color-card:#FFFFFF;
  --color-text:#212529;
  --color-muted:#6c757d;
  --radius:14px;
  --border: rgba(0,0,0,0.08);
  --shadow-sm: 0 6px 16px rgba(0,0,0,0.06);
  --shadow: 0 14px 34px rgba(0,0,0,0.08);
  --focus: 0 0 0 4px rgba(193,18,31,0.14);
}
html, body { height: 100%; }
body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
a { text-decoration: none; }
.container-xl{ max-width: 1200px; }

.navbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.navbar-brand{ font-weight: 800; letter-spacing: .2px; }
.nav-link{ font-weight: 600; color: #2b2f36 !important; }
.nav-link.active{ color: var(--color-primary) !important; }

.card{
  border: 0;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.badge{ border-radius: 999px; padding: .5rem .75rem; font-weight: 700; }
.badge.bg-pending{ background: #eef3ff; color: #1d4ed8; }
.badge.bg-approved{ background: #e8fff0; color: #0f7b3a; }
.badge.bg-rejected{ background: #ffecec; color: #b42318; }
.badge.bg-appealed{ background: #fff5df; color: #8a5b00; }

.btn{border-radius: 10px; font-weight: 700; padding: .65rem .95rem; }
.btn:focus{ box-shadow: var(--focus) !important; }
.btn-primary{ background: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary{ border-color: var(--color-primary); color: var(--color-primary); }
.btn-primary:hover, .btn-outline-primary:hover{ background: var(--color-primary-2); border-color: var(--color-primary-2); }

.form-control, .form-select{ border-radius: 10px; padding: .7rem .9rem; }
.table thead th{ position: sticky; top: 0; background: #f1f5f9; z-index: 1; border-bottom: 1px solid var(--border); }
.table td, .table th{ vertical-align: middle; }
.table tbody tr:hover{ background: #f8fafc; }

.section-gap{ margin-top: 1.5rem; }
.kpi{ display:flex; align-items:center; justify-content:space-between; }
.kpi .value{ font-size: 1.6rem; font-weight: 900; letter-spacing: -0.3px; }
.kpi .label{ color: var(--color-muted); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .6px; }
.small-muted{ color: var(--color-muted); font-size: .92rem; }
.toast-container{ z-index: 2000; }

@media (max-width: 576px){
  .btn{ width: 100%; }
}

.form-control:focus, .form-select:focus{
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus) !important;
}