* { box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: #f0f4ff; }
h1,h2,h3,.brand { font-family: 'Sora', sans-serif; }

/* ---- LOADER ---- */
.spinner { width:22px;height:22px;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .7s linear infinite;display:inline-block }
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- LOGIN CARD ---- */
.login-wrap { min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#bfdbfe 100%) }
.login-card { background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(37,99,235,.13);padding:44px 40px;width:100%;max-width:420px }
.login-logo { width:52px;height:52px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:24px }

/* ---- SIDEBAR ---- */
.sidebar { width:64px;background:#1e3a8a;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:8px;position:fixed;left:0;top:0;z-index:40 }
.sidebar-icon { width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;color:#93c5fd }
.sidebar-icon:hover,.sidebar-icon.active { background:rgba(255,255,255,.15);color:#fff }
.sidebar-logo { width:42px;height:42px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px }

/* ---- MAIN LAYOUT ---- */
.main-content { min-height:100vh; width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 10px; padding-right: 10px; }

/* ---- TOPBAR ---- */
.topbar { background:#fff;border-bottom:1px solid #e0e7ff;padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;margin-bottom:24px; margin-top: 15px; border-radius: 18px;}
.topbar-title { font-size:1.1rem;font-weight:700;color:#1e3a8a }

/* ---- STAT CARDS ---- */
.stat-card { background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 2px 12px rgba(37,99,235,.06);border:1px solid #e0e7ff }
.stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center }

/* ---- FILTERS ---- */
.filter-bar { background:#fff;border-radius:16px;padding:18px 24px;box-shadow:0 2px 12px rgba(37,99,235,.06);border:1px solid #e0e7ff }
.filter-btn { padding:8px 18px;border-radius:9px;border:1.5px solid #e0e7ff;background:#f8faff;color:#64748b;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s }
.filter-btn:hover,.filter-btn.active { background:#2563eb;color:#fff;border-color:#2563eb }
.search-input { border:1.5px solid #e0e7ff;border-radius:10px;padding:10px 16px 10px 42px;font-size:.9rem;width:100%;outline:none;transition:border .2s;background:#f8faff }
.search-input:focus { border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08) }

/* ---- TABLE ---- */
.table-wrap { background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(37,99,235,.06);border:1px solid #e0e7ff;overflow:hidden }
.table-head th { background:#f0f4ff;color:#1e3a8a;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:13px 16px;text-align:left;white-space:nowrap }
.table-row { border-bottom:1px solid #f1f5f9;transition:background .15s;cursor:pointer }
.table-row:hover { background:#f0f4ff }
.table-row td { padding:13px 16px;font-size:.875rem;color:#374151 }
.table-row td:first-child { font-weight:600;color:#1e3a8a }

/* ---- BADGE ---- */
.badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:6px;font-size:.75rem;font-weight:600 }
.badge-blue { background:#dbeafe;color:#1d4ed8 }
.badge-green { background:#dcfce7;color:#15803d }
.badge-gray { background:#f1f5f9;color:#64748b }

/* ---- MODAL ---- */
.modal-overlay { position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s }
.modal-overlay.open { opacity:1;pointer-events:all }
.modal-card { background:#fff;border-radius:20px;width:100%;max-width:500px;box-shadow:0 20px 60px rgba(37,99,235,.18);transform:translateY(24px) scale(.97);transition:transform .25s;overflow:hidden }
.modal-overlay.open .modal-card { transform:translateY(0) scale(1) }
.modal-header { background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);padding:24px 28px;color:#fff }
.modal-body { padding:28px }
.detail-row { display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9 }
.detail-row:last-child { border-bottom:none }
.detail-icon { width:34px;height:34px;border-radius:9px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#2563eb }
.detail-label { font-size:.72rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em }
.detail-value { font-size:.92rem;color:#1e293b;font-weight:500;margin-top:1px }

/* ---- PAGINATION ---- */
.page-btn { width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid #e0e7ff;background:#fff;cursor:pointer;font-size:.85rem;font-weight:600;color:#374151;transition:all .2s }
.page-btn:hover,.page-btn.active { background:#2563eb;border-color:#2563eb;color:#fff }
.page-btn:disabled { opacity:.4;cursor:not-allowed }

/* ---- EMPTY STATE ---- */
.empty-state { padding:60px 24px;text-align:center;color:#94a3b8 }

/* ---- TOAST ---- */
.toast { position:fixed;bottom:28px;right:28px;background:#1e3a8a;color:#fff;padding:12px 22px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:2000;transform:translateY(20px);opacity:0;transition:all .3s;box-shadow:0 4px 20px rgba(37,99,235,.25) }
.toast.show { transform:translateY(0);opacity:1 }

/* ---- ANIMATIONS ---- */
.fade-in { animation:fadeIn .35s ease forwards }
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.row-enter { animation:rowIn .3s ease forwards }
@keyframes rowIn{from{opacity:0}to{opacity:1}}

/* ---- AVATAR ---- */
.avatar { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:#fff;flex-shrink:0 }