/* =========================================================================
   ERP Phone Spare Parts — Dashboard Theme (client-customization design pass)
   Layered ON TOP of Tabler RTL. Touching this file is the only way to change
   the global chrome look. Do not edit Tabler core files.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

/* Inter — applied dashboard-wide as the primary font. Inter has no Arabic
   glyphs, so IBM Plex Sans Arabic stays in the stack as the per-character
   fallback (browsers auto-pick Arabic glyphs from it). Overrides Tabler's
   default Inter Var and fonts-rtl.css's Droid Arabic Kufi since
   erp-theme.css loads last. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --tblr-font-sans-serif: 'Inter', 'IBM Plex Sans Arabic', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tblr-body-font-family: 'Inter', 'IBM Plex Sans Arabic', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family:   'Inter', 'IBM Plex Sans Arabic', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html, body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, button, input, select, textarea, label, table, td, th,
.nav-link, .nav-link-title, .card-title, .page-title, .form-control, .form-select,
.btn, .badge, .alert, .breadcrumb, .erp-breadcrumb {
    font-family: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

:root {
    /* Brand */
    --erp-primary:        #1e4ed8;   /* deep blue used on header + active states */
    --erp-primary-600:    #1a3fb0;
    --erp-primary-50:     #eef3fe;
    --erp-accent:         #4f7eea;

    /* Surface */
    --erp-bg:             #f4f6fb;   /* page background */
    --erp-card:           #ffffff;
    --erp-sidebar-bg:     #ffffff;
    --erp-sidebar-border: #e9ecef;
    --erp-header-bg:      #00226a;   /* deep navy top bar */

    /* Text */
    --erp-text:           #1d2536;
    --erp-text-muted:     #6c7689;
    --erp-text-on-dark:   #ffffff;

    /* Status */
    --erp-success:        #1bb978;
    --erp-success-bg:     #dcf6e9;
    --erp-danger:         #e7424d;
    --erp-danger-bg:      #fde2e4;
    --erp-warning:        #f59f00;
    --erp-warning-bg:     #fff3cd;

    /* Tabler token overrides */
    --tblr-primary:       var(--erp-primary);
    --tblr-primary-rgb:   30, 78, 216;
    --tblr-link-color:    var(--erp-primary);
    --tblr-body-bg:       var(--erp-bg);
    --tblr-font-sans-serif: 'Tajawal', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* -------------------------------------------------------------------------
   Global
   ------------------------------------------------------------------------- */
html, body { background: var(--erp-bg); }
body {
    font-family: 'Tajawal', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
    color: var(--erp-text);
}
.page-title { font-weight: 700; }
.text-muted { color: var(--erp-text-muted) !important; }
a { color: var(--erp-primary); }

/* -------------------------------------------------------------------------
   Header (top bar — deep blue, FULL-WIDTH across the top, above the sidebar)
   ------------------------------------------------------------------------- */
.erp-header {
    background: var(--erp-header-bg);
    color: var(--erp-text-on-dark);
    height: 64px;
    padding: 0 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050; /* > sidebar so the header always covers it visually at the very top */
}
.erp-header .erp-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.erp-header .erp-brand img { height: 48px; width: auto; object-fit: contain; }
.erp-header .erp-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: none;
    position: relative;
    transition: background .15s ease;
}
.erp-header .erp-icon-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.erp-header .erp-icon-btn .badge {
    position: absolute; top: -4px; left: -4px;
    background: #ff5252; color: #fff;
    border: 2px solid var(--erp-header-bg);
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: .65rem; line-height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.erp-header .erp-profile {
    display: flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,0.08);
    padding: .25rem .75rem .25rem .25rem;
    border-radius: 999px;
    color: #fff; text-decoration: none;
}
.erp-header .erp-profile:hover { background: rgba(255,255,255,0.15); color: #fff; }
.erp-header .erp-profile .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background-color: #fff;
    background-size: cover; background-position: center;
}
.erp-header .erp-profile .erp-profile-name { font-weight: 700; line-height: 1.1; }
.erp-header .erp-profile .erp-profile-role { font-size: .72rem; opacity: .8; line-height: 1; }

/* -------------------------------------------------------------------------
   Sidebar (right side in RTL, white, starts BELOW the fixed header)
   ------------------------------------------------------------------------- */
.navbar.navbar-vertical.erp-sidebar {
    background: var(--erp-sidebar-bg) !important;
    border-left: 1px solid var(--erp-sidebar-border);
    box-shadow: none;
    padding-top: .75rem;
    top: 64px !important;                          /* start below the header */
    height: calc(100vh - 64px) !important;         /* fill the remaining viewport */
    overflow-y: auto;                              /* long nav scrolls instead of clipping */
    z-index: 1030;
}

/* Push every page's main content area below the fixed header */
.page-wrapper { padding-top: 64px; }
.page-header  { padding-top: 1rem !important; }
.erp-sidebar .navbar-brand { display: none; }    /* logo lives in top header now */
.erp-sidebar .navbar-nav { padding: 0 .5rem; }
.erp-sidebar .nav-item {
    margin: 2px 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    transform: none !important;
}
.erp-sidebar .nav-link {
    color: var(--erp-text) !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    font-weight: 500;
    display: flex; align-items: center;
    width: 100%;                       /* full-width row, no shrink-to-content */
}
.erp-sidebar .nav-item    { width: 100%; }
.erp-sidebar .nav-link .nav-link-title {
    flex: 1 1 auto;                    /* text grows to fill */
    min-width: 0;
    text-align: start;
}
.erp-sidebar .nav-link .nav-link-icon  {
    flex: 0 0 24px;                    /* fixed-width icon column → every icon at the same x */
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: .75rem;       /* small gap from the text */
    color: var(--erp-text-muted);
}
.erp-sidebar .nav-link .nav-link-icon svg { width: 22px; height: 22px; }

/* Chevron on collapsible parents (البيانات الأساسية) — lives inside .nav-link-icon
   so it lands in the same fixed-width column as every other sidebar icon. */
.erp-sidebar .erp-dropdown-toggle .erp-chevron {
    transition: transform .2s ease;
}
.erp-sidebar .erp-dropdown-toggle[aria-expanded="true"] .erp-chevron {
    transform: rotate(180deg);
}
.erp-sidebar .nav-link .nav-link-icon { color: var(--erp-text-muted); }
.erp-sidebar .nav-link:hover { background: var(--erp-primary-50); color: var(--erp-primary) !important; }
.erp-sidebar .nav-link:hover .nav-link-icon { color: var(--erp-primary); }
.erp-sidebar .nav-item.active > .nav-link,
.erp-sidebar .nav-link.active {
    background: var(--erp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(30, 78, 216, .25);
}
.erp-sidebar .nav-item.active > .nav-link .nav-link-icon,
.erp-sidebar .nav-link.active .nav-link-icon { color: #fff; }

/* Section heading */
.erp-sidebar .nav-section {
    padding: 14px 14px 6px;
    font-size: .72rem;
    color: var(--erp-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Inline sub-group (collapsible parent: البيانات الأساسية) */
.erp-sidebar .erp-subnav {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.erp-sidebar .erp-subnav .nav-link {
    padding: 8px 14px 8px 28px !important;     /* extra start-padding to indent under the parent text */
    font-weight: 400;
    font-size: .92rem;
    border-radius: 8px;
    color: var(--erp-text-muted) !important;
}
.erp-sidebar .erp-subnav .nav-link:hover {
    background: var(--erp-primary-50);
    color: var(--erp-primary) !important;
}
.erp-sidebar .erp-subnav .nav-link.active {
    background: var(--erp-primary-50) !important;
    color: var(--erp-primary) !important;
    box-shadow: none;
}

/* Disable Tabler's hover translate / glow animations to match the screenshot's calmer look */
.erp-sidebar .nav-item:hover { transform: none !important; }
.erp-sidebar .nav-link::before { display: none !important; }
.erp-sidebar .nav-link-icon { animation: none !important; }

/* -------------------------------------------------------------------------
   Page surface
   ------------------------------------------------------------------------- */
.page-wrapper { background: var(--erp-bg); }
.page-header {
    background: transparent;
    padding-top: 1.5rem;
}
.page-header .page-title { font-size: 1.6rem; }
.page-header .page-subtitle { color: var(--erp-text-muted); margin-top: .25rem; }

/* Breadcrumb */
.erp-breadcrumb {
    color: var(--erp-text-muted);
    font-size: .85rem;
    margin-bottom: .4rem;
}
.erp-breadcrumb a { color: var(--erp-text-muted); text-decoration: none; }
.erp-breadcrumb a:hover { color: var(--erp-primary); }
.erp-breadcrumb .sep { margin: 0 6px; }

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--erp-sidebar-border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 25, 45, .04);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--erp-sidebar-border);
    padding: 1rem 1.25rem;
}
.card-header .card-title {
    color: var(--erp-text);
    font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
    margin: 0;
}
.card-footer {
    background: transparent;
    border-top: 1px solid var(--erp-sidebar-border);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-primary {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    border-radius: 10px;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--erp-primary-600);
    border-color: var(--erp-primary-600);
}
.btn-outline-primary {
    color: var(--erp-primary);
    border-color: var(--erp-primary);
    border-radius: 10px;
}
.btn-outline-primary:hover { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid #e5e9f2;
    padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 .15rem rgba(30, 78, 216, .12);
}
.form-label { font-weight: 600; color: var(--erp-text); }
.form-label.required::after { content: ' *'; color: var(--erp-danger); }

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.table { color: var(--erp-text); }
.table thead th {
    text-transform: none;
    font-weight: 700;
    font-size: .82rem;
    color: var(--erp-text-muted);
    background: #fbfcfe;
    border-bottom: 1px solid var(--erp-sidebar-border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fafbfd; }

/* -------------------------------------------------------------------------
   Status badges
   ------------------------------------------------------------------------- */
.erp-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem; font-weight: 700;
}
.erp-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.erp-badge-success { background: var(--erp-success-bg); color: var(--erp-success); }
.erp-badge-danger  { background: var(--erp-danger-bg);  color: var(--erp-danger); }
.erp-badge-warning { background: var(--erp-warning-bg); color: var(--erp-warning); }
.erp-badge-info    { background: var(--erp-primary-50); color: var(--erp-primary); }

/* -------------------------------------------------------------------------
   Modal — Tabler default tweak so corners look like the screenshot
   ------------------------------------------------------------------------- */
.modal-content { border-radius: 14px; border: 1px solid var(--erp-sidebar-border); }
.modal-header  { border-bottom-color: var(--erp-sidebar-border); padding: 1rem 1.25rem; }
.modal-footer  { border-top-color:    var(--erp-sidebar-border); padding: .85rem 1.25rem; }

/* -------------------------------------------------------------------------
   Status switch (per-row toggle in datatables)
   ------------------------------------------------------------------------- */
.form-switch .form-check-input:checked { background-color: var(--erp-success); border-color: var(--erp-success); }

/* -------------------------------------------------------------------------
   Two-column page helper used by Brand/Model/Category/Attribute
   First child gets the narrow column → on the RIGHT in RTL (form).
   Second child gets the wide column   → on the LEFT  in RTL (table).
   ------------------------------------------------------------------------- */
/* Mobile-first: stacked by default. Side-by-side only on desktop (≥992px).
   Switched from grid → flex for better mobile compatibility. */
.erp-twocol {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.erp-twocol > * {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}
@media (min-width: 992px) {
    .erp-twocol { gap: 1.25rem; }
    .erp-twocol > *:first-child  { flex: 1 1 0;   width: auto; }  /* form  ≈ 30% in RTL → right */
    .erp-twocol > *:last-child   { flex: 2.3 1 0; width: auto; }  /* table ≈ 70% in RTL → left */

    /* Balanced modifier — form needs more breathing room (multi-section forms).
       Used by suppliers + customers index pages so both pages look identical:
       form ≈ 42%, table ≈ 58%. Wide enough for a multi-section form on the
       right, narrow enough for a 9-column table on the left. */
    .erp-twocol.erp-twocol--balanced > *:first-child { flex: 1.2 1 0; }
    .erp-twocol.erp-twocol--balanced > *:last-child  { flex: 1.65 1 0; }

    /* Reverse modifier (product create/edit) — the main content column
       (basic info + attributes + images) leads WIDE on the right, while the
       secondary column (pricing + compatibilities) sits NARROW on the left.
       Without this the wide side was the near-empty pricing/compat column,
       which left a large void in the middle in variant mode. ≈ 60% / 40%. */
    .erp-twocol.erp-twocol-reverse > *:first-child { flex: 1.5 1 0; }
    .erp-twocol.erp-twocol-reverse > *:last-child  { flex: 1 1 0; }
}

/* -------------------------------------------------------------------------
   Tom Select tweak to match form-control look
   ------------------------------------------------------------------------- */
.ts-control { border-radius: 10px !important; }

/* -------------------------------------------------------------------------
   Categories page (and other base-data tables) — visual primitives
   ------------------------------------------------------------------------- */

/* Small blue circular order badge in the table */
.erp-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--erp-primary-50);
    color: var(--erp-primary);
    font-weight: 700;
    font-size: .82rem;
}

/* Ghost icon buttons used in action columns */
.btn-ghost-primary, .btn-ghost-secondary {
    background: transparent;
    border: 1px solid transparent;
    color: var(--erp-text-muted);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-ghost-primary { color: var(--erp-primary); }
.btn-ghost-primary:hover  { background: var(--erp-primary-50); color: var(--erp-primary); }
.btn-ghost-secondary:hover { background: #f1f4fa; color: var(--erp-text); }
.btn.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }

/* Styled file-upload dropzone */
.erp-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6rem 1rem;
    border: 2px dashed #cfd7e6;
    border-radius: 12px;
    background: #f7fafd;
    cursor: pointer;
    color: var(--erp-text);
    transition: border-color .2s ease, background .2s ease;
}
.erp-upload-zone:hover { border-color: var(--erp-primary); background: #f0f5ff; }
.erp-upload-zone .erp-upload-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--erp-primary-50);
    color: var(--erp-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}
.erp-upload-zone .erp-upload-icon svg { width: 22px; height: 22px; }
.erp-upload-zone .erp-upload-title { font-weight: 600; }
.erp-upload-zone .erp-upload-hint  { color: var(--erp-text-muted); font-size: .8rem; margin-top: .15rem; }
.erp-upload-zone .erp-upload-filename { margin-top: .5rem; font-size: .82rem; color: var(--erp-primary); font-weight: 600; }

/* Search box inside table card headers */
.erp-table-search {
    position: relative;
    max-width: 280px;
    flex-grow: 1;
}
.erp-table-search input {
    padding-inline-start: 2.25rem;
    border-radius: 999px;
    height: 38px;
}
.erp-table-search svg {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-start: .75rem;
    width: 16px; height: 16px;
    color: var(--erp-text-muted);
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   DataTable footer + pagination — matches the screenshot
   ------------------------------------------------------------------------- */

/* Footer row that holds page-size dropdown / info text / pagination */
.erp-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--erp-sidebar-border);
}
.erp-table-footer .dataTables_length label,
.erp-table-footer .dataTables_info,
.erp-table-footer .dataTables_paginate {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--erp-text-muted);
    font-size: .88rem;
}
.erp-table-footer .dataTables_length select {
    width: auto !important;
    min-width: 64px;
    border-radius: 8px;
    margin: 0 .5rem;
    padding: .25rem 1.75rem .25rem .5rem;
    height: 32px;
    border: 1px solid var(--erp-sidebar-border);
    background-color: #fff;
}

/* Page-number + chevron buttons */
.erp-table-footer .dataTables_paginate {
    display: flex;
    gap: .25rem;
}
.erp-table-footer .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px !important;
    border-radius: 8px !important;
    border: 1px solid var(--erp-sidebar-border) !important;
    background: #fff !important;
    color: var(--erp-text) !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
}
.erp-table-footer .dataTables_paginate .paginate_button:hover {
    background: var(--erp-primary-50) !important;
    color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}
.erp-table-footer .dataTables_paginate .paginate_button.current,
.erp-table-footer .dataTables_paginate .paginate_button.current:hover {
    background: var(--erp-primary) !important;
    color: #fff !important;
    border-color: var(--erp-primary) !important;
    box-shadow: 0 3px 10px rgba(30,78,216,.25);
}
.erp-table-footer .dataTables_paginate .paginate_button.disabled,
.erp-table-footer .dataTables_paginate .paginate_button.disabled:hover {
    background: #fff !important;
    color: #cfd6e4 !important;
    border-color: var(--erp-sidebar-border) !important;
    cursor: not-allowed;
}

/* Hide DataTables' default ellipsis "..." in a more subtle way */
.erp-table-footer .dataTables_paginate .ellipsis { color: var(--erp-text-muted); }

/* =========================================================================
   Shared "list table" — opt-in class used by Brand / Model / Category list
   cards. Bordered, separated row-cards with rounded corners, fixed column
   slots, and a uniform action cell.
   ========================================================================= */
.table-card                          { padding: 0; }
.table-card .card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--erp-sidebar-border);
}
.table-card > .table-responsive {
    padding: .75rem 1rem 0 !important;
    margin: 0;
    overflow: visible;
}
.table-card .erp-table-footer { border-top: 1px solid var(--erp-sidebar-border); margin-top: .75rem; }

/* The table */
table.erp-list-table {
    width: 100% !important;
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 6px;            /* 6px vertical gap between rows */
}
table.erp-list-table th,
table.erp-list-table td {
    padding: .85rem 1rem;
    vertical-align: middle;
    background: #fff;
    border-top:    1px solid var(--erp-sidebar-border);
    border-bottom: 1px solid var(--erp-sidebar-border);
}
/* Inline-side borders + rounded corners — RTL safe via logical props */
table.erp-list-table th:first-child,
table.erp-list-table td:first-child {
    border-inline-start: 1px solid var(--erp-sidebar-border);
    border-start-start-radius: 10px;
    border-end-start-radius:   10px;
}
table.erp-list-table th:last-child,
table.erp-list-table td:last-child {
    border-inline-end: 1px solid var(--erp-sidebar-border);
    border-start-end-radius: 10px;
    border-end-end-radius:   10px;
}
table.erp-list-table thead th {
    background: #f8fafc;
    color: var(--erp-text-muted);
    font-weight: 700;
    font-size: .82rem;
}
table.erp-list-table tbody tr:hover td { background: #fafbfd; }

/* Action cell — identical 36×36 slots in every row */
.erp-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    width: 100%;
}
.erp-action-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--erp-primary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.erp-action-btn:hover { background: var(--erp-primary-50); color: var(--erp-primary); }
.erp-action-btn.dropdown > .erp-action-trigger {
    all: unset;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--erp-text-muted);
    cursor: pointer;
}
.erp-action-btn.dropdown:hover > .erp-action-trigger { color: var(--erp-text); }

/* Brand / Model cell: small logo + name in one tidy row */
.erp-brand-cell {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.erp-brand-cell .erp-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid var(--erp-sidebar-border);
    padding: 2px;
}
.erp-brand-cell .erp-brand-name { font-weight: 600; }

/* Back button */
.erp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid var(--erp-sidebar-border);
    color: var(--erp-text);
    padding: .5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}
.erp-back-btn:hover { background: var(--erp-primary-50); color: var(--erp-primary); border-color: var(--erp-primary); }

/* =========================================================================
   Mobile responsive (< 992px)
   - header tightens & non-essential chrome is hidden
   - sidebar becomes a slide-in drawer triggered by .show
   - page-wrapper takes full width
   ========================================================================= */

/* Hamburger button — only visible on mobile */
.erp-mobile-toggle { display: none; }

@media (max-width: 991.98px) {

    /* ----- Header ----- */
    .erp-header { padding: 0 .75rem; gap: .5rem; }
    .erp-header .erp-brand { font-size: .92rem; line-height: 1.1; flex: 1 1 auto; min-width: 0; }
    .erp-header .erp-brand span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .erp-header .erp-brand img { height: 38px; }

    /* Hide the branch select + (lang? – n/a) on mobile */
    .erp-header > .d-none.d-md-flex { display: none !important; }

    /* Profile chip becomes avatar-only */
    .erp-header .erp-profile { padding: 2px; }
    .erp-header .erp-profile .d-none.d-md-block { display: none !important; }

    /* Hide secondary icons on the smallest screens to keep things uncluttered */
    .erp-header .erp-icon-btn.erp-hide-mobile { display: none; }

    /* Show the hamburger toggle */
    .erp-mobile-toggle { display: inline-flex !important; }

    /* ----- Sidebar drawer ----- */
    .navbar.navbar-vertical.erp-sidebar {
        position: fixed;
        top: 64px !important;
        bottom: 0;
        right: 0;
        left: auto;
        width: 280px !important;
        max-width: 85vw;
        height: calc(100vh - 64px) !important;
        transform: translateX(100%);             /* slid off-screen to the right (RTL hidden state) */
        transition: transform .25s ease;
        box-shadow: -6px 0 24px rgba(0,0,0,.18);
        display: block !important;               /* override Tabler's mobile collapse */
        padding-top: 1rem !important;
    }
    [dir="ltr"] .navbar.navbar-vertical.erp-sidebar {
        right: auto; left: 0;
        transform: translateX(-100%);
        box-shadow: 6px 0 24px rgba(0,0,0,.18);
    }
    .navbar.navbar-vertical.erp-sidebar.show { transform: translateX(0); }

    /* Tabler injects its own toggle inside the aside — hide it; we use our own in the header. */
    .erp-sidebar .navbar-toggler { display: none !important; }
    .erp-sidebar .navbar-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Backdrop */
    .erp-sidebar-backdrop {
        position: fixed;
        top: 64px; left: 0; right: 0; bottom: 0;
        background: rgba(15, 20, 35, .45);
        z-index: 1028;                          /* under the sidebar (1030), above content */
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .erp-sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* Page wrapper takes the full width on mobile */
    .page-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .container-xl, .container-fluid { padding-inline: .75rem; }

    /* Lock body scroll when the drawer is open */
    body.erp-drawer-open { overflow: hidden; }
}

/* Backdrop element is always rendered but invisible on desktop */
.erp-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) { .erp-sidebar-backdrop { display: block; } }

/* =========================================================================
   ERP Mobile/Tablet Responsive Sweep
   - Universal fixes for tables, filter bars, modals, page headers, forms,
     KPI cards. Applies to every dashboard page without editing each blade.
   - Tablet breakpoint: ≤ 991.98px      (drawer sidebar active)
   - Phone breakpoint:  ≤ 575.98px      (single-column layouts)
   ========================================================================= */

/* Clip horizontal overflow only at the body level. DO NOT add overflow-x: hidden
   to inner containers (.page-body, etc.) because that breaks .table-responsive's
   internal horizontal scrolling on touch devices. The body clip alone prevents
   any rogue page-level horizontal scroll. */
html, body { overflow-x: hidden; max-width: 100%; }
.container-xl, .container-fluid, .container { max-width: 100% !important; }

/* Explicit touch-friendly scroll on table-responsive containers */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

/* ----- Tablet & phone (≤ 991.98px) ----- */
@media (max-width: 991.98px) {

    /* Tables: re-enable horizontal scroll & release the fixed layout that
       was causing Arabic/long text to wrap one character per line.        */
    .table-card > .table-responsive,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.erp-list-table {
        table-layout: auto !important;
        width: 100% !important;
        min-width: 720px;                       /* triggers scroll instead of squashing */
    }
    table.erp-list-table th,
    table.erp-list-table td {
        white-space: nowrap;                    /* never break content vertically */
        width: auto !important;                 /* override per-page nth-child widths */
    }

    /* Generic DataTables (pages that don't use .erp-list-table) */
    table.dataTable {
        min-width: 720px;
        table-layout: auto !important;
    }
    table.dataTable th,
    table.dataTable td {
        white-space: nowrap;
        width: auto !important;          /* override any per-page #table-id nth-child widths */
    }

    /* Universal table-id override for tables that haven't been DataTables-init'd yet
       (covers the brief render before jQuery adds the .dataTable class) */
    .table-responsive > table th,
    .table-responsive > table td {
        white-space: nowrap;
        width: auto !important;
    }

    /* DataTable footer (length menu + paginator) stacks on narrow widths */
    .erp-table-footer,
    .dt-layout-row {
        flex-direction: column;
        gap: .5rem;
        align-items: stretch !important;
    }

    /* Filter bars: stack inputs cleanly, drop the 160-180px max-widths from
       pages that set them inline. */
    .erp-filter-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: .5rem !important;
    }
    .erp-filter-row > *,
    .erp-filter-row .form-select,
    .erp-filter-row .form-control,
    .erp-filter-row .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Page header: title and actions stack instead of overlapping */
    .page-header .row.align-items-center {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .page-header .col-auto {
        width: 100%;
    }
    .page-header .col-auto .btn,
    .page-header .col-auto .erp-back-btn {
        width: 100%;
        justify-content: center;
    }
    .page-title {
        font-size: 1.15rem !important;
    }

    /* Card-header with "+ Add" button on one side and filter/search on the other:
       force the inner flex group to take full width so its children (select + search)
       stack cleanly underneath the action button. Pattern used by inventories,
       categories, brands, models — and any similar list-with-inline-form page. */
    .card-header.d-flex.flex-wrap > .d-flex,
    .card-header.d-flex.justify-content-between > .d-flex {
        width: 100%;
    }
    .card-header.d-flex > .btn,
    .card-header.d-flex > a.btn {
        width: 100%;
    }
    /* Category/brand/model pattern: title (.card-title.flex-grow-1) + search (.erp-table-search) + "+ Add" button.
       All three stack as full-width rows on mobile. */
    .card-header .card-title.flex-grow-1 {
        width: 100%;
        flex: 0 0 100%;
    }
    .card-header .erp-table-search {
        max-width: 100%;
        width: 100%;
    }

    /* Modals: use the full width minus a small gutter */
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    /* KPI cards: tighter padding so 2-up grids breathe on tablets */
    .erp-kpi-card { padding: .85rem 1rem !important; }
    .erp-kpi-card .erp-kpi-value { font-size: 1.4rem !important; }
    .erp-kpi-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }
    .erp-kpi-icon svg { width: 20px !important; height: 20px !important; }

    /* Dashboard/index uses Tabler's .row-cards + .h1 for big numbers — scale down */
    .row-cards .card .h1 { font-size: 1.5rem !important; line-height: 1.2; }
    .row-cards .card .card-body { padding: .9rem; }

    /* Card bodies a touch tighter on mobile */
    .card-body { padding: 1rem; }

    /* Breadcrumb wraps instead of overflowing */
    .erp-breadcrumb {
        flex-wrap: wrap;
        font-size: .8rem;
    }

    /* Forms: long input groups stack their addons below the input */
    .input-group-flat-prefix,
    .input-group-flat-suffix { flex-wrap: wrap; }

    /* TomSelect dropdowns get full width on mobile */
    .ts-wrapper { width: 100% !important; }
    .ts-dropdown { max-width: 100vw; }

    /* Form rows: any flex/grid with custom inline widths reflows on mobile */
    .row > [class*="col-"] { min-width: 0; }            /* prevent flex overflow */
    .form-control, .form-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }
    /* Form inputs of every native type must be 100% width below tablet */
    form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    form textarea,
    form select,
    .card-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    .card-body textarea,
    .card-body select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* Upload zones full width on mobile */
    .erp-upload-zone { width: 100% !important; box-sizing: border-box !important; }

    /* Input groups (search-with-icon) shouldn't force a min-width on mobile */
    .input-group, .input-group-sm { min-width: 0 !important; width: 100%; }

    /* Card body padding tightens for forms with many fields */
    .form-section .card-body { padding: 1rem; }
}

/* ----- Phone + small tablet: force bare col-N (legacy markup with no responsive
   prefix) to stack full-width. Bumped from 575.98 → 767.98 so brand/model/category
   form rows (col-7 + col-5) stack on small tablets too, where the drawer is open
   and viewport real-estate is constrained. ----- */
@media (max-width: 767.98px) {
    .row > .col-1,  .row > .col-2,  .row > .col-3,  .row > .col-4,
    .row > .col-5,  .row > .col-6,  .row > .col-7,  .row > .col-8,
    .row > .col-9,  .row > .col-10, .row > .col-11, .row > .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: .5rem;
    }
    /* But col-auto stays auto-sized (used for icon-only columns) */
    .row > .col-auto { flex: 0 0 auto !important; max-width: none !important; }

    /* Defensive: any form input inside a card-body fills its column on mobile.
       Some inline styles or scoped page CSS may still constrain width. */
    .card-body .form-control,
    .card-body .form-select,
    .card-body input[type="text"],
    .card-body input[type="number"],
    .card-body input[type="email"],
    .card-body input[type="search"],
    .card-body input[type="date"],
    .card-body textarea,
    .card-body select,
    form .form-control,
    form .form-select,
    form input[type="text"],
    form input[type="number"],
    form input[type="email"],
    form input[type="search"],
    form input[type="date"],
    form textarea,
    form select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    /* Upload zones full width too */
    form .erp-upload-zone,
    .card-body .erp-upload-zone {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ----- Phone-only (≤ 575.98px) ----- */
@media (max-width: 575.98px) {

    /* KPI cards go full-width, 1-up */
    .erp-kpi-card { padding: .75rem .85rem !important; }
    .erp-kpi-card .erp-kpi-value { font-size: 1.25rem !important; }

    /* All cards a bit tighter */
    .card { border-radius: 10px; }
    .card-body { padding: .85rem; }

    /* SweetAlert popup fits small screens */
    .swal2-popup { width: 90% !important; font-size: .9rem; }

    /* Toastr notifications fit small screens */
    #toast-container > div { width: 90vw !important; }

    /* Container padding tightens further */
    .container-xl, .container-fluid { padding-inline: .5rem !important; }

    /* Action buttons in tables stay compact */
    .erp-action-btn {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    /* Buttons inside btn-list wrap & flex */
    .btn-list { flex-wrap: wrap; gap: .4rem !important; }

    /* DataTable paginator fits in narrow widths */
    .dt-paging .dt-paging-button {
        padding: 4px 8px !important;
        font-size: .8rem;
    }
}

/* =========================================================================
   Person (Suppliers / Customers) module — Phase 6
   ========================================================================= */

/* Section block inside the customer form (البيانات الأساسية / التجارية / إضافية) */
.erp-form-section {
    padding: 1rem 0 .25rem;
    border-bottom: 1px dashed #e5e9f2;
    margin-bottom: 1rem;
}
.erp-form-section:last-child { border-bottom: 0; margin-bottom: 0; }
.erp-form-section-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background: var(--erp-primary-50);
    color: var(--erp-primary);
    font-weight: 700;
    font-size: .85rem;
}
.erp-form-section-title svg { width: 16px; height: 16px; }

/* Person table cell (name + sub-label) */
.erp-person-cell { display: flex; flex-direction: column; gap: 2px; }
.erp-person-cell .erp-person-name { font-weight: 600; color: var(--erp-text); }
.erp-person-cell .erp-person-sub  { font-size: .78rem; color: var(--erp-text-muted); }

/* Balance cell — colored by balance_type */
.erp-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.1; }
.erp-balance .erp-balance-amount { font-weight: 700; }
.erp-balance .erp-balance-label  { font-size: .72rem; color: var(--erp-text-muted); }
.erp-balance-debit    .erp-balance-amount { color: var(--erp-danger); }
.erp-balance-debit    .erp-balance-label  { color: var(--erp-danger); }
.erp-balance-credit   .erp-balance-amount { color: var(--erp-success); }
.erp-balance-credit   .erp-balance-label  { color: var(--erp-success); }
.erp-balance-balanced .erp-balance-amount { color: var(--erp-text); }

/* Invoice cell (date over invoice no) */
.erp-invoice-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.1; }
.erp-invoice-cell .erp-invoice-no { font-size: .72rem; color: var(--erp-text-muted); }

/* Inline list counter chip (above table) */
.erp-list-counter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--erp-text-muted);
    font-size: .85rem;
    padding-top: .25rem;
}
.erp-list-counter svg { color: var(--erp-primary); }
.erp-list-counter strong { color: var(--erp-text); font-weight: 700; }

/* Footer status counter pills (matches screenshot's bottom row) */
.erp-status-counters {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.25rem;
    align-items: center;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--erp-sidebar-border);
    background: #fbfcfe;
}
.erp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--erp-text-muted);
}
.erp-status-pill::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    margin-inline-end: 0;
}
.erp-status-active    { color: var(--erp-success); }
.erp-status-inactive  { color: var(--erp-danger);  }
.erp-status-suspended { color: var(--erp-warning); }
.erp-status-balanced  { color: var(--erp-text-muted); }

/* Action button — success variant (phone icon in customer rows) */
.erp-action-btn.erp-action-btn-success { color: var(--erp-success); }
.erp-action-btn.erp-action-btn-success:hover {
    background: var(--erp-success-bg);
    color: var(--erp-success);
}

/* Filter row tightening on supplier/client index */
.erp-filter-row { width: 100%; }

/* Mobile — supplier/client form sections + status counters */
@media (max-width: 991.98px) {
    .erp-form-section-title { font-size: .8rem; padding: .3rem .75rem; }
    .erp-status-counters { gap: .5rem .9rem; padding: .75rem 1rem; }
    .erp-status-pill { font-size: .78rem; }
    .erp-balance { align-items: flex-start; }
    .erp-invoice-cell { align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .erp-form-section { padding: .75rem 0 .25rem; }
    .erp-form-section-title { font-size: .78rem; }
}

/* =========================================================================
   UNIVERSAL RESPONSIVE SWEEP — Phase 7
   Targets page-local patterns (.pi-*, .sc-*, inline min-width, fixed-grid
   layouts, untagged tables) that escaped the original sweep. Lives here so
   no individual blade file needs editing.
   ========================================================================= */

/* ----- 1) Custom KPI / totals / search grids used across modules ----- */

/* Purchase index / Order index — KPI grid (4-up by default). Collapse on
   tablet → 2-up, on phone → 1-up. */
@media (max-width: 991.98px) {
    .pi-kpi-grid,
    .sc-totals-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 575.98px) {
    .pi-kpi-grid,
    .sc-totals-row,
    .sc-search-row {
        grid-template-columns: 1fr !important;
    }
}

/* Sell create — search filter row reflows cleanly */
@media (max-width: 767.98px) {
    .sc-search-row { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
}

/* ----- 2) Inline `style="min-width: NNNpx"` attribute selectors -----
   Used everywhere on filter selects/search inputs/<th> cells. Reset to
   100% on tablet so they no longer force horizontal overflow. The escape
   hatch is `.no-mobile-reset` for the rare row that actually wants the px. */
@media (max-width: 991.98px) {
    .card-body [style*="min-width"]:not(.no-mobile-reset),
    .card-header [style*="min-width"]:not(.no-mobile-reset),
    .pi-card [style*="min-width"]:not(.no-mobile-reset),
    .erp-filter-row [style*="min-width"]:not(.no-mobile-reset),
    form [style*="min-width"]:not(.no-mobile-reset) {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ----- 3) Vue-templet rowAppended.php — `<td style="min-width: 100px;">` -----
   These force ~800px table width on phones. Drop the min-width when the
   parent table-responsive is constrained to a small viewport. */
@media (max-width: 575.98px) {
    .table-responsive td[style*="min-width"]:not(.no-mobile-reset) {
        min-width: 0 !important;
    }
}

/* ----- 4) `<th style="width: NNNpx">` widths inside DataTables -----
   Inline `<th style="width:NNpx">` plus DataTables `table-layout: fixed`
   locks columns at desktop widths and squishes content on tablet/phone.
   Releasing them lets the universal `min-width: 720px` rule below take
   over and scroll instead. */
@media (max-width: 991.98px) {
    table.dataTable th[style*="width"],
    .table-responsive th[style*="width"] {
        width: auto !important;
    }
}

/* ----- 5) Tables NOT wrapped in .table-responsive -----
   Add an overflow-x escape so they scroll instead of overflowing the page.
   The selector covers any direct table inside a card-body that's not
   inside a wrapper.   */
@media (max-width: 991.98px) {
    .card-body > table:not(.no-mobile-reset),
    .card > table:not(.no-mobile-reset) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ----- 6) Inline `style="margin-left:|margin-right:|padding:"` resets -----
   A common pattern is `style="margin-left: 2rem"` on filter rows. On phones
   this wastes left space when the drawer is open. RTL-safe via logical
   property override. */
@media (max-width: 575.98px) {
    .page-body [style*="margin-left"]:not(.no-mobile-reset),
    .page-body [style*="margin-right"]:not(.no-mobile-reset) {
        margin-inline: 0 !important;
    }
}

/* ----- 7) Order/sell invoice printouts viewed on screen -----
   The print invoice is wrapped in a centered max-width-700 div with
   margin: 50px auto. On phones the 50px top/bottom + 35px padding wastes
   the entire viewport. Only applies in screen mode — print queries are
   untouched. */
@media screen and (max-width: 600px) {
    body > div[style*="max-width"][style*="margin"] {
        margin: 12px auto !important;
        padding: 12px !important;
    }
    body > div[style*="max-width"] > div[style*="width: 50%"] {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: .5rem;
    }
}

/* ----- 8) Purchase create/edit toolbars — pi-row-toolbar floats on row
   click. Clamp it inside the viewport on phones so it doesn't jut off
   the left edge under the drawer. */
@media (max-width: 575.98px) {
    .pi-row-toolbar {
        max-width: 90vw !important;
        inset-inline-end: 1rem !important;
        inset-inline-start: auto !important;
    }
}

/* ----- 9) Purchase items table — many columns + numeric inputs.
   Already partially handled in the page itself but let the parent
   .table-responsive own the scroll and tighten font sizes on phones. */
@media (max-width: 767.98px) {
    .pi-items-table { font-size: .78rem !important; min-width: 760px; }
    .pi-items-table input.form-control { height: 30px !important; font-size: .75rem !important; }
    .pi-costs-table { min-width: 580px; }
}

/* ----- 10) "Two-column reverse" item create layout — current widths
   wedge the narrow column when the viewport is below 1100px. Stack
   reverse-layout pairs on tablet. */
@media (max-width: 991.98px) {
    .erp-twocol.erp-twocol-reverse > * {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ----- 11) Page-local `<style>` blocks that hardcoded grid-template-columns
   with no breakpoint — covers the catch-all for any 3+ column grid we
   might have missed. Use carefully — only forces a single column at the
   smallest breakpoint, leaving designer intent above 576px intact. */
@media (max-width: 575.98px) {
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----- 12) Generic "fixed width buttons" used in headers — make them
   shrink to content on phones (no more 200px wide "اضافة" buttons). */
@media (max-width: 575.98px) {
    .pi-create-btn,
    .pi-cost-add-btn,
    .pi-add-new-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ----- 13) Purchase/Order index DataTable scroll wrapper -----
   The `.pi-table-card` wraps a DataTables-driven table directly with no
   `.table-responsive` parent AND has `overflow: hidden` on it (from the
   page-local style block), so the table just gets clipped on narrow
   widths. Force the card to scroll horizontally instead. `!important`
   is required because page-local CSS loads after erp-theme.css.
   Matches the sell page's `.si-table-wrap` pattern. */
.pi-table-card {
    overflow: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.pi-table-card > .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
}
.pi-table-card table.dataTable {
    width: 100% !important;
}
@media (max-width: 991.98px) {
    .pi-table-card table.dataTable {
        min-width: 860px;   /* triggers horizontal scroll instead of squish */
        white-space: nowrap;
    }
    .pi-table-card table.dataTable thead th,
    .pi-table-card table.dataTable tbody td {
        white-space: nowrap !important;
        width: auto !important;
        padding: .55rem .5rem !important;
    }
}

/* DataTables footer (length + info + pagination) reflows cleanly on phone */
@media (max-width: 767.98px) {
    .pi-table-card .dataTables_wrapper .dt-layout-row,
    .pi-table-card .dataTables_wrapper .row {
        flex-direction: column !important;
        gap: .5rem !important;
        align-items: stretch !important;
    }
    .pi-table-card .dt-info,
    .pi-table-card .dt-length,
    .pi-table-card .dt-paging,
    .pi-table-card .dataTables_info,
    .pi-table-card .dataTables_length,
    .pi-table-card .dataTables_paginate {
        text-align: center !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        flex-wrap: wrap;
    }
    .pi-table-card .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: .15rem;
    }
}

/* ----- 14) Page header (.pi-page-header) — title block + primary CTA
   must stack and align nicely on phone. Currently the CTA gets pushed
   off-screen on narrow widths because parent uses justify-content:
   space-between with no flex-wrap. */
@media (max-width: 767.98px) {
    .pi-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
    }
    .pi-page-header .pi-create-btn,
    .pi-page-header > a,
    .pi-page-header > button {
        width: 100% !important;
        justify-content: center !important;
    }
    .pi-title-block .pi-title { font-size: 1.1rem !important; }
    .pi-title-block .pi-subtitle { font-size: .8rem !important; }
}

/* ----- 15) Filter card top row (search + date range) — uses inline
   `min-width: 280px` / `min-width: 340px` and a flex parent that
   doesn't wrap. Force wrap + full-width on phone. */
@media (max-width: 767.98px) {
    #filterCard .d-flex.flex-wrap,
    #filterCard > div > .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }
    #filterCard .pi-input-group,
    #filterCard .pi-filter-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* The "from — to" date range becomes vertical with the em dash
       between them turned into a small label */
    #filterCard .d-flex[style*="min-width:340px"],
    #filterCard .d-flex[style*="min-width: 340px"] {
        flex-direction: column !important;
        width: 100% !important;
    }
    #filterCard .d-flex[style*="min-width:340px"] > span,
    #filterCard .d-flex[style*="min-width: 340px"] > span { display: none; }
}

/* ----- 16) KPI cards (.pi-kpi) — full-width stack on phone with much
   tighter sizing so 4 stats don't eat 500px of viewport height. */
@media (max-width: 575.98px) {
    .pi-kpi {
        padding: .65rem .85rem !important;
        gap: .65rem;
    }
    .pi-kpi .pi-kpi-label { font-size: .82rem !important; margin-bottom: .2rem !important; }
    .pi-kpi .pi-kpi-value { font-size: 1.1rem !important; }
    .pi-kpi .pi-kpi-unit  { font-size: .72rem !important; margin-top: .15rem !important; }
    .pi-kpi-icon {
        width: 38px !important; height: 38px !important;
    }
    .pi-kpi-icon svg { width: 18px !important; height: 18px !important; }
}