:root {
  --blue: #1E5EFF;
  --blue-dark: #0A2E8F;
  --ink: #10233F;
  --gray-800: #243447;
  --gray-600: #55677D;
  --gray-100: #F2F5F9;
  --white: #FFFFFF;
  --green: #22C55E;
  --amber: #F59E0B;
  --red: #EF4444;
  --shadow: 0 8px 28px rgba(16,35,63,.10);
  --radius: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  font-family:'Inter',system-ui,sans-serif;
  color:var(--gray-800);
  background:var(--gray-100);
  line-height:1.55;
}
h1,h2,h3,h4 { font-family:'Rajdhani','Inter',sans-serif; color:var(--ink); line-height:1.15; }
a { text-decoration:none; color:var(--blue); }

/* ---------- Login ---------- */
.login-screen {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(900px 500px at 80% -10%, rgba(30,94,255,.4), transparent 60%), linear-gradient(135deg, var(--blue-dark), var(--blue));
}
.login-card {
  width:min(400px,100%);
  background:#fff;
  border-radius:20px;
  padding:40px 32px;
  box-shadow:var(--shadow);
}
.login-logo { text-align:center; margin-bottom:24px; }
.logo-icon {
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;display:inline-grid;place-items:center;margin-bottom:12px;
}
.logo-icon svg { width:28px;height:28px; }
.login-logo h1 { font-size:1.8rem; letter-spacing:.5px; }
.login-logo h1 span { color:var(--blue); }
.login-logo p { color:var(--gray-600); font-size:.9rem; }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--gray-800); }
.field input {
  width:100%;padding:12px 14px;border:1.5px solid #dbe3ee;border-radius:10px;
  font-size:1rem;font-family:inherit;outline:none;transition:border .15s;
}
.field input:focus { border-color:var(--blue); }
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;transition:transform .12s,box-shadow .15s,background .15s;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-block { width:100%; padding:13px; font-size:1rem; }
.btn-sm { padding:8px 14px; font-size:.85rem; }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid #dbe3ee; }
.btn-outline:hover { background:var(--gray-100); }
.btn-xs { padding:5px 10px; font-size:.78rem; border-radius:8px; }
.btn-success { background:var(--green); color:#fff; }
.btn-warn { background:var(--amber); color:#fff; }
.btn-danger { background:var(--red); color:#fff; }
.login-error { color:var(--red); text-align:center; margin-top:12px; font-size:.9rem; min-height:20px; }

/* ---------- Layout ---------- */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:250px;background:var(--ink);color:#c6d0dd;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;
}
.sidebar-brand {
  display:flex;align-items:center;gap:12px;padding:22px 20px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-size:1.35rem;font-weight:700;
}
.sidebar-brand .logo-icon { width:40px;height:40px;border-radius:10px;margin:0; }
.sidebar-brand .logo-icon svg { width:22px;height:22px; }
.sidebar-brand small { display:block;font-size:.72rem;color:#8aa0b8;font-weight:500; }
.side-nav { flex:1; padding:10px; display:flex; flex-direction:column; gap:4px; }
.side-nav a {
  display:block;padding:12px 16px;border-radius:10px;color:#c6d0dd;
  font-weight:500;font-size:.95rem;transition:background .15s,color .15s;
}
.side-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.side-nav a.active { background:var(--blue); color:#fff; }
.sidebar-footer { padding:16px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; }
.sidebar-footer span { display:block; margin-bottom:10px; color:#8aa0b8; word-break:break-all; }
.sidebar-footer .btn { width:100%; color:#fff; border-color:rgba(255,255,255,.25); }

.main { flex:1; margin-left:250px; padding:28px 32px; }
.topbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px; }
.topbar h1 { font-size:1.8rem; }
.nav-toggle { display:none; background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink); }

/* ---------- Stats ---------- */
.stat-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:24px;
}
.stat-card {
  background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  border-top:3px solid var(--blue);
}
.stat-card h4 { font-size:1.9rem; color:var(--blue); }
.stat-card p { color:var(--gray-600); font-size:.85rem; font-weight:500; margin-top:2px; }
.stat-card.alt { border-top-color:var(--green); }
.stat-card.alt h4 { color:var(--green); }
.stat-card.warn { border-top-color:var(--amber); }
.stat-card.warn h4 { color:var(--amber); }

/* ---------- Panels & tables ---------- */
.panel { background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:24px; }
.panel-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.panel-head h3 { font-size:1.2rem; }
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table th {
  text-align:left;padding:10px 12px;color:var(--gray-600);font-weight:600;
  border-bottom:2px solid #e6ecf3;white-space:nowrap;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;
}
.table td { padding:12px; border-bottom:1px solid #f0f3f8; vertical-align:middle; }
.table tr:hover td { background:#f8fafd; }
.badge { display:inline-block;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:600; }
.badge-approved,.badge-confirmed,.badge-completed { background:#e6f8ef;color:#15803d; }
.badge-pending,.badge-in_progress { background:#fef3c7;color:#b45309; }
.badge-suspended,.badge-cancelled { background:#fee2e2;color:#b91c1c; }
.badge-scheduled { background:#e0e7ff;color:#4338ca; }
.badge-sent { background:#e6f8ef;color:#15803d; }
.badge-deleted { background:#e5e7eb;color:#374151; }
.actions { display:flex;gap:6px;flex-wrap:wrap; }
.empty { text-align:center;color:var(--gray-600);padding:30px; }

/* ---------- Bind bar ---------- */
.bind-bar { display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px; }
.bind-bar select {
  flex:1;min-width:180px;padding:10px 12px;border:1.5px solid #dbe3ee;border-radius:10px;
  font-family:inherit;font-size:.9rem;background:#fff;outline:none;
}
.bind-bar select:focus { border-color:var(--blue); }

/* ---------- Modal ---------- */
.modal {
  position:fixed;inset:0;background:rgba(16,35,63,.55);z-index:60;
  display:grid;place-items:center;padding:20px;overflow-y:auto;
}
.modal-card {
  width:min(560px,100%);background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;
}
.modal-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.modal-head h3 { font-size:1.3rem; }
.modal-close { background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--gray-600);line-height:1; }
.modal-close:hover { color:var(--ink); }
.modal-card textarea {
  width:100%;padding:12px 14px;border:1.5px solid #dbe3ee;border-radius:10px;
  font-family:inherit;font-size:1rem;outline:none;resize:vertical;min-height:70px;
}
.modal-card textarea:focus { border-color:var(--blue); }
.modal-card select {
  width:100%;padding:12px 14px;border:1.5px solid #dbe3ee;border-radius:10px;
  font-family:inherit;font-size:1rem;outline:none;background:#fff;
}
.modal-card select:focus { border-color:var(--blue); }
.modal-card .field label { font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--gray-800); }
.checkbox-label {
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:600;font-size:.9rem;color:var(--ink);
  background:var(--gray-100);padding:12px 14px;border-radius:10px;
}
.checkbox-label input { width:16px;height:16px;accent-color:var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; padding:20px 16px; }
  .nav-toggle { display:block; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns:1fr; }
}