/* =========================================================================
   ADSTER ERP — APP DESIGN SYSTEM
   Fonts: Sora (display) + Inter (body) + JetBrains Mono (figures/money)
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
    --ink:#0C0F1F;
    --ink-2:#181D3B;
    --brand:#5B5FEF;
    --brand-dark:#4338CA;
    --brand-light:#EEF0FF;
    --accent:#F5A524;
    --money:#10B981;
    --danger:#EF4444;
    --surface:#F5F6FB;
    --card:#FFFFFF;
    --border:#E7E9F3;
    --text:#12141F;
    --text-muted:#6B7280;
    --radius:14px;
    --sidebar-w:252px;
    --topbar-h:60px;
    --shadow-soft:0 10px 30px rgba(17,20,45,.06);
    --shadow-pop:0 16px 40px rgba(17,20,45,.14);
}

/* ---------- Base typography, applied globally once app.css loads ---------- */
body{
    font-family:'Inter', system-ui, -apple-system, sans-serif !important;
    background:var(--surface) !important;
    color:var(--text);
}
h1,h2,h3,h4,h5,h6,.fw-extrabold,.fw-black{
    font-family:'Sora', system-ui, sans-serif !important;
    letter-spacing:-0.01em;
}
.money, .fig, td.money, span.money{
    font-family:'JetBrains Mono', ui-monospace, monospace !important;
    font-variant-numeric: tabular-nums;
    font-weight:600;
}

/* ---------- Push page content clear of the fixed sidebar ---------- */
body:has(.app-sidebar), body.has-app-sidebar{
    padding-left: var(--sidebar-w) !important;
}
@media (max-width: 991px){
    body:has(.app-sidebar), body.has-app-sidebar{
        padding-left: 0 !important;
        padding-top: var(--topbar-h) !important;
    }
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.app-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
    background:linear-gradient(190deg, var(--ink) 0%, var(--ink-2) 100%);
    color:#fff; z-index:1050; display:flex; flex-direction:column;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    transition: transform .25s ease;
}
.app-sidebar .side-brand{
    display:flex; align-items:center; gap:12px; padding:22px 20px 18px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.app-sidebar .side-brand img{ width:38px; height:38px; object-fit:contain; background:#fff; border-radius:9px; padding:4px; }
.app-sidebar .side-brand .b-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:16px; line-height:1; color:#fff; letter-spacing:.02em; }
.app-sidebar .side-brand .b-sub{ font-size:10.5px; color:#9AA1D9; margin-top:3px; letter-spacing:.03em; }

.side-scroll{ flex:1; overflow-y:auto; padding:14px 12px 10px 12px; }
.side-group{ margin-bottom:18px; }
.side-group-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:#6E76B5; padding:0 10px 8px 10px; }
.side-link{
    display:flex; align-items:center; gap:11px; padding:10px 12px; margin-bottom:2px;
    border-radius:10px; color:#C7CBEF; text-decoration:none; font-weight:600; font-size:13.5px;
    position:relative; transition:.15s;
}
.side-link i{ font-size:16px; width:18px; text-align:center; color:#8991D6; transition:.15s; }
.side-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-link:hover i{ color:#fff; }
.side-link.active{ background:linear-gradient(90deg, rgba(91,95,239,.24), rgba(91,95,239,.06)); color:#fff; box-shadow: inset 3px 0 0 var(--brand); }
.side-link.active i{ color:#B7BBFF; }

.side-foot{ border-top:1px solid rgba(255,255,255,.08); padding:14px 16px 18px 16px; }
.side-workspace{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:8px 10px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.side-workspace i{ color:#8991D6; font-size:14px; }
.side-workspace select{ background:transparent; border:none; color:#fff; font-size:12.5px; font-weight:600; width:100%; outline:none; }
.side-workspace select option{ color:#12141F; }
.side-user{ display:flex; align-items:center; gap:10px; }
.side-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--accent)); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }
.side-user-name{ font-size:12.5px; font-weight:700; color:#fff; line-height:1.1; }
.side-logout{ margin-left:auto; color:#8991D6; font-size:16px; text-decoration:none; }
.side-logout:hover{ color:var(--danger); }

/* ---------- Mobile top bar + overlay ---------- */
.app-topbar-mobile{ display:none; }
.side-backdrop{ display:none; }
@media (max-width: 991px){
    .app-sidebar{ transform: translateX(-100%); }
    .app-sidebar.open{ transform: translateX(0); }
    .app-topbar-mobile{
        display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
        background:linear-gradient(90deg, var(--ink), var(--ink-2)); z-index:1040; padding:0 16px; box-shadow:0 4px 16px rgba(0,0,0,.12);
    }
    .app-topbar-mobile img{ width:28px; height:28px; background:#fff; border-radius:7px; padding:3px; }
    .app-topbar-mobile .mt-title{ color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:14px; }
    .app-topbar-mobile button{ margin-left:auto; background:rgba(255,255,255,.1); border:none; color:#fff; width:36px; height:36px; border-radius:8px; font-size:18px; }
    .side-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(10,12,25,.5); z-index:1045; }
}

/* =========================================================================
   COMPONENT RESKIN (Bootstrap overrides so every page inherits the look)
   ========================================================================= */
.btn-primary{ background:var(--brand) !important; border-color:var(--brand) !important; }
.btn-primary:hover{ background:var(--brand-dark) !important; border-color:var(--brand-dark) !important; }
.btn-outline-primary{ color:var(--brand) !important; border-color:var(--brand) !important; }
.btn-outline-primary:hover{ background:var(--brand) !important; border-color:var(--brand) !important; }
.btn{ border-radius:9px; font-weight:600; }
.text-primary{ color:var(--brand) !important; }
.bg-primary{ background:var(--brand) !important; }
a{ color:var(--brand); }

.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.table thead th{ background:var(--ink) !important; color:#fff !important; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border:none; }
.form-control:focus, .form-select:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 4px rgba(91,95,239,.12) !important; }
.badge{ font-weight:600; letter-spacing:.02em; }
.nav-tabs .nav-link.active{ color:var(--brand) !important; border-bottom:2px solid var(--brand) !important; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#CBD0EA; border-radius:10px; }
.side-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); }