/**
 * erp-overrides.css — Slice 22 Full UI/UX Hardening
 * Loaded AFTER app.min.css. Never modifies Minia core files.
 * Version: Slice 22 (production-grade patch)
 */

/* ============================================================
   1. AUTH PAGES — login centering fix (primary reported issue)
   ============================================================ */

body.auth-fullpage {
    background-color: #f3f3f9;
}

body.auth-fullpage #layout-wrapper,
body.auth-fullpage .main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.auth-fullpage .page-content {
    padding: 0 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.auth-fullpage .page-content > div {
    width: 100%;
    padding: 24px 16px;
}

body.auth-fullpage .card {
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.10);
    border: 1px solid #e9e9ef;
    border-radius: .75rem;
}

body.auth-fullpage .card .card-body {
    padding: 2rem;
}

body.auth-fullpage .col-xl-5,
body.auth-fullpage .col-lg-6 {
    max-width: 480px;
}

body.auth-fullpage .text-primary.fw-bold {
    font-size: 1.5rem;
    letter-spacing: -.01em;
}

/* ============================================================
   2. NO-SIDEBAR (wizard, installer, setup, maintenance)
   ============================================================ */

body.no-sidebar .main-content  { margin-left: 0 !important; }
body.no-sidebar .footer        { left:        0 !important; }
body.no-sidebar #page-topbar   { left:        0 !important; }

/* ============================================================
   3. MOBILE — always collapse sidebar offset (<=991px)
   ============================================================ */

@media (max-width: 991.98px) {
    .main-content  { margin-left: 0 !important; }
    .footer        { left:        0 !important; }
    #page-topbar   { left:        0 !important; }
}

/* ============================================================
   4. OVERFLOW SAFETY
   ============================================================ */

html, body { overflow-x: hidden; }

.main-content    { overflow-x: hidden; min-height: calc(100vh - 70px); }
.container-fluid { min-width: 0; }

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ============================================================
   5. DOUBLE page-content WRAP GUARD
   ============================================================ */

.page-content > .page-content {
    padding: 0 !important;
    min-height: unset !important;
}

.page-content > .page-content > .container-fluid {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   6. PAGE-TITLE-BOX
   ============================================================ */

.page-title-box {
    padding-bottom: 16px;
    margin-bottom: 0;
}

.page-title-box .text-muted.small,
.page-title-sub {
    font-size: .8125rem;
    color: #74788d;
    margin-top: 2px;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .page-title-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem;
    }
    .page-title-box .d-flex.gap-2 { flex-wrap: wrap; }
}

/* ============================================================
   7. CARDS
   ============================================================ */

.card {
    border: 1px solid #e9e9ef;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    margin-bottom: 1.25rem;
    min-width: 0;
}

.card-header {
    background-color: #fafafa;
    border-bottom: 1px solid #e9e9ef;
    padding: .75rem 1.25rem;
    font-weight: 600;
    font-size: .9rem;
}

@media (max-width: 576px) {
    .card-body { padding: .875rem; }
}

/* ============================================================
   8. TABLES
   ============================================================ */

.table td,
.table th {
    padding: .5rem .75rem;
    vertical-align: middle;
}

.table td {
    word-break: break-word;
    max-width: 300px;
}

.table tbody tr:only-child td[colspan] {
    padding: 2rem 1rem;
    color: #adb5bd !important;
    text-align: center;
    font-size: .9rem;
}

.table-sticky-header thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 0 1px 0 #e9e9ef;
}

/* ============================================================
   9. BADGES
   ============================================================ */

.badge {
    font-size: .72em;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .3em .6em;
}

.bg-soft-primary   { background-color: rgba(81, 86, 190, .12)  !important; color: #5156be !important; }
.bg-soft-success   { background-color: rgba(42, 181, 125, .12) !important; color: #2ab57d !important; }
.bg-soft-danger    { background-color: rgba(253, 98, 94, .12)  !important; color: #fd625e !important; }
.bg-soft-warning   { background-color: rgba(255, 191, 83, .12) !important; color: #e6a817 !important; }
.bg-soft-info      { background-color: rgba(75, 166, 239, .12) !important; color: #4ba6ef !important; }
.bg-soft-secondary { background-color: rgba(116, 120, 141, .12)!important; color: #74788d !important; }

/* ============================================================
   10. FORMS
   ============================================================ */

.form-label {
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: .35rem;
    color: #495057;
}

.form-text {
    font-size: .78rem;
    color: #74788d;
}

input[readonly].form-control,
input[disabled].form-control,
select[disabled].form-select,
textarea[readonly].form-control {
    background-color: #f8f9fa !important;
    cursor: default;
}

.text-danger.small {
    font-size: .78rem;
    margin-top: .2rem;
}

.card .row.g-2 .form-control,
.card .row.g-2 .form-select,
.card-body .row.g-2 .form-control,
.card-body .row.g-2 .form-select {
    font-size: .875rem;
}

/* ============================================================
   11. ACTION BUTTONS in tables
   ============================================================ */

.table .btn-sm {
    padding: .2rem .55rem;
    font-size: .78rem;
    white-space: nowrap;
}

.table .d-flex.gap-1 {
    flex-wrap: nowrap;
}

/* ============================================================
   12. TOPBAR
   ============================================================ */

@media (max-width: 1440px) {
    .navbar-header select.form-select {
        min-width: 160px !important;
        max-width: 200px;
        font-size: .8rem;
    }
}

.navbar-header {
    display: flex;
    align-items: center;
}

/* ============================================================
   13. SIDEBAR active child
   ============================================================ */

#sidebar-menu ul li ul.sub-menu li a.active {
    color: #5156be;
    font-weight: 600;
}

#sidebar-menu > .p-3 {
    border-top: 1px solid rgba(0, 0, 0, .05);
}

/* ============================================================
   14. MODULE TOGGLE FORMS
   ============================================================ */

.module-toggle-cell form {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.module-toggle-cell .form-control-sm { max-width: 200px; }

/* ============================================================
   15. DASHBOARD KPI
   ============================================================ */

.avatar-sm .avatar-title { font-size: 1.1rem; }

.fs-4.fw-semibold {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   16. CODE SNIPPETS
   ============================================================ */

code {
    font-size: .82em;
    color: #5156be;
    background-color: rgba(81, 86, 190, .08);
    padding: .15em .4em;
    border-radius: 3px;
}

/* ============================================================
   17. ALERTS inside cards
   ============================================================ */

.card-body > .alert:last-child,
.card-body > .alert:only-child {
    margin-bottom: 0;
}

/* ============================================================
   18. PAGINATION
   ============================================================ */

.pagination .page-link {
    font-size: .85rem;
    padding: .35rem .65rem;
}

/* ============================================================
   19. FOOTER
   ============================================================ */

.footer {
    background: #f8f8fb;
    border-top: 1px solid #e9e9ef;
    font-size: .82rem;
    color: #74788d;
}

/* ============================================================
   20. CHAT MODULE — room view responsive
   ============================================================ */

#chat-scroll {
    height: 58vh !important;
    min-height: 200px;
    max-height: calc(100vh - 320px);
}

@media (max-width: 768px) {
    #chat-scroll {
        height: 45vh !important;
        max-height: calc(100vh - 280px);
    }
}

/* ============================================================
   21. WIZARD step badges
   ============================================================ */

.wizard-steps-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}

.wizard-steps-bar .badge { font-size: .78rem; }

/* ============================================================
   22. ERROR PAGES vertical centering
   ============================================================ */

body.no-sidebar .main-content .row.justify-content-center > [class*="col"] > .text-center.mt-5 {
    margin-top: 0 !important;
    padding-top: 10vh;
}

/* ============================================================
   23. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* 1366×768 laptop — tighten sidebar slightly */
@media (max-width: 1399px) {
    .vertical-menu { width: 230px; }
    body[data-sidebar-size="default"] .main-content { margin-left: 230px; }
    body[data-sidebar-size="default"] .footer        { left: 230px; }
    body[data-sidebar-size="default"] #page-topbar   { left: 230px; }
}

/* 1920×1080 — cap container width for readability */
@media (min-width: 1600px) {
    .page-content > .container-fluid { max-width: 1800px; }
}

/* Mobile 480px and below */
@media (max-width: 480px) {
    .card-body .row.g-2 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .table-line-items { min-width: 600px; }
}

/* ============================================================
   24. PRINT
   ============================================================ */

@media print {
    #page-topbar,
    .vertical-menu,
    .footer,
    .btn,
    form.filter-bar { display: none !important; }

    .main-content { margin-left: 0 !important; }
    .card         { box-shadow: none !important; border: 1px solid #ccc !important; }
    .table td,
    .table th     { padding: .25rem .5rem; }
}

/* ============================================================
   25. SIDEBAR — HOVER HIGHLIGHT
   ============================================================ */

/* ── Parent menu items (has children) — expanded sidebar only ─ */
body:not([data-sidebar-size=sm]) #sidebar-menu ul li > a {
    border-radius: 6px;
    margin: 1px 8px;
    padding: .62rem 1rem !important;
    transition:
        background   .18s ease,
        color        .18s ease,
        font-weight  .01s ease,
        transform    .18s ease,
        box-shadow   .18s ease;
}

body:not([data-sidebar-size=sm]) #sidebar-menu ul li > a:hover {
    background-color: rgba(81, 86, 190, 0.10) !important;
    color: #5156be !important;
    font-weight: 600 !important;
    transform: translateX(3px);
    box-shadow: inset 3px 0 0 #5156be;
}

body:not([data-sidebar-size=sm]) #sidebar-menu ul li > a:hover i,
body:not([data-sidebar-size=sm]) #sidebar-menu ul li > a:hover svg {
    color: #5156be !important;
}

/* ── Sub-menu items ───────────────────────────────────────── */
#sidebar-menu ul li ul.sub-menu li a {
    border-radius: 5px;
    margin: 1px 8px;
    padding: .4rem 1rem .4rem 2.8rem !important;
    transition:
        background   .15s ease,
        color        .15s ease,
        font-weight  .01s ease,
        transform    .15s ease;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
    background-color: rgba(81, 86, 190, 0.08) !important;
    color: #5156be !important;
    font-weight: 600 !important;
    transform: translateX(3px);
}

/* ── Active sub-menu item ─────────────────────────────────── */
#sidebar-menu ul li ul.sub-menu li a.active {
    background-color: rgba(81, 86, 190, 0.12) !important;
    color: #5156be !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 #5156be;
}

/* ── Dark sidebar variant ─────────────────────────────────── */
body:not([data-sidebar-size=sm])[data-sidebar=dark] #sidebar-menu ul li > a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5);
}

body:not([data-sidebar-size=sm])[data-sidebar=dark] #sidebar-menu ul li > a:hover i {
    color: #fff !important;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a.active {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5);
}

/* ============================================================
   26. TABLE ROW HOVER
   ============================================================ */

/* All data tables get row hover — smooth, subtle */
.table tbody tr {
    transition: background .13s ease;
}
.table tbody tr:hover > td {
    background-color: rgba(81, 86, 190, 0.045) !important;
    cursor: default;
}
/* Striped + hover: override stripe on hover */
.table-striped > tbody > tr:hover > td {
    background-color: rgba(81, 86, 190, 0.07) !important;
}

/* ============================================================
   27. STATUS BADGE COLORS — consistent across all modules
   ============================================================ */

/* Replace the flat Bootstrap badges with pill style + proper colors */
.badge {
    padding: .32em .7em;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* DRAFT — neutral grey */
.badge.bg-secondary {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
}
/* SUBMITTED / PENDING — amber */
.badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
/* APPROVED / CLOSED / SUCCESS — green */
.badge.bg-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}
/* REJECTED / DANGER — red */
.badge.bg-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}
/* PARTIAL / INFO — blue */
.badge.bg-info {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}
/* CANCELLED — slate */
.badge.bg-dark {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}
/* POSTED — indigo */
.badge.bg-primary {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
}
/* LIGHT — keep readable */
.badge.bg-light {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0;
}

/* bg-soft variants (used in manufacturing/finance) */
.badge.bg-soft-primary  { background-color: #e0e7ff !important; color: #3730a3 !important; border-radius: 20px; }
.badge.bg-soft-success  { background-color: #dcfce7 !important; color: #166534 !important; border-radius: 20px; }
.badge.bg-soft-warning  { background-color: #fef3c7 !important; color: #92400e !important; border-radius: 20px; }
.badge.bg-soft-danger   { background-color: #fee2e2 !important; color: #991b1b !important; border-radius: 20px; }
.badge.bg-soft-info     { background-color: #dbeafe !important; color: #1e40af !important; border-radius: 20px; }
.badge.bg-soft-secondary{ background-color: #e2e8f0 !important; color: #475569 !important; border-radius: 20px; }

/* ============================================================
   28. BUTTON HOVER — action buttons in tables
   ============================================================ */

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.12) !important;
    transition: transform .13s ease, box-shadow .13s ease !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.15) !important;
    transition: transform .13s ease, box-shadow .13s ease !important;
}
.btn {
    transition: transform .13s ease, box-shadow .13s ease, background .13s ease !important;
}

/* ============================================================
   29. NAV TABS HOVER (purchasing / sales process tabs)
   ============================================================ */

.nav-tabs .nav-link {
    transition: color .15s ease, border-color .15s ease, background .15s ease !important;
}
.nav-tabs .nav-link:not(.active):hover {
    color: #5156be !important;
    border-bottom-color: #5156be !important;
    background-color: rgba(81,86,190,.05) !important;
}

/* ============================================================
   30. CARD HOVER (index page cards & KPI cards)
   ============================================================ */

.card:not(.no-hover) {
    transition: box-shadow .18s ease, transform .18s ease !important;
}
.card:not(.no-hover):hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.09) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   31. FORM INPUT FOCUS — visible ring
   ============================================================ */

.form-control:focus,
.form-select:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* ============================================================
   32. FULL DARK MODE — custom ERP elements
   (Minia handles Bootstrap base; we patch what it misses)
   ============================================================ */

/* ── Variables / shorthand ─────────────────────────────────── */
/* bg surfaces */
/* --dk-bg1: #1e2022  (deepest, body bg) */
/* --dk-bg2: #252829  (card bg)          */
/* --dk-bg3: #2d3133  (input bg)         */
/* --dk-border: #3a3f42                  */
/* --dk-text: #d1d5db  (body text)       */
/* --dk-muted: #6b7280                   */

/* ── Main content background ───────────────────────────────── */
body[data-layout-mode=dark] {
    background-color: #1a1d1f !important;
}
body[data-layout-mode=dark] .main-content {
    background-color: #1a1d1f;
}
body[data-layout-mode=dark] .page-content {
    background-color: #1a1d1f;
}

/* ── Cards ─────────────────────────────────────────────────── */
body[data-layout-mode=dark] .card {
    background-color: #23272a !important;
    border: 1px solid #2e3338 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
body[data-layout-mode=dark] .card-header {
    background-color: #23272a !important;
    border-bottom-color: #2e3338 !important;
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark] .card-body { color: #c9d1d9; }
body[data-layout-mode=dark] .card-footer {
    background-color: #23272a !important;
    border-top-color: #2e3338 !important;
}

/* ── Page title & headings ─────────────────────────────────── */
body[data-layout-mode=dark] .page-title-box h4,
body[data-layout-mode=dark] h1, body[data-layout-mode=dark] h2,
body[data-layout-mode=dark] h3, body[data-layout-mode=dark] h4,
body[data-layout-mode=dark] h5, body[data-layout-mode=dark] h6 {
    color: #e6edf3 !important;
}
body[data-layout-mode=dark] .text-dark { color: #c9d1d9 !important; }
body[data-layout-mode=dark] label,
body[data-layout-mode=dark] .form-label { color: #adb5bd !important; }

/* ── Tables ─────────────────────────────────────────────────── */
body[data-layout-mode=dark] .table {
    color: #c9d1d9 !important;
    border-color: #2e3338 !important;
}
body[data-layout-mode=dark] .table thead th {
    background-color: #1e2225 !important;
    color: #8b949e !important;
    border-color: #2e3338 !important;
}
body[data-layout-mode=dark] .table td,
body[data-layout-mode=dark] .table th {
    border-color: #2e3338 !important;
}
body[data-layout-mode=dark] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.025) !important;
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark] .table tbody tr:hover > td {
    background-color: rgba(99,102,241,.12) !important;
    color: #e6edf3 !important;
}
body[data-layout-mode=dark] .table-responsive {
    border-color: #2e3338;
}

/* ── Forms ─────────────────────────────────────────────────── */
body[data-layout-mode=dark] .form-control {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark] .form-control:focus {
    background-color: #161b22 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
    color: #e6edf3 !important;
}
body[data-layout-mode=dark] .form-control::placeholder { color: #484f58 !important; }
body[data-layout-mode=dark] .form-select {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark] .input-group-text {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}

/* ── Topbar ────────────────────────────────────────────────── */
body[data-layout-mode=dark] #page-topbar {
    background-color: #161b22 !important;
    border-bottom-color: #21262d !important;
}
body[data-layout-mode=dark] .navbar-brand-box {
    background-color: #161b22 !important;
    border-right-color: #21262d !important;
}
body[data-layout-mode=dark] .header-icon-btn {
    color: #8b949e !important;
}
body[data-layout-mode=dark] .header-icon-btn:hover {
    background: #21262d !important;
    color: #e6edf3 !important;
}

/* ── Sidebar refinements ───────────────────────────────────── */
body[data-layout-mode=dark] .vertical-menu {
    background: #161b22 !important;
    border-right-color: #21262d !important;
}
body[data-layout-mode=dark] #sidebar-menu ul li > a {
    color: #8b949e !important;
}
body[data-layout-mode=dark] #sidebar-menu ul li > a i {
    color: #6e7681 !important;
}
body[data-layout-mode=dark]:not([data-sidebar-size=sm]) #sidebar-menu ul li > a:hover {
    background-color: rgba(99,102,241,.12) !important;
    color: #a5b4fc !important;
    box-shadow: inset 3px 0 0 #818cf8 !important;
}
body[data-layout-mode=dark]:not([data-sidebar-size=sm]) #sidebar-menu ul li > a:hover i { color: #a5b4fc !important; }
body[data-layout-mode=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: #6e7681 !important;
}
body[data-layout-mode=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    background-color: rgba(99,102,241,.08) !important;
    color: #a5b4fc !important;
}
body[data-layout-mode=dark] #sidebar-menu ul li ul.sub-menu li a.active {
    color: #a5b4fc !important;
    background-color: rgba(99,102,241,.12) !important;
    box-shadow: inset 3px 0 0 #818cf8 !important;
}
body[data-layout-mode=dark] .mm-active > a,
body[data-layout-mode=dark] .mm-active > a i {
    color: #a5b4fc !important;
}

/* ── Badges in dark mode ───────────────────────────────────── */
body[data-layout-mode=dark] .badge.bg-secondary  { background-color: #2d333b !important; color: #8b949e !important; }
body[data-layout-mode=dark] .badge.bg-success    { background-color: #1a3626 !important; color: #3fb950 !important; }
body[data-layout-mode=dark] .badge.bg-warning    { background-color: #3d2d0a !important; color: #d29922 !important; }
body[data-layout-mode=dark] .badge.bg-danger     { background-color: #3d1a1a !important; color: #f85149 !important; }
body[data-layout-mode=dark] .badge.bg-info       { background-color: #1a2d3d !important; color: #58a6ff !important; }
body[data-layout-mode=dark] .badge.bg-primary    { background-color: #2a2559 !important; color: #a5b4fc !important; }
body[data-layout-mode=dark] .badge.bg-dark       { background-color: #2d333b !important; color: #6e7681 !important; }
body[data-layout-mode=dark] .badge.bg-light      { background-color: #21262d !important; color: #8b949e !important; border-color: #30363d !important; }
body[data-layout-mode=dark] .badge.bg-soft-primary   { background-color: #2a2559 !important; color: #a5b4fc !important; }
body[data-layout-mode=dark] .badge.bg-soft-success   { background-color: #1a3626 !important; color: #3fb950 !important; }
body[data-layout-mode=dark] .badge.bg-soft-secondary { background-color: #2d333b !important; color: #8b949e !important; }

/* ── Nav tabs ──────────────────────────────────────────────── */
body[data-layout-mode=dark] .nav-tabs {
    border-bottom-color: #30363d !important;
}
body[data-layout-mode=dark] .nav-tabs .nav-link {
    color: #8b949e !important;
    border-color: transparent !important;
}
body[data-layout-mode=dark] .nav-tabs .nav-link.active {
    background-color: #23272a !important;
    border-color: #30363d #30363d #23272a !important;
    color: #a5b4fc !important;
}
body[data-layout-mode=dark] .nav-tabs .nav-link:not(.active):hover {
    color: #a5b4fc !important;
    border-bottom-color: #818cf8 !important;
    background-color: rgba(99,102,241,.08) !important;
}

/* ── Dropdowns ─────────────────────────────────────────────── */
body[data-layout-mode=dark] .dropdown-menu {
    background-color: #1c2128 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
body[data-layout-mode=dark] .dropdown-item {
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark] .dropdown-item:hover,
body[data-layout-mode=dark] .dropdown-item:focus {
    background-color: #2d333b !important;
    color: #e6edf3 !important;
}
body[data-layout-mode=dark] .dropdown-divider { border-color: #30363d !important; }

/* ── Alerts ────────────────────────────────────────────────── */
body[data-layout-mode=dark] .alert-success  { background-color: #1a3626 !important; border-color: #2ea043 !important; color: #3fb950 !important; }
body[data-layout-mode=dark] .alert-warning  { background-color: #3d2d0a !important; border-color: #9e6a03 !important; color: #d29922 !important; }
body[data-layout-mode=dark] .alert-danger   { background-color: #3d1a1a !important; border-color: #da3633 !important; color: #f85149 !important; }
body[data-layout-mode=dark] .alert-info     { background-color: #1a2d3d !important; border-color: #1f6feb !important; color: #58a6ff !important; }

/* ── Buttons in dark ───────────────────────────────────────── */
body[data-layout-mode=dark] .btn-outline-secondary {
    color: #8b949e !important;
    border-color: #30363d !important;
}
body[data-layout-mode=dark] .btn-outline-secondary:hover {
    background-color: #2d333b !important;
    color: #c9d1d9 !important;
}

/* ── code / pre ────────────────────────────────────────────── */
body[data-layout-mode=dark] code {
    background-color: #2d333b !important;
    color: #ff7b72 !important;
    border-radius: 4px;
    padding: 1px 5px;
}

/* ── Dashboard custom classes ──────────────────────────────── */
body[data-layout-mode=dark] .kpi-card {
    background-color: #23272a !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2) !important;
}
body[data-layout-mode=dark] .kpi-value   { color: #e6edf3 !important; }
body[data-layout-mode=dark] .kpi-label   { color: #6e7681 !important; }
body[data-layout-mode=dark] .kpi-sub     { color: #6e7681 !important; }
body[data-layout-mode=dark] .sec-card    { background-color: #23272a !important; }
body[data-layout-mode=dark] .sec-card .card-header {
    border-bottom-color: #2e3338 !important;
    color: #e6edf3 !important;
}
body[data-layout-mode=dark] .purch-stat  { background: #1e2225 !important; }
body[data-layout-mode=dark] .purch-stat .num { color: #e6edf3 !important; }
body[data-layout-mode=dark] .purch-stat .lbl { color: #6e7681 !important; }
body[data-layout-mode=dark] .stock-row   { border-bottom-color: #2e3338 !important; }
body[data-layout-mode=dark] .stock-bar   { background: #2d333b !important; }
body[data-layout-mode=dark] .mod-chip.on  { background: #1a3626 !important; color: #3fb950 !important; }
body[data-layout-mode=dark] .mod-chip.off { background: #21262d !important; color: #6e7681 !important; }

/* ── KPI icon pills ────────────────────────────────────────── */
body[data-layout-mode=dark] .ki-blue   { background: #1a2d3d !important; color: #58a6ff !important; }
body[data-layout-mode=dark] .ki-green  { background: #1a3626 !important; color: #3fb950 !important; }
body[data-layout-mode=dark] .ki-amber  { background: #3d2d0a !important; color: #d29922 !important; }
body[data-layout-mode=dark] .ki-red    { background: #3d1a1a !important; color: #f85149 !important; }
body[data-layout-mode=dark] .ki-purple { background: #2a2559 !important; color: #a5b4fc !important; }
body[data-layout-mode=dark] .ki-teal   { background: #0d2d27 !important; color: #2dd4bf !important; }
body[data-layout-mode=dark] .ki-rose   { background: #3d1a26 !important; color: #fb7185 !important; }
body[data-layout-mode=dark] .ki-indigo { background: #1e2459 !important; color: #818cf8 !important; }

/* ── Page title box ────────────────────────────────────────── */
body[data-layout-mode=dark] .page-title-box { border-bottom-color: #2e3338; }

/* ── Footer ────────────────────────────────────────────────── */
body[data-layout-mode=dark] .footer {
    background-color: #161b22 !important;
    border-top-color: #21262d !important;
    color: #6e7681 !important;
}

/* ── Scrollbar (webkit) ────────────────────────────────────── */
body[data-layout-mode=dark] ::-webkit-scrollbar { width: 6px; height: 6px; }
body[data-layout-mode=dark] ::-webkit-scrollbar-track { background: #1a1d1f; }
body[data-layout-mode=dark] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
body[data-layout-mode=dark] ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ============================================================
   33. TOPBAR — targeted fixes (burger, badge, logo)
   ============================================================ */

/* Burger: saat sidebar collapsed (sm), Minia pakai margin-left negatif
   tapi hanya saat desktop. Kita pastikan tidak ter-override. */
@media (min-width: 992px) {
    body[data-sidebar-size="sm"] #vertical-menu-btn {
        margin-left: 0 !important;
    }
}

/* Geser lonceng sedikit ke kiri agar badge tidak ketutup tombol profile */
#notif-btn { margin-right: 6px; isolation: isolate; }
#notif-badge { z-index: 10; }

/* Logo "Arva" tetap terlihat di dark mode — override app.min.css specificity */
body[data-layout-mode=dark] a.logo .logo-text { color: #e6edf3 !important; }
body[data-layout-mode=dark][data-sidebar=light] a.logo .logo-text { color: #e6edf3 !important; }
body[data-layout-mode=dark][data-sidebar=light][data-topbar=light] .navbar-brand-box .logo,
body[data-layout-mode=dark][data-sidebar=light][data-topbar=light] .navbar-brand-box a.logo .logo-text { color: #e6edf3 !important; }

/* ============================================================
   34. SIDEBAR COLLAPSED — flyout submenu background
   ============================================================ */

/* Light mode: floating card, semua sudut tumpul */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul {
    background-color: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
    border-radius: 8px !important;
    border: 1px solid #e9e9ef;
    overflow: hidden;
}
/* Prevent hover highlight from bleeding outside the flyout box */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul a {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dark mode: flyout gelap, semua sudut tumpul */
body[data-layout-mode=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul {
    background-color: #1c2128 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
body[data-layout-mode=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul a {
    color: #c9d1d9 !important;
}
body[data-layout-mode=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul a:hover {
    color: #a5b4fc !important;
    background-color: rgba(99,102,241,.1) !important;
}

/* ============================================================
   35. SIDEBAR COLLAPSED — parent hover item
   ============================================================ */

/* Light mode: parent hover — solid background + round kiri */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #ebe6ff !important;
    border-radius: 8px 0 0 8px !important;
}

/* Dark mode: parent hover — background gelap solid */
body[data-layout-mode=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #1c2128 !important;
    color: #a5b4fc !important;
    box-shadow: none !important;
    border-radius: 8px 0 0 8px !important;
}
body[data-layout-mode=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: #a5b4fc !important;
}

/* ============================================================
   DARK MODE TRANSITION — smooth light ↔ dark switch
   ============================================================ */

/*
 * body.theme-transitioning briefly applied during toggle.
 * Only color/background properties are transitioned — never
 * layout properties (width, height, transform) which cause
 * reflow and jank.
 */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition:
        background-color 220ms ease,
        border-color     220ms ease,
        color            180ms ease,
        box-shadow       220ms ease !important;
}

/* Exclude elements where transition looks wrong */
body.theme-transitioning .bx,
body.theme-transitioning [class*=" bx-"],
body.theme-transitioning [class^="bx-"],
body.theme-transitioning img,
body.theme-transitioning svg,
body.theme-transitioning video,
body.theme-transitioning canvas,
body.theme-transitioning .erp-nav-bar {
    transition: none !important;
}

/* ============================================================
   33. MOBILE — TABLE AUTO-SCROLL
   ============================================================ */

/*
 * Tables inside card-body / page content automatically scroll
 * horizontally on mobile instead of breaking the layout.
 * Uses display:block trick — table content (thead/tbody/tr/td)
 * retains native display; only the outer table becomes a
 * scrollable block container.
 */
@media (max-width: 767.98px) {
    .card-body .table,
    .page-content .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Prevent action-button column from wrapping on mobile */
    .card-body .table td,
    .card-body .table th {
        white-space: nowrap;
    }

    /* Restore wrapping for description / address / notes columns */
    .card-body .table td.text-wrap,
    .card-body .table td[class*="col-"],
    .card-body .table td.wrap {
        white-space: normal;
    }
}

/* ============================================================
   34. MOBILE SIDEBAR OVERLAY
   ============================================================ */

/*
 * #sidebar-overlay is injected by app.js into <body>.
 * Sits below the sidebar (z-index 1005) but above everything
 * else — tapping it closes the sidebar on mobile.
 */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1004;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

@media (max-width: 991.98px) {
    body.sidebar-enable #sidebar-overlay {
        display: block;
    }
    /* Prevent body scroll while overlay is open */
    body.sidebar-enable {
        overflow: hidden;
    }
}