:root {
  --navy: #0B1E3A;
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-900: #0F172A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--slate-600); background: var(--slate-50); line-height: 1.55; font-size: 14px; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; color: var(--slate-900); }
h2 { font-size: 16px; color: var(--slate-900); margin: 22px 0 10px; }
.muted { color: var(--slate-400); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); color: #fff; border: none; border-radius: 9px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--blue-dark); text-decoration: none; }

.admin-top { background: var(--navy); }
.admin-top-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 58px; display: flex; align-items: center; justify-content: space-between; }
.admin-brand { color: #fff; font-weight: 800; font-size: 18px; }
.admin-brand span { color: #60A5FA; font-weight: 600; font-size: 13px; }
.admin-top nav { display: flex; gap: 20px; }
.admin-top nav a { color: #C7D6EA; font-size: 14px; font-weight: 500; }
.admin-top nav a:hover, .admin-top nav a.active { color: #fff; text-decoration: none; }

.admin-main { max-width: 1200px; margin: 0 auto; padding: 26px 20px 60px; }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-search { display: flex; gap: 8px; }
.admin-search input { border: 1px solid var(--slate-200); border-radius: 9px; padding: 9px 12px; font-size: 14px; width: 300px; }

.status-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.status-filter a { font-size: 12.5px; padding: 6px 12px; border-radius: 50px; background: #fff; border: 1px solid var(--slate-200); color: var(--slate-600); }
.status-filter a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.status-filter a:hover { text-decoration: none; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; }
.admin-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500); padding: 12px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--slate-100); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }
.det-row td { background: #FCFDFE; font-size: 13px; }

.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: var(--slate-100); color: var(--slate-600); }
.st-new { background: #DBEAFE; color: #1D4ED8; }
.st-in_review { background: #FEF3C7; color: #92400E; }
.st-forwarded { background: #EDE9FE; color: #6D28D9; }
.st-accepted { background: #D1FAE5; color: #047857; }
.st-completed { background: #DCFCE7; color: #15803D; }
.st-declined, .st-cancelled { background: #FEE2E2; color: #B91C1C; }

.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 5px 12px; font-size: 13.5px; }
.kv dt { color: var(--slate-500); }
.kv dd { color: var(--slate-900); }
.boxed { background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; padding: 14px; font-size: 13.5px; }
.timeline { list-style: none; font-size: 13px; }
.timeline li { padding: 7px 0; border-bottom: 1px solid var(--slate-100); }

.admin-form { background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; padding: 18px; position: sticky; top: 20px; }
.admin-form label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-900); margin-bottom: 12px; }
.admin-form input, .admin-form select, .admin-form textarea { display: block; width: 100%; margin-top: 5px; border: 1.5px solid var(--slate-200); border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--blue); }
.admin-form .btn { width: 100%; margin-top: 6px; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); padding: 20px; }
.login-card { background: #fff; border-radius: 16px; padding: 34px 30px; width: 100%; max-width: 380px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.login-card h1 { font-size: 24px; margin-bottom: 4px; }
.login-card h1 span { color: var(--blue); font-size: 13px; font-weight: 600; }
.login-card .muted { margin-bottom: 20px; font-size: 13px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-900); margin-bottom: 12px; }
.login-card input { display: block; width: 100%; margin-top: 5px; border: 1.5px solid var(--slate-200); border-radius: 9px; padding: 11px; font-size: 14px; }
.login-card .btn { width: 100%; margin-top: 8px; padding: 12px; }
.alert { border-radius: 10px; padding: 12px 15px; margin-bottom: 16px; font-size: 13.5px; }
.alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.alert-success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .admin-form { position: static; }
  .admin-search input { width: 100%; }
}