/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f6f9; color: #333; }

/* ── Variables ────────────────────────────────── */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #64748b;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0891b2;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --radius: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── Login ────────────────────────────────────── */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#1e3a5f url('/assets/img/bg.jpg') center/cover; }
.login-card { background:#fff; border-radius:12px; padding:2.5rem 2rem; width:100%; max-width:420px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.login-logo { text-align:center; margin-bottom:1.8rem; }
.login-logo img { height:60px; margin-bottom:.6rem; }
.login-logo h1 { font-size:1.5rem; color:var(--primary); }
.login-logo p { color:var(--secondary); font-size:.85rem; }

/* ── Layout ───────────────────────────────────── */
.app-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:var(--topbar-h); background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; padding:0 1.2rem; position:fixed; top:0; left:0; right:0; z-index:100; box-shadow:var(--shadow); }
.topbar-left { display:flex; align-items:center; gap:.8rem; }
.topbar-title { font-weight:600; font-size:1rem; }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-notif { cursor:pointer; font-size:1.2rem; position:relative; }
.topbar-user { display:flex; flex-direction:column; line-height:1.2; text-align:right; }
.topbar-user span { font-weight:600; font-size:.9rem; }
.role-badge { font-size:.7rem; color:var(--primary); text-transform:uppercase; }
.sidebar-toggle { background:none; border:none; font-size:1.3rem; cursor:pointer; color:#555; padding:.2rem .4rem; }
.app-body { display:flex; margin-top:var(--topbar-h); min-height:calc(100vh - var(--topbar-h)); }

/* ── Sidebar ──────────────────────────────────── */
.sidebar { width:var(--sidebar-w); background:#1e3a5f; color:#fff; min-height:calc(100vh - var(--topbar-h)); position:fixed; left:0; top:var(--topbar-h); overflow-y:auto; transition:transform .25s; z-index:90; }
.sidebar-logo { display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.1); font-size:1.1rem; font-weight:700; }
.sidebar-nav { padding:.5rem 0; }
.nav-section { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); padding:.8rem 1.2rem .3rem; }
.nav-item { display:flex; align-items:center; gap:.7rem; padding:.55rem 1.2rem; color:rgba(255,255,255,.8); text-decoration:none; font-size:.88rem; transition:background .15s; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:var(--primary); color:#fff; border-right:3px solid #93c5fd; }
.nav-icon { width:20px; text-align:center; }

/* ── Main Content ─────────────────────────────── */
.main-content { margin-left:var(--sidebar-w); flex:1; padding:1.5rem; transition:margin .25s; }
.page-header { margin-bottom:1.5rem; }
.page-header h2 { font-size:1.4rem; font-weight:700; color:#1e3a5f; }
.page-header p { color:var(--secondary); font-size:.85rem; margin-top:.2rem; }

/* ── Cards ────────────────────────────────────── */
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #e2e8f0; margin-bottom:1rem; }
.card-header { padding:1rem 1.2rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:1rem; font-weight:600; }
.card-body { padding:1.2rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:#fff; border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); border-left:4px solid var(--primary); display:flex; align-items:center; gap:1rem; }
.stat-icon { font-size:2rem; }
.stat-value { font-size:1.6rem; font-weight:700; line-height:1; }
.stat-label { font-size:.78rem; color:var(--secondary); margin-top:.2rem; }
.stat-card.green { border-color:var(--success); }
.stat-card.orange { border-color:var(--warning); }
.stat-card.red { border-color:var(--danger); }
.stat-card.teal { border-color:var(--info); }

/* ── Tables ───────────────────────────────────── */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
thead { background:#f8fafc; }
th { padding:.65rem 1rem; text-align:left; font-weight:600; color:#475569; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
td { padding:.65rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
tr:hover td { background:#f8fafc; }

/* ── Forms ────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label { font-size:.82rem; font-weight:600; color:#475569; }
.form-control { padding:.55rem .75rem; border:1px solid #cbd5e1; border-radius:6px; font-size:.88rem; color:#333; width:100%; transition:border-color .15s,box-shadow .15s; background:#fff; }
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-actions { display:flex; gap:.8rem; justify-content:flex-end; margin-top:1rem; padding-top:1rem; border-top:1px solid #e2e8f0; }

/* ── Buttons ──────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:6px; border:none; font-size:.85rem; font-weight:500; cursor:pointer; text-decoration:none; transition:background .15s,transform .1s; white-space:nowrap; }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-warning { background:var(--warning); color:#fff; }
.btn-secondary { background:var(--secondary); color:#fff; }
.btn-outline { background:transparent; border:1px solid #cbd5e1; color:#475569; }
.btn-outline:hover { background:#f8fafc; }
.btn-sm { padding:.35rem .7rem; font-size:.78rem; }
.btn-xs { padding:.2rem .5rem; font-size:.72rem; }
.btn-block { width:100%; justify-content:center; padding:.7rem; font-size:.95rem; }
.btn-icon { padding:.4rem .5rem; }

/* ── Badges & Status ──────────────────────────── */
.badge { display:inline-block; padding:.2rem .55rem; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-primary { background:#dbeafe; color:var(--primary); }
.badge-success { background:#dcfce7; color:var(--success); }
.badge-danger { background:#fee2e2; color:var(--danger); }
.badge-warning { background:#fef3c7; color:var(--warning); }
.badge-secondary { background:#f1f5f9; color:var(--secondary); }
.badge-info { background:#cffafe; color:var(--info); }

/* ── Alerts ───────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:6px; font-size:.88rem; margin-bottom:1rem; }
.alert-danger { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.alert-info { background:#cffafe; color:#155e75; border:1px solid #a5f3fc; }

/* ── Modal ────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:#fff; border-radius:var(--radius); width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-header { padding:1rem 1.2rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; }
.modal-header h4 { font-size:1rem; font-weight:600; }
.modal-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:#9ca3af; }
.modal-body { padding:1.2rem; }
.modal-footer { padding:1rem 1.2rem; border-top:1px solid #e2e8f0; display:flex; gap:.8rem; justify-content:flex-end; }

/* ── Tabs ─────────────────────────────────────── */
.tabs { display:flex; gap:0; border-bottom:2px solid #e2e8f0; margin-bottom:1.2rem; }
.tab-btn { padding:.6rem 1.2rem; background:none; border:none; cursor:pointer; font-size:.88rem; color:var(--secondary); border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── Search / Toolbar ─────────────────────────── */
.toolbar { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.toolbar-left { display:flex; gap:.8rem; align-items:center; flex:1; flex-wrap:wrap; }
.search-input { padding:.5rem .75rem; border:1px solid #cbd5e1; border-radius:6px; font-size:.85rem; min-width:200px; }
.search-input:focus { outline:none; border-color:var(--primary); }

/* ── Pagination ───────────────────────────────── */
.pagination { display:flex; gap:.4rem; align-items:center; justify-content:center; margin-top:1rem; }
.page-btn { padding:.35rem .7rem; border:1px solid #cbd5e1; border-radius:4px; background:#fff; cursor:pointer; font-size:.82rem; }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn:hover:not(.active) { background:#f8fafc; }

/* ── Responsive ───────────────────────────────── */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; padding:1rem; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .topbar-user { display:none; }
}

/* ── Utility ──────────────────────────────────── */
.text-muted { color:var(--secondary); }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-danger { color:var(--danger); }
.text-warning { color:var(--warning); }
.text-success { color:var(--success); }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; }
.flex { display:flex; } .gap-1 { gap:.5rem; } .gap-2 { gap:1rem; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.w-full { width:100%; }
.hidden { display:none !important; }
.loading { opacity:.5; pointer-events:none; }

/* ── Toast Notifications ─────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast { padding:.75rem 1.2rem; border-radius:8px; color:#fff; font-size:.88rem; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,.18); animation:slideIn .25s ease; min-width:220px; max-width:360px; }
.toast.success { background:#16a34a; }
.toast.error   { background:#dc2626; }
.toast.info    { background:#0891b2; }
.toast.warning { background:#d97706; }
@keyframes slideIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* ── Modal overlay fix ───────────────────────── */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500; display:none; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal-dialog { background:#fff; border-radius:var(--radius); width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-header { padding:1rem 1.2rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; }
.modal-header h3 { font-size:1rem; font-weight:600; margin:0; }
.modal-header button { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#9ca3af; line-height:1; }
.modal-body { padding:1.2rem; }


.modal-overlay {
    display: none;
}

.modal-overlay.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 700px;
}




.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9999;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: #ffffff;
    width: 100%;
    max-width: 780px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 10000;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.modal-header h4 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #374151;
}

.modal-body {
    padding: 20px;
    background: #fff;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #111827;
}

.form-control {
    width: 100%;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tab-btn {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.tab-btn.active {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

@media (max-width: 768px) {
    .modal {
        max-width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}