/* =============================================================
   Delta POS — interface  (v3, Zoho Books flavour)
   public/custom/css/delta-theme.css
   Loads after the theme CSS, so everything here wins.
   Delete the two lines in head.blade.php to switch it off.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------
   1. ICON FIX
   The compiled theme asks for /build/assets/boxicons-*.woff2,
   which 404s because the app runs from a /public/ subfolder.
   These paths are relative to THIS file, so they always resolve.
   ------------------------------------------------------------- */

@font-face {
    font-family: 'boxicons';
    font-weight: normal;
    font-style: normal;
    font-display: block;
    src: url('../../assets/fonts/boxicons.woff2') format('woff2'),
         url('../../assets/fonts/boxicons.woff') format('woff'),
         url('../../assets/fonts/boxicons.ttf') format('truetype'),
         url('../../assets/fonts/boxicons.svg#boxicons') format('svg');
}

@font-face {
    font-family: 'LineIcons';
    font-weight: normal;
    font-style: normal;
    font-display: block;
    src: url('../../assets/fonts/LineIcons.woff2') format('woff2'),
         url('../../assets/fonts/LineIcons.woff') format('woff');
}

/* -------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------- */

:root {
    --dx-canvas:      #f4f5f7;
    --dx-surface:     #ffffff;
    --dx-line:        #dfe3e8;
    --dx-line-soft:   #edf0f3;
    --dx-ink:         #212b36;
    --dx-ink-soft:    #5a6572;
    --dx-ink-faint:   #8b95a1;

    --dx-primary:     #2c7be5;
    --dx-primary-dk:  #1f63c4;
    --dx-primary-sf:  #e8f1fd;

    --dx-success:     #1a7f52;
    --dx-success-sf:  #e7f4ed;
    --dx-danger:      #c0392b;
    --dx-danger-sf:   #fceceb;
    --dx-warning:     #8a6100;
    --dx-warning-sf:  #fdf4e0;

    /* dark rail */
    --dx-rail:        #212a35;
    --dx-rail-hi:     #2c3644;
    --dx-rail-line:   #2e3947;
    --dx-rail-ink:    #c3ccd7;
    --dx-rail-faint:  #7e8b9a;

    --dx-r:           4px;
    --dx-r-sm:        3px;
    --dx-shadow:      none;
    --dx-shadow-pop:  0 6px 20px rgba(33, 43, 54, .14);
}

/* -------------------------------------------------------------
   3. FOUNDATIONS
   ------------------------------------------------------------- */

body {
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dx-ink);
    background: var(--dx-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.008em; color: var(--dx-ink); }

a { text-decoration: none; color: var(--dx-primary); }
a:hover { color: var(--dx-primary-dk); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6ccd4; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab2bc; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------
   4. SIDEBAR — dark rail, the biggest visual change
   ------------------------------------------------------------- */

.sidebar-wrapper {
    background: var(--dx-rail) !important;
    border-right: none;
    box-shadow: none;
}

.sidebar-header {
    background: var(--dx-rail) !important;
    border-right: none;
    border-bottom: 1px solid var(--dx-rail-line);
}

.sidebar-header .logo-text,
.sidebar-header .logo-text a {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.015em;
}

.sidebar-header .toggle-icon,
.sidebar-header i { color: var(--dx-rail-faint) !important; }
.sidebar-header .toggle-icon:hover { color: #fff !important; }

.metismenu { padding: 8px 8px 24px; }

.metismenu a {
    position: relative;
    color: var(--dx-rail-ink) !important;
    font-size: 13.5px;
    font-weight: 400;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: var(--dx-r);
    transition: background .1s ease, color .1s ease;
}

.metismenu a:hover,
.metismenu a:focus {
    background: var(--dx-rail-hi) !important;
    color: #ffffff !important;
}

.metismenu ul {
    background: transparent !important;
    border-left: 1px solid var(--dx-rail-line);
    margin-left: 22px;
    padding-left: 5px;
}

.metismenu ul a { font-size: 13px; padding: 7px 12px; color: var(--dx-rail-faint) !important; }
.metismenu ul a:hover { color: #ffffff !important; }

.metismenu li.mm-active > a,
.metismenu li > a.mm-active,
.metismenu .mm-active > a {
    background: var(--dx-rail-hi) !important;
    color: #ffffff !important;
    font-weight: 500;
}

.metismenu > li.mm-active > a::after,
.metismenu > li > a.mm-active::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dx-primary);
}

.metismenu .parent-icon i { font-size: 18px; color: var(--dx-rail-faint) !important; }
.metismenu a:hover .parent-icon i,
.metismenu .mm-active > a .parent-icon i { color: #ffffff !important; }

.metismenu ul .bx-radio-circle { font-size: 6px; opacity: .5; vertical-align: middle; }

.metismenu .menu-arrow, .metismenu .has-arrow::after { border-color: var(--dx-rail-faint); }

.sidebar-wrapper .menu-label,
.sidebar-wrapper .nav-item-header {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dx-rail-faint) !important;
    padding: 20px 14px 6px;
}

/* keep the red Logout readable on dark */
.metismenu a[href*="logout"], .metismenu .text-danger { color: #f08c84 !important; }

/* -------------------------------------------------------------
   5. TOPBAR
   ------------------------------------------------------------- */

.topbar {
    background: var(--dx-surface);
    border-bottom: 1px solid var(--dx-line);
    box-shadow: none;
}

.topbar .navbar { background: transparent; }
.topbar .nav-link { color: var(--dx-ink-soft); }
.topbar .nav-link:hover { color: var(--dx-ink); }
.topbar .nav-link i { font-size: 20px; }

.user-info .user-name { font-weight: 600; font-size: 13px; color: var(--dx-ink); }
.user-info .designattion { color: var(--dx-ink-faint); font-size: 11px; }
.user-img, .topbar .dropdown-toggle img { border-radius: 50%; }

.topbar .btn { font-weight: 500; font-size: 13px; }

/* -------------------------------------------------------------
   6. PAGE FRAME
   ------------------------------------------------------------- */

.page-content { padding: 18px 22px 40px; }

.page-breadcrumb { margin-bottom: 12px !important; padding-bottom: 0; border: none; }
.page-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12px; }
.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a { color: var(--dx-ink-faint); }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #c2c8d0; }
.page-breadcrumb .breadcrumb-item:last-child { color: var(--dx-ink-soft); font-weight: 500; }

/* -------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------- */

.card {
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    box-shadow: none;
    margin-bottom: 18px;
}

.card-header {
    background: var(--dx-surface);
    border-bottom: 1px solid var(--dx-line);
    border-radius: var(--dx-r) var(--dx-r) 0 0;
    padding: 13px 18px;
}

.card-header h5 { font-size: 13px; font-weight: 600; letter-spacing: .03em; margin: 0; }
.card-body { padding: 18px; }
.card .widgets-icons, .card .widgets-icons-2 { border-radius: var(--dx-r); }

/* -------------------------------------------------------------
   8. TABLES — dense, hairline, data first
   ------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    font-size: 13px;
    color: var(--dx-ink);
    border-color: var(--dx-line-soft);
    margin-bottom: 0;
}

.table > thead th {
    background: #f7f8f9;
    border-bottom: 1px solid var(--dx-line);
    color: var(--dx-ink-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 9px 11px;
}

.table > tbody td { padding: 9px 11px; border-color: var(--dx-line-soft); vertical-align: middle; }

.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f5f8fc; }
.table.table-bordered,
.table.table-bordered > :not(caption) > * > * { border-color: var(--dx-line-soft); }

td.text-end, th.text-end, td.bulk-num { font-variant-numeric: tabular-nums; }

.dataTables_wrapper { font-size: 13px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d3d8de;
    border-radius: var(--dx-r-sm);
    padding: 6px 10px;
}
.dataTables_wrapper .dataTables_info { color: var(--dx-ink-faint); font-size: 12px; }

/* -------------------------------------------------------------
   9. FORMS
   ------------------------------------------------------------- */

.form-control, .form-select {
    border: 1px solid #d3d8de;
    border-radius: var(--dx-r-sm);
    padding: 7px 11px;
    font-size: 13px;
    color: var(--dx-ink);
    background-color: #fff;
    transition: border-color .1s ease, box-shadow .1s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 2px rgba(44, 123, 229, .16);
}

.form-control::placeholder { color: #a9b1bb; }
.form-control:disabled, .form-control[readonly] { background: #f5f6f8; color: var(--dx-ink-soft); }

.form-label { font-size: 12px; font-weight: 500; color: var(--dx-ink-soft); margin-bottom: 4px; }
.form-text { font-size: 11px; color: var(--dx-ink-faint); }

.form-check-input { border-color: #c8cfd7; }
.form-check-input:checked { background-color: var(--dx-primary); border-color: var(--dx-primary); }
.form-check-input:focus { box-shadow: 0 0 0 2px rgba(44, 123, 229, .16); }

.input-group-text { background: #f5f6f8; border-color: #d3d8de; color: var(--dx-ink-soft); font-size: 12.5px; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d3d8de !important;
    border-radius: var(--dx-r-sm) !important;
    min-height: 36px;
}
.select2-dropdown { border-color: var(--dx-line) !important; border-radius: var(--dx-r) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--dx-primary) !important; }

/* -------------------------------------------------------------
   10. BUTTONS
   ------------------------------------------------------------- */

.btn {
    border-radius: var(--dx-r-sm);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 15px;
    transition: background .1s ease, border-color .1s ease;
}

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14.5px; }

.btn-primary { background: var(--dx-primary); border-color: var(--dx-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--dx-primary-dk); border-color: var(--dx-primary-dk); }

.btn-success { background: var(--dx-success); border-color: var(--dx-success); }
.btn-success:hover { background: #166b45; border-color: #166b45; }

.btn-danger { background: var(--dx-danger); border-color: var(--dx-danger); }
.btn-danger:hover { background: #a63125; border-color: #a63125; }

.btn-secondary { background: #fff; border-color: #d3d8de; color: var(--dx-ink-soft); }
.btn-secondary:hover { background: #f2f4f6; border-color: #c3cad2; color: var(--dx-ink); }

.btn-outline-primary { border-color: #b6d1f6; color: var(--dx-primary-dk); }
.btn-outline-primary:hover { background: var(--dx-primary); border-color: var(--dx-primary); color: #fff; }

.btn-outline-secondary { border-color: #d3d8de; color: var(--dx-ink-soft); }
.btn-outline-secondary:hover { background: #f2f4f6; border-color: #c3cad2; color: var(--dx-ink); }

.btn i { vertical-align: middle; }

/* -------------------------------------------------------------
   11. FEEDBACK
   ------------------------------------------------------------- */

.alert { border: 1px solid transparent; border-radius: var(--dx-r); font-size: 13px; padding: 11px 14px; }
.alert-success { background: var(--dx-success-sf); border-color: #bfe0d0; color: #14603e; }
.alert-danger  { background: var(--dx-danger-sf);  border-color: #f2c4c0; color: #8f2a1f; }
.alert-warning { background: var(--dx-warning-sf); border-color: #eddaa6; color: #6f4e00; }
.alert-info    { background: var(--dx-primary-sf); border-color: #c0d9f8; color: var(--dx-primary-dk); }

.badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.badge.bg-success { background: var(--dx-success-sf) !important; color: #14603e; }
.badge.bg-danger  { background: var(--dx-danger-sf)  !important; color: #8f2a1f; }
.badge.bg-warning { background: var(--dx-warning-sf) !important; color: #6f4e00; }
.badge.bg-primary { background: var(--dx-primary-sf) !important; color: var(--dx-primary-dk); }

/* -------------------------------------------------------------
   12. OVERLAYS
   ------------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    box-shadow: var(--dx-shadow-pop);
    font-size: 13px;
    padding: 5px;
}
.dropdown-item { border-radius: var(--dx-r-sm); padding: 6px 11px; }
.dropdown-item:hover { background: var(--dx-line-soft); }
.dropdown-divider { border-color: var(--dx-line-soft); }

.modal-content { border: none; border-radius: var(--dx-r); box-shadow: var(--dx-shadow-pop); }
.modal-header, .modal-footer { border-color: var(--dx-line); padding: 14px 18px; }
.modal-body { padding: 18px; }

.nav-tabs { border-bottom: 1px solid var(--dx-line); }
.nav-tabs .nav-link { border: none; color: var(--dx-ink-soft); font-size: 13px; font-weight: 500; padding: 9px 13px; }
.nav-tabs .nav-link.active { color: var(--dx-primary-dk); border-bottom: 2px solid var(--dx-primary); background: transparent; }

.pagination { font-size: 13px; }
.page-link { border-color: var(--dx-line); color: var(--dx-ink-soft); }
.page-link:hover { background: var(--dx-line-soft); }
.page-item.active .page-link { background: var(--dx-primary); border-color: var(--dx-primary); }

hr { border-color: var(--dx-line); opacity: 1; }
.text-muted { color: var(--dx-ink-faint) !important; }

.section-authentication-signin .card { box-shadow: var(--dx-shadow-pop); border: 1px solid var(--dx-line); }

/* -------------------------------------------------------------
   13. DASHBOARD TILES — number first, icon second
   ------------------------------------------------------------- */

.card .widgets-icons-2 { width: 40px !important; height: 40px !important; font-size: 20px !important; opacity: .9; }
.card h4, .card .h4 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card p.mb-0, .card .text-secondary { font-size: 12.5px; color: var(--dx-ink-soft); }

/* -------------------------------------------------------------
   14. DARK MODE
   ------------------------------------------------------------- */

html.dark-theme {
    --dx-canvas:     #14181d;
    --dx-surface:    #1b2027;
    --dx-line:       #2a313a;
    --dx-line-soft:  #232931;
    --dx-ink:        #e6eaef;
    --dx-ink-soft:   #a3adb9;
    --dx-ink-faint:  #78828f;
    --dx-primary-sf: #1a2941;
    --dx-rail:       #12161b;
    --dx-rail-hi:    #1f262f;
    --dx-rail-line:  #232a33;
}

html.dark-theme .table > thead th { background: #202730; }
html.dark-theme .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #202730; }
html.dark-theme .form-control,
html.dark-theme .form-select { background-color: #181d23; border-color: #2d343d; color: var(--dx-ink); }
html.dark-theme .btn-secondary { background: #202730; border-color: #313943; color: var(--dx-ink-soft); }
html.dark-theme .input-group-text { background: #202730; border-color: #2d343d; }

/* -------------------------------------------------------------
   15. SMALL SCREENS
   ------------------------------------------------------------- */

@media (max-width: 991px) {
    .page-content { padding: 14px 12px 30px; }
    .card-header, .card-body { padding-left: 14px; padding-right: 14px; }
    .table { font-size: 12.5px; }
}

/* =============================================================
   16. POS SCREEN
   Scoped to .page-wrapper-1, which only the POS page uses,
   so none of this can reach the rest of the app.
   ============================================================= */

/* --- fill the screen instead of stopping halfway down --- */

.page-wrapper-1 #itemsGridContainer {
    height: calc(100vh - 265px);
    min-height: 300px;
    padding-right: 4px;
}

.page-wrapper-1 .table-responsive {
    height: calc(100vh - 610px);
    min-height: 220px;
}

/* --- product tiles: bigger targets, clearer price --- */

.page-wrapper-1 #itemsGrid { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

.page-wrapper-1 .item-card {
    border: 1px solid var(--dx-line) !important;
    border-radius: var(--dx-r);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}

.page-wrapper-1 .item-card:hover {
    border-color: var(--dx-primary) !important;
    box-shadow: 0 4px 14px rgba(31, 111, 235, .16);
}

.page-wrapper-1 .item-card:active { transform: scale(.985); }

.page-wrapper-1 .item-card .card-img-top {
    height: 118px;
    object-fit: contain;
    background: #f6f8fa;
    padding: 6px;
}

.page-wrapper-1 .item-card .card-body { padding: 9px 10px 11px; }

.page-wrapper-1 .item-card .card-title {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dx-ink);
    margin-bottom: 4px;
    /* two lines, then trail off - stops long names blowing the tile up */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}

.page-wrapper-1 .item-price {
    font-size: 15px !important;
    font-weight: 700;
    color: var(--dx-ink);
    margin: 0;
}

.page-wrapper-1 .item-quantity {
    left: 6px;
    bottom: 6px;
    background: rgba(17, 24, 33, .78);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

/* the add overlay was hover-only, which never fires on a touch till */
.page-wrapper-1 .item-card .add-item { background: rgba(17, 24, 33, .42) !important; }

.page-wrapper-1 .item-card:focus-within .add-item,
.page-wrapper-1 .item-card:active .add-item { display: flex !important; }

.page-wrapper-1 .item-card .add-item .btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

@media (hover: none) {
    /* touch screens: a permanent corner button instead of an overlay */
    .page-wrapper-1 .item-card .add-item {
        display: flex !important;
        background: transparent !important;
        top: auto !important;
        left: auto !important;
        right: 6px;
        bottom: 6px;
        width: auto !important;
        height: auto !important;
    }
    .page-wrapper-1 .item-card .add-item .btn { width: 40px; height: 40px; font-size: 20px; }
}

/* --- cart --- */

.page-wrapper-1 #invoiceItemsTable thead th {
    background: #f8fafc;
    font-size: 10.5px;
    letter-spacing: .05em;
    padding: 9px 8px;
    border-bottom: 1px solid var(--dx-line);
}

.page-wrapper-1 #invoiceItemsTable td { padding: 7px 8px; vertical-align: middle; }
.page-wrapper-1 #invoiceItemsTable tbody tr:hover { background: #f6f9fd; }
.page-wrapper-1 #invoiceItemsTable .form-control { padding: 5px 8px; font-size: 13px; }

/* --- the running totals strip --- */

.page-wrapper-1 .sum_of_quantity,
.page-wrapper-1 .sum_of_discount,
.page-wrapper-1 .sum_of_tax,
.page-wrapper-1 .sum_of_total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dx-ink);
}

/* --- the number that actually matters --- */

.page-wrapper-1 .grand_total {
    font-size: 21px !important;
    font-weight: 700 !important;
    height: auto;
    padding: 8px 12px;
    color: var(--dx-primary-dk);
    background: var(--dx-primary-sf) !important;
    border-color: #bad3fb !important;
    font-variant-numeric: tabular-nums;
}

.page-wrapper-1 input[readonly].text-end,
.page-wrapper-1 .form-control.text-end { font-variant-numeric: tabular-nums; }

/* change-due, second most important number on the screen */
.page-wrapper-1 #change_return,
.page-wrapper-1 .change_return { font-size: 20px; font-weight: 700; }

/* --- bottom action bar --- */

.page-wrapper-1 ~ .fixed-bottom,
.fixed-bottom.border-top {
    border-top: 1px solid var(--dx-line) !important;
    box-shadow: 0 -2px 10px rgba(18, 25, 38, .06) !important;
    padding: 10px 16px !important;
}

.fixed-bottom.border-top .btn {
    min-width: 112px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
}

.fixed-bottom.border-top #submit_form,
.fixed-bottom.border-top #submit_form_with_print { min-width: 148px; }

/* --- the keyboard-shortcut strip --- */

.page-wrapper-1 kbd, .fixed-bottom kbd {
    background: #eef1f5;
    color: var(--dx-ink-soft);
    border-radius: 4px;
    font-size: 10.5px;
    padding: 2px 6px;
    box-shadow: none;
}

/* --- top filter row: tighter, so the grid gets the room --- */

.page-wrapper-1 .select2-container--default .select2-selection--single { min-height: 40px; }
.page-wrapper-1 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; }

/* barcode box is the most-used field on the screen */
.page-wrapper-1 #search_item,
.page-wrapper-1 input[placeholder*="Barcode"] {
    font-size: 15px;
    padding: 10px 14px;
}

@media (max-width: 1199px) {
    .page-wrapper-1 #itemsGridContainer { height: calc(100vh - 300px); }
    .page-wrapper-1 .table-responsive { height: 260px; }
}

/* =============================================================
   17. NEW HEADER — global search, single New menu
   Needs the rebuilt header.blade.php.
   ============================================================= */

.topbar .navbar { padding-left: 1rem; padding-right: 0; }

/* --- global search --- */

.dx-search { position: relative; flex: 0 1 420px; min-width: 220px; }

.dx-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--dx-ink-faint);
    pointer-events: none;
}

.dx-search-input {
    height: 36px;
    padding: 0 34px 0 34px;
    font-size: 13px;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: var(--dx-r);
}

.dx-search-input:focus {
    background: #fff;
    border-color: var(--dx-primary);
    box-shadow: 0 0 0 2px rgba(44, 123, 229, .16);
}

.dx-search-kbd {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--dx-ink-faint);
    background: #fff;
    border: 1px solid var(--dx-line);
    border-radius: 3px;
    padding: 1px 6px;
    pointer-events: none;
}

.dx-search-input:focus ~ .dx-search-kbd { display: none; }

.dx-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    box-shadow: var(--dx-shadow-pop);
    padding: 4px;
    z-index: 1050;
}

.dx-search-results.show { display: block; }

.dx-search-item {
    display: block;
    padding: 7px 10px;
    border-radius: var(--dx-r-sm);
    color: var(--dx-ink);
    font-size: 13px;
    line-height: 1.35;
}

.dx-search-item:hover,
.dx-search-item.active { background: var(--dx-primary-sf); color: var(--dx-primary-dk); }

.dx-search-group {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dx-ink-faint);
    margin-bottom: 1px;
}

.dx-search-item.active .dx-search-group { color: var(--dx-primary); }

.dx-search-label { font-weight: 500; }

.dx-search-empty { padding: 14px; text-align: center; color: var(--dx-ink-faint); font-size: 12.5px; }

/* --- the New menu --- */

.dx-new .btn { height: 34px; font-weight: 500; }
.dx-new .btn i { font-size: 17px; }
.dx-new-menu { min-width: 210px; }
.dx-new-menu .dropdown-item { padding: 8px 11px; font-size: 13px; }

/* --- user box --- */

.user-box { border-left: 1px solid var(--dx-line); margin-left: 4px; }
.user-box .user-img { width: 34px; height: 34px; }

/* --- dark mode --- */

html.dark-theme .dx-search-input { background: #202730; color: var(--dx-ink); }
html.dark-theme .dx-search-input:focus { background: #181d23; }
html.dark-theme .dx-search-kbd { background: #181d23; border-color: #2d343d; }
html.dark-theme .dx-search-results { background: #1b2027; border-color: var(--dx-line); }
html.dark-theme .dx-search-item { color: var(--dx-ink); }
html.dark-theme .user-box { border-left-color: var(--dx-line); }

@media (max-width: 767px) {
    .dx-search { display: none !important; }
}

/* =============================================================
   18. PAGE ANATOMY — the Zoho page pattern
   Used by rebuilt pages via .dx-page. Old pages ignore it.
   ============================================================= */

/* --- header band: title + breadcrumb left, actions right --- */

.dx-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.dx-page-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.012em;
    margin: 0 0 2px;
}

.dx-page-head .page-breadcrumb { margin-bottom: 0 !important; }
.dx-page-head .page-breadcrumb .breadcrumb { font-size: 11.5px; }

.dx-page-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- collapsible filter strip --- */

.dx-filter-bar {
    display: none;
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.dx-filter-bar.open { display: block; }

#dxFilterToggle.active {
    background: var(--dx-primary-sf);
    border-color: #b6d1f6;
    color: var(--dx-primary-dk);
}

.dx-filter-count {
    display: inline-block;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    margin-left: 5px;
    border-radius: 9px;
    background: var(--dx-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

/* --- the list panel: table flush against its frame --- */

.dx-list-panel {
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    overflow: hidden;
}

.dx-list-panel form { margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.dx-list-panel .table-responsive { margin: 0; }
.dx-list-panel .table { border: none !important; }
.dx-list-panel .table > :not(caption) > * > *:first-child { border-left: none; }
.dx-list-panel .table > :not(caption) > * > *:last-child { border-right: none; }
.dx-list-panel .table > thead th { border-top: none; }

/* DataTables chrome inside the panel: search box and buttons get a toolbar row */
.dx-list-panel .dataTables_wrapper > .row:first-child {
    padding: 10px 14px;
    margin: 0;
    border-bottom: 1px solid var(--dx-line-soft);
    align-items: center;
}

.dx-list-panel .dataTables_wrapper > .row:last-child {
    padding: 8px 14px;
    margin: 0;
    border-top: 1px solid var(--dx-line-soft);
    align-items: center;
}

.dx-list-panel .dataTables_filter { text-align: left; }
.dx-list-panel .dataTables_filter label { width: 100%; }

.dx-list-panel .dataTables_filter input {
    width: 260px;
    max-width: 100%;
    background: #f4f5f7;
    border-color: transparent;
}

.dx-list-panel .dataTables_filter input:focus {
    background: #fff;
    border-color: var(--dx-primary);
}

.dx-list-panel .dt-buttons .btn,
.dx-list-panel .dt-buttons button {
    background: #fff;
    border: 1px solid #d3d8de;
    color: var(--dx-ink-soft);
    font-size: 12.5px;
    padding: 5px 11px;
    border-radius: var(--dx-r-sm);
    margin-left: 5px;
}

.dx-list-panel .dt-buttons .btn:hover,
.dx-list-panel .dt-buttons button:hover {
    background: #f2f4f6;
    color: var(--dx-ink);
}

@media (max-width: 767px) {
    .dx-page-title { font-size: 17px; }
    .dx-list-panel .dataTables_filter input { width: 100%; }
}

/* =============================================================
   19. POLISH PASS — the details that read as unfinished
   ============================================================= */

/* --- FIX: any sidebar link that kept a light background on the
   dark rail (Clear Cache was the visible one). Active/hover rules
   above use !important, so they still win. --- */

.sidebar-wrapper a,
.sidebar-wrapper .nav-link,
.sidebar-wrapper li {
    background-color: transparent;
    color: var(--dx-rail-ink);
}

.sidebar-wrapper .metismenu a:hover { background: var(--dx-rail-hi) !important; }

/* the logo strip: stop the broken no-image placeholder glaring white */
.sidebar-header img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    opacity: .9;
}

/* --- dashboard tiles: drop the coloured side stripes and calm
   the gradient circles. The number is the point. --- */

.card.border-start,
.card[class*="border-3"] {
    border-left: 1px solid var(--dx-line) !important;
}

.card .widgets-icons,
.card .widgets-icons-2 {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    filter: saturate(.65);
    opacity: .9;
}

/* the coloured metric text (red 0.00, orange 0.00) reads as alarm
   even when nothing is wrong — pull it back toward ink */
.card h4.text-danger, .card .text-danger h4 { color: var(--dx-ink) !important; }
.card h4.text-warning, .card .text-warning h4 { color: var(--dx-ink) !important; }

/* --- chart card headers match the rest of the app --- */

.card h6, .card .card-title { font-size: 13.5px; font-weight: 600; }

/* --- Recent Invoices links: quiet until hovered --- */

.card td a { color: var(--dx-ink); }
.card td a:hover { color: var(--dx-primary); }

/* =============================================================
   20. EXACT-MATCH FIXES — written against the real markup
   ============================================================= */

/* Clear Cache carries Bootstrap's bg-light (!important) — outrank it */
.sidebar-wrapper .bg-light,
.sidebar-wrapper li.bg-light,
.sidebar-wrapper .bg-white {
    background-color: transparent !important;
}

/* tiles use border-start border-0 border-4 border-{color} — kill the stripe */
.card.border-start.border-4,
.card.radius-10.border-start {
    border: 1px solid var(--dx-line) !important;
}

/* radius-10 fights the 4px corner system */
.card.radius-10 { border-radius: var(--dx-r) !important; }

/* the gradient circles: bg-gradient-* classes, all of them */
.widgets-icons-2.rounded-circle,
.widgets-icons-2[class*="bg-gradient"] {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    filter: saturate(.6);
    opacity: .85;
}

/* metric numbers coloured as alarms */
h4.text-danger, h4.text-warning { color: var(--dx-ink) !important; }

/* =============================================================
   21. DASHBOARD ANATOMY — stat strip and panel headers
   ============================================================= */

.dx-page-sub { font-size: 12px; color: var(--dx-ink-faint); margin-top: 1px; }

.dx-stat {
    display: block;
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-r);
    padding: 14px 16px 12px;
    color: var(--dx-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
    height: 100%;
}

.dx-stat:hover {
    border-color: var(--dx-primary);
    box-shadow: 0 3px 12px rgba(44, 123, 229, .12);
    color: var(--dx-ink);
}

.dx-stat-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--dx-ink-soft);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.dx-stat-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dx-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--dx-primary-sf);
    color: var(--dx-primary-dk);
    flex: 0 0 auto;
}

.dx-i-green { background: var(--dx-success-sf); color: var(--dx-success); }
.dx-i-red   { background: var(--dx-danger-sf);  color: var(--dx-danger); }
.dx-i-amber { background: var(--dx-warning-sf); color: var(--dx-warning); }

/* panel header used by dashboard tables */
.dx-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dx-line-soft);
}

.dx-panel-head h6 { font-size: 13px; font-weight: 600; }

/* chart legend chips */
.dx-legend { display: inline-flex; align-items: center; gap: 5px; color: var(--dx-ink-soft); font-size: 12px; }
.dx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* dark mode */
html.dark-theme .dx-stat { background: var(--dx-surface); border-color: var(--dx-line); color: var(--dx-ink); }

/* =============================================================
   22. FIX — the "Show N entries" select was too tight, so its
   arrow sat on top of the number
   ============================================================= */

.dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 68px;
    padding: 6px 28px 6px 12px;
    background-position: right 9px center;
    appearance: auto;
}

/* one arrow, not two: keep the native arrow, drop Bootstrap's painted one */
.dataTables_wrapper .dataTables_length select {
    background-image: none !important;
}

/* pagination arrows must never be giant: cap any svg inside page nav */
.dx-page nav svg, .page-content nav svg { width: 18px; height: 18px; }

/* =============================================================
   23. POS CART — money lines up
   Columns are tagged .dx-num by delta-pos-merge.js, working off
   header text, so hidden columns can never shift the alignment.
   ============================================================= */

#invoiceItemsTable th.dx-num { text-align: right; padding-right: 12px; }

#invoiceItemsTable td.dx-num,
#invoiceItemsTable td.dx-num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* keep the qty badge and unit chip from being dragged right */
#invoiceItemsTable td.dx-num .badge { float: none; display: inline-block; margin-top: 3px; }

/* sensible widths: the item name gets the room, numbers stay compact */
#invoiceItemsTable th, #invoiceItemsTable td { padding: 7px 8px; vertical-align: top; }
#invoiceItemsTable td.dx-num input { max-width: 110px; margin-left: auto; }
#invoiceItemsTable input, #invoiceItemsTable select, #invoiceItemsTable textarea { font-size: 12.5px; padding: 5px 8px; }
#invoiceItemsTable textarea { min-height: 30px; }

/* the item cell is the anchor of the row - give it weight */
#invoiceItemsTable td:nth-child(2) label { font-weight: 600; font-size: 12.5px; }

/* headers: quiet, uppercase, aligned with their data */
#invoiceItemsTable thead th {
    font-size: 10.5px;
    letter-spacing: .05em;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: nowrap;
}

/* the delete button should not dominate the row */
#invoiceItemsTable td:first-child .btn,
#invoiceItemsTable td:first-child button { padding: 4px 9px; }

/* the % and unit suffix boxes sit tight against their number */
#invoiceItemsTable td.dx-num .input-group-text { padding: 4px 7px; font-size: 11.5px; }

/* =============================================================
   24. FIX — section 23 squeezed the cart fields.
   Numbers were being cut off and the Tax/Unit dropdown arrows
   sat on top of their own text. Give the fields room back;
   keep only the alignment.
   ============================================================= */

/* no width cap: let a value be as wide as it needs to be */
#invoiceItemsTable td.dx-num input {
    max-width: none;
    min-width: 78px;
    width: 100%;
}

/* selects need clear space for their arrow, or it lands on the text */
#invoiceItemsTable select,
#invoiceItemsTable td select {
    min-width: 82px;
    padding-right: 26px;
    background-position: right 7px center;
    text-overflow: ellipsis;
}

/* breathing room back in the cells */
#invoiceItemsTable th,
#invoiceItemsTable td { padding: 7px 10px; }

#invoiceItemsTable input,
#invoiceItemsTable select,
#invoiceItemsTable textarea { font-size: 13px; padding: 6px 9px; }

/* the money columns should never wrap or clip */
#invoiceItemsTable td.dx-num,
#invoiceItemsTable th.dx-num { white-space: nowrap; }

/* the discount % suffix stays beside its number rather than under it */
#invoiceItemsTable td.dx-num .input-group { flex-wrap: nowrap; }

/* =============================================================
   25. FLOATING AI ASSISTANT
   ============================================================= */

.dx-ai-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--dx-primary);
    color: #fff;
    font-size: 27px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(44, 123, 229, .38);
    cursor: pointer;
    z-index: 1080;
    transition: transform .14s ease, background .14s ease;
}

.dx-ai-fab:hover { background: var(--dx-primary-dk); transform: translateY(-2px); }
.dx-ai-fab.active { background: var(--dx-ink); box-shadow: 0 6px 20px rgba(33, 43, 54, .3); }

.dx-ai-panel {
    position: fixed;
    right: 22px;
    bottom: 86px;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 540px;
    max-height: calc(100vh - 130px);
    background: var(--dx-surface);
    border: 1px solid var(--dx-line);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(18, 25, 38, .2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1080;
}

.dx-ai-panel.show { display: flex; }

.dx-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dx-line);
    font-size: 13.5px;
    font-weight: 600;
    flex: 0 0 auto;
}

.dx-ai-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12b76a;
    margin-right: 5px;
    vertical-align: middle;
}

.dx-ai-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--dx-ink-faint);
    cursor: pointer;
    padding: 0 4px;
}

.dx-ai-close:hover { color: var(--dx-ink); }

.dx-ai-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}

.dx-ai-intro p { font-size: 12.5px; color: var(--dx-ink-soft); margin-bottom: 10px; }

.dx-ai-chip {
    display: inline-block;
    background: #f2f4f6;
    border: 1px solid var(--dx-line);
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 12px;
    margin: 0 5px 5px 0;
    cursor: pointer;
}

.dx-ai-chip:hover { background: var(--dx-primary-sf); border-color: #b6d1f6; color: var(--dx-primary-dk); }

.dx-ai-turn { margin-bottom: 16px; }

.dx-ai-q {
    background: var(--dx-primary);
    color: #fff;
    font-size: 12.5px;
    padding: 8px 12px;
    border-radius: 12px 12px 3px 12px;
    margin-left: auto;
    max-width: 85%;
    width: fit-content;
    margin-bottom: 8px;
}

.dx-ai-a {
    background: #f7f8f9;
    border-radius: 12px 12px 12px 3px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.55;
}

.dx-ai-busy { color: var(--dx-ink-faint); }
.dx-ai-text { white-space: pre-wrap; }

.dx-ai-tablewrap { max-height: 230px; overflow: auto; margin-top: 10px; border: 1px solid var(--dx-line); border-radius: 5px; background: #fff; }

.dx-ai-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dx-ai-table th {
    position: sticky;
    top: 0;
    background: #f7f8f9;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dx-ink-soft);
    padding: 6px 8px;
    border-bottom: 1px solid var(--dx-line);
    white-space: nowrap;
}
.dx-ai-table td { padding: 5px 8px; border-bottom: 1px solid #f2f4f6; white-space: nowrap; }
.dx-ai-table td.num, .dx-ai-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.dx-ai-more { font-size: 10.5px; color: var(--dx-ink-faint); margin-top: 5px; }

.dx-ai-dl {
    margin-top: 9px;
    background: #fff;
    border: 1px solid #d3d8de;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 11px;
    color: var(--dx-ink-soft);
    cursor: pointer;
}

.dx-ai-dl:hover { background: var(--dx-primary-sf); border-color: #b6d1f6; color: var(--dx-primary-dk); }

.dx-ai-foot {
    display: flex;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--dx-line);
    flex: 0 0 auto;
}

.dx-ai-input {
    flex: 1 1 auto;
    border: 1px solid #d3d8de;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12.5px;
    outline: none;
}

.dx-ai-input:focus { border-color: var(--dx-primary); box-shadow: 0 0 0 2px rgba(44, 123, 229, .14); }

.dx-ai-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--dx-primary);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex: 0 0 auto;
}

.dx-ai-send:hover { background: var(--dx-primary-dk); }

html.dark-theme .dx-ai-a { background: #21262e; }
html.dark-theme .dx-ai-chip { background: #21262e; }
html.dark-theme .dx-ai-tablewrap { background: var(--dx-surface); }
html.dark-theme .dx-ai-table th { background: #21262e; }
html.dark-theme .dx-ai-input { background: #191d23; color: var(--dx-ink); border-color: #2e343d; }
html.dark-theme .dx-ai-dl { background: #21262e; border-color: #323945; color: var(--dx-ink-soft); }

@media (max-width: 575px) {
    .dx-ai-panel { right: 10px; left: 10px; width: auto; bottom: 78px; height: calc(100vh - 150px); }
    .dx-ai-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; font-size: 24px; }
}

@media print {
    .dx-ai-fab, .dx-ai-panel { display: none !important; }
}