/*
 * UATOYS admin design system (2026).
 *
 * Notion/Arc-style dark language chosen by VJ from four prototypes: soft,
 * spacious, rounded, a little playful; blue accent; coloured dealer initials;
 * product photos in lists. The shell (layouts/admin.blade.php) is new; the
 * Bootstrap 4 components older pages still use (cards, forms, tables, modals,
 * select2, DataTables) are restyled here into the same language, so every
 * page belongs to one design.
 *
 * Loaded after app.min.css (Material Admin 2022 - kept only for Bootstrap's
 * grid, utilities and component scripts) and admin.css.
 *
 * Motion follows Emil Kowalski (github.com/emilkowalski/skills): press
 * scale .97 / 160ms, drawers and menus ease out and leave faster, hover only
 * for a fine pointer, no animation on keyboard actions or dense data, less
 * motion under prefers-reduced-motion. No web fonts or CDNs.
 */

:root {
    color-scheme: dark;

    --ua-bg: #17171b;
    --ua-sidebar: #111115;
    --ua-surface: #1f1f24;
    --ua-surface-2: #26262c;
    --ua-surface-3: #2f2f36;
    --ua-hover: rgba(255, 255, 255, .045);
    --ua-border: rgba(255, 255, 255, .06);
    --ua-border-strong: rgba(255, 255, 255, .11);
    --ua-text: #ededf1;
    --ua-text-muted: #a3a3ae;
    --ua-text-faint: #6f6f7b;
    --ua-primary: #5b8cff;
    --ua-primary-hover: #7aa2ff;
    --ua-primary-soft: rgba(91, 140, 255, .16);
    --ua-primary-text: #b3c8ff;
    --ua-on-primary: #ffffff;
    --ua-pending: #f5c26b;
    --ua-pending-soft: rgba(245, 194, 107, .14);
    --ua-accepted: #6ee7a8;
    --ua-accepted-soft: rgba(110, 231, 168, .13);
    --ua-declined: #ff8a8a;
    --ua-declined-soft: rgba(255, 138, 138, .13);
    --ua-success: #6ee7a8;
    --ua-success-soft: rgba(110, 231, 168, .13);
    --ua-warning: #f5c26b;
    --ua-warning-soft: rgba(245, 194, 107, .14);
    --ua-danger: #ff8a8a;
    --ua-danger-soft: rgba(255, 138, 138, .13);
    --ua-focus: 0 0 0 3px rgba(91, 140, 255, .32);

    --r-xl: 20px; --r-lg: 16px; --r-md: 12px; --r-sm: 9px;
    --ua-radius: var(--r-lg);
    --ua-radius-sm: var(--r-sm);
    --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px rgba(0, 0, 0, .42);
    /* Older inline page styles read these two. */
    --ua-card-border: 0;
    --ua-card-shadow: var(--shadow-1);

    --ua-side-w: 248px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ================================================================== base */
html { font-size: 14.5px; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ua-text);
    background: var(--ua-bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ua-primary-text); }
a:hover, a:focus { color: var(--ua-text); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--ua-text); font-weight: 650; letter-spacing: -.01em; }
hr { border-color: var(--ua-border); }
::selection { background: rgba(91, 140, 255, .35); }
.num, .text-right, td.r { font-variant-numeric: tabular-nums; }
.text-muted, .muted { color: var(--ua-text-muted) !important; }
.faint { color: var(--ua-text-faint); }
.text-danger { color: var(--ua-danger) !important; }
.text-success { color: var(--ua-success) !important; }
.text-dark { color: var(--ua-text) !important; }
.bg-white, .bg-light { background-color: var(--ua-surface) !important; }
kbd { font: 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--ua-text-muted); box-shadow: none; }
.page-loader { display: none !important; }

/* ================================================================= shell */
.ua-app { display: grid; grid-template-columns: var(--ua-side-w) minmax(0, 1fr); min-height: 100vh; }
.ua-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(91, 140, 255, .10), rgba(91, 140, 255, 0) 220px), var(--ua-sidebar);
}
.ua-ws { display: flex; align-items: center; gap: 10px; padding: 8px 10px 14px; color: var(--ua-text); }
.ua-ws:hover { color: var(--ua-text); }
.ua-ws img { width: 30px; height: 30px; border-radius: 9px; }
.ua-ws b { font-size: 14.5px; letter-spacing: -.01em; display: block; line-height: 1.2; }
.ua-ws small { display: block; color: var(--ua-text-faint); font-size: 12px; }
.ua-side-search {
    display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding: 8px 10px;
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--ua-text-faint);
    cursor: pointer; text-align: left; white-space: nowrap; font: inherit; font-size: 14px;
}
.ua-side-search svg { width: 16px; height: 16px; }
.ua-side-search kbd { margin-left: auto; }
.ua-nav-h { padding: 14px 10px 4px; font-size: 11.5px; color: var(--ua-text-faint); font-weight: 600; }
.ua-nav a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 1px;
    border-radius: 10px; color: var(--ua-text-muted); font-weight: 500;
}
.ua-nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.ua-nav a.on { background: rgba(255, 255, 255, .08); color: var(--ua-text); }
.ua-nav .count {
    margin-left: auto; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: var(--ua-pending); background: var(--ua-pending-soft); font-variant-numeric: tabular-nums;
}
.ua-side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.ua-side-foot .who { min-width: 0; flex: 1; }
.ua-side-foot b { display: block; font-size: 13.5px; }
.ua-side-foot .who span { display: block; color: var(--ua-text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-main { min-width: 0; }
.ua-topbar { display: none; }
.ua-topbar-ws { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ua-text); }
.ua-topbar-ws:hover { color: var(--ua-text); }
.ua-topbar-ws img { width: 26px; height: 26px; border-radius: 8px; }
.ua-topbar-search svg { width: 18px; height: 18px; }
/* Phone-only pieces (see the phones section near the end). */
.ua-tabbar, .ib-sheet-bar, .ib-decide-bar { display: none; }
.ua-page { max-width: 1360px; margin: 0 auto; padding: 28px 36px 96px; }
.ua-page--full { max-width: none; }
.ua-foot { margin-top: 40px; color: var(--ua-text-faint); font-size: 12px; }

/* Laptop windows (1100-1279px): a slimmer sidebar and gutter give the
   content the width it needs instead of squeezing grids and the inbox. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
    :root { --ua-side-w: 216px; }
    .ua-page { padding: 24px 24px 80px; }
}

@media (max-width: 1099.98px) {
    .ua-app { grid-template-columns: minmax(0, 1fr); }
    .ua-side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--ua-side-w); z-index: 70; transform: translateX(-100%); transition: transform 300ms var(--ease-drawer); }
    .ua-app.side-open .ua-side { transform: none; box-shadow: var(--shadow-2); }
    /* Dim the page behind the open menu; a tap on it closes the menu (ua-app.js). */
    .ua-app.side-open::after { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .45); }
    .ua-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; position: sticky; top: 0; z-index: 30; background: rgba(23, 23, 27, .85); backdrop-filter: blur(16px); }
    .ua-page { padding: 18px 16px 80px; }
}

/* =========================================================== page header */
.content__title, .ua-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 4px 16px;
    margin: 0 0 22px;
    padding: 0;
}
.content__title > h1, .ua-head h1 {
    grid-column: 1;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-transform: none;
    color: var(--ua-text);
}
.content__title > small, .ua-head p { grid-column: 1; margin: 0; color: var(--ua-text-muted); font-size: 14px; }
.content__title > small { grid-row: 3; margin-top: 6px; }
.content__title .breadcrumb {
    grid-column: 1; grid-row: 1; order: -1; margin: 0 0 2px; padding: 0; border: 0; background: none; font-size: 12.5px;
}
.content__title .breadcrumb-item, .content__title .breadcrumb-item a { color: var(--ua-text-faint); }
.content__title .breadcrumb-item + .breadcrumb-item::before { color: var(--ua-text-faint); }
.content__title > h1 { grid-row: 2; }
.content__title .actions, .ua-head .actions {
    grid-column: 2; grid-row: 1 / span 3; align-self: end;
    position: static; display: flex; gap: 8px; align-items: center;
}
.content__inner { max-width: none; }

/* ================================================================= cards */
.card {
    background: var(--ua-surface);
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 18px;
    color: var(--ua-text);
}
.card-body, .card-block { padding: 22px 24px; }
.card-header {
    background: transparent !important;
    border-bottom: 0;
    padding: 18px 24px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-header .card-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4 {
    margin: 0; font-size: 16px; font-weight: 650; color: var(--ua-text); text-transform: none;
}
.card-title { font-size: 16px; font-weight: 650; color: var(--ua-text); text-transform: none; margin-bottom: 16px; }
.card-body > .card-title:first-child { display: none; } /* repeated page titles inside form cards */
.card-footer { background: transparent; border-top: 1px solid var(--ua-border); }
.card-text { color: var(--ua-text-muted); }
.list-group-item { background: transparent; border-color: var(--ua-border); color: var(--ua-text); }

/* =============================================================== buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ua-surface-2);
    color: var(--ua-text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none !important;
    transition: transform 160ms var(--ease-out);
    white-space: nowrap;
}
.btn svg, .btn .zmdi { width: 16px; height: 16px; font-size: 15px; }
.btn-sm, .btn-group-sm > .btn { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 9px !important; }
.btn-block { display: flex; width: 100%; }
.btn:focus, .btn:focus-visible { outline: 0; box-shadow: var(--ua-focus) !important; }
.btn:not(:disabled):not(.disabled):active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .45; }
.btn-primary, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--ua-primary); color: var(--ua-on-primary); }
.btn-success, .btn-accept, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: var(--ua-accepted); color: #0d2a1c; }
.btn-danger, .btn-decline { background: var(--ua-declined-soft); color: var(--ua-declined); }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-success,
.btn-secondary:focus, .btn-light:focus { background: var(--ua-surface-2); color: var(--ua-text); }
.btn-outline-primary { color: var(--ua-primary-text); }
.btn-outline-danger { background: var(--ua-declined-soft); color: var(--ua-declined); }
.btn-ghost { background: transparent; color: var(--ua-text-muted); }
.btn .badge { margin-left: 2px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; background: rgba(255, 255, 255, .08); color: var(--ua-text-muted); }
/* Segmented controls: Bootstrap .btn-group of filter buttons. */
.btn-group { padding: 3px; gap: 2px; background: rgba(255, 255, 255, .05); border-radius: 12px; }
.btn-group > .btn { height: 30px; background: transparent; color: var(--ua-text-muted); border-radius: 9px !important; margin: 0 !important; }
.btn-group > .btn.active, .btn-group > .btn-secondary {
    background: var(--ua-surface-3); color: var(--ua-text); box-shadow: var(--shadow-1) !important;
}
.btn-group > .btn.active .badge, .btn-group > .btn-secondary .badge { color: var(--ua-text); }

/* ================================================================= forms */
label, .col-form-label { color: var(--ua-text-muted); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group { position: relative; margin-bottom: 18px; }
.form-control, .custom-select, select.form-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .055);
    color: var(--ua-text);
    font-size: 14.5px;
    box-shadow: none;
    appearance: auto;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.form-control-sm { height: 32px; padding: 4px 10px; font-size: 13px; border-radius: 9px !important; }
select.form-control, select.form-control-sm { padding-top: 0; padding-bottom: 0; }
select.form-control option { background: var(--ua-surface-2); color: var(--ua-text); }
textarea.form-control { height: auto; min-height: 120px; line-height: 1.55; resize: vertical; }
.form-control:focus {
    background: rgba(255, 255, 255, .07);
    color: var(--ua-text);
    border-color: rgba(91, 140, 255, .55) !important;
    box-shadow: var(--ua-focus);
}
.form-control::placeholder { color: var(--ua-text-faint); }
.form-control:disabled, .form-control[readonly] { background: rgba(255, 255, 255, .03); color: var(--ua-text-muted); }
.form-control[type=file] { height: auto; padding: 8px; }
.form-control[type=file]::file-selector-button {
    margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--ua-surface-3); color: var(--ua-text); font-weight: 600; cursor: pointer;
}
.form-control.is-invalid, .form-control.error { border-color: rgba(255, 138, 138, .6) !important; }
.invalid-feedback, label.error { display: block; margin-top: 6px; color: var(--ua-danger); font-size: 12.5px; font-weight: 500; }
.form-group__bar { display: none; }
.form-text, .help-text { color: var(--ua-text-faint); font-size: 12.5px; }
.form-section { margin: 0 0 24px; padding: 0 0 8px; border-bottom: 1px solid var(--ua-border); }
.form-section:last-of-type { border-bottom: 0; }
.form-section__title { margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--ua-text); }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 6px; }
.checkbox__label { color: var(--ua-text); font-weight: 500; }
.checkbox__label:before { border: 1.5px solid var(--ua-border-strong) !important; border-radius: 6px !important; background: transparent; }
.checkbox > input[type=checkbox]:checked ~ .checkbox__label:before { background: var(--ua-primary) !important; border-color: var(--ua-primary) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--ua-primary); }
input[type=date] { color-scheme: dark; }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px; border: 1px solid transparent !important; border-radius: 11px !important; background: rgba(255, 255, 255, .055);
    box-shadow: none; /* the template draws a light underline as a box-shadow */
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: rgba(91, 140, 255, .55) !important; box-shadow: var(--ua-focus); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ua-text); line-height: 38px; padding-left: 12px; }
.select2-container--default .select2-search--inline .select2-search__field { color: var(--ua-text); margin-top: 8px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 6px; padding: 2px 10px 2px 24px; border: 0; border-radius: 999px; background: var(--ua-primary-soft); color: var(--ua-text); font-size: 13px; font-weight: 600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { top: 2px; border: 0; background: none; color: var(--ua-primary-text); }
.select2-dropdown { overflow: hidden; border: 0; border-radius: 12px; background: var(--ua-surface-2); color: var(--ua-text); box-shadow: var(--shadow-2); }
.select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background: var(--ua-surface-3); color: var(--ua-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--ua-primary); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--ua-text); }

/* ================================================================ tables */
/* Notion-style lists: sentence-case faint headers, roomy rows, no grid. */
.table { margin: 0; color: var(--ua-text); background: transparent; }
.table td, .table th, .table-bordered td, .table-bordered th {
    padding: 13px 14px;
    vertical-align: middle;
    border: 0 !important;
    border-top: 1px solid var(--ua-border) !important;
    background: transparent !important;
}
.table thead th, .thead-default th, .thead-light th {
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--ua-text-faint);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.table-bordered { border: 0 !important; }
.table-responsive { border: 0; border-radius: var(--r-md); }
.table td.font-weight-bold { font-weight: 600 !important; min-width: 150px; }
.table td small { color: var(--ua-text-faint); }
/* A cell with a quiet second line (email under mobile, city under address). */
.table td.ua-stack small { display: block; margin-top: 3px; font-size: 12.5px; }
.table .text-nowrap { white-space: nowrap; }
.table img.img-rounded, .table td img { border-radius: 10px; }
.table td .list-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; min-width: 72px; }
.table td .list-inline-item { margin: 0 !important; }
/* The template paints hovered / striped / active rows light grey on the
   <tr>; our cell colours are see-through, so that grey bled through as a
   white row with unreadable text. Clear it at the row. */
.table-hover tbody tr:hover, .table-active, .table-active > td, .table-active > th { background-color: transparent !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02) !important; }
.table tbody tr:has(.row-select:checked) td { background: var(--ua-primary-soft) !important; }

/* Products grid: name + codes in one cell so it fits a laptop. */
.product-grid td { vertical-align: middle; }
.product-grid th, .product-grid td { padding-left: 10px !important; padding-right: 10px !important; }
.product-grid td:last-child { width: 1%; }
.product-grid td img { width: 48px !important; height: 48px !important; }
.product-grid .pg-name { min-width: 220px; }
.product-grid .pg-name b { font-weight: 600; color: var(--ua-text); }
.product-grid .pg-name small, .product-grid .pg-cat small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ua-text-faint); }
.product-grid .pg-cat { min-width: 120px; color: var(--ua-text-muted); }
.product-grid .pg-new { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--ua-primary-soft); color: var(--ua-text); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.product-grid .pg-actions .list-inline { flex-wrap: nowrap; }
.grid-bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.grid-bulk[hidden] { display: none; }
.grid-bulk span { color: var(--ua-text-muted); font-size: 13px; margin-right: 4px; }
.grid-bulk b { color: var(--ua-text); }
/* Grid action buttons (edit / view): quiet icon buttons. */
.table .btn.rounded-0, .table .list-inline .btn { width: 32px; height: 32px; padding: 0; border-radius: 9px !important; background: var(--ua-surface-2); color: var(--ua-text-muted); }
.table .btn.rounded-0:not(.btn-icon-text) { font-size: 0; }
.table .btn.rounded-0 .zmdi, .table .list-inline .btn .zmdi { font-size: 16px; }
.table td a.btn-light, .table td .btn-light.btn-sm { width: auto; padding: 0 11px; font-size: 13px; }
.table select.form-select {
    height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--ua-pending-soft); color: var(--ua-pending); font-size: 12.5px; font-weight: 600;
}

/* DataTables chrome */
.dataTables_wrapper { display: flow-root; }
.dataTables_wrapper .dataTables_filter { float: right; margin: 0 0 14px; }
.dataTables_wrapper .dataTables_length { float: left; margin: 0 0 14px; }
.dataTables_wrapper .dataTables_filter:before, .dataTables_wrapper .dataTables_filter:after,
.dataTables_wrapper .dataTables_length:before, .dataTables_wrapper .dataTables_length:after { display: none !important; content: none !important; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ua-text-faint); font-size: 13px; font-weight: 500;
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_filter input[type=search] {
    width: 300px; height: 38px; padding: 0 12px; border: 1px solid transparent !important; border-radius: 11px;
    background: rgba(255, 255, 255, .055); color: var(--ua-text); font-size: 14px;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: 0; border-color: rgba(91, 140, 255, .55) !important; box-shadow: var(--ua-focus); }
.dataTables_wrapper .dataTables_length select {
    width: auto; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .055); color: var(--ua-text); appearance: auto;
}
.dataTables_wrapper .table { clear: both; }
/* DataTables pins the table to its first measured pixel width; let it follow
   the card instead, so it never overflows a laptop-width window. */
table.dataTable { width: 100% !important; }
.dataTables_wrapper .dataTables_info { float: left; padding-top: 16px; color: var(--ua-text-faint); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate { float: right; padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px; margin: 0 1px; padding: 5px 10px !important; border: 0 !important; border-radius: 9px !important;
    background: transparent !important; color: var(--ua-text-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ua-surface-3) !important; color: var(--ua-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
.dataTables_processing {
    border: 0 !important; border-radius: 12px; background: var(--ua-surface-3) !important; color: var(--ua-text) !important; box-shadow: var(--shadow-2);
}
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--ua-text-faint); }

/* ===================================================== toolbars + pills */
.grid-toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 0 0 16px; }
.grid-toolbar label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ua-text-muted); font-weight: 500; }
.pill, .status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap; letter-spacing: 0;
}
.pill::before, .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.pending, .status-badge--pending { background: var(--ua-pending-soft); color: var(--ua-pending); }
.pill.accepted, .status-badge--shipped, .status-badge--delivered { background: var(--ua-accepted-soft); color: var(--ua-accepted); }
.pill.declined, .status-badge--cancelled { background: var(--ua-declined-soft); color: var(--ua-declined); }
.status-badge--unknown { background: var(--ua-surface-3); color: var(--ua-text-muted); }
.badge { border-radius: 999px; font-weight: 600; }
.badge-success { background: var(--ua-accepted); color: #0d2a1c; }
.badge-primary { background: var(--ua-primary); }
.badge-dark { background: var(--ua-surface-3); color: var(--ua-text); }
.badge-light { background: rgba(255, 255, 255, .08); color: var(--ua-text-muted); }

/* Avatars: coloured initials per dealer. */
.av { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; font-weight: 700; font-size: 13.5px; color: #15151a; }
.av.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.av.lg { width: 48px; height: 48px; border-radius: 15px; font-size: 17px; }
.thumbs { display: flex; }
.thumbs img { width: 30px; height: 30px; margin-left: -8px; border-radius: 8px; border: 2px solid var(--ua-surface); background: #fff; object-fit: contain; }
.thumbs img:first-child { margin-left: 0; }
.ua-empty { padding: 48px 20px; text-align: center; color: var(--ua-text-muted); }
.ua-empty .big { font-size: 32px; margin-bottom: 6px; }

/* Template toggles (dealer / product active switches). */
.toggle-switch__helper:before { background-color: rgba(255, 255, 255, .12) !important; }
.toggle-switch__helper:after { background-color: var(--ua-text-muted) !important; box-shadow: none !important; }
.toggle-switch__checkbox:checked ~ .toggle-switch__helper:before { background-color: rgba(110, 231, 168, .35) !important; }
.toggle-switch__checkbox:checked ~ .toggle-switch__helper:after { background-color: var(--ua-accepted) !important; }

/* ============================================ menus, dialogs, alerts */
.dropdown-menu { padding: 6px; border: 0; border-radius: 12px; background: var(--ua-surface-2); color: var(--ua-text); box-shadow: var(--shadow-2); }
.dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--ua-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ua-hover); color: var(--ua-text); }
.modal-content { border: 0; border-radius: var(--r-xl); background: var(--ua-surface-2); color: var(--ua-text); box-shadow: var(--shadow-2); }
.modal-header, .modal-footer { border-color: var(--ua-border); }
.modal-backdrop.show { opacity: .55; }
.close { color: var(--ua-text-muted); text-shadow: none; opacity: 1; }
.swal-overlay { background-color: rgba(0, 0, 0, .55); }
.swal-modal { border-radius: var(--r-xl); background: var(--ua-surface-2); box-shadow: var(--shadow-2); }
.swal-title { color: var(--ua-text); }
.swal-text { color: var(--ua-text-muted); text-align: center; }
.swal-button { border-radius: 10px; font-weight: 600; }
.swal-button--confirm { background: var(--ua-primary); }
.swal-button--danger { background: var(--ua-declined); color: #2a0d0d; }
.swal-button--cancel { background: var(--ua-surface-3); color: var(--ua-text); }
.swal-icon--success:before, .swal-icon--success:after, .swal-icon--success__hide-corners { background: var(--ua-surface-2) !important; }
.tooltip-inner { border-radius: 8px; background: var(--ua-surface-3); color: var(--ua-text); }
.alert { border: 0; border-radius: 12px; }
.alert-danger { background: var(--ua-declined-soft); color: var(--ua-declined); }
.alert-success { background: var(--ua-success-soft); color: var(--ua-success); }

/* =========================================================== Ctrl+K */
/* Opens instantly: keyboard-initiated, so no animation (Emil). */
.ua-pal-bg { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(0, 0, 0, .5); }
.ua-pal-bg.open { display: block; }
.ua-pal { position: fixed; top: 14vh; left: 50%; width: 640px; max-width: calc(100vw - 32px); translate: -50% 0; overflow: hidden; border-radius: 18px; background: var(--ua-surface-2); box-shadow: var(--shadow-2); }
.ua-pal input { width: 100%; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--ua-border); outline: 0; background: transparent; color: var(--ua-text); font: 16px var(--font); }
.ua-pal ul { max-height: 52vh; margin: 0; padding: 8px; overflow: auto; list-style: none; }
.ua-pal .grp { padding: 10px 12px 4px; color: var(--ua-text-faint); font-size: 12px; font-weight: 600; }
.ua-pal li.it { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; color: var(--ua-text); }
.ua-pal li.it.on { background: var(--ua-primary-soft); }
.ua-pal li.it img { width: 28px; height: 28px; border-radius: 8px; background: #fff; object-fit: contain; }
.ua-pal li.it .r { margin-left: auto; }
.ua-pal .hint { padding: 10px 20px; border-top: 1px solid var(--ua-border); color: var(--ua-text-faint); font-size: 12.5px; }

/* ============================================================ Orders inbox */
.ib { display: grid; grid-template-columns: clamp(340px, 38%, 420px) minmax(0, 1fr); gap: 18px; height: calc(100vh - 150px); min-height: 520px; }
.ib-list { display: flex; flex-direction: column; overflow: hidden; margin: 0; }
.ib-tools { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ib-tools .btn-group { display: flex; width: 100%; }
.ib-tools .btn-group > .btn { flex: 1 1 auto; min-width: 0; padding: 0 6px; white-space: nowrap; }
.ib-tools .btn-group > .btn .badge { margin-left: 4px; padding: 1px 6px; }
.ib-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; background: rgba(255, 255, 255, .055); color: var(--ua-text-faint); }
.ib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ua-text); font: inherit; }
.ib-search svg { width: 16px; height: 16px; flex: none; }
.ib-dealer { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 12px; background: var(--ua-primary-soft); font-weight: 600; font-size: 13px; }
.ib-dealer a { margin-left: auto; color: var(--ua-text-muted); }
.ib-scroll { overflow: auto; padding: 0 8px 12px; }
.ib-day { padding: 12px 10px 6px; color: var(--ua-text-faint); font-size: 12px; font-weight: 600; }
.ib-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; cursor: pointer; color: var(--ua-text); }
.ib-row:hover { color: var(--ua-text); }
.ib-row.on { background: var(--ua-primary-soft); }
.ib-row .mid { flex: 1; min-width: 0; }
.ib-row .t1 { display: flex; align-items: baseline; gap: 8px; }
.ib-row .t1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row .t1 .amt { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.ib-row .t2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ua-text-faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.ib-row .t2 .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ib-row .t2 .pill { flex: none; margin-left: auto; padding: 1px 8px 1px 7px; font-size: 11.5px; }
.ib-row.is-leaving { opacity: .35; }
.ib-more { display: block; width: calc(100% - 20px); margin: 8px 10px; }
.ib-detail { overflow: auto; margin: 0; container-type: inline-size; }
.ib-body.loading { opacity: .55; }

/* Order detail (inbox panel and the full order page). */
.od { padding: 26px 28px; }
.od-top { display: flex; align-items: flex-start; gap: 14px; }
.od-top h2 { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.od-top .meta { margin-top: 2px; color: var(--ua-text-muted); }
.od-top .pill { margin-left: auto; }
.od-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.od-note { margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--ua-declined-soft); color: var(--ua-declined); font-size: 13.5px; }
.od-dealer { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; border-radius: var(--r-md); background: var(--ua-surface-2); }
.od-dealer .who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.od-dealer .who b { display: block; }
.od-dealer .who span { color: var(--ua-text-muted); font-size: 13px; }
.od-dealer .links { display: flex; flex: none; gap: 6px; margin-left: auto; }
.od-lines { overflow: hidden; border-radius: var(--r-md); background: var(--ua-surface-2); }
.od-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; }
.od-line + .od-line { border-top: 1px solid var(--ua-border); }
.od-line img { width: 44px; height: 44px; border-radius: 10px; background: #fff; object-fit: contain; }
.od-line .n { font-weight: 600; overflow-wrap: anywhere; }
.od-line .s { color: var(--ua-text-faint); font-size: 12.5px; }
.od-line .q { color: var(--ua-text-muted); text-align: right; white-space: nowrap; }
.od-line .a { min-width: 96px; text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-total { display: flex; justify-content: space-between; gap: 16px; padding: 14px 14px 0; font-size: 16px; font-weight: 700; }
.od-total span:last-child { font-variant-numeric: tabular-nums; }
.od-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.od-addr > div { padding: 14px; border-radius: var(--r-md); background: var(--ua-surface-2); color: var(--ua-text-muted); font-size: 13.5px; line-height: 1.55; }
.od-addr h4 { margin: 0 0 6px; color: var(--ua-text-faint); font-size: 12px; font-weight: 600; }
.od-addr b { color: var(--ua-text); font-weight: 600; }
/* A narrow detail panel (laptop window): stack instead of squeezing. */
@container (max-width: 560px) {
    .od { padding: 20px; }
    .od-dealer { flex-wrap: wrap; }
    .od-dealer .links { width: 100%; margin-left: 0; }
    .od-line .a { min-width: 0; }
    .od-addr { grid-template-columns: 1fr; }
}

/* ======================================================= Home (dashboard) */
.ua-hello { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.ua-date { margin: 0 0 4px; color: var(--ua-text-muted); }
.ua-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0 22px; }
.ua-tile { position: relative; display: block; padding: 20px 22px; overflow: hidden; border-radius: var(--r-xl); background: var(--ua-surface); box-shadow: var(--shadow-1); color: var(--ua-text); }
a.ua-tile:hover { color: var(--ua-text); }
.ua-tile .l { display: flex; align-items: center; gap: 8px; color: var(--ua-text-muted); font-weight: 600; }
.ua-tile .v { margin: 10px 0 4px; font-size: 38px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ua-tile .v small { font-size: 15px; font-weight: 500; color: var(--ua-text-muted); letter-spacing: 0; }
.ua-tile .s { color: var(--ua-text-faint); font-size: 13px; }
.ua-tile .up { color: var(--ua-success); }
.ua-tile .down { color: var(--ua-danger); }
.ua-tile.warm { background: linear-gradient(135deg, rgba(245, 194, 107, .16), rgba(245, 194, 107, 0) 60%), var(--ua-surface); }
.ua-tile.cool { background: linear-gradient(135deg, rgba(110, 231, 168, .14), rgba(110, 231, 168, 0) 60%), var(--ua-surface); }
.ua-tile.blue { background: linear-gradient(135deg, rgba(91, 140, 255, .18), rgba(91, 140, 255, 0) 60%), var(--ua-surface); }
.ua-tile.rose { background: linear-gradient(135deg, rgba(255, 138, 138, .14), rgba(255, 138, 138, 0) 60%), var(--ua-surface); }
.ua-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ua-card-h { display: flex; align-items: center; gap: 8px; padding: 18px 20px 6px; }
.ua-card-h b { font-size: 16px; }
.ua-card-h .r { margin-left: auto; }
.ua-li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--ua-text); }
a.ua-li:hover { background: var(--ua-hover); color: var(--ua-text); }
.ua-li + .ua-li { border-top: 1px solid var(--ua-border); }
.ua-li .mid { flex: 1; min-width: 0; }
.ua-li .mid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-li .mid span { color: var(--ua-text-faint); font-size: 12.5px; }
.ua-li .amt { font-weight: 650; font-variant-numeric: tabular-nums; }
.ua-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; }
.ua-kv + .ua-kv { border-top: 1px solid var(--ua-border); }
.ua-kv span:first-child { color: var(--ua-text-muted); }
.ua-kv span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.ua-note { margin: 0 0 6px; color: var(--ua-text-faint); font-size: 13px; }

/* ===================================================== detail pages */
.ua-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ua-fact { padding: 14px 16px; border-radius: var(--r-md); background: var(--ua-surface-2); }
.ua-fact small { display: block; margin-bottom: 4px; color: var(--ua-text-faint); font-size: 12px; font-weight: 600; }
.ua-fact span { overflow-wrap: anywhere; }
.ua-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.ua-gallery img { width: 150px; height: 150px; border-radius: 14px; background: #fff; object-fit: contain; }

/* ============================================================== login */
.ua-login-page { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(800px 400px at 50% -10%, rgba(91, 140, 255, .18), transparent), var(--ua-bg); }
.ua-login { width: 100%; max-width: 380px; padding: 32px 30px 28px; border-radius: 22px; background: var(--ua-surface); box-shadow: var(--shadow-2); }
.ua-login__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--ua-text); font-weight: 700; line-height: 1.15; }
.ua-login__brand img { width: 40px; border-radius: 11px; }
.ua-login__brand small { display: block; color: var(--ua-text-faint); font-size: 12px; font-weight: 500; }
.ua-login__title { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ua-login__hint { margin-bottom: 22px; color: var(--ua-text-muted); }
.ua-login__submit { height: 42px; margin-top: 6px; }

/* ============================================================== motion */
@keyframes ua-pop { from { opacity: 0; scale: .96; } }
.dropdown-menu.show { animation: ua-pop 180ms var(--ease-out); transform-origin: top right; }
.select2-dropdown { animation: ua-pop 150ms var(--ease-out); }
.modal.fade .modal-dialog { transform: none; scale: .95; opacity: 0; transition: scale 140ms var(--ease-out), opacity 140ms var(--ease-out); }
.modal.fade.show .modal-dialog { scale: 1; opacity: 1; transition-duration: 220ms; }
.swal-modal { animation: ua-pop 200ms var(--ease-out); }
.ua-login { animation: ua-pop 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .btn { transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, filter 150ms ease; }
    .btn:hover { background: var(--ua-surface-3); color: var(--ua-text); }
    .btn-primary:hover { background: var(--ua-primary-hover); color: var(--ua-on-primary); }
    .btn-success:hover, .btn-accept:hover { background: var(--ua-accepted); color: #0d2a1c; filter: brightness(1.06); }
    .btn-danger:hover, .btn-decline:hover, .btn-outline-danger:hover { background: rgba(255, 138, 138, .22); color: var(--ua-declined); }
    .btn-ghost:hover { background: var(--ua-hover); }
    .btn-group > .btn:hover:not(.active):not(.btn-secondary) { background: var(--ua-hover); color: var(--ua-text); }
    .ua-nav a { transition: background-color 150ms ease, color 150ms ease; }
    .ua-nav a:hover:not(.on) { background: var(--ua-hover); color: var(--ua-text); }
    .ib-row:hover:not(.on) { background: var(--ua-hover); }
    .table-hover tbody tr:hover td { background: var(--ua-hover) !important; }
    .ua-side-search:hover { background: rgba(255, 255, 255, .08); }
    a.ua-tile { transition: transform 160ms var(--ease-out); }
    a.ua-tile:active { transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
    .btn:not(:disabled):not(.disabled):active { transform: none; }
    @keyframes ua-pop { from { opacity: 0; } }
    .modal.fade .modal-dialog, .modal.fade.show .modal-dialog { scale: 1; }
    .ua-side { transition: none; }
}

/* ====================================================== dealer insights */
.pill.seg-quiet { background: var(--ua-declined-soft); color: var(--ua-declined); }
.pill.seg-declining { background: var(--ua-pending-soft); color: var(--ua-pending); }
.pill.seg-growing { background: var(--ua-accepted-soft); color: var(--ua-accepted); }
.pill.seg-new { background: var(--ua-primary-soft); color: var(--ua-primary-text); }
.pill.seg-steady, .pill.seg-inactive { background: rgba(255, 255, 255, .07); color: var(--ua-text-muted); }
.up { color: var(--ua-success); }
.down { color: var(--ua-danger); }
.ins-toolbar .ins-segs { flex-wrap: wrap; }
.ins-find { flex: 1 1 200px; max-width: 280px; margin-left: auto; }
.ins-note { margin: -4px 0 14px; color: var(--ua-text-muted); font-size: 13.5px; }
.insight-grid td { vertical-align: middle; }
.insight-grid tbody tr[hidden] { display: none !important; }
.ins-who { display: flex; align-items: center; gap: 10px; color: var(--ua-text); min-width: 180px; }
.ins-who:hover { color: var(--ua-text); }
.ins-who b { display: block; font-weight: 600; }
.ins-who small { display: block; color: var(--ua-text-faint); font-size: 12.5px; }
.ins-acts { flex-wrap: nowrap; justify-content: flex-end; }
.insight-grid th, .insight-grid td { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; }
.insight-grid td:first-child { white-space: normal; }
.insight-grid td small { white-space: normal; }
.insight-grid td:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.insight-grid td:first-child .pill { margin-left: 42px; }
.ins-ic { width: 32px; padding: 0 !important; }
.ins-ic svg { width: 16px; height: 16px; }
.ins-ic span { display: none; }
.ins-summary .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ins-summary p { margin: 0; color: var(--ua-text-muted); font-size: 15px; line-height: 1.55; }
.ins-summary b { color: var(--ua-text); }
/* Monthly buying: one series, thin rounded bars on a baseline, two labels */
.ins-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 190px; align-items: end; }
.ins-bar { display: grid; grid-template-rows: 18px minmax(0, 1fr) 18px; height: 100%; text-align: center; }
.ins-bar .val { font-size: 11.5px; color: var(--ua-text-muted); white-space: nowrap; overflow: visible; }
.ins-bar .col { align-self: end; justify-self: center; width: min(28px, 70%); border-radius: 4px 4px 0 0; background: var(--ua-primary); }
.ins-bar .mo { padding-top: 4px; border-top: 1px solid var(--ua-border); font-size: 11.5px; color: var(--ua-text-faint); }
/* Price ranges: share of buying per band */
.ins-band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 76px; gap: 12px; align-items: center; padding: 8px 0; }
.ins-band + .ins-band { border-top: 1px solid var(--ua-border); }
.ins-band .lbl { font-weight: 600; font-size: 14px; }
.ins-band .lbl small { display: block; font-weight: 400; color: var(--ua-text-faint); font-size: 12px; }
.ins-band .track { height: 10px; border-radius: 0 4px 4px 0; background: var(--ua-surface-3); overflow: hidden; }
.ins-band .track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--ua-primary); }
.ins-band.top .lbl { color: var(--ua-primary-text); }
.ins-band .num { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ins-band .num small { display: block; font-weight: 400; color: var(--ua-text-faint); font-size: 12px; }
.ins-cover { margin-bottom: 14px; color: var(--ua-text-muted); }
.ins-cover b { font-size: 26px; color: var(--ua-text); margin-right: 4px; }
.ins-cover small { display: block; color: var(--ua-text-faint); }
.ins-h { margin: 14px 0 8px; color: var(--ua-text-faint); font-size: 12px; font-weight: 600; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-chip { padding: 4px 10px; border-radius: 999px; background: var(--ua-surface-2); font-size: 13px; }
.ins-chip small { color: var(--ua-text-faint); }
.ins-chip.gap { background: none; border: 1px dashed var(--ua-border-strong); color: var(--ua-text-muted); }
.ins-thumb { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; flex: none; }
.ins-grid { margin-bottom: 18px; }

/* =============================================================== phones
   iPhone 18 (402 x 874) and Galaxy S25 Ultra (412 x 891) class screens.
   Same pages, phone patterns: a bottom tab bar within thumb reach, grids
   drawn as cards, the order inbox as list -> full-screen order with
   Accept / Decline at the bottom, 16px inputs (no iOS zoom on focus),
   40px+ touch targets, and room for the notch and home indicator. */
@media (max-width: 767.98px) {
    /* shell */
    .ua-topbar { padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
    .ua-topbar-menu { display: none; }
    .ua-side-search kbd { display: none; }
    .ua-side { z-index: 90; }
    .ua-page { padding: 16px 16px calc(92px + env(safe-area-inset-bottom)); }
    .ua-foot { display: none; }
    .ua-tabbar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ua-border); background: rgba(23, 23, 27, .88);
        -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    }
    .ua-tabbar a, .ua-tabbar button {
        display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 50px; padding: 4px 0;
        border: 0; background: none; color: var(--ua-text-faint); font: 600 11px/1.2 var(--font); -webkit-tap-highlight-color: transparent;
    }
    .ua-tabbar .on { color: var(--ua-text); }
    .ua-tabbar .ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
    .ua-tabbar .on .ic { background: var(--ua-primary-soft); }
    .ua-tabbar svg { width: 22px; height: 22px; }
    .ua-tabbar .dot {
        position: absolute; top: -3px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: var(--ua-pending); color: #2a1d00; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    }
    .ua-toaster { right: 12px !important; left: 12px; width: auto !important; bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    .hide-phone { display: none !important; }

    /* type and touch */
    input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea,
    .form-control, .form-control-sm, .select2-container .select2-selection { font-size: 16px !important; }
    .btn { min-height: 40px; }
    .btn-sm, .btn-group-sm > .btn { height: 40px; padding: 0 14px; font-size: 14px; }
    .card-body, .card-block { padding: 16px; }

    /* page headers: title, then the actions on their own row */
    .content__title, .ua-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
    .content__title > h1, .ua-head h1 { grid-row: auto; font-size: 24px; }
    .content__title > small { grid-row: auto; }
    .content__title .breadcrumb { display: none; }
    .content__title .actions, .ua-head .actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 10px; }
    .ua-head .actions .btn-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ua-head .actions .btn-group > .btn { flex: none; }

    /* filters and grid chrome */
    .grid-toolbar > select, .grid-toolbar > .form-control { flex: 1 1 calc(50% - 6px); width: auto !important; min-width: 0; }
    .grid-bulk { width: 100%; margin-left: 0; }
    .grid-bulk span { margin-right: auto; }
    .dataTables_wrapper .dataTables_length { display: none; }
    .dataTables_wrapper .dataTables_filter { float: none; margin: 0 0 12px; }
    .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; font-size: 0; }
    .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_filter input[type=search] { flex: 1; width: 100% !important; height: 44px; margin: 0 !important; }
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; padding: 9px 12px !important; }

    /* grids as cards: one card per row, cells labelled by their column */
    .table-responsive { overflow: visible; }
    .table-responsive .table, .table-responsive .table > tbody { display: block; width: 100% !important; }
    .table-responsive .table > thead { display: none; }
    .table-responsive .table > tbody > tr {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px;
        margin: 0 0 10px; padding: 14px; border-radius: var(--r-md); background: var(--ua-surface-2);
    }
    .table-responsive .table > tbody > tr > td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0;
        padding: 0 !important; border: 0 !important; background: none !important; text-align: right; overflow-wrap: anywhere;
    }
    .table-responsive .table > tbody > tr > td::before {
        content: attr(data-label); flex: none; max-width: 45%; color: var(--ua-text-faint); font-size: 12.5px; font-weight: 500; text-align: left; overflow-wrap: normal; white-space: nowrap;
    }
    .table-responsive .table > tbody > tr > td:not([data-label])::before,
    .table-responsive .table > tbody > tr > td[data-label=""]::before { display: none; }
    .table-responsive .table > tbody > tr > td[data-label="No"] { display: none !important; }
    /* the first real cell is the card's title */
    .table-responsive .table > tbody > tr > td:first-child,
    .table-responsive .table > tbody > tr > td[data-label="No"] + td { justify-content: flex-start; font-size: 15px; font-weight: 600; text-align: left; }
    .table-responsive .table > tbody > tr > td:first-child::before,
    .table-responsive .table > tbody > tr > td[data-label="No"] + td::before { display: none; }
    .table-responsive .table > tbody > tr > td.dataTables_empty { display: block; text-align: center; font-weight: 400; }
    .table-responsive .table > tbody > tr:has(.row-select:checked) { background: var(--ua-primary-soft); }
    /* label on the left; the value and its quiet second line stacked on the right */
    .table-responsive .table > tbody > tr > td.ua-stack { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
    .table-responsive .table > tbody > tr > td.ua-stack::before { grid-row: span 2; }
    .table td.ua-stack small { grid-column: 2; text-align: right; }

    /* Products card: photo, name and codes, category; MRP / min / actions */
    .table-responsive .product-grid > tbody > tr {
        grid-template-columns: 22px 56px minmax(0, 1fr) auto; align-items: center;
        grid-template-areas: "sel img name name" "sel img cat cat" "price price min acts";
    }
    .table-responsive .product-grid > tbody > tr > td { display: block; text-align: left; font-size: 14px; font-weight: 400; }
    .table-responsive .product-grid > tbody > tr > td::before { display: none; }
    .product-grid td:nth-child(1) { grid-area: sel; }
    .product-grid td:nth-child(2) { grid-area: img; }
    .product-grid td:nth-child(3) { grid-area: name; }
    .product-grid td:nth-child(4) { grid-area: cat; }
    .product-grid td:nth-child(5) { grid-area: price; }
    .product-grid td:nth-child(6) { grid-area: min; }
    .product-grid td:nth-child(7) { grid-area: acts; justify-self: end; width: auto; }
    .product-grid td img { width: 56px !important; height: 56px !important; }
    .table-responsive .product-grid > tbody > tr > td:nth-child(5),
    .table-responsive .product-grid > tbody > tr > td:nth-child(6) { color: var(--ua-text-muted); font-size: 13.5px; }
    .table-responsive .product-grid > tbody > tr > td:nth-child(5)::before { display: inline; content: "MRP \20B9"; font-size: 13.5px; }
    .table-responsive .product-grid > tbody > tr > td:nth-child(6)::before { display: inline; content: "Min "; font-size: 13.5px; }
    .product-grid .pg-name, .product-grid .pg-cat { min-width: 0; }

    /* Dealers card */
    .table-responsive .dealer-grid > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dealer active" "contact contact" "acts acts"; align-items: center; }
    .table-responsive .dealer-grid > tbody > tr > td { display: block; text-align: left; }
    .table-responsive .dealer-grid > tbody > tr > td::before { display: none; }
    .dealer-grid td:nth-child(1) { grid-area: dealer; }
    .dealer-grid td:nth-child(2) { grid-area: contact; font-size: 14px; font-weight: 400; }
    .dealer-grid td:nth-child(3) { grid-area: active; }
    .dealer-grid td:nth-child(4) { grid-area: acts; }
    .table-responsive .dealer-grid > tbody > tr > td.ua-stack { display: block; }
    .dealer-grid td.ua-stack small { text-align: left; }
    .dealer-grid td:nth-child(4) .d-flex > .btn { flex: 1; }

    /* Categories card */
    .table-responsive .category-grid > tbody > tr { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name acts" "img mkt acts"; align-items: center; }
    .table-responsive .category-grid > tbody > tr > td { display: block; text-align: left; }
    .table-responsive .category-grid > tbody > tr > td::before { display: none; }
    .category-grid td:nth-child(1) { grid-area: img; }
    .category-grid td:nth-child(2) { grid-area: name; }
    .category-grid td:nth-child(3) { grid-area: mkt; color: var(--ua-text-muted); font-size: 13.5px; }
    .category-grid td:nth-child(4) { display: none !important; }
    .category-grid td:nth-child(5) { grid-area: acts; }
    .category-grid td img { width: 56px !important; height: 56px !important; }

    /* Home */
    .ua-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
    .ua-tile { padding: 14px 16px; }
    .ua-tile .v { font-size: 30px; }
    .ua-grid { grid-template-columns: minmax(0, 1fr); }
    .ua-li { padding: 12px 16px; }

    /* Orders inbox: the list, then the order full screen */
    .ib { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .ib-list { overflow: visible; }
    .ib-scroll { overflow: visible; padding: 0 6px 8px; }
    .ib-row { padding: 12px 10px; }
    .ib-detail {
        position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; margin: 0; border-radius: 0; box-shadow: none;
        overflow-y: auto; overscroll-behavior: contain; background: var(--ua-bg);
        transform: translateX(100%); visibility: hidden; transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms;
    }
    .ib.ib--open .ib-detail { transform: none; visibility: visible; transition: transform 320ms var(--ease-drawer); }
    body.ib-lock { overflow: hidden; }
    .ib-body { flex: 1 0 auto; }
    .ib-sheet-bar {
        display: flex; position: sticky; top: 0; z-index: 2; padding: max(8px, env(safe-area-inset-top)) 8px 8px;
        border-bottom: 1px solid var(--ua-border); background: rgba(23, 23, 27, .9);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .ib-sheet-bar .btn { font-size: 16px; font-weight: 600; color: var(--ua-primary-text); }
    .ib-decide-bar:not([hidden]) {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: sticky; bottom: 0; z-index: 2;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ua-border); background: rgba(23, 23, 27, .92);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .ib-decide-bar .btn { height: 50px; font-size: 16px; }
    .ib .od-actions [data-decide] { display: none; }
    .od { padding: 18px 16px; }
    .od-top h2 { font-size: 20px; }

    /* Analytics */
    .ua-analytics .an-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ua-analytics .an-tab { flex: none; padding: 10px 14px; }
    .ua-analytics .an-funnel { flex-wrap: wrap; }
    .ua-analytics .an-funnel .step { flex: 1 1 40%; }
    .ua-analytics .an-funnel .lag { display: none; }
    .ua-analytics .an-preset { min-height: 40px; padding: 0 14px; }

    /* Dealer insights */
    .ins-toolbar .ins-segs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ins-toolbar .ins-segs > .btn { flex: none; }
    .ins-find { max-width: none; margin-left: 0; flex-basis: 100%; }
    .table-responsive .insight-grid > tbody > tr > td:last-child .ins-acts { width: 100%; }
    .ins-acts > .btn { flex: 1; }
    .ins-ic { width: auto; padding: 0 14px !important; gap: 6px; }
    .ins-ic span { display: inline; }
    .insight-grid td { white-space: normal; }
    .table-responsive .insight-grid > tbody > tr > td:first-child { flex-direction: row; justify-content: space-between; align-items: center; }
    .insight-grid td:first-child .pill { margin-left: 0; }
    .ins-bars { height: 150px; gap: 3px; }
    .ins-bar .val { font-size: 10px; }
    .ins-bar .mo { font-size: 10.5px; }
    .ins-band { grid-template-columns: minmax(0, 1fr) 64px; }
    .ins-band .track { grid-column: 1 / -1; grid-row: 2; }

    /* Category chips: a thumb-sized remove target */
    .select2-container--default .select2-selection--multiple .select2-selection__choice { padding: 6px 12px 6px 34px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { top: 0; bottom: 0; width: 30px; font-size: 18px; }

    /* Product photos: three across, the cover two-by-two */
    .ua-page .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; padding: 4px; }
    .ua-page .media-grid > * { aspect-ratio: 1; }

    /* Search palette */
    .ua-pal { top: max(12px, env(safe-area-inset-top)); width: calc(100vw - 24px); max-width: none; }
    .ua-pal ul { max-height: 62vh; }
    .ua-pal .hint { display: none; }
}

/* Touch screens have no hover: photo Remove / Open stay visible and larger. */
@media (hover: none) {
    .ua-page .media-tile .media-tile__remove, .ua-page .media-tile .media-tile__open { opacity: 1; width: 32px; height: 32px; line-height: 30px; }
    .ua-page .media-tile .media-tile__open { right: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ib-detail, .ib.ib--open .ib-detail { transition: none; }
}

/* =============================================================== print */
@media print {
    :root {
        color-scheme: light;
        --ua-bg: #fff; --ua-surface: #fff; --ua-surface-2: #f5f5f7; --ua-surface-3: #ececf0;
        --ua-border: #e5e5ea; --ua-border-strong: #d1d1d6;
        --ua-text: #111; --ua-text-muted: #444; --ua-text-faint: #666; --ua-primary-text: #1b40a6;
    }
    .ua-app { display: block; }
    .ua-side, .ua-topbar, .ua-foot, .no-print, .btn, .ua-toaster { display: none !important; }
    .ua-page { padding: 0; max-width: none; }
    .card { box-shadow: none; }
}