/* ============================================================
   PGV — bespoke modern admin design system
   Layered over Bootstrap's grid/components. Indigo/violet,
   elegant dark sidebar, glassy topbar, soft layered shadows.
   ============================================================ */

:root {
    --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe;
    --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca;
    --violet-500:#8b5cf6; --violet-600:#7c3aed;

    --bs-primary:#6366f1; --bs-primary-rgb:99,102,241;

    --grad: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    --grad-soft: linear-gradient(135deg,#eef2ff 0%,#f5f3ff 100%);

    --bg:#f4f5fb;
    --surface:#ffffff;
    --border:#eceef4;
    --ink:#1d2030;
    --ink-2:#5b6275;
    --muted:#8b91a6;

    --sidebar-bg:#15131f;
    --sidebar-bg-2:#1c1930;
    --sidebar-w:264px;
    --topbar-h:72px;

    --radius:16px;
    --radius-sm:11px;
    --shadow:0 1px 2px rgba(20,24,40,.04), 0 10px 24px -14px rgba(20,24,40,.18);
    --shadow-lg:0 8px 30px -10px rgba(67,56,202,.22), 0 4px 10px -6px rgba(20,24,40,.10);
    --ring:0 0 0 4px rgba(99,102,241,.16);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* { font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; }

body {
    background:var(--bg);
    color:var(--ink);
    font-size:.9rem;
    -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; }
::selection { background:rgba(99,102,241,.18); }
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9cddd;border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aab0c6;background-clip:content-box}

/* ───────── Layout ───────── */
#page-topbar{
    position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:1002;
    background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border);
}
#page-topbar .navbar-header{ height:var(--topbar-h); padding:0 22px 0 0; display:flex; align-items:center; justify-content:space-between; }

.navbar-brand-box{
    width:var(--sidebar-w); height:var(--topbar-h); display:flex; align-items:center; padding-left:24px;
    background:var(--sidebar-bg);
}
.navbar-brand-box .logo-txt{ font-weight:800; letter-spacing:-.02em; font-size:1.15rem; color:#fff; }
.navbar-brand-box .logo-txt .text-primary{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.navbar-brand-box .logo-light{ display:none; }

#vertical-menu-btn{
    margin-left:14px; color:var(--ink-2); border:0; background:transparent;
    width:40px; height:40px; border-radius:10px; transition:.15s;
}
#vertical-menu-btn:hover{ background:var(--indigo-50); color:var(--indigo-600); }

.vertical-menu{
    position:fixed; top:var(--topbar-h); left:0; width:var(--sidebar-w); bottom:0; z-index:1001;
    background:linear-gradient(180deg,var(--sidebar-bg-2),var(--sidebar-bg));
    border-right:1px solid rgba(255,255,255,.04);
    overflow-y:auto;
}
.main-content{ margin-left:var(--sidebar-w); padding-top:var(--topbar-h); min-height:100vh; }
.page-content{ padding:26px 26px 8px; }
.container-fluid{ padding-left:0; padding-right:0; }

/* ───────── Sidebar nav ───────── */
#sidebar-menu{ padding:18px 14px 40px; }
#sidebar-menu .menu-title{
    color:rgba(255,255,255,.34); font-size:.66rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; padding:18px 12px 8px; list-style:none;
}
#sidebar-menu ul{ list-style:none; padding:0; margin:0; }
#sidebar-menu ul li a{
    display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.62);
    padding:.62rem .8rem; margin:2px 0; border-radius:12px; font-weight:500; font-size:.875rem;
    transition:.16s; position:relative;
}
#sidebar-menu ul li a svg{ width:18px; height:18px; opacity:.85; }
#sidebar-menu ul li a:hover{ color:#fff; background:rgba(255,255,255,.06); }
#sidebar-menu ul li a.active{
    color:#fff; background:var(--grad);
    box-shadow:0 8px 20px -8px rgba(99,102,241,.7);
}
#sidebar-menu ul li a.active svg{ opacity:1; }

/* ───────── Topbar user ───────── */
.header-item{ border:0; background:transparent; }
#page-header-user-dropdown{
    display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:40px !important;
    border:1px solid var(--border) !important; background:#fff !important; transition:.15s;
}
#page-header-user-dropdown:hover{ box-shadow:var(--shadow); }
#page-header-user-dropdown > span:first-child{ background:var(--grad) !important; box-shadow:0 6px 14px -6px rgba(99,102,241,.6); }
.dropdown-menu{ border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; }
.dropdown-item{ border-radius:9px; padding:.5rem .7rem; font-weight:500; }
.dropdown-item:hover{ background:var(--indigo-50); color:var(--indigo-700); }

/* ───────── Page title ───────── */
.page-title-box{ padding:4px 0 20px; }
.page-title-box h4{ font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.breadcrumb{ background:transparent; font-size:.8rem; }
.breadcrumb-item, .breadcrumb-item a{ color:var(--muted); }
.breadcrumb-item.active{ color:var(--indigo-600); font-weight:600; }
.breadcrumb-item+.breadcrumb-item::before{ color:#cfd3e0; }

/* ───────── Cards ───────── */
.card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:24px;
}
.card-h-100{ height:calc(100% - 24px); }
.card-body{ padding:1.35rem; }
.card-header{ padding:1.1rem 1.35rem; background:transparent; border-bottom:1px solid var(--border); }
.card-title{ font-weight:700; letter-spacing:-.01em; }
a.card{ transition:transform .18s, box-shadow .18s; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--indigo-200); }

/* ───────── Avatars / icon chips ───────── */
.avatar-sm{ width:46px; height:46px; }
.avatar-xs{ width:34px; height:34px; }
.avatar-title{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:700; }
.bg-primary-subtle{ background:var(--indigo-50) !important; }
.text-primary{ color:var(--indigo-600) !important; }

/* ───────── Buttons ───────── */
.btn{ border-radius:10px; font-weight:600; padding:.5rem .95rem; transition:.16s; letter-spacing:-.01em; }
.btn-sm{ border-radius:8px; padding:.32rem .7rem; font-size:.78rem; }
.btn-lg{ border-radius:12px; padding:.7rem 1.3rem; }
.btn-primary{ background:var(--grad); border:0; box-shadow:0 8px 18px -8px rgba(99,102,241,.7); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 22px -8px rgba(99,102,241,.8); filter:brightness(1.03); }
.btn-light{ background:#f1f2f8; border:1px solid var(--border); color:var(--ink-2); }
.btn-light:hover{ background:#e9eaf3; }
.btn-soft-primary{ background:var(--indigo-50); color:var(--indigo-600); border:0; }
.btn-soft-primary:hover{ background:var(--indigo-100); color:var(--indigo-700); }
.btn-soft-success{ background:#e7f8f0; color:#0e9f6e; border:0; }
.btn-soft-success:hover{ background:#d3f3e4; }
.btn-soft-danger{ background:#fdecef; color:#e11d48; border:0; }
.btn-soft-danger:hover{ background:#fbdde2; }
.btn-soft-secondary{ background:#eef0f5; color:#5b6275; border:0; }
.btn-soft-secondary:hover{ background:#e4e7ef; }
.btn-soft-warning{ background:#fff5e6; color:#d97706; border:0; }
.btn-outline-secondary{ border:1px solid #d8dbe6; color:var(--ink-2); }
.btn-outline-secondary:hover{ background:#f1f2f8; color:var(--ink); border-color:#cfd3e0; }
.btn-success{ background:#10b981; border:0; box-shadow:0 8px 18px -10px rgba(16,185,129,.7); }
.btn-warning{ background:#f59e0b; border:0; color:#fff; }
.btn-danger{ background:#f43f5e; border:0; }

/* ───────── Tables ───────── */
.table{ --bs-table-bg:transparent; margin-bottom:0; color:var(--ink-2); }
.table > thead{ background:transparent; }
.table > thead th{
    text-transform:uppercase; font-size:.68rem; font-weight:700; letter-spacing:.06em;
    color:var(--muted); border-bottom:1px solid var(--border); padding:.85rem 1rem; white-space:nowrap;
}
.table > tbody > tr{ border-bottom:1px solid #f1f2f7; }
.table > tbody > tr:last-child{ border-bottom:0; }
.table > tbody td{ padding:.9rem 1rem; vertical-align:middle; }
.table-hover > tbody > tr:hover{ background:#f8f8fe; }
.table-light{ --bs-table-bg:#fafbfe; }
.table-nowrap td, .table-nowrap th{ white-space:nowrap; }

/* ───────── Badges ───────── */
.badge{ font-weight:600; padding:.36em .7em; border-radius:7px; letter-spacing:.01em; }
.bg-success-subtle{ background:#e7f8f0 !important; } .text-success{ color:#0e9f6e !important; }
.bg-warning-subtle{ background:#fff5e6 !important; } .text-warning{ color:#d97706 !important; }
.bg-danger-subtle{ background:#fdecef !important; }  .text-danger{ color:#e11d48 !important; }
.bg-info-subtle{ background:#e6f6fd !important; }    .text-info{ color:#0ea5e9 !important; }
.bg-secondary-subtle{ background:#eef0f5 !important; } .text-secondary{ color:#6b7280 !important; }

/* ───────── Forms ───────── */
.form-control,.form-select{
    border:1px solid #e4e7f0; border-radius:10px; padding:.55rem .8rem; font-size:.875rem; color:var(--ink);
    transition:.15s; background-color:#fff;
}
.form-control:focus,.form-select:focus{ border-color:var(--indigo-400); box-shadow:var(--ring); }
.form-label{ font-weight:600; font-size:.8rem; color:var(--ink-2); margin-bottom:.4rem; }
.input-group-text{ background:#f6f7fb; border:1px solid #e4e7f0; border-radius:10px; color:var(--muted); }
.form-text{ font-size:.75rem; color:var(--muted); }
.form-switch .form-check-input{ width:2.6em; height:1.35em; background-color:#d8dbe6; border:0; cursor:pointer; }
.form-switch .form-check-input:checked{ background-color:var(--indigo-500); }
.form-check-input:focus{ box-shadow:var(--ring); }

/* ───────── Alerts ───────── */
.alert{ border:0; border-radius:12px; padding:.85rem 1.1rem; font-weight:500; }
.alert-success{ background:#e7f8f0; color:#0e7d57; }
.alert-danger{ background:#fdecef; color:#be123c; }
.alert-secondary{ background:#f6f7fb; color:var(--ink-2); }

/* ───────── Footer ───────── */
.footer{ margin-left:0; padding:18px 26px; color:var(--muted); font-size:.8rem; }

/* ───────── Login ───────── */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:992px){ .auth-shell{ grid-template-columns:480px 1fr; } }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; background:#fff; }
.auth-form-card{ width:100%; max-width:380px; }
.auth-brand{ font-weight:800; font-size:1.5rem; letter-spacing:-.02em; }
.auth-brand .text-primary{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-aside{
    display:none; position:relative; overflow:hidden; color:#fff;
    background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#9333ea 100%);
}
@media (min-width:992px){ .auth-aside{ display:flex; align-items:center; } }
.auth-aside .blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; }
.auth-aside .blob.b1{ width:420px;height:420px; background:rgba(255,255,255,.18); top:-120px; right:-80px; }
.auth-aside .blob.b2{ width:320px;height:320px; background:rgba(255,255,255,.12); bottom:-100px; left:-60px; }
.auth-aside .content{ position:relative; z-index:2; padding:64px; max-width:560px; }

/* ───────── Responsive sidebar ───────── */
@media (max-width:991.98px){
    .vertical-menu{ transform:translateX(-100%); transition:transform .25s; box-shadow:0 0 40px rgba(0,0,0,.3); }
    body.sidebar-open .vertical-menu{ transform:none; }
    .navbar-brand-box{ width:auto; padding-right:18px; background:transparent; }
    .navbar-brand-box .logo-txt{ color:var(--ink); }
    .navbar-brand-box .logo-txt .text-primary{ -webkit-text-fill-color:initial; color:var(--indigo-600); }
    .main-content{ margin-left:0; }
    body.sidebar-open::after{ content:''; position:fixed; inset:0; top:var(--topbar-h); background:rgba(15,18,30,.45); z-index:1000; }
}

/* count-up + chart polish */
.apex-charts text{ font-family:'Inter',sans-serif !important; }