/* =========================================================================
   BizPro – Business Management Suite  |  UI theme (Bootstrap 5 based)
   Layouts: sidebar | topbar | hybrid | horizontal
   Sidebar modes: vertical | compact | mini | icon (+ collapsed)
   Themes: light | dark | auto, accent via --bp-accent
   ========================================================================= */
:root {
    --bp-accent: #2563eb;
    --bp-accent-rgb: 37, 99, 235;
    --bp-accent-soft: rgba(var(--bp-accent-rgb), .10);
    --bp-sidebar-bg: #0b1437;
    --bp-sidebar-bg2: #111c44;
    --bp-sidebar-text: #c3cbe4;
    --bp-sidebar-muted: #7c87ad;
    --bp-sidebar-hover: rgba(255, 255, 255, .06);
    --bp-sidebar-w: 222px;
    --bp-topbar-h: 64px;
    --bp-body-bg: #f3f6fb;
    --bp-card-bg: #ffffff;
    --bp-border: #e6eaf2;
    --bp-text: #1e293b;
    --bp-muted: #64748b;
    --bp-heading: #0f172a;
    --bp-input-bg: #f8fafc;
    --bp-radius: 12px;
    --bp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --bp-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
    --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-primary: var(--bp-accent);
    --bs-primary-rgb: var(--bp-accent-rgb);
    --bs-link-color: var(--bp-accent);
    --bs-link-color-rgb: var(--bp-accent-rgb);
    --bs-link-hover-color: var(--bp-accent);
}

[data-bs-theme="dark"] {
    --bp-body-bg: #0b1120;
    --bp-card-bg: #131c31;
    --bp-border: #23304b;
    --bp-text: #dbe3f1;
    --bp-muted: #8e9bb6;
    --bp-heading: #f1f5f9;
    --bp-input-bg: #0f172a;
    --bp-sidebar-bg: #070d22;
    --bp-sidebar-bg2: #0b1330;
    --bs-body-bg: #0b1120;
    --bs-body-color: #dbe3f1;
    --bs-border-color: #23304b;
    --bs-tertiary-bg: #18233b;
    --bs-secondary-bg: #18233b;
}

html, body { min-height: 100%; }
body.bp {
    background: var(--bp-body-bg);
    color: var(--bp-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
.text-muted, .text-secondary { color: var(--bp-muted) !important; }
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 { color: var(--bp-heading); }
.fw-600 { font-weight: 600 !important; }
.fs-13 { font-size: 13px !important; }
.fs-12 { font-size: 12px !important; }
.fs-11 { font-size: 11px !important; }
:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

/* ---------------- Buttons & form tweaks (accent aware) ---------------- */
.btn-primary {
    --bs-btn-bg: var(--bp-accent); --bs-btn-border-color: var(--bp-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bp-accent) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bp-accent) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bp-accent) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bp-accent) 80%, #000);
    --bs-btn-disabled-bg: var(--bp-accent); --bs-btn-disabled-border-color: var(--bp-accent);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--bp-accent); --bs-btn-border-color: var(--bp-accent);
    --bs-btn-hover-bg: var(--bp-accent); --bs-btn-hover-border-color: var(--bp-accent);
    --bs-btn-active-bg: var(--bp-accent); --bs-btn-active-border-color: var(--bp-accent);
}
.btn { border-radius: 8px; font-size: 13.5px; }
.btn-sm { border-radius: 7px; font-size: 12.5px; }
.btn-light { --bs-btn-bg: var(--bp-card-bg); --bs-btn-border-color: var(--bp-border); --bs-btn-hover-bg: var(--bp-input-bg); --bs-btn-hover-border-color: var(--bp-border); --bs-btn-color: var(--bp-text); }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-soft-primary { background: var(--bp-accent-soft); color: var(--bp-accent); border: 0; }
.btn-soft-primary:hover { background: var(--bp-accent); color: #fff; }
.btn-soft-danger { background: rgba(239, 68, 68, .1); color: #dc2626; border: 0; }
.btn-soft-danger:hover { background: #dc2626; color: #fff; }
.btn-soft-success { background: rgba(22, 163, 74, .1); color: #16a34a; border: 0; }
.btn-soft-success:hover { background: #16a34a; color: #fff; }
.text-primary { color: var(--bp-accent) !important; }
.bg-primary { background-color: var(--bp-accent) !important; }
.border-primary { border-color: var(--bp-accent) !important; }
.form-control, .form-select {
    border-radius: 8px; border-color: var(--bp-border); font-size: 13.5px;
    background-color: var(--bp-card-bg); color: var(--bp-text); min-height: 38px;
}
.form-control-sm, .form-select-sm { min-height: 31px; font-size: 12.5px; }
.form-control:focus, .form-select:focus { border-color: var(--bp-accent); box-shadow: 0 0 0 3px var(--bp-accent-soft); }
.form-label { font-size: 12.5px; font-weight: 500; color: var(--bp-muted); margin-bottom: 5px; }
.form-label .req, .req { color: #ef4444; }
.form-check-input:checked { background-color: var(--bp-accent); border-color: var(--bp-accent); }
.input-group-text { background: var(--bp-input-bg); border-color: var(--bp-border); color: var(--bp-muted); font-size: 13px; }
.form-control[readonly] { background-color: var(--bp-input-bg); }

/* ---------------- Cards ---------------- */
.card {
    --bs-card-bg: var(--bp-card-bg);
    --bs-card-border-color: var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow);
}
.card-header { background: transparent; border-bottom: 1px solid var(--bp-border); padding: 14px 18px; }
.card-header .card-title, .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 700; margin: 0; color: var(--bp-heading); }
.card-body { padding: 18px; }
.card-footer { background: transparent; border-top: 1px solid var(--bp-border); }
.card-link-sm { font-size: 12.5px; font-weight: 600; color: var(--bp-accent); }

/* ---------------- Tables ---------------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--bp-text); margin-bottom: 0; font-size: 13px; }
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--bp-border); vertical-align: middle; }
.table thead th {
    background: var(--bp-input-bg); color: var(--bp-muted); font-weight: 600; font-size: 12px;
    text-transform: none; white-space: nowrap; border-bottom: 1px solid var(--bp-border);
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bp-accent-soft); }
.table th a.sort { color: inherit; }
.table-sm > :not(caption) > * > * { padding: 7px 10px; }
.table-items td { padding: 6px 8px !important; }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-responsive { border-radius: inherit; }
.table-card { border-radius: var(--bp-radius); overflow: hidden; }
.empty-state { padding: 40px 16px; text-align: center; color: var(--bp-muted); }
.empty-state i { font-size: 38px; display: block; margin-bottom: 8px; opacity: .5; }

/* ---------------- Badges ---------------- */
.badge { font-weight: 600; border-radius: 6px; padding: .38em .65em; font-size: 11px; }
.badge-soft-success { background: rgba(22, 163, 74, .12); color: #15803d; }
.badge-soft-warning { background: rgba(245, 158, 11, .15); color: #b45309; }
.badge-soft-danger { background: rgba(239, 68, 68, .12); color: #dc2626; }
.badge-soft-info { background: rgba(14, 165, 233, .12); color: #0369a1; }
.badge-soft-secondary { background: rgba(100, 116, 139, .12); color: #475569; }
.badge-soft-primary { background: var(--bp-accent-soft); color: var(--bp-accent); }
.badge-soft-purple { background: rgba(124, 58, 237, .12); color: #6d28d9; }
[data-bs-theme="dark"] .badge-soft-success { color: #4ade80; }
[data-bs-theme="dark"] .badge-soft-warning { color: #fbbf24; }
[data-bs-theme="dark"] .badge-soft-danger { color: #f87171; }
[data-bs-theme="dark"] .badge-soft-info { color: #38bdf8; }
[data-bs-theme="dark"] .badge-soft-secondary { color: #94a3b8; }
.group-badge { background: rgba(22, 163, 74, .12); color: #15803d; border-radius: 6px; padding: 3px 10px; font-weight: 600; font-size: 12px; display: inline-block; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.bp-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--bp-sidebar-w); z-index: 1040;
    background: linear-gradient(180deg, var(--bp-sidebar-bg) 0%, var(--bp-sidebar-bg2) 100%);
    color: var(--bp-sidebar-text); display: flex; flex-direction: column;
    transition: width .22s ease, transform .22s ease;
}
.bp-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; color: #fff; min-height: 64px; }
.bp-brand img { width: 40px; height: 40px; flex-shrink: 0; }
.bp-brand .name { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: #fff; }
.bp-brand .tag { font-size: 10.5px; color: var(--bp-sidebar-text); margin-top: 3px; white-space: nowrap; }
.bp-menu-search { padding: 6px 14px 10px; position: relative; }
.bp-menu-search i { position: absolute; left: 26px; top: 50%; transform: translateY(-58%); color: var(--bp-sidebar-muted); font-size: 13px; }
.bp-menu-search input {
    width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px;
    color: #fff; font-size: 12.5px; padding: 8px 10px 8px 32px; outline: none;
}
.bp-menu-search input::placeholder { color: var(--bp-sidebar-muted); }
.bp-menu-search input:focus { border-color: rgba(var(--bp-accent-rgb), .7); }
.bp-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.bp-nav::-webkit-scrollbar { width: 5px; }
.bp-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 4px; }
.bp-nav-item { position: relative; }
.bp-nav-link {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 1px 0; border-radius: 8px;
    color: var(--bp-sidebar-text); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s; border: 0; background: none; width: 100%; text-align: left;
}
.bp-nav-link > i:first-child { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }
.bp-nav-link .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.bp-nav-link .chev { font-size: 11px; opacity: .7; transition: transform .2s; }
.bp-nav-link:hover { background: var(--bp-sidebar-hover); color: #fff; }
.bp-nav-item.open > .bp-nav-link .chev { transform: rotate(90deg); }
.bp-nav-item.active > .bp-nav-link {
    background: linear-gradient(90deg, var(--bp-accent), color-mix(in srgb, var(--bp-accent) 75%, #7c3aed));
    color: #fff; box-shadow: 0 6px 16px rgba(var(--bp-accent-rgb), .35);
}
.bp-sub { display: none; padding: 2px 0 6px 32px; }
.bp-nav-item.open > .bp-sub { display: block; }
.bp-sub a { display: block; padding: 6.5px 12px; color: var(--bp-sidebar-muted); font-size: 13px; border-radius: 6px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sub a::before { content: ''; position: absolute; left: -10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; transform: translateY(-50%); }
.bp-sub a:hover { color: #fff; background: var(--bp-sidebar-hover); }
.bp-sub a.active { color: #fff; font-weight: 600; }
.bp-sub a.active::before { background: var(--bp-accent); opacity: 1; box-shadow: 0 0 0 3px rgba(var(--bp-accent-rgb), .3); }
.bp-flyout { display: none; }

.bp-sidebar-foot { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.bp-style-box { border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: rgba(255, 255, 255, .03); }
.bp-style-box .ttl { font-size: 12px; color: #fff; font-weight: 600; margin-bottom: 8px; }
.bp-mode-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bp-mode-btn { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--bp-sidebar-text); border-radius: 8px; padding: 6px 2px 4px; font-size: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.bp-mode-btn i { font-size: 16px; }
.bp-mode-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.bp-mode-btn.active { background: linear-gradient(135deg, #7c3aed, #a855f7); border-color: transparent; color: #fff; }
.bp-swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; position: relative; padding: 0; }
.bp-swatch.active::after { content: '\F26E'; font-family: 'bootstrap-icons'; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bp-collapse-btn { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: var(--bp-sidebar-text); border-radius: 8px; padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.bp-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, .09); }

/* compact */
.sb-compact { --bp-sidebar-w: 205px; }
.sb-compact .bp-nav-link { padding: 7px 10px; font-size: 12.5px; gap: 9px; }
.sb-compact .bp-nav-link > i:first-child { font-size: 15px; }
.sb-compact .bp-sub { padding-left: 26px; }
.sb-compact .bp-sub a { font-size: 12px; padding: 5px 10px; }
.sb-compact .bp-brand .name { font-size: 19px; }

/* mini + icon + collapsed (shared) */
.sb-mini { --bp-sidebar-w: 88px; }
.sb-icon, .sb-collapsed { --bp-sidebar-w: 70px; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-brand { justify-content: center; padding: 14px 6px; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-brand .txt,
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-menu-search,
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-nav-link .chev,
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-sub,
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-collapse-btn .lbl { display: none !important; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-nav { padding: 4px 8px; }
:is(.sb-icon, .sb-collapsed) .bp-nav-link { justify-content: center; padding: 11px 0; }
:is(.sb-icon, .sb-collapsed) .bp-nav-link .lbl { display: none; }
.sb-mini .bp-nav-link { flex-direction: column; gap: 3px; padding: 9px 2px; text-align: center; }
.sb-mini .bp-nav-link .lbl { font-size: 10px; white-space: normal; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-collapse-btn { justify-content: center; padding: 8px 0; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-collapse-btn i { transform: rotate(180deg); }
.bp-flyout {
    position: fixed; z-index: 1080; min-width: 210px; background: var(--bp-sidebar-bg2); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px; box-shadow: var(--bp-shadow-lg); padding: 8px;
}
.bp-flyout .fl-title { color: #fff; font-weight: 700; font-size: 13px; padding: 6px 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 4px; }
.bp-flyout a { display: block; color: var(--bp-sidebar-text); padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.bp-flyout a:hover, .bp-flyout a.active { background: var(--bp-sidebar-hover); color: #fff; }
.bp-flyout.show { display: block; }

/* =========================================================================
   MAIN + TOPBAR
   ========================================================================= */
.bp-main { margin-left: var(--bp-sidebar-w); min-height: 100vh; transition: margin-left .22s ease; display: flex; flex-direction: column; }
.menu-topbar .bp-sidebar, .menu-horizontal .bp-sidebar { display: none; }
.menu-topbar .bp-main, .menu-horizontal .bp-main { margin-left: 0; }
.bp-topbar { position: sticky; top: 0; z-index: 1030; background: var(--bp-card-bg); border-bottom: 1px solid var(--bp-border); }
.bp-topbar-row { height: var(--bp-topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.bp-topbar .tb-brand { display: none; align-items: center; gap: 8px; color: var(--bp-heading); font-weight: 800; font-size: 19px; margin-right: 6px; }
.bp-topbar .tb-brand img { width: 32px; height: 32px; }
.menu-topbar .bp-topbar .tb-brand, .menu-horizontal .bp-topbar .tb-brand { display: inline-flex; }
.tb-btn {
    width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--bp-border); background: var(--bp-card-bg);
    color: var(--bp-text); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; position: relative; flex-shrink: 0;
}
.tb-btn:hover { background: var(--bp-input-bg); color: var(--bp-accent); }
.tb-btn.plain { border-color: transparent; }
.tb-btn .dot { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bp-card-bg); }
.tb-search { flex: 1; max-width: 430px; position: relative; }
.tb-search i.bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--bp-muted); }
.tb-search input { width: 100%; height: 40px; border-radius: 9px; border: 1px solid var(--bp-border); background: var(--bp-input-bg); padding: 0 76px 0 38px; font-size: 13px; color: var(--bp-text); outline: none; }
.tb-search input:focus { border-color: var(--bp-accent); box-shadow: 0 0 0 3px var(--bp-accent-soft); background: var(--bp-card-bg); }
.tb-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); background: var(--bp-card-bg); color: var(--bp-muted); border: 1px solid var(--bp-border); font-size: 11px; border-radius: 6px; padding: 2px 7px; font-family: inherit; }
.tb-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bp-card-bg); border: 1px solid var(--bp-border); border-radius: 10px; box-shadow: var(--bp-shadow-lg); max-height: 420px; overflow-y: auto; display: none; z-index: 1100; }
.tb-results.show { display: block; }
.tb-results .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--bp-muted); padding: 10px 14px 4px; font-weight: 600; }
.tb-results a { display: flex; gap: 10px; padding: 8px 14px; color: var(--bp-text); align-items: center; }
.tb-results a:hover, .tb-results a.focus { background: var(--bp-accent-soft); }
.tb-results a i { color: var(--bp-accent); font-size: 16px; }
.tb-results small { color: var(--bp-muted); display: block; font-size: 11.5px; }
.tb-pill { height: 38px; border: 1px solid var(--bp-border); border-radius: 9px; background: var(--bp-card-bg); color: var(--bp-text); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.tb-pill:hover { border-color: var(--bp-accent); }
.tb-pill i:first-child { color: var(--bp-accent); }
.tb-pill.branch i:first-child { color: #ef4444; }
.tb-user { display: flex; align-items: center; gap: 10px; padding: 3px 6px; border-radius: 10px; border: 0; background: none; color: var(--bp-text); text-align: left; }
.tb-user:hover { background: var(--bp-input-bg); }
.tb-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--bp-accent), #a855f7); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.tb-user .nm { font-weight: 700; font-size: 13px; line-height: 1.1; }
.tb-user .rl { font-size: 11px; color: var(--bp-muted); }
.tb-theme-toggle { display: inline-flex; border: 1px solid var(--bp-border); border-radius: 9px; overflow: hidden; height: 38px; }
.tb-theme-toggle button { border: 0; background: var(--bp-card-bg); color: var(--bp-muted); width: 36px; font-size: 15px; }
.tb-theme-toggle button.active { background: var(--bp-accent-soft); color: var(--bp-accent); }
.dropdown-menu { border-color: var(--bp-border); border-radius: 12px; box-shadow: var(--bp-shadow-lg); font-size: 13px; --bs-dropdown-bg: var(--bp-card-bg); --bs-dropdown-link-color: var(--bp-text); --bs-dropdown-link-active-bg: var(--bp-accent); --bs-dropdown-link-hover-bg: var(--bp-accent-soft); }
.dropdown-item { padding: 7px 14px; border-radius: 6px; }
.dropdown-menu .dropdown-item { width: auto; margin: 0 6px; }
.menu-style-dd { width: 250px; padding: 10px; }
.menu-style-dd .dd-title { font-weight: 700; color: var(--bp-heading); font-size: 13.5px; padding: 2px 6px 8px; }
.menu-style-dd .dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0; }
.menu-style-dd .dropdown-item i { font-size: 18px; color: var(--bp-muted); }
.menu-style-dd .dropdown-item.active { background: var(--bp-accent-soft); color: var(--bp-heading); font-weight: 600; }
.menu-style-dd .dropdown-item.active i { color: var(--bp-accent); }
.theme-dd { width: 270px; padding: 14px; }
.theme-dd .dd-title { font-weight: 700; color: var(--bp-heading); font-size: 14px; margin-bottom: 10px; }
.theme-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.theme-tile { border: 1px solid var(--bp-border); background: var(--bp-card-bg); border-radius: 10px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--bp-text); }
.theme-tile i { font-size: 20px; }
.theme-tile.active { border-color: var(--bp-accent); background: var(--bp-accent-soft); color: var(--bp-accent); }
.theme-dd .bp-swatch { width: 26px; height: 26px; border-color: transparent; box-shadow: 0 0 0 1px var(--bp-border); }
.notif-dd { width: 320px; padding: 0; overflow: hidden; }
.notif-dd .hd { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--bp-border); }
.notif-dd a { display: flex; gap: 12px; padding: 12px 16px; color: var(--bp-text); border-bottom: 1px solid var(--bp-border); }
.notif-dd a:hover { background: var(--bp-input-bg); }
.notif-dd .ic { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* top / horizontal nav row */
.bp-topnav { display: none; border-top: 1px solid var(--bp-border); padding: 8px 20px; gap: 4px; align-items: center; flex-wrap: wrap; }
.menu-topbar .bp-topnav.grouped, .menu-hybrid .bp-topnav.grouped { display: flex; }
.menu-horizontal .bp-topnav.full { display: flex; }
.bp-topnav .tn-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; color: var(--bp-text); font-weight: 500; font-size: 13.5px; border: 0; background: none; white-space: nowrap; }
.bp-topnav .tn-link i:first-child { font-size: 16px; color: var(--bp-text); }
.bp-topnav .tn-link .bi-chevron-down { font-size: 10px; opacity: .7; }
.bp-topnav .tn-link:hover, .bp-topnav .show > .tn-link { background: var(--bp-input-bg); color: var(--bp-accent); }
.bp-topnav .tn-link.active { background: var(--bp-accent-soft); color: var(--bp-accent); font-weight: 600; }
.bp-topnav .tn-link.active i:first-child { color: var(--bp-accent); }
.bp-topnav .dropdown-menu { min-width: 230px; padding: 6px; max-height: 70vh; overflow-y: auto; }
.bp-topnav .dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--bp-muted); padding: 8px 12px 4px; }
.bp-topnav .mega { min-width: 560px; }
.bp-topnav .mega .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px; }
.menu-horizontal .bp-topnav.full .tn-link { padding: 7px 10px; font-size: 12.5px; }

/* content */
.bp-content { padding: 20px 22px 28px; flex: 1; }
.bp-footer { padding: 12px 22px; color: var(--bp-muted); font-size: 12px; border-top: 1px solid var(--bp-border); display: flex; justify-content: space-between; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; font-weight: 700; margin: 0 0 3px; letter-spacing: -.2px; }
.page-head .breadcrumb { margin: 0; font-size: 12.5px; --bs-breadcrumb-divider: '›'; }
.page-head .breadcrumb a { color: var(--bp-accent); }
.page-head .breadcrumb-item.active { color: var(--bp-muted); }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bp-border); }
.filter-bar .search { position: relative; min-width: 230px; flex: 1; max-width: 340px; }
.filter-bar .search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bp-muted); }
.filter-bar .search input { padding-left: 34px; }
.alert { border-radius: 10px; font-size: 13.5px; border: 0; }
.alert-success { background: rgba(22, 163, 74, .1); color: #15803d; }
.alert-danger { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.alert-warning { background: rgba(245, 158, 11, .12); color: #92400e; }
.alert-info { background: rgba(14, 165, 233, .1); color: #075985; }
[data-bs-theme="dark"] .alert-success { color: #4ade80; }
[data-bs-theme="dark"] .alert-danger { color: #f87171; }
[data-bs-theme="dark"] .alert-warning { color: #fbbf24; }
[data-bs-theme="dark"] .alert-info { color: #38bdf8; }
.pagination { --bs-pagination-active-bg: var(--bp-accent); --bs-pagination-active-border-color: var(--bp-accent); --bs-pagination-color: var(--bp-text); --bs-pagination-bg: var(--bp-card-bg); --bs-pagination-border-color: var(--bp-border); margin: 0; font-size: 13px; }
.pager-wrap { padding: 12px 16px; border-top: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pager-wrap nav > .d-sm-flex > div:first-child { display: none; }
.nav-tabs { --bs-nav-tabs-border-color: var(--bp-border); --bs-nav-tabs-link-active-bg: var(--bp-card-bg); --bs-nav-tabs-link-active-border-color: var(--bp-border) var(--bp-border) var(--bp-card-bg); gap: 4px; }
.nav-tabs .nav-link { color: var(--bp-muted); font-weight: 500; font-size: 13px; border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active { color: var(--bp-accent); font-weight: 600; }
.nav-pills-bp { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-pills-bp .nav-link { border: 1px solid var(--bp-border); border-radius: 8px; color: var(--bp-text); font-size: 12.5px; font-weight: 500; padding: 7px 14px; background: var(--bp-card-bg); }
.nav-pills-bp .nav-link.active { background: var(--bp-accent); border-color: var(--bp-accent); color: #fff; }
.modal-content { border-radius: 14px; border: 0; background: var(--bp-card-bg); }
.modal-header { border-bottom-color: var(--bp-border); }
.modal-footer { border-top-color: var(--bp-border); }
.modal-title { font-weight: 700; font-size: 16px; }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.welcome-banner {
    position: relative; overflow: hidden; border-radius: 14px; color: #fff; padding: 28px 30px; min-height: 120px;
    background: linear-gradient(105deg, #2337c9 0%, #3b2fd8 38%, #6d28d9 70%, #8b5cf6 100%);
    display: flex; align-items: center; margin-bottom: 18px;
}
.welcome-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 20%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 10% 120%, rgba(255,255,255,.12), transparent 40%); }
.welcome-banner h2 { color: #fff; font-size: 27px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.4px; }
.welcome-banner p { margin: 0; opacity: .9; font-size: 15px; }
.welcome-banner .wb-text { position: relative; z-index: 2; }
.welcome-banner .wb-art { position: absolute; right: 230px; bottom: 0; height: 112px; z-index: 1; }
.welcome-banner .wb-quote { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-family: Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.35; opacity: .95; text-align: right; z-index: 2; }
.kpi-card { padding: 16px 14px; height: 100%; display: flex; flex-direction: row; gap: 12px; align-items: flex-start; transition: transform .15s, box-shadow .15s; color: inherit; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.kpi-icon { width: 48px; height: 48px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex-shrink: 0; }
.kpi-card .lbl { font-size: 12.5px; color: var(--bp-muted); font-weight: 500; }
.kpi-card .val { font-size: 19px; font-weight: 800; color: var(--bp-heading); letter-spacing: -.3px; line-height: 1.3; white-space: nowrap; }
.kpi-card .chg { font-size: 12px; font-weight: 700; }
.kpi-card .sparkline { margin-left: auto; display: block; }
.kpi-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.c-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.c-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.c-orange { background: linear-gradient(135deg, #fb923c, #f97316); }
.c-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.c-pink { background: linear-gradient(135deg, #f472b6, #e11d48); }
.c-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.c-red { background: linear-gradient(135deg, #f87171, #dc2626); }
.c-gray { background: linear-gradient(135deg, #94a3b8, #64748b); }
.donut-legend li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.donut-legend .sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .pc { margin-left: auto; font-weight: 700; }
.txn-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--bp-border); color: inherit; }
.txn-row:last-child { border-bottom: 0; }
.txn-ic { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ic-orange { background: rgba(249, 115, 22, .12); color: #f97316; }
.ic-purple { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.ic-blue { background: rgba(37, 99, 235, .12); color: #2563eb; }
.ic-green { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ic-teal { background: rgba(13, 148, 136, .12); color: #0d9488; }
.ic-red { background: rgba(239, 68, 68, .12); color: #ef4444; }
.ic-pink { background: rgba(225, 29, 72, .12); color: #e11d48; }
.txn-row .no { font-weight: 700; font-size: 13px; color: var(--bp-heading); }
.txn-row .tp { font-size: 12px; color: var(--bp-muted); }
.txn-row .amt { font-weight: 700; font-size: 13.5px; text-align: right; color: var(--bp-heading); }
.out-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: inherit; margin-bottom: 8px; border: 1px solid transparent; }
.out-row:hover { border-color: var(--bp-border); }
.out-row.o1 { background: rgba(249, 115, 22, .06); } .out-row.o2 { background: rgba(225, 29, 72, .06); } .out-row.o3 { background: rgba(239, 68, 68, .06); } .out-row.o4 { background: rgba(225, 29, 72, .05); }
.out-row .ttl { font-size: 12.5px; color: var(--bp-muted); }
.out-row .val { font-size: 18px; font-weight: 800; color: var(--bp-heading); line-height: 1.2; }
.out-row .sub { font-size: 12px; font-weight: 600; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.quick-tile { border-radius: 10px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--bp-heading); border: 1px solid transparent; transition: transform .15s, border-color .15s; }
.quick-tile:hover { transform: translateY(-2px); border-color: currentColor; }
.quick-tile .qi { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.qt-green { background: #ecfdf3; color: #15803d; } .qt-blue { background: #eff6ff; color: #1d4ed8; } .qt-orange { background: #fff4ec; color: #c2410c; }
.qt-purple { background: #f5f0ff; color: #6d28d9; } .qt-pink { background: #fff0f4; color: #be123c; } .qt-teal { background: #ecfdfb; color: #0f766e; }
.qt-yellow { background: #fffbea; color: #a16207; } .qt-red { background: #fef1f1; color: #b91c1c; } .qt-indigo { background: #eef0ff; color: #4338ca; }
.qt-gray { background: #f3f4f6; color: #374151; } .qt-brown { background: #faf3ee; color: #9a3412; } .qt-cyan { background: #ecfeff; color: #0e7490; }
[data-bs-theme="dark"] .quick-tile { background: rgba(255, 255, 255, .04) !important; color: var(--bp-text); }
.quick-tile span.lbl { color: inherit; }
.mini-thumb { width: 30px; height: 30px; border-radius: 6px; background: var(--bp-input-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--bp-muted); font-size: 15px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--bp-border); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   DOCUMENT FORMS (invoice / quotation / purchase)
   ========================================================================= */
.doc-items th, .doc-items td { white-space: nowrap; }
.doc-items .col-grp { background: rgba(239, 68, 68, .08) !important; }
.doc-items td.col-grp input { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .25); font-weight: 600; color: #dc2626; }
.doc-items input.form-control { min-width: 70px; }
.price-src { font-size: 10.5px; font-weight: 600; }
.totals-box { background: var(--bp-input-bg); border-radius: 10px; padding: 14px 16px; }
.totals-box .r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.totals-box .r.grand { border-top: 1px solid var(--bp-border); margin-top: 6px; padding-top: 10px; font-size: 18px; font-weight: 800; color: var(--bp-heading); }
.prod-search { position: relative; }
.prod-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: var(--bp-card-bg); border: 1px solid var(--bp-border); border-radius: 10px; box-shadow: var(--bp-shadow-lg); max-height: 320px; overflow-y: auto; display: none; margin-top: 4px; }
.prod-results.show { display: block; }
.prod-results .pr { padding: 9px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--bp-border); }
.prod-results .pr:hover, .prod-results .pr.focus { background: var(--bp-accent-soft); }
.prod-results .pr small { color: var(--bp-muted); }
.note-group { background: rgba(239, 68, 68, .06); color: #b91c1c; border-radius: 8px; padding: 10px 14px; font-size: 13px; }

/* customer view */
.party-head { display: flex; gap: 16px; align-items: center; }
.party-avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--bp-accent), #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.stat-mini { border: 1px solid var(--bp-border); border-radius: 10px; padding: 12px 14px; height: 100%; }
.stat-mini .l { font-size: 12px; color: var(--bp-muted); }
.stat-mini .v { font-size: 18px; font-weight: 800; color: var(--bp-heading); }
.dl-grid { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 13.5px; }
.dl-grid dt { color: var(--bp-muted); font-weight: 500; }
.dl-grid dd { margin: 0; color: var(--bp-heading); }

/* step header used on pricing screens */
.step-chip { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; border-radius: 8px; padding: 6px 16px 6px 6px; font-size: 15px; }
.step-chip b { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }

/* =========================================================================
   POS
   ========================================================================= */
.pos-wrap { display: grid; grid-template-columns: 1fr 410px; gap: 16px; }
.pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: calc(100vh - 290px); overflow-y: auto; padding: 2px; }
.pos-prod { border: 1px solid var(--bp-border); border-radius: 10px; padding: 12px; background: var(--bp-card-bg); cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; position: relative; }
.pos-prod:hover, .pos-prod:focus { border-color: var(--bp-accent); transform: translateY(-1px); }
.pos-prod .pn { font-weight: 600; font-size: 13px; color: var(--bp-heading); line-height: 1.25; min-height: 33px; }
.pos-prod .pp { font-weight: 800; color: var(--bp-accent); font-size: 15px; }
.pos-prod .ps { font-size: 11px; color: var(--bp-muted); }
.pos-prod.oos { opacity: .55; }
.pos-cart { display: flex; flex-direction: column; height: calc(100vh - 150px); position: sticky; top: 90px; }
.pos-cart .lines { flex: 1; overflow-y: auto; }
.pos-line { display: grid; grid-template-columns: 1fr 96px 84px 24px; gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--bp-border); }
.pos-line .q { display: flex; align-items: center; border: 1px solid var(--bp-border); border-radius: 7px; overflow: hidden; }
.pos-line .q button { border: 0; background: var(--bp-input-bg); width: 26px; height: 28px; color: var(--bp-text); }
.pos-line .q input { width: 42px; border: 0; text-align: center; font-size: 13px; background: var(--bp-card-bg); color: var(--bp-text); }
.pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pos-cats button { white-space: nowrap; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-methods .btn.active { background: var(--bp-accent); color: #fff; border-color: var(--bp-accent); }

/* =========================================================================
   LOGIN
   ========================================================================= */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #eef2ff; }
.auth-hero { position: relative; overflow: hidden; color: #fff; padding: 46px 56px; background: linear-gradient(150deg, #10196b 0%, #1f2bb3 45%, #3b2fd8 75%, #6d28d9 100%); display: flex; flex-direction: column; }
.auth-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.14), transparent 40%), radial-gradient(circle at 0% 100%, rgba(56,189,248,.18), transparent 45%); }
.auth-hero > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand img { width: 64px; height: 64px; }
.auth-brand .n { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.auth-brand .t { font-size: 18px; opacity: .9; }
.auth-hero h1 { color: #fff; font-size: 42px; font-weight: 800; line-height: 1.15; margin: 34px 0 14px; letter-spacing: -.8px; }
.auth-hero h1 .g1 { background: linear-gradient(90deg, #67e8f9, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero h1 .g2 { background: linear-gradient(90deg, #c084fc, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero h1 .g3 { background: linear-gradient(90deg, #4ade80, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p.lead { font-size: 17px; opacity: .9; max-width: 560px; }
.auth-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 10px; margin-top: 26px; max-width: 640px; }
.auth-feature { text-align: center; font-size: 13px; line-height: 1.25; }
.auth-feature .fi { width: 54px; height: 54px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 25px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.auth-mock { margin-top: auto; padding-top: 26px; }
.auth-mock .screen { background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35); padding: 8px; max-width: 560px; transform: perspective(900px) rotateX(6deg); transform-origin: bottom; }
.auth-mock .screen .mini { display: grid; grid-template-columns: 70px 1fr; gap: 6px; height: 170px; }
.auth-mock .screen .mini .sb { background: #0b1437; border-radius: 6px; }
.auth-mock .screen .mini .ct { display: grid; grid-template-rows: 26px 1fr; gap: 6px; }
.auth-mock .screen .mini .kp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.auth-mock .screen .mini .kp div { border-radius: 4px; background: #f1f5f9; }
.auth-mock .screen .mini .ch { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.auth-mock .screen .mini .ch div { border-radius: 4px; background: #f8fafc; display: flex; align-items: flex-end; gap: 3px; padding: 6px; }
.auth-mock .bar { flex: 1; border-radius: 2px 2px 0 0; }
.auth-bottom { display: flex; gap: 30px; margin-top: 18px; font-size: 14px; opacity: .95; }
.auth-bottom div { display: flex; gap: 10px; align-items: center; }
.auth-bottom i { font-size: 26px; }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: linear-gradient(160deg, #f5f7ff, #e9e5ff); position: relative; }
.auth-card { width: 100%; max-width: 500px; background: #fff; border-radius: 22px; padding: 38px 42px 30px; box-shadow: 0 20px 60px rgba(49, 46, 129, .15); position: relative; color: #0f172a; }
.auth-card .brand2 { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-card .brand2 img { width: 70px; height: 70px; }
.auth-card .brand2 .n { font-size: 46px; font-weight: 800; color: #0f172a; letter-spacing: -1.2px; line-height: 1; }
.auth-card .brand2 .n span { color: #2563eb; }
.auth-card .brand2 .t { font-size: 17px; color: #334155; }
.auth-card h2 { font-size: 30px; font-weight: 800; text-align: center; margin-bottom: 4px; color: #0f172a; }
.auth-card .sub { text-align: center; color: #64748b; margin-bottom: 26px; font-size: 15px; }
.auth-input { position: relative; margin-bottom: 16px; }
.auth-input > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #64748b; }
.auth-input input { width: 100%; height: 54px; border-radius: 10px; border: 1px solid #dbe2ef; background: #f8faff; padding: 0 50px; font-size: 15px; color: #0f172a; outline: none; }
.auth-input input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }
.auth-input .eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #64748b; font-size: 18px; }
.auth-btn { width: 100%; height: 54px; border: 0; border-radius: 10px; color: #fff; font-size: 17px; font-weight: 600; background: linear-gradient(90deg, #2563eb, #4f46e5 60%, #7c3aed); box-shadow: 0 10px 24px rgba(79, 70, 229, .35); display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-btn:hover { filter: brightness(1.05); }
.auth-or { display: flex; align-items: center; gap: 14px; color: #94a3b8; margin: 20px 0; font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.auth-google { width: 100%; height: 52px; border-radius: 10px; border: 1px solid #dbe2ef; background: #fff; font-size: 15.5px; font-weight: 500; color: #0f172a; display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-google:disabled { opacity: .6; cursor: not-allowed; }
.auth-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 24px; background: linear-gradient(90deg, #f0fdf4, #f5f3ff, #fff1f2, #fff7ed); border-radius: 14px; padding: 14px 6px; text-align: center; font-size: 12.5px; color: #334155; }
.auth-badges i { font-size: 24px; display: block; margin-bottom: 4px; }
.auth-copy { text-align: center; color: #64748b; font-size: 12.5px; margin-top: 18px; }
.auth-lang { position: absolute; top: 18px; right: 18px; }
.auth-lang .btn { border: 1px solid #e2e8f0; background: #fff; font-size: 13px; color: #0f172a; }
.auth-quote { position: absolute; right: 22px; top: 60px; font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 26px; color: #1e293b; line-height: 1.25; transform: rotate(-6deg); }

/* =========================================================================
   PRINT
   ========================================================================= */
.print-doc { background: #fff; color: #0f172a; max-width: 860px; margin: 0 auto; padding: 32px; border-radius: 12px; }
.print-doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.print-doc th { background: #f1f5f9; padding: 9px 10px; text-align: left; font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.print-doc td { padding: 9px 10px; border-bottom: 1px solid #eef2f7; }
.print-doc .total-band { background: #2563eb; color: #fff; display: flex; justify-content: space-between; padding: 12px 18px; border-radius: 6px; font-weight: 700; font-size: 18px; }
@media print {
    @page { margin: 10mm; }
    body { background: #fff !important; }
    .no-print, .bp-sidebar, .bp-topbar, .bp-footer, .page-head .actions { display: none !important; }
    .bp-main { margin: 0 !important; }
    .bp-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: 0 !important; }
    .print-doc { padding: 0; max-width: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
.bp-backdrop { display: none; }
@media (max-width: 1399.98px) {
    .welcome-banner .wb-art { right: 190px; height: 96px; }
    .tb-pill .txt-lg { display: none; }
}
@media (max-width: 1199.98px) {
    .welcome-banner .wb-art { display: none; }
    .pos-wrap { grid-template-columns: 1fr 360px; }
    .tb-hide-lg { display: none !important; }
}
@media (max-width: 991.98px) {
    .bp-sidebar { transform: translateX(-100%); --bp-sidebar-w: 260px; width: 260px; display: flex !important; }
    body.sb-open .bp-sidebar { transform: none; }
    body.sb-open .bp-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1035; }
    .bp-main { margin-left: 0 !important; }
    .bp-topnav { display: none !important; }
    .tb-search { max-width: none; }
    .tb-hide-md { display: none !important; }
    .pos-wrap { grid-template-columns: 1fr; }
    .pos-cart { height: auto; position: static; }
    .pos-products { max-height: none; }
    .auth-page { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    /* mobile sidebar is always full */
    .bp-sidebar .bp-brand .txt, .bp-sidebar .bp-menu-search, .bp-sidebar .bp-nav-link .lbl, .bp-sidebar .bp-nav-link .chev, .bp-sidebar .bp-style-box { display: revert !important; }
    .bp-sidebar .bp-nav-link { flex-direction: row !important; justify-content: flex-start !important; padding: 9px 12px !important; }
    .bp-sidebar .bp-nav-item.open > .bp-sub { display: block !important; }
    .dl-grid { grid-template-columns: 1fr; gap: 2px; }
    .dl-grid dd { margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
    .bp-content { padding: 14px 16px 22px; }
    .bp-topbar-row { padding: 0 12px; gap: 8px; }
    .tb-hide-sm { display: none !important; }
    .welcome-banner { padding: 20px; }
    .welcome-banner .wb-quote { display: none; }
    .welcome-banner h2 { font-size: 22px; }
    .page-head h1 { font-size: 18px; }
    .auth-card { padding: 28px 22px; }
    .auth-card .brand2 .n { font-size: 36px; }
    .auth-quote { display: none; }
    .filter-bar .search { max-width: none; min-width: 100%; }
    .bp-topnav .mega { min-width: 0; }
}
@media (min-width: 992px) {
    .d-lg-sidebar-toggle { display: none !important; }
}

/* dashboard 4-column row proportions like the design */
@media (min-width: 1200px) {
    .dash-row { display: grid; grid-template-columns: 1.55fr 1.15fr 1fr 1fr; }
    .dash-row > [class*="col-"] { width: auto; max-width: none; }
}
.min-w-0 { min-width: 0; }

.card-header .form-select-sm { width: auto; padding-right: 1.9rem; flex-shrink: 0; }
.card-header { gap: 8px; }
.txn-row .tp { white-space: nowrap; }
.txn-row .amt { white-space: nowrap; }
.out-row .val { white-space: nowrap; font-size: 17px; }

/* --- density tweaks (match design proportions) --- */
.bp-nav-link { font-size: 13px; gap: 10px; padding: 8px 10px; }
.bp-nav-link > i:first-child { font-size: 16px; }
.kpi-card .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-card .chg { white-space: nowrap; }
.kpi-card > div { min-width: 0; }
.dash-row .card-header { padding: 13px 14px; }
.dash-row .card-title, .dash-bottom .card-title { font-size: 14.5px; }
.card-link-sm { white-space: nowrap; }
.dash-bottom .card-header { padding: 12px 14px; }
.dash-bottom .table { font-size: 12.5px; }
.dash-bottom .table > :not(caption) > * > * { padding: 7px 8px; }
@media (max-width: 1599.98px) { .dash-bottom .mini-thumb { display: none; } }
.auth-quote { right: 14px; top: 30px; font-size: 22px; z-index: 0; }
.auth-card { z-index: 1; }
@media (max-width: 1599.98px) { .auth-quote { display: none !important; } }
.bp-nav-item:not(.has-sub).open > .bp-nav-link .chev { transform: none; }
.theme-dd .dd-title + .bp-swatches { margin-bottom: 4px; }
.theme-dd .btn.active { background: var(--bp-accent-soft); color: var(--bp-accent); border-color: var(--bp-accent); font-weight: 600; }

/* mini / icon / collapsed: keep sidebar-mode buttons reachable (icons only) */
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-style-box { padding: 6px; margin-bottom: 8px; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-style-box .ttl,
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-style-box .bp-swatches { display: none; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-mode-btns { grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 0 !important; }
:is(.sb-icon, .sb-collapsed) .bp-mode-btns { grid-template-columns: 1fr; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-mode-btn { font-size: 0; padding: 5px 0; gap: 0; }
:is(.sb-mini, .sb-icon, .sb-collapsed) .bp-mode-btn i { font-size: 14px; }
.theme-dd .sb-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* ---- Print template picker (Settings → Invoice & Print) ---- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tpl-card{position:relative;display:flex;flex-direction:column;gap:2px;padding:8px;border:1.5px solid var(--bs-border-color);border-radius:12px;cursor:pointer;transition:.15s;background:var(--bs-body-bg)}
.tpl-card:hover{border-color:var(--accent,#2563eb)}
.tpl-card input{position:absolute;opacity:0;pointer-events:none}
.tpl-card:has(input:checked){border-color:var(--accent,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#2563eb) 22%,transparent)}
.tpl-card:has(input:checked)::after{content:"\F26A";font-family:bootstrap-icons;position:absolute;top:4px;right:6px;color:var(--accent,#2563eb);font-size:18px}
.tpl-name{font-weight:600;font-size:13px;margin-top:4px}
.tpl-desc{font-size:11px;color:var(--bs-secondary-color);line-height:1.3}
.tpl-prev{font-size:11.5px;text-decoration:none;margin-top:2px}
.tpl-thumb{--pc:#2563eb;position:relative;display:block;height:118px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;overflow:hidden}
.tpl-thumb>*{position:absolute;display:block;text-decoration:none}
.tpl-thumb em{left:10%;right:10%;top:58px;height:30px;background:repeating-linear-gradient(#fff 0 5px,#e5e7eb 5px 6px)}
.tpl-thumb u{right:10%;width:34%;bottom:10px;height:9px;border-radius:3px;background:var(--pc)}
.tpl-classic i{left:10%;top:10px;width:16px;height:16px;border-radius:4px;background:var(--pc)}
.tpl-classic s{right:10%;top:12px;width:30%;height:7px;background:var(--pc);border-radius:2px}
.tpl-classic b{left:10%;right:10%;top:44px;height:9px;border-radius:3px;background:#0f172a}
.tpl-modern i{left:0;right:0;top:0;height:34px;background:linear-gradient(120deg,color-mix(in srgb,var(--pc) 70%,#000),var(--pc))}
.tpl-modern s{left:10%;right:10%;top:26px;height:20px;border-radius:5px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tpl-modern b{left:10%;right:10%;top:51px;height:6px;background:color-mix(in srgb,var(--pc) 18%,#fff);border-bottom:2px solid var(--pc)}
.tpl-modern u{border-radius:9px}
.tpl-elegant i{left:30%;right:30%;top:10px;height:8px;background:#0f172a;border-radius:2px}
.tpl-elegant s{left:10%;right:10%;top:26px;height:4px;border-top:2px solid var(--pc);border-bottom:1px solid var(--pc)}
.tpl-elegant b{left:10%;right:10%;top:44px;height:8px;border-top:1px solid var(--pc);border-bottom:1px solid var(--pc)}
.tpl-elegant u{background:none;border-top:2px solid var(--pc);border-bottom:1px solid var(--pc);border-radius:0}
.tpl-bold s{left:0;top:0;bottom:0;width:32%;background:linear-gradient(170deg,color-mix(in srgb,var(--pc) 70%,#000),var(--pc))}
.tpl-bold i{left:9%;top:10px;width:16px;height:16px;border-radius:50%;background:#fff}
.tpl-bold b{left:38%;right:8%;top:44px;height:6px;border-bottom:2px solid var(--pc)}
.tpl-bold em{left:38%;right:8%}
.tpl-bold u{right:8%;width:28%;background:#0f172a}
.tpl-gst{border:1px solid #e5e7eb}
.tpl-gst i{left:6%;right:6%;top:6px;height:9px;background:var(--pc)}
.tpl-gst s{left:6%;right:6%;top:15px;bottom:6px;border:1px solid #475569;background:linear-gradient(90deg,transparent 49.5%,#475569 49.5% 50.5%,transparent 50.5%) 0 0/100% 32px no-repeat}
.tpl-gst b{left:6%;right:6%;top:47px;height:8px;background:color-mix(in srgb,var(--pc) 15%,#fff);border-top:1px solid #475569;border-bottom:1px solid #475569}
.tpl-gst em{left:6%;right:6%;background:repeating-linear-gradient(90deg,transparent 0 23%,#cbd5e1 23% 24%),repeating-linear-gradient(#fff 0 5px,#e5e7eb 5px 6px)}
.tpl-gst u{right:6%;bottom:6px;border-radius:0}
.tpl-minimal i{left:10%;top:14px;width:40%;height:14px;border-bottom:1px solid #0f172a;background:linear-gradient(90deg,var(--pc) 0 12%,#cbd5e1 12% 100%) 0 0/100% 10px no-repeat}
.tpl-minimal b{left:10%;right:10%;top:48px;height:1px;background:#0f172a}
.tpl-minimal u{background:none;border-top:1px solid #0f172a;border-radius:0;height:6px}

.tpl-traditional{border:1px solid #e5e7eb}
.tpl-traditional s{left:6%;right:6%;top:6px;bottom:6px;border:1.5px solid #111}
.tpl-traditional i{left:30%;right:30%;top:12px;height:12px;background:linear-gradient(#111 0 0) 50% 0/60% 3px no-repeat,linear-gradient(#111 0 0) 50% 7px/100% 5px no-repeat}
.tpl-traditional b{left:6%;right:6%;top:30px;height:18px;border-top:1.5px solid #111;border-bottom:1.5px solid #111;background:linear-gradient(90deg,transparent 49.6%,#111 49.6% 50.4%,transparent 50.4%)}
.tpl-traditional em{left:6%;right:6%;top:48px;height:46px;background:repeating-linear-gradient(90deg,transparent 0 11%,#111 11% 11.6%,transparent 11.6% 50%,#111 50% 50.6%,transparent 50.6% 62%,#111 62% 62.6%,transparent 62.6% 74%,#111 74% 74.6%,transparent 74.6% 86%,#111 86% 86.6%,transparent 86.6% 100%)}
.tpl-traditional u{left:6%;right:6%;width:auto;bottom:6px;height:16px;border-radius:0;background:none;border-top:1.5px solid #111}