/*
 * apex-overrides.css
 * Static global overrides extracted from css.blade.php.
 * All theme colours reference CSS variables set by the inline :root {} block.
 * Browser-cacheable — no PHP required.
 */

/* ─── Header buttons (sidebar toggles, dropdowns) ─── */
.header-theme-btn {
    background-color: var(--theme-dark) !important;
    color: white !important;
}
.header-theme-btn:hover,
.header-theme-btn:focus {
    background-color: var(--theme-hover) !important;
    color: white !important;
}

/* ─── Override hardcoded indigo/blue gradient buttons system-wide ─── */
.tw-from-indigo-600.tw-to-blue-500,
.tw-from-indigo-500.tw-to-blue-500,
.tw-from-indigo-600.tw-to-blue-600 {
    background-image: linear-gradient(to right, var(--theme-dark), var(--theme-main)) !important;
}
.hover\:tw-from-indigo-600:hover,
.hover\:tw-from-indigo-700:hover {
    background-image: linear-gradient(to right, var(--theme-hover), var(--theme-main)) !important;
}

/* ─── Override hardcoded blue step-indicator badges ─── */
.tw-bg-blue-600 {
    background-color: var(--theme-main) !important;
}
.tw-border-blue-400, .tw-border-blue-500 {
    border-color: var(--theme-main) !important;
}
.tw-text-blue-600, .tw-text-blue-700, .tw-text-indigo-600 {
    color: var(--theme-main) !important;
}
.focus\:tw-ring-blue-500:focus {
    --tw-ring-color: var(--theme-ring) !important;
}

/* ═══════════════ DARK MODE ═══════════════ */
body.dark-mode,.dark-mode .content-wrapper,.dark-mode main{background:#0f172a!important;color:#e2e8f0!important}
.dark-mode .box,.dark-mode .box-body,.dark-mode .card,.dark-mode .panel{background:#1e293b!important;border-color:rgba(255,255,255,0.07)!important;color:#e2e8f0!important}
.dark-mode .box-header,.dark-mode .card-header{background:#1e293b!important;border-bottom-color:rgba(255,255,255,0.1)!important}
.dark-mode table.table,.dark-mode table.dataTable{background:#1e293b!important;color:#e2e8f0!important}
.dark-mode table.table thead th,.dark-mode table.dataTable thead th{background:#0f172a!important;color:#94a3b8!important;border-bottom-color:rgba(255,255,255,0.1)!important}
.dark-mode table.table tbody td,.dark-mode table.dataTable tbody td{border-bottom-color:rgba(255,255,255,0.05)!important;color:#cbd5e1!important;background:#1e293b!important}
.dark-mode table.table tbody tr:hover td,.dark-mode table.dataTable tbody tr:hover td{background:#334155!important}
.dark-mode input.form-control,.dark-mode select.form-control,.dark-mode textarea.form-control{background:#334155!important;color:#e2e8f0!important;border-color:rgba(255,255,255,0.12)!important}
.dark-mode .select2-container .select2-selection--single,.dark-mode .select2-container .select2-selection--multiple{background:#334155!important;border-color:rgba(255,255,255,0.12)!important}
.dark-mode .select2-container .select2-selection--single .select2-selection__rendered{color:#e2e8f0!important}
.dark-mode .select2-dropdown{background:#1e293b!important;border-color:rgba(255,255,255,0.1)!important;color:#e2e8f0!important}
.dark-mode .select2-results__option{color:#cbd5e1!important}
.dark-mode .select2-results__option--highlighted{background:#334155!important;color:#fff!important}
.dark-mode .small-box{background:#1e293b!important;border:1px solid rgba(255,255,255,0.07)!important}
.dark-mode .modal-content{background:#1e293b!important;color:#e2e8f0!important}
.dark-mode .modal-header{border-bottom-color:rgba(255,255,255,0.1)!important}
.dark-mode .modal-footer{border-top-color:rgba(255,255,255,0.1)!important}
.dark-mode .dropdown-menu{background:#1e293b!important;border-color:rgba(255,255,255,0.1)!important}
.dark-mode .dropdown-menu>li>a{color:#cbd5e1!important}
.dark-mode .dropdown-menu>li>a:hover{background:#334155!important}
/* Dark mode toggle icons */
#dark-mode-toggle .dm-sun{display:inline-block}
#dark-mode-toggle .dm-moon{display:none}
body.dark-mode #dark-mode-toggle .dm-sun{display:none}
body.dark-mode #dark-mode-toggle .dm-moon{display:inline-block}

/* ═══════════════ PATTERN LOCK ═══════════════ */
/*
 * Pattern lock css
 * http://ignitersworld.com/lab/patternLock.html
 */
.patt-wrap {
  z-index: 10;
}
.patt-circ.hovered {
  background-color: #cde2f2;
  border: none;
}
.patt-circ.hovered .patt-dots {
  display: none;
}
.patt-circ.dir {
  background-image: url("/img/pattern-directionicon-arrow.png");
  background-position: center;
  background-repeat: no-repeat;
}
.patt-circ.e {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.patt-circ.s-e {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.patt-circ.s {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.patt-circ.s-w {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.patt-circ.w {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.patt-circ.n-w {
  -webkit-transform: rotate(225deg);
   transform: rotate(225deg);
}
.patt-circ.n {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.patt-circ.n-e {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL MODAL REDESIGN — applies to all ~100 modals at once
   ═══════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────── */
.modal-backdrop.in { opacity: .55; }

/* ── Entrance animation ───────────────────────────────────────── */
@keyframes apexModalIn {
    from { opacity:0; transform:translateY(-18px) scale(.97); }
    to   { opacity:1; transform:translateY(0)     scale(1);   }
}
.modal.in .modal-dialog {
    animation: apexModalIn .22s cubic-bezier(.22,.61,.36,1) both;
}

/* ── Modal sizing — keep them compact ─────────────────────────── */
.modal-dialog               { max-width: 580px  !important; width: auto !important; }
.modal-dialog.modal-sm      { max-width: 380px  !important; }
.modal-dialog.modal-lg      { max-width: 720px  !important; }
.modal-dialog.modal-xl      { max-width: 820px  !important; }
@media (max-width: 767px) {
    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl  { max-width: calc(100% - 20px) !important; width: calc(100% - 20px) !important; }
}

/* ── Shell ────────────────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1) !important;
}

/* ── Header ───────────────────────────────────────────────────── */
.modal-header {
    /* No !important on background — inline style= colors on specific modals will win */
    background: linear-gradient(135deg, var(--theme-dark, #3730a3) 0%, var(--theme-main, #4f46e5) 100%);
    color: #fff !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
}
/* keep the existing modal-header-material (quick add product) intact */
.modal-header-material {
    background: linear-gradient(135deg, var(--theme-dark, #3730a3) 0%, var(--theme-main, #4f46e5) 100%);
    padding: 16px 20px !important;
    border-bottom: none !important;
}

.modal-header .modal-title,
.modal-header h3.modal-title,
.modal-header h4.modal-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-header .modal-title i.fa,
.modal-header .modal-title i.fas,
.modal-header .modal-title i.far {
    opacity: .85;
    font-size: 14px;
}

/* ── Close button ─────────────────────────────────────────────── */
.modal-header .close {
    color: rgba(255,255,255,.8) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    float: none !important;
    order: 2;
    cursor: pointer;
    transition: color .15s, transform .15s;
}
.modal-header .close:hover {
    color: #fff !important;
    transform: scale(1.15);
}

/* ── Body ─────────────────────────────────────────────────────── */
.modal-body {
    padding: 22px 24px !important;
    background: #fff;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
/* section dividers inside modals */
.modal-body hr {
    border-color: #e9ecef;
    margin: 16px 0;
}
.modal-body h5 {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 16px 0 10px;
}
.modal-body h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e9ecef !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
.modal-footer .btn + .btn { margin-left: 0 !important; }

/* ── Form elements inside modals ──────────────────────────────── */
.modal-body .form-control {
    border-radius: 6px !important;
    border-color: #d1d5db !important;
    font-size: 13px !important;
    height: 34px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.modal-body textarea.form-control { height: auto !important; }
.modal-body .form-control:focus {
    border-color: var(--theme-main, #4f46e5) !important;
    box-shadow: 0 0 0 3px var(--theme-ring, #a5b4fc33) !important;
    outline: none !important;
}
.modal-body .form-group { margin-bottom: 14px !important; }
.modal-body .form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
    display: block;
}
.modal-body .input-group-addon {
    border-radius: 6px 0 0 6px !important;
    border-color: #d1d5db !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* ── Buttons — standardise the footer actions ─────────────────── */
.modal-footer .btn,
.modal-body .modal-form-actions .btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    transition: background .15s, box-shadow .15s, transform .1s !important;
}
.modal-footer .btn:active { transform: scale(.97); }

/* primary action: use theme colour */
.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer .btn-info {
    background: var(--theme-main, #4f46e5) !important;
    border-color: var(--theme-main, #4f46e5) !important;
    color: #fff !important;
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-success:hover,
.modal-footer .btn-info:hover {
    background: var(--theme-hover, #4338ca) !important;
    border-color: var(--theme-hover, #4338ca) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}

/* cancel/secondary */
.modal-footer .btn-default {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.modal-footer .btn-default:hover {
    background: #f3f4f6 !important;
}

/* danger stays red */
.modal-footer .btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.modal-footer .btn-danger:hover { background: #b91c1c !important; border-color:#b91c1c !important; }

/* warning */
.modal-footer .btn-warning {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.modal-footer .btn-warning:hover { background: #b45309 !important; border-color:#b45309 !important; }

/* ── Loading spinner inside modals ────────────────────────────── */
.modal-body .ajax-loading-container {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

/* ── Tab panes inside modals ──────────────────────────────────── */
.modal-body .nav-tabs { border-bottom: 2px solid #e5e7eb !important; margin-bottom: 16px; }
.modal-body .nav-tabs > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 0 !important;
    margin-bottom: -2px;
}
.modal-body .nav-tabs > li.active > a,
.modal-body .nav-tabs > li > a:hover {
    color: var(--theme-main, #4f46e5) !important;
    border-bottom: 2px solid var(--theme-main, #4f46e5) !important;
    background: none !important;
}

/* ── Scrollbar inside modal body ──────────────────────────────── */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Dark mode ────────────────────────────────────────────────── */
.dark-mode .modal-content { background: #1e293b !important; }
.dark-mode .modal-body { background: #1e293b !important; color: #e2e8f0 !important; }
.dark-mode .modal-body h4,
.dark-mode .modal-body h5 { color: #94a3b8 !important; }
.dark-mode .modal-body hr { border-color: rgba(255,255,255,.08) !important; }
.dark-mode .modal-footer { background: #0f172a !important; border-top-color: rgba(255,255,255,.08) !important; }
.dark-mode .modal-footer .btn-default { background:#334155!important; border-color:rgba(255,255,255,.15)!important; color:#e2e8f0!important; }
.dark-mode .modal-body .form-group label { color: #94a3b8 !important; }
.dark-mode .modal-body .nav-tabs { border-bottom-color: rgba(255,255,255,.1) !important; }
.dark-mode .modal-body .nav-tabs > li > a { color: #94a3b8 !important; }

/* ── Responsive: full-screen on mobile ────────────────────────── */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px auto !important;
        width: calc(100% - 20px) !important;
    }
    .modal-content { border-radius: 10px !important; }
    .modal-body { max-height: calc(100vh - 140px); }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1; text-align: center; }
}

/* ═══════════════ SIDEBAR LOCK ═══════════════ */
.side-bar {
    background: linear-gradient(180deg,#0f172a 0%,#1e293b 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.side-bar a,
.side-bar .sidebar-nav-link,
.side-bar .sidebar-child-link {
    color: rgba(255,255,255,0.72) !important;
}
.side-bar .sidebar-nav-link.active-item,
.side-bar a[style*="border-left:3px solid"] {
    color: #ffffff !important;
}

/* ═══════════════ GLOBAL TABLE STYLE ═══════════════ */

/* ─── Table reset ─────────────────────────────────────────── */
table.table,
table.dataTable,
.dataTables_wrapper table {
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: 13px !important;
}

/* ─── Header ──────────────────────────────────────────────── */
table.table thead th,
table.table thead td,
table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper table thead th,
.dataTables_wrapper table thead td {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 6px 10px !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap;
}

/* ─── Body cells ──────────────────────────────────────────── */
table.table tbody td,
table.table tbody th,
table.dataTable tbody td,
table.dataTable tbody th,
.dataTables_wrapper table tbody td {
    padding: 5px 10px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* ─── Last row: no divider ────────────────────────────────── */
table.table tbody tr:last-child td,
table.table tbody tr:last-child th,
table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* ─── No striping ─────────────────────────────────────────── */
table.table tbody tr,
table.table tbody tr:nth-child(odd),
table.table tbody tr:nth-child(even),
table.table-striped tbody tr:nth-of-type(odd),
table.table-striped tbody tr:nth-of-type(even),
table.dataTable tbody tr,
table.dataTable tbody tr:nth-child(odd),
table.dataTable tbody tr:nth-child(even),
.dataTables_wrapper table tbody tr,
.dataTables_wrapper table tbody tr:nth-child(odd),
.dataTables_wrapper table tbody tr:nth-child(even) {
    background: #ffffff !important;
}

/* ─── Hover ───────────────────────────────────────────────── */
table.table tbody tr:hover td,
table.table tbody tr:hover th,
table.dataTable tbody tr:hover td,
.dataTables_wrapper table tbody tr:hover td {
    background: #f8fafc !important;
}

/* ─── Footer ──────────────────────────────────────────────── */
table.table tfoot th,
table.table tfoot td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    background: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 5px 10px !important;
    border: none !important;
    border-top: 2px solid #e2e8f0 !important;
}

/* ─── Remove all borders from bordered variant ────────────── */
table.table-bordered td,
table.table-bordered th {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BUTTON THEMING — all primary/action buttons use theme color
   ═══════════════════════════════════════════════════════════ */

/* Bootstrap / AdminLTE btn-primary / btn-success / btn-info */
.btn.btn-primary, .btn.btn-success, .btn.btn-info,
.btn-primary, .btn-success, .btn-info {
    background-color: var(--theme-main) !important;
    border-color: var(--theme-main) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active,
.btn.btn-info:hover,    .btn.btn-info:focus,    .btn.btn-info:active,
.btn-primary:hover, .btn-success:hover, .btn-info:hover {
    background-color: var(--theme-hover) !important;
    border-color: var(--theme-hover) !important;
    color: #fff !important;
}

/* DaisyUI tw-dw-btn-primary — force background directly; oklch() with hex is invalid so we bypass it */
.tw-dw-btn.tw-dw-btn-primary,
button.tw-dw-btn.tw-dw-btn-primary,
a.tw-dw-btn.tw-dw-btn-primary {
    --btn-color: var(--theme-main) !important;
    --fallback-p: var(--theme-main) !important;
    background: var(--theme-main) !important;
    background-color: var(--theme-main) !important;
    background-image: none !important;
    border-color: var(--theme-main) !important;
    color: #fff !important;
    --tw-text-opacity: 1 !important;
}
.tw-dw-btn.tw-dw-btn-primary:hover,
.tw-dw-btn.tw-dw-btn-primary:focus,
button.tw-dw-btn.tw-dw-btn-primary:hover,
button.tw-dw-btn.tw-dw-btn-primary:focus {
    --btn-color: var(--theme-hover) !important;
    background: var(--theme-hover) !important;
    background-color: var(--theme-hover) !important;
    background-image: none !important;
    border-color: var(--theme-hover) !important;
    color: #fff !important;
}

/* btn-link — use theme color as text */
.btn-link {
    color: var(--theme-main) !important;
}
.btn-link:hover,
.btn-link:focus {
    color: var(--theme-hover) !important;
    text-decoration: underline;
}

/* ─── Card Headers & Titles (Pure White) ───────────────── */
.box-header, .card-header, .box-title, .card-title,
[class*="box-header"], [class*="card-header"],
.box-header *, .card-header *, .box-title, .card-title {
    color: #ffffff !important;
}

/* ─── Export Buttons & Column Visibility (Perfect Alignment) ─── */
.dt-buttons {
    margin-bottom: 0.75rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
}
/* Completely neutralize AdminLTE btn-group for export area */
.dt-buttons .btn-group, .dt-buttons .btn-group-vertical {
    display: contents !important;
}
/* Uniform sizing for ALL button variants */
.dt-buttons .dt-button,
.dt-buttons .btn,
.buttons-colvis,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print,
button.buttons-colvis,
a.buttons-colvis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-transform: none !important;
}
.dt-buttons .buttons-colvis,
button.buttons-colvis,
a.buttons-colvis {
    background: #14b8a6 !important;
    color: #ffffff !important;
}
.dt-buttons .buttons-colvis:hover,
button.buttons-colvis:hover {
    background: #0d9488 !important;
}

/* ─── Pagination: Clean Prev / [1] / Next ────────────────── */
.dataTables_wrapper .dataTables_paginate {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .pagination {
    border: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 4px !important;
    box-shadow: none !important;
}
/* Force hide all standard page numbers */
.dataTables_wrapper .dataTables_paginate .pagination > li {
    display: none !important;
}
/* Force show only the functional buttons */
.dataTables_wrapper .dataTables_paginate .pagination > li.previous,
.dataTables_wrapper .dataTables_paginate .pagination > li.next,
.dataTables_wrapper .dataTables_paginate .pagination > li.active {
    display: flex !important;
}
/* Pagination Button Styling */
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    height: 30px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: none !important;
    background: var(--theme-main, #4f46e5) !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-decoration: none !important;
}
/* Active (Current Page) */
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
    background: transparent !important;
    color: var(--theme-main, #4f46e5) !important;
    border: none !important;
    cursor: default !important;
    pointer-events: none !important;
}
/* Hover effect */
.dataTables_wrapper .dataTables_paginate .pagination > li:not(.active):not(.disabled) > a:hover {
    background: var(--theme-hover, #4338ca) !important;
}
/* Disabled buttons */
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span {
    opacity: 0.35 !important;
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ─── Compact action button for datatables ───────────────── */
button.product-action-btn,
.product-action-btn.btn,
.product-action-btn {
    padding: 1px 7px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ─── DataTables: Show X entries select ──────────────────── */
.dataTables_wrapper .dataTables_length {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.dataTables_wrapper .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length select.form-control {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* ─── Global input/select/textarea text visibility fix ───── */
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
.select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-search__field,
.input-group .form-control {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
input.form-control::placeholder,
input[type="text"]::placeholder,
textarea.form-control::placeholder {
    color: #9ca3af !important;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: var(--theme-main, #059669) !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    color: #111827 !important;
    line-height: 34px !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
}
.select2-container .select2-selection--single {
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    top: 0 !important;
}
.form-control {
    height: 34px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
select.form-control {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 34px !important;
}
textarea.form-control {
    height: auto;
    line-height: 1.5;
    display: block;
}
.select2-dropdown {
    background: #ffffff !important;
    color: #111827 !important;
}
.select2-results__option {
    color: #111827 !important;
}
.select2-results__option--highlighted {
    background-color: var(--theme-subtle, #ecfdf5) !important;
    color: var(--theme-dark, #065f46) !important;
}

/* ─── jQuery UI Autocomplete — purchase search dropdown ─────── */
.ui-autocomplete.ui-menu {
    padding: 8px 0 !important;
    padding-left: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-top: 3px !important;
    background: #fff !important;
    z-index: 99999 !important;
}
.ui-autocomplete.ui-menu .ui-menu-item,
.ui-autocomplete.ui-menu .ui-menu-item > * {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}
.ui-autocomplete.ui-menu .ui-menu-item:last-child > div {
    border-bottom: none !important;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete.ui-menu .ui-state-active,
.ui-autocomplete.ui-menu .ui-state-focus {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
.ui-autocomplete.ui-menu::-webkit-scrollbar { width: 5px; }
.ui-autocomplete.ui-menu::-webkit-scrollbar-track { background: #f8fafc; border-radius: 10px; }
.ui-autocomplete.ui-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* ─── Mobile sidebar overlay (must be showable when menu is open) ─── */
.control-sidebar-bg,
body.sidebar-open::after {
    display: none !important;
}
/* Default hidden; .active shows it (do NOT force always-none) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1040;
}
.sidebar-overlay.active {
    display: block !important;
    pointer-events: auto !important;
}
@media (max-width: 991px) {
    .main-sidebar,
    .side-bar { z-index: 1050; }
    body.sidebar-open .content-wrapper,
    body.sidebar-open .main-header,
    body.sidebar-open #app-header {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   #app-header — extracted from header.blade.php
   All colour values use CSS variables from :root {}
   ═══════════════════════════════════════════════════════════ */
#app-header {
    background: linear-gradient(90deg, var(--theme-dark), var(--theme-deeper));
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}
#app-header .hb,
#app-header > a,
#app-header > button {
    all: unset;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 13px !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background .15s !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
#app-header .hb:hover,
#app-header > a:hover,
#app-header > button:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
#app-header .hb svg,
#app-header > a svg,
#app-header > button svg {
    width: 15px !important;
    height: 15px !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
#app-header .hb-ghost {
    width: 36px !important;
    padding: 0 !important;
}
#app-header .hb-primary {
    background: #fff !important;
    color: var(--theme-dark) !important;
    border: 1px solid #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
#app-header .hb-primary:hover {
    background: #f3f4f6 !important;
    color: var(--theme-dark) !important;
}
#app-header .hb-primary svg { color: var(--theme-dark) !important; }
#app-header .hb-sep {
    width: 1px; height: 22px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
#app-header .hb-bell-wrap { position: relative; display: inline-flex; }
#app-header .hb-bell-dot {
    position: absolute; top: 3px; right: 3px;
    width: 8px; height: 8px;
    background: #ef4444; border-radius: 50%;
    border: 2px solid var(--theme-dark);
    pointer-events: none;
    animation: hbPulse 2s infinite;
}
@keyframes hbPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
@keyframes hbSpin { to { transform: rotate(360deg); } }
#hb-user-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    width: 210px; background: #fff;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb; z-index: 9999;
    overflow: hidden; display: none;
}
@media (max-width: 1200px) { #app-header .hb-label   { display: none !important; } }
@media (max-width: 960px)  { #app-header .hb-hide-md { display: none !important; } }
@media (max-width: 700px)  { #app-header .hb-hide-sm { display: none !important; } }

/* ═══════════════════════════════════════════════════════════
   Sidebar gradient — extracted from sidebar.blade.php
   ═══════════════════════════════════════════════════════════ */
.side-bar {
    background: linear-gradient(180deg, var(--theme-dark) 0%, var(--theme-deeper) 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.side-bar .logo-icon-gradient {
    background: linear-gradient(135deg, var(--theme-main), var(--theme-light)) !important;
}

/* ── Sidebar nav item hover ──────────────────────────────────────── */
.sidebar-nav-link:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
.sidebar-nav-link:hover span[style*="border-radius:6px"] {
    background: rgba(255,255,255,0.15) !important;
}
.sidebar-child-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* Date Range Picker Month & Year Select Dropdowns Fix */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker .monthselect,
.daterangepicker .yearselect {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

.daterangepicker select.monthselect option,
.daterangepicker select.yearselect option,
.daterangepicker .monthselect option,
.daterangepicker .yearselect option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════
   MODERN DATATABLES COLUMN VISIBILITY DROPDOWN (COLVIS)
   ═══════════════════════════════════════════════════════════ */
div.dt-button-collection,
ul.dt-button-collection,
.dt-button-collection {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
    padding: 12px 14px !important;
    z-index: 2005 !important;
    max-width: 520px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Individual Column Toggle Pill Buttons */
.dt-button-collection a.dt-button,
.dt-button-collection button.dt-button,
.dt-button-collection a.buttons-columnVisibility,
.dt-button-collection button.buttons-columnVisibility,
.dt-button-collection .dt-button.buttons-columnVisibility {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Hover state */
.dt-button-collection a.buttons-columnVisibility:hover,
.dt-button-collection button.buttons-columnVisibility:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Active (Visible Column) State */
.dt-button-collection a.buttons-columnVisibility.active,
.dt-button-collection button.buttons-columnVisibility.active,
.dt-button-collection .dt-button.buttons-columnVisibility.active {
    background-color: #eef2ff !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border-color: #818cf8 !important;
    font-weight: 600 !important;
}

/* Prefix indicator for Active / Inactive states */
.dt-button-collection a.buttons-columnVisibility.active::before,
.dt-button-collection button.buttons-columnVisibility.active::before {
    content: "✓" !important;
    font-weight: bold !important;
    color: #4f46e5 !important;
}

.dt-button-collection a.buttons-columnVisibility:not(.active)::before,
.dt-button-collection button.buttons-columnVisibility:not(.active)::before {
    content: "✕" !important;
    font-weight: normal !important;
    color: #94a3b8 !important;
    opacity: 0.6 !important;
}

/* Hide empty buttons (e.g. empty custom fields) */
.dt-button-collection a.buttons-columnVisibility:empty,
.dt-button-collection button.buttons-columnVisibility:empty {
    display: none !important;
}