/* ===================================================
   BORON LIGHT ERP THEME EXTENSION
   Clean full replacement CSS
   - Clean light surfaces
   - White sidebar/topbar
   - One clean badge design, no dot, no glow
   - KPI cards stay bright and attractive
=================================================== */

:root {
    --erp-bg: #f4f7fb;
    --erp-bg-soft: #eef3f8;
    --erp-sidebar: #ffffff;
    --erp-topbar: #ffffff;
    --erp-card: #ffffff;
    --erp-card-2: #1e293b;
    --erp-table-head: #f1f5f9;
    --erp-row-hover: #1e293b;
    --erp-border: #334155;
    --erp-border-soft: rgba(15, 23, 42, .08);
    --erp-text: #1e293b;
    --erp-muted: #64748b;
    --erp-primary: #2563eb;
    --erp-primary-2: #3b82f6;
    --erp-blue: #2563eb;
    --erp-cyan: #0891b2;
    --erp-green: #16a34a;
    --erp-orange: #ea580c;
    --erp-yellow: #ca8a04;
    --erp-red: #dc2626;
    --erp-pink: #db2777;
    --erp-radius-sm: 10px;
    --erp-radius: 14px;
    --erp-radius-lg: 18px;
    --erp-radius-xl: 20px;
    --erp-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

/* ===================================================
   BASE / LAYOUT
=================================================== */

html,
body {
    background: var(--erp-bg) !important;
    color: var(--erp-text);
}

body,
.page-content,
.wrapper,
.main-content {
    background: var(--erp-bg) !important;
}

.page-content {
    padding-top: 28px !important;
}

.page-section {
    margin-bottom: 24px;
}

.page-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--erp-text);
    margin-bottom: 4px;
    letter-spacing: -.4px;
}

    .page-title + p,
    .page-subtitle {
        color: #64748b;
        font-size: 15px;
        margin-bottom: 28px;
    }

.text-muted {
    color: var(--erp-muted) !important;
}

/* ===================================================
   SIDEBAR - BLACK BORON LOOK
=================================================== */

.sidenav-menu,
.app-menu,
.leftside-menu {
    background: var(--erp-sidebar) !important;
    border-right: 1px solid var(--erp-border) !important;
    box-shadow: 6px 0 24px rgba(15,23,42,.06);
}

.sidebar-brand {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--erp-sidebar) !important;
    border-bottom: 1px solid var(--erp-border);
    margin-bottom: 10px;
}

.sidebar-brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-2));
    box-shadow: 0 10px 25px rgba(124,58,237,.38);
}

    .sidebar-brand-icon i {
        font-size: 24px;
        color: #fff;
    }

.brand-title {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.brand-subtitle {
    font-size: 11px;
    color: var(--erp-muted);
}

.side-nav-link {
    position: relative;
    border-radius: 14px !important;
    transition: all .25s ease !important;
    color: #475569 !important;
}

    .side-nav-link .menu-icon i {
        color: #64748b;
        transition: .25s;
    }

    .side-nav-link:hover {
        background: #eff6ff !important;
        color: #fff !important;
    }

        .side-nav-link:hover .menu-icon i {
            color: #fff !important;
        }

    .side-nav-item.active .side-nav-link,
    .side-nav-link.active {
        background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-2)) !important;
        color: #fff !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 18px rgba(37,99,235,.20) !important;
    }

        .side-nav-item.active .menu-icon i,
        .side-nav-link.active .menu-icon i,
        .side-nav-item.active .menu-text,
        .side-nav-link.active .menu-text {
            color: #fff !important;
        }

/* ===================================================
   TOPBAR / SEARCH
=================================================== */

.topbar,
.navbar-custom {
    background: var(--erp-topbar) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}

.sidenav-toggle-button {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-2)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.18);
    transition: .25s ease;
}

    .sidenav-toggle-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(37,99,235,.24);
    }

.topbar-search,
.form-control,
select,
textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    color: #fff !important;
}

    .topbar-search::placeholder,
    .form-control::placeholder {
        color: #64748b !important;
    }

    .topbar-search:focus,
    .form-control:focus,
    select:focus,
    textarea:focus {
        border-color: var(--erp-primary-2) !important;
        box-shadow: 0 0 0 3px rgba(139,92,246,.16) !important;
        outline: none !important;
    }

.form-select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    padding-left: 14px;
    padding-right: 42px;
    transition: all .25s ease;
    box-shadow: none !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.5L10 12.25L14.75 7.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    .form-select:hover {
        border-color: #64748b !important;
        background: #1e293b !important;
    }

    .form-select:focus {
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
        background: #1e293b !important;
    }

    .form-select:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .form-select option {
        background: #ffffff;
        color: #1e293b;
    }

/* ===================================================
   CONTENT CARDS
=================================================== */

.content-card,
.card,
.stock-report-card {
    background: var(--erp-card) !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--erp-shadow);
}

.content-header,
.card-header,
.stock-header {
    background: var(--erp-card) !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid var(--erp-border) !important;
    color: #1e293b !important;
    font-size: 16px;
    font-weight: 700;
}

.content-body,
.card-body {
    background: var(--erp-card) !important;
    padding: 24px;
}

.card-header p {
    font-size: 13px;
    margin-top: 2px;
    color: var(--erp-muted);
}

/* ===================================================
   KPI CARDS - BRIGHT / ATTRACTIVE
=================================================== */

.kpi-card,
.stock-kpi {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 24px;
    min-height: 150px;
    color: #fff;
    transition: .25s ease;
    box-shadow: 0 12px 28px rgba(15,23,42,.14);
}

    .kpi-card:hover,
    .stock-kpi:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px rgba(15,23,42,.18);
    }

    .kpi-card::after,
    .stock-circle {
        content: "";
        width: 120px;
        height: 120px;
        position: absolute;
        right: -30px;
        top: -30px;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
    }

.kpi-primary,
.stock-cyan {
    background: linear-gradient(135deg,#0891b2,#06b6d4) !important;
}

.kpi-success,
.stock-green {
    background: linear-gradient(135deg,#15803d,#22c55e) !important;
}

.kpi-warning,
.stock-orange {
    background: linear-gradient(135deg,#ea580c,#f97316) !important;
}

.kpi-danger,
.stock-red {
    background: linear-gradient(135deg,#dc2626,#ef4444) !important;
}

.kpi-label,
.stock-kpi h6 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .9;
    font-weight: 800;
}

.kpi-value,
.stock-kpi h2 {
    font-size: 48px;
    font-weight: 800;
    margin-top: 10px;
    line-height: 1;
}

.kpi-subtitle,
.stock-kpi p {
    margin-top: 10px;
    font-size: 12px;
    opacity: .82;
}

.kpi-icon,
.stock-kpi i {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 48px;
    opacity: .22;
}

/* ===================================================
   TABLES - MATCHED HEADER/CARD COLOR
=================================================== */

.table,
.stock-table {
    margin-bottom: 0;
    color: var(--erp-text);
}

    .table thead th,
    .stock-table thead th {
        /*background: var(--erp-card) !important;
        color: #1e293b;*/
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 18px;
        border-top: none;
        border-bottom: 1px solid var(--erp-border);
    }

    .table tbody td,
    .stock-table tbody td,
    .stock-table td {
        padding: 16px !important;
        vertical-align: middle;
        color: #334155;
        border-color: var(--erp-border) !important;
    }

    .table tbody tr,
    .stock-table tbody tr {
        transition: .2s ease;
    }

        .table tbody tr:nth-child(even),
        .stock-table tbody tr:nth-child(even) {
            /* background: rgba(255,255,255,.018);*/
        }

        .table-hover tbody tr:hover,
        .table tbody tr:hover,
        .stock-table tbody tr:hover {
            /*  background: var(--erp-row-hover) !important;*/
        }

/* WO Movement History */
#tblHistory {
    width: 100%;
    table-layout: fixed;
}

    #tblHistory th,
    #tblHistory td {
        padding: 16px 18px !important;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        #tblHistory th:nth-child(1),
        #tblHistory td:nth-child(1) {
            width: 18%;
        }

        #tblHistory th:nth-child(2),
        #tblHistory td:nth-child(2) {
            width: 24%;
        }

        #tblHistory th:nth-child(3),
        #tblHistory td:nth-child(3) {
            width: 14%;
        }

        #tblHistory th:nth-child(4),
        #tblHistory td:nth-child(4) {
            width: 14%;
            text-align: center;
        }

        #tblHistory th:nth-child(5),
        #tblHistory td:nth-child(5) {
            width: 20%;
            text-align: center;
        }

        #tblHistory th:nth-child(6),
        #tblHistory td:nth-child(6) {
            width: 10%;
        }

/* ===================================================
   STATUS BADGES - ONE STYLE ONLY, NO DOT, NO GLOW
=================================================== */

.status-badge,
.dashboard-badge,
.tracking-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    min-width: auto;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    text-transform: none;
    box-shadow: none !important;
    transition: .18s ease;
}

    .status-badge::before,
    .dashboard-badge::before,
    .tracking-badge::before {
        display: none !important;
        content: none !important;
    }

    .status-badge:hover,
    .dashboard-badge:hover,
    .tracking-badge:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }

.badge-new,
.status-new,
.status-created {
    color: #38bdf8 !important;
    background: rgba(14,165,233,.16) !important;
    border-color: rgba(14,165,233,.48) !important;
}

.badge-sent,
.status-sent {
    color: #fde047 !important;
    background: rgba(234,179,8,.16) !important;
    border-color: rgba(234,179,8,.48) !important;
}

.badge-received,
.status-received {
    color: #a78bfa !important;
    background: rgba(139,92,246,.16) !important;
    border-color: rgba(139,92,246,.48) !important;
}

.badge-warning,
.status-pending-dispatch,
.status-completed {
    color: #fbbf24 !important;
    background: rgba(245,158,11,.16) !important;
    border-color: rgba(245,158,11,.48) !important;
}

.badge-partial,
.status-partial,
.status-partial-delivery,
.status-partially-dispatched {
    color: #fb923c !important;
    background: rgba(249,115,22,.16) !important;
    border-color: rgba(249,115,22,.48) !important;
}

.badge-delivered,
.status-delivered,
.status-dispatched {
    color: #4ade80 !important;
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(34,197,94,.48) !important;
}

.badge-closed,
.status-closed {
    color: #f87171 !important;
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.48) !important;
}

.badge-info,
.status-dispatched {
    color: #60a5fa !important;
    background: rgba(59,130,246,.16) !important;
    border: 1px solid rgba(59,130,246,.45) !important;
}
/* ===================================================
   PILLS / LABELS
=================================================== */
.wo-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(124,58,237,.18);
    color: #c4b5fd;
    border: 1px solid rgba(124,58,237,.40);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    box-shadow: none;
}

.dept-pill,
.department-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid rgba(124,58,237,.45);
    background: rgba(124,58,237,.16);
    color: #c4b5fd;
}

.challan-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(59,130,246,.16);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,.40);
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}

.date-pill {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}

.qty-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(249,115,22,.18);
    color: #fb923c;
    border: 1px solid rgba(249,115,22,.35);
    font-weight: 700;
    box-shadow: none;
}

.dept-production {
    background: rgba(124,58,237,.16) !important;
    color: #c4b5fd !important;
    border-color: rgba(124,58,237,.48) !important;
}

.dept-fabrication {
    background: rgba(249,115,22,.16) !important;
    color: #fdba74 !important;
    border-color: rgba(249,115,22,.48) !important;
}

.dept-painting {
    background: rgba(236,72,153,.16) !important;
    color: #f9a8d4 !important;
    border-color: rgba(236,72,153,.48) !important;
}

.dept-assembly {
    background: rgba(34,197,94,.16) !important;
    color: #86efac !important;
    border-color: rgba(34,197,94,.48) !important;
}

.date-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}



.qty-received,
.qty-issued,
.qty-available {
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid transparent;
}

.qty-received {
    background: rgba(59,130,246,.16);
    color: #60a5fa;
    border-color: rgba(59,130,246,.45);
}

.qty-issued {
    background: rgba(245,158,11,.16);
    color: #fbbf24;
    border-color: rgba(245,158,11,.45);
}

.qty-available {
    background: rgba(34,197,94,.16);
    color: #4ade80;
    border-color: rgba(34,197,94,.45);
}

/* ===================================================
   BUTTONS / ACTIONS
=================================================== */

.btn {
    transition: .22s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-danger {
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
}
/* ==========================================
   PRIMARY BUTTON
========================================== */

.btn-primary {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #fff !important;
    border-radius: 12px;
    height: 46px;
    font-weight: 700;
    transition: .25s ease;
}

    .btn-primary:hover {
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(22,163,74,.25);
    }

.btn-group {
    gap: 8px;
}

    .btn-group .btn {
        min-width: 36px;
        border-radius: 10px !important;
    }
/* ==========================================
   BORON ACTION BUTTON
========================================== */

.btn-dispatch {
    background: #f1f5f9;
    border: 1px solid #22c55e;
    color: #22c55e;
    border-radius: 10px;
    height: 42px;
    padding: 0 18px;
    font-weight: 600;
    transition: .25s;
}

    .btn-dispatch:hover {
        background: #22c55e;
        color: #fff;
    }

/* ==========================================
   MASTER FORM CARD
========================================== */

.master-form-card {
    height: auto !important;
}

    .master-form-card .card-body {
        display: flex;
        flex-direction: column;
    }

.action-btn {
    height: 42px;
    min-width: 42px;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: .25s ease !important;
}

    .action-btn i {
        font-size: 16px !important;
    }

    .action-btn:hover {
        transform: translateY(-2px);
    }

.action-edit {
    background: rgba(245,158,11,.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245,158,11,.35) !important;
}

.action-delete {
    background: rgba(239,68,68,.16) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239,68,68,.35) !important;
}

.action-success {
    background: rgba(34,197,94,.16) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34,197,94,.35) !important;
}

.action-info {
    background: rgba(59,130,246,.16) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59,130,246,.35) !important;
}

    .action-info:hover,
    .action-success:hover,
    .action-edit:hover,
    .action-delete:hover {
        filter: brightness(1.1);
    }


/* ===================================================
   QUICK ACTION CARDS
=================================================== */

.quick-action-card {
    background: var(--erp-card) !important;
    border: 1px solid var(--erp-border);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    transition: .25s ease;
    min-height: 105px;
}

    .quick-action-card:hover {
        transform: translateY(-3px);
        border-color: rgba(124,58,237,.45);
        color: #fff;
    }

.quick-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .quick-action-icon i {
        font-size: 26px;
    }

.quick-action-card h5 {
    margin: 0;
    color: #fff;
    font-weight: 700;
}

.quick-action-card small {
    color: var(--erp-muted);
}

.quick-primary {
    background: rgba(6,182,212,.16);
    color: #22d3ee;
}

.quick-success {
    background: rgba(34,197,94,.16);
    color: #4ade80;
}

.quick-warning {
    background: rgba(249,115,22,.16);
    color: #fb923c;
}

.quick-info {
    background: rgba(37,99,235,.16);
    color: #60a5fa;
}

/* ===================================================
   TRACKING PAGE
=================================================== */

.wo-timeline {
    position: relative;
    padding-left: 10px;
}

.timeline-item {
    position: relative;
    display: flex;
    gap: 18px;
    padding-bottom: 28px;
}

    .timeline-item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 48px;
        width: 2px;
        height: calc(100% - 48px);
        background: #cbd5e1;
    }

.timeline-marker {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,#7c3aed,#8b5cf6);
}

    .timeline-marker i {
        font-size: 22px;
    }

.timeline-content {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--erp-border);
    border-radius: 18px;
    padding: 16px 18px;
}

.timeline-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

    .timeline-top h5 {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        margin: 0;
    }

.timeline-remark,
.timeline-meta {
    color: var(--erp-muted);
}

.timeline-meta {
    font-size: 13px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.summary-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--erp-border);
}

    .summary-row span {
        color: var(--erp-muted);
        font-weight: 600;
    }

    .summary-row strong {
        color: #fff;
        text-align: right;
    }

.empty-state {
    color: var(--erp-muted);
    padding: 24px;
    text-align: center;
}

/* ===================================================
   TOAST / SWEETALERT
=================================================== */

.swal2-popup.swal2-toast {
    background: #ffffff !important;
    color: #fff !important;
    border-radius: 16px !important;
    border: 1px solid var(--erp-border) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.12) !important;
    padding: 16px !important;
}

.swal2-toast .swal2-title {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.swal2-toast .swal2-icon {
    margin-right: 12px !important;
}

.swal2-timer-progress-bar {
    background: #6d4cff !important;
}

/* ===================================================
   SCROLLBAR
=================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f7;
}

::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 30px;
}


/* ===================================================
   RESPONSIVE
=================================================== */

@media (max-width: 992px) {
    .page-title {
        font-size: 28px;
    }

    .kpi-value,
    .stock-kpi h2 {
        font-size: 40px;
    }

    .content-header,
    .card-header,
    .stock-header {
        padding: 18px !important;
    }
}

@media (max-width: 576px) {
    .page-content {
        padding-top: 18px !important;
    }

    .page-title {
        font-size: 24px;
    }

    .status-badge,
    .dashboard-badge,
    .tracking-badge,
    .department-pill,
    .dept-pill {
        font-size: 11px;
        padding: 6px 10px;
    }
}
/* Production Action Column */
#productionTable th:last-child,
#productionTable td:last-child {
    width: 150px;
    min-width: 150px;
    text-align: center;
}

.receive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 110px;
    height: 42px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    transition: .25s ease;
}

    .receive-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(34,197,94,.20);
    }

.notification-unread {
    background: rgba(109, 76, 255, 0.12);
}

.notification-read {
    background: transparent;
}

.notification-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.notification-info {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}

.notification-success {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.notification-warning {
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
}

.notification-danger {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

#notificationCount {
    display: none;
}
/* ===================================================
   REUSABLE TABLE PAGINATION
=================================================== */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.table-pagination-info {
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.table-pagination-actions,
.table-page-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-page-size {
    margin-right: 4px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

    .table-page-size .form-select {
        width: 72px;
        height: 36px;
        min-height: 36px;
        padding: 0 30px 0 10px;
        font-size: 13px;
        line-height: 36px;
        border-radius: 10px;
    }

.pagination-btn {
    min-width: 34px;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--bs-body-color);
    border-radius: 8px;
}

    .pagination-btn:hover:not(:disabled),
    .pagination-btn.active {
        border-color: var(--bs-primary);
        background: var(--bs-primary);
        color: #fff;
    }

    .pagination-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.pagination-dots {
    padding: 0 2px;
    color: var(--bs-secondary-color);
}

@media (max-width: 576px) {
    .table-pagination {
        align-items: flex-start;
        padding: 14px;
    }

    .table-pagination-actions {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* ==========================================
   LOGIN
========================================== */

.login-card {
    border-radius: 22px !important;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid var(--erp-border) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

.login-title {
    color: white;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 6px;
}

.login-subtitle {
    color: #64748b;
    margin-bottom: 0;
}

.login-card .form-label {
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-card .form-control {
    height: 50px;
    border-radius: 14px;
}

.login-btn {
    height: 50px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
}

.login-footer {
    margin-top: 28px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b5cf6;
    color: white;
    font-weight: 700;
}

.user-dropdown {
    width: 240px;
    border-radius: 12px;
}

/* ===================================================
   FINAL LIGHT THEME OVERRIDES
   Keep this section at the end of the file.
=================================================== */

html,
body,
.wrapper,
.page-content,
.main-content {
    background: var(--erp-bg) !important;
    color: var(--erp-text) !important;
}

.sidenav-menu,
.app-menu,
.leftside-menu,
.sidebar-brand,
.topbar,
.navbar-custom,
.app-topbar,
.topbar-menu {
    background: #ffffff !important;
    color: var(--erp-text) !important;
}

.sidenav-menu,
.app-menu,
.leftside-menu {
    border-right: 1px solid var(--erp-border) !important;
    box-shadow: 6px 0 24px rgba(15, 23, 42, .06) !important;
}

.sidebar-brand {
    border-bottom: 1px solid var(--erp-border) !important;
}

.brand-title,
.quick-action-card h5,
.timeline-top h5,
.summary-row strong,
.login-title {
    color: var(--erp-text) !important;
}

.brand-subtitle,
.page-subtitle,
.page-title + p,
.card-header p,
.quick-action-card small,
.timeline-remark,
.timeline-meta,
.summary-row span,
.login-subtitle,
.login-footer {
    color: var(--erp-muted) !important;
}

.side-nav-link {
    color: #475569 !important;
}

    .side-nav-link .menu-icon i {
        color: #64748b !important;
    }

    .side-nav-link:hover {
        background: #eff6ff !important;
        color: var(--erp-primary) !important;
    }

        .side-nav-link:hover .menu-icon i {
            color: var(--erp-primary) !important;
        }

    .side-nav-item.active .side-nav-link,
    .side-nav-link.active {
        background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-2)) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .20) !important;
    }

        .side-nav-item.active .menu-icon i,
        .side-nav-link.active .menu-icon i,
        .side-nav-item.active .menu-text,
        .side-nav-link.active .menu-text {
            color: #ffffff !important;
        }

.topbar,
.navbar-custom,
.app-topbar {
    border-bottom: 1px solid var(--erp-border) !important;
    box-shadow: 0 1px 8px rgba(15, 23, 42, .04) !important;
}

.topbar-search,
.form-control,
.form-select,
select,
textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: var(--erp-text) !important;
}

    .form-control::placeholder,
    .topbar-search::placeholder {
        color: #94a3b8 !important;
    }

    .form-control:focus,
    .form-select:focus,
    select:focus,
    textarea:focus,
    .topbar-search:focus {
        background-color: #ffffff !important;
        border-color: var(--erp-primary) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .13) !important;
    }

    .form-select:hover {
        background-color: #f8fafc !important;
        border-color: #94a3b8 !important;
    }

    .form-select option {
        background: #ffffff !important;
        color: var(--erp-text) !important;
    }

.content-card,
.card,
.stock-report-card,
.content-header,
.card-header,
.stock-header,
.content-body,
.card-body,
.quick-action-card,
.timeline-content,
.login-card,
.dropdown-menu,
.modal-content {
    background: #ffffff !important;
    color: var(--erp-text) !important;
    border-color: var(--erp-border) !important;
}

.content-card,
.card,
.stock-report-card,
.quick-action-card,
.timeline-content,
.login-card {
    box-shadow: var(--erp-shadow) !important;
}

.content-header,
.card-header,
.stock-header {
    color: var(--erp-text) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}

.table,
.stock-table {
    color: var(--erp-text) !important;
}

    .table thead th,
    .stock-table thead th {
        background: var(--erp-table-head) !important;
        color: #334155 !important;
        border-color: var(--erp-border) !important;
    }

    .table tbody td,
    .stock-table tbody td,
    .stock-table td {
        color: #334155 !important;
        border-color: var(--erp-border) !important;
    }

    .table tbody tr:nth-child(even),
    .stock-table tbody tr:nth-child(even) {
        background: #fbfdff !important;
    }

    .table-hover tbody tr:hover,
    .table tbody tr:hover,
    .stock-table tbody tr:hover {
        background: var(--erp-row-hover) !important;
    }

.date-pill {
    background: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

.btn-primary {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

    .btn-primary:hover {
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #ffffff !important;
    }

.quick-action-card {
    color: var(--erp-text) !important;
}

.timeline-item:not(:last-child)::before {
    background: #cbd5e1 !important;
}

.summary-row {
    border-bottom-color: var(--erp-border) !important;
}

.empty-state {
    color: var(--erp-muted) !important;
}

.swal2-popup.swal2-toast {
    background: #ffffff !important;
    color: var(--erp-text) !important;
    border-color: var(--erp-border) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12) !important;
}

::-webkit-scrollbar-track {
    background: #eef2f7;
}

::-webkit-scrollbar-thumb {
    background: #b8c2cf;
}

.table-pagination {
    border-top-color: var(--erp-border) !important;
}

.pagination-btn {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
}

    .pagination-btn:hover:not(:disabled),
    .pagination-btn.active {
        border-color: var(--erp-primary) !important;
        background: var(--erp-primary) !important;
        color: #ffffff !important;
    }

.login-card .form-label {
    color: #334155 !important;
}

.user-dropdown {
    background: #ffffff !important;
}

.notification-unread {
    background: #eff6ff !important;
}

.notification-read {
    background: #ffffff !important;
}

/* ===================================================
   STOCK REPORT - DISPATCHED QTY + LIGHTER HOVER
=================================================== */

.stock-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.stock-search-box {
    width: min(360px, 100%);
}

.stock-table tbody tr {
    transition: background-color .18s ease;
}

    .table-hover tbody tr:hover,
    .table tbody tr:hover,
    .stock-table tbody tr:hover {
        background: rgba(37, 99, 235, .035) !important;
    }

.qty-received,
.qty-issued,
.qty-dispatched,
.qty-available {
    min-width: 54px;
    justify-content: center;
    transition: transform .18s ease, filter .18s ease;
}

.qty-dispatched {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 800;
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, .30);
}

.stock-table tbody tr:hover .qty-received,
.stock-table tbody tr:hover .qty-issued,
.stock-table tbody tr:hover .qty-dispatched,
.stock-table tbody tr:hover .qty-available {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.stock-product-name {
    color: #1e293b;
}

@media (max-width: 767.98px) {
    .stock-search-box {
        width: 100%;
    }

    .stock-table {
        min-width: 900px;
    }
}


/* ===================================================
   ROLE MENU RIGHTS
=================================================== */

.role-menu-card {
    cursor: pointer;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    background: #ffffff !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.role-menu-card:hover {
    background: rgba(37, 99, 235, .035) !important;
    border-color: rgba(37, 99, 235, .30) !important;
    transform: translateY(-1px);
}

.role-menu-card:has(.menu-right-check:checked) {
    background: rgba(37, 99, 235, .07) !important;
    border-color: rgba(37, 99, 235, .38) !important;
}

.menu-loading [data-menu-code] {
    display: none;
}

/* ===========================
   RBAC / Dynamic Menu
=========================== */

.menu-loading [data-menu-code] {
    display: none;
}

.role-menu-card {
    cursor: pointer;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

    .role-menu-card:hover {
        background: rgba(37,99,235,.035) !important;
        border-color: rgba(37,99,235,.30) !important;
        transform: translateY(-1px);
    }

    .role-menu-card:has(.menu-right-check:checked) {
        background: rgba(37,99,235,.07) !important;
        border-color: rgba(37,99,235,.38) !important;
    }
.user-sync-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    /* Synced - Green */
    .user-sync-status.synced {
        color: #22c55e;
        background-color: rgba(34, 197, 94, 0.10);
        border: 1px solid #22c55e;
    }

    /* Not Synced - Orange */
    .user-sync-status.not-synced {
        color: #ff7a29;
        background-color: rgba(255, 122, 41, 0.10);
        border: 1px solid #ff7a29;
    }
.role-menu-card {
    min-height: 90px;
    border-radius: 14px;
}

    .role-menu-card > .d-flex {
        min-height: 70px;
    }
.otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.otp-input {
    width: 48px;
    height: 52px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .otp-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15);
    }

@media (max-width: 480px) {
    .otp-container {
        gap: 6px;
    }

    .otp-input {
        width: 40px;
        height: 48px;
    }
}