/* =============================================================================
   theme.css - application look & feel
   -----------------------------------------------------------------------------
   Loaded LAST from _Layout.cshtml / Login.cshtml. It restyles the markup the
   views already use (Bootstrap 3, .thumbnail/.form cards, DataTables, modals,
   bootstrap-select, jQuery UI datepicker) so no individual view needs editing.
   Colours and sizes are CSS variables - change them here, not in the views.
   ============================================================================= */

:root {
    /* Palette and type follow the ERPidex site theme (erp.skydecor.in/upgrade): IBM Plex, navy band, blue accent */
    --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-heading: "IBM Plex Serif", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --brand: #2E5496;            /* primary action colour (accent)   */
    --brand-600: #1F3864;        /* heading navy                     */
    --brand-100: #DEE7F7;        /* accent-soft                      */
    --brand-50: #EEF3FB;

    --sidebar-bg: #1B2E52;       /* band navy                        */
    --sidebar-bg-2: #16274A;
    --sidebar-text: #E9EFFA;
    --sidebar-muted: #A9BCDD;
    --sidebar-active: #2E5496;
    --sidebar-w: 264px;
    --topbar-h: 58px;

    --bg: #EDF0F6;
    --card: #ffffff;
    --border: #D6DDEA;
    --text: #15223A;
    --muted: #4B5C7B;

    --success: #186A46;
    --danger: #9C231A;
    --warning: #8A5A00;
    --info: #2E5496;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(21, 34, 58, .06), 0 10px 26px -14px rgba(21, 34, 58, .28);
    --shadow-sm: 0 1px 2px rgba(21, 34, 58, .08);
}

/* ---------- base ---------------------------------------------------------- */
html { height: 100%; }
body {
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    padding-top: 0 !important;     /* site.css pushed the body 50px down for the old top bar */
    padding-bottom: 0 !important;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
a:hover, a:focus { color: var(--brand-600); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--brand-600); margin-top: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; margin-bottom: 12px; }
h3 { font-size: 15px; margin-bottom: 10px; }
h4 { font-size: 14px; }
hr { border-color: var(--border); }
.clear { clear: both; }

/* ---------- app shell ------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease, width .25s ease;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    min-height: var(--topbar-h);
}
.app-brand a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-width: 0; }
.app-brand-mark {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2E5496, #1F3864);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(46, 84, 150, .35);
}
.app-brand-text { display: flex; flex-direction: column; min-width: 0; }
.app-brand-text strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-brand-text small { font-family: var(--font-mono); font-size: 10.5px; color: var(--sidebar-muted); text-transform: uppercase; letter-spacing: .8px; }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 20px; }
.app-nav::-webkit-scrollbar { width: 6px; }
.app-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 6px; }

.app-sidebar-foot {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 11px;
    color: var(--sidebar-muted);
    display: flex; justify-content: space-between; align-items: center;
}

/* menu: markup comes from UserMenuList (ul.accordion > li > a.link + ul.submenu) */
.app-nav .accordion { max-width: none; background: transparent; border-radius: 0; }
.app-nav .accordion > li { list-style: none; margin: 2px 0; }
.app-nav .accordion > li:first-child { display: none; }          /* the " " spacer li */
.app-nav .accordion .link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.app-nav .accordion .link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-nav .accordion li.open > .link { color: #fff; background: rgba(255, 255, 255, .04); }
.app-nav .accordion li i.down {
    position: static; margin: 0; width: 14px; height: 14px;
    background: none;
    color: var(--sidebar-muted);
    transition: transform .2s ease;
}
.app-nav .accordion li i.down::before {
    content: "";
    display: block; width: 7px; height: 7px; margin: 2px auto;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.app-nav .accordion li.open > .link i.down { transform: rotate(180deg); }
.app-nav .submenu { background: transparent; padding: 2px 0 6px; }
.app-nav .submenu li { list-style: none; }
.app-nav .submenu li a {
    display: block;
    padding: 6px 10px 6px 26px !important;
    margin: 1px 0;
    border-radius: 6px;
    color: var(--sidebar-muted);
    font-size: 12.5px !important;
    line-height: 1.4;
    position: relative;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.app-nav .submenu li a::before {
    content: ""; position: absolute; left: 12px; top: 50%; width: 5px; height: 5px;
    border-radius: 50%; background: currentColor; opacity: .55; transform: translateY(-50%);
}
.app-nav .submenu li a:hover { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: none; }
.app-nav .submenu li a.active { background: var(--brand); color: #fff; }
.app-nav .submenu li a.active::before { opacity: 1; }
.app-nav .accordion > li > a.link[href] { padding-left: 12px; }  /* "Change Password" style top-level links */

/* main column */
.app-main { flex: 1 1 auto; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; transition: margin .25s ease; }

.app-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--topbar-h);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
}
.app-menu-toggle {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
    background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.app-menu-toggle:hover { background: var(--bg); }
.app-menu-toggle span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
/* line-height must clear the serif descenders, or overflow:hidden shaves the g and p */
.app-page-title { font-family: var(--font-heading); color: var(--brand-600); font-size: 18px; font-weight: 600; line-height: 1.5;
                   margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar-right { display: flex; align-items: center; gap: 12px; }
.app-pill {
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100);
    white-space: nowrap;
}
.app-pill.is-distributor { background: #fdf4ff; color: #a21caf; border-color: #f5d0fe; }
.app-pill.is-admin { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.app-user { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.app-user strong { color: var(--text); font-weight: 600; }
.app-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #3E67AE, #1F3864); color: #fff;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.app-logout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px;
    border: 1px solid var(--border); background: #fff; color: var(--text);
}
.app-logout:hover { border-color: #fecaca; color: var(--danger); background: #fef2f2; }

.app-content { flex: 1 1 auto; padding: 20px 22px 30px; }
.app-content > hr:last-of-type { display: none; }

.app-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    color: var(--muted); font-size: 11.5px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff;
}
.app-footer img { height: 22px; width: auto; opacity: .8; }

.app-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; }

/* collapsed sidebar (desktop) */
body.sidebar-collapsed .app-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
body.sidebar-collapsed .app-main { margin-left: 0; }

/* off-canvas sidebar (tablet / phone) */
@media (max-width: 991px) {
    .app-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    body.sidebar-open .app-backdrop { display: block; }
    .app-content { padding: 14px; }
    .app-user span.app-user-name { display: none; }
    .app-pill { display: none; }
}

/* ---------- cards (.thumbnail is what every view uses) ---------------------- */
.thumbnail,
.thumbnail-mod-1 {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 6px 10px 10px;
    margin-bottom: 18px;
    transition: box-shadow .15s ease;
}
.thumbnail-mod-1 { max-width: 370px; margin-left: auto; margin-right: auto; }
.thumbnail:hover { box-shadow: var(--shadow); }
.thumbnail-mod-1.bordernone { border: 1px solid var(--border); }
.thumbnail-mod-1 p { font-size: 12px; }
.thumbnail > .form, .thumbnail-mod-1 > .form { background: transparent; padding-top: 10px; }
.thumbnail h3, .thumbnail-mod-1 h3 {
    font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* ---------- forms ----------------------------------------------------------- */
.form { background: transparent; }
.form label, .form fieldset label, label {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 3px;
}
.form p.contact, .form p.contact1 { line-height: 16px; }
.form input, .form textarea, .form select, textarea, select,
.form-control,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input[type="url"] {
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    height: 32px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form textarea, textarea, textarea.form-control { height: auto; min-height: 64px; }
.form input:focus, .form textarea:focus, .form select:focus, .form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(46, 84, 150, .16);
}
.form input[type="checkbox"], .form input[type="radio"],
input[type="checkbox"], input[type="radio"] {
    width: 15px; height: 15px; padding: 0; margin: 0 6px 0 0; vertical-align: middle;
    border-radius: 3px; accent-color: var(--brand); box-shadow: none;
}
.form input[type="submit"], .form input[type="button"] { height: auto; }
.form-control[disabled], .form input[disabled], input[disabled], select[disabled], .form-control[readonly] {
    background: #f8fafc; color: var(--muted); cursor: not-allowed;
}
.input-validation-error, .form input.input-validation-error { border-color: var(--danger) !important; }
.field-validation-error, .text-danger { color: var(--danger); font-size: 11.5px; }
.input-lg, .form-control.input-lg { height: 42px; font-size: 14px; }

/* bootstrap-select */
.bootstrap-select > .btn, .bootstrap-select > .dropdown-toggle {
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-size: 12.5px; height: 32px; padding: 5px 10px;
    box-shadow: none !important;
}
.bootstrap-select > .btn:focus, .bootstrap-select.open > .btn { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(46, 84, 150, .16) !important; }
.bootstrap-select .dropdown-menu { border-radius: var(--radius-sm); border-color: var(--border); box-shadow: var(--shadow); font-size: 12.5px; }
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.selected a { background: var(--brand-50); color: var(--brand-600); }
.bootstrap-select .bs-searchbox .form-control { height: 30px; }

/* ---------- buttons ---------------------------------------------------------- */
.btn {
    font-family: var(--font);
    font-weight: 600;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(46, 84, 150, .2); }
.btn-xs { padding: 2px 8px; font-size: 11px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 14px; border-radius: 8px; }
.btn-primary, .form input[type="submit"], .btnlogin { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .form input[type="submit"]:hover, .btnlogin:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-primary:active, .btn-primary.active { background: var(--brand-600); border-color: var(--brand-600); }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #b45309; border-color: #b45309; color: #fff; }
.btn-info { background: var(--info); border-color: var(--info); }
.btn-info:hover, .btn-info:focus { background: #0e7490; border-color: #0e7490; }
.btn-default { background: #fff; border-color: #cbd5e1; color: var(--text); }
.btn-default:hover, .btn-default:focus { background: var(--bg); border-color: #94a3b8; color: var(--text); }
.btn-link { box-shadow: none; }
.btn[disabled], .btn.disabled { box-shadow: none; opacity: .55; }

/* ---------- tables + DataTables --------------------------------------------- */
.table { font-size: 12.5px; margin-bottom: 12px; background: #fff; }
.table > thead > tr > th {
    background: #F6F8FC;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle;
    padding: 9px 10px;
    white-space: nowrap;
}
.table > tbody > tr > td, .table > tfoot > tr > td { padding: 7px 10px; border-color: #eef2f7; vertical-align: middle; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: #e6ebf2; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }
.table > tbody > tr:hover, .table tbody tr:hover { background: var(--brand-50) !important; }
.table tbody tr:hover td:hover { background: var(--brand-100) !important; }
.table > tfoot > tr > td { background: #f8fafc; font-weight: 600; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-position: right 8px center; }
table.dataTable { border-collapse: collapse !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--border); }
.dataTables_wrapper { font-size: 12.5px; }
.dataTables_wrapper .dataTables_length select { height: 30px; padding: 3px 8px; margin: 0 4px; }
.dataTables_wrapper .dataTables_filter input { height: 30px; margin-left: 6px; min-width: 200px; }
.dataTables_wrapper .dataTables_info { color: var(--muted); padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm); background: #fff !important;
    color: var(--text) !important; padding: 4px 10px; margin: 0 2px; font-size: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg) !important; color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
.dt-buttons .btn, .dt-button { margin-right: 4px; }
.table img { vertical-align: middle; }
/* Row stripes. DataTables (and a few Razor loops) tag rows .odd/.even; form.css painted
   them lightcyan/lightyellow. Override with the neutral slate stripe used everywhere else. */
tr.odd, .table > tbody > tr.odd, table.dataTable tbody tr.odd,
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: #ffffff !important; }
tr.even, .table > tbody > tr.even, table.dataTable tbody tr.even,
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even { background-color: #f6f8fb !important; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { background-color: #ffffff !important; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { background-color: #f6f8fb !important; }
.table > tbody > tr.odd:hover, .table > tbody > tr.even:hover,
table.dataTable tbody tr.odd:hover, table.dataTable tbody tr.even:hover { background-color: var(--brand-50) !important; }

/* ---------- modals, tabs, alerts, badges, misc ----------------------------- */
.modal-content { border: 0; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(15, 23, 42, .25); }
.modal-header { border-bottom: 1px solid var(--border); padding: 14px 18px; }
.modal-header .close { opacity: .5; }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-body { padding: 18px; }
.modal-footer { border-top: 1px solid var(--border); padding: 12px 18px; }
.modal-backdrop.in { opacity: .45; }

.nav-tabs { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; margin-right: 6px; padding: 8px 12px; }
.nav-tabs > li > a:hover { background: transparent; border-color: transparent; color: var(--text); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--brand); color: var(--brand-600); background: transparent; }

.alert { border-radius: var(--radius-sm); font-size: 12.5px; border-width: 1px; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-600); }

.badge { background: var(--brand); border-radius: 999px; font-weight: 600; font-size: 11px; padding: 3px 8px; }
.label { border-radius: 999px; font-weight: 600; padding: .25em .7em; }
.loginfail, p.loginfail { color: var(--danger); font-weight: 600; }
.text-muted { color: var(--muted); }
.well { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: none; }
.pagination > li > a { border-color: var(--border); color: var(--text); }
.pagination > .active > a { background: var(--brand); border-color: var(--brand); }
.dropdown-menu { border-radius: var(--radius-sm); border-color: var(--border); box-shadow: var(--shadow); font-size: 12.5px; }
.dropdown-menu > li > a:hover { background: var(--brand-50); color: var(--brand-600); }

/* jQuery UI datepicker */
.ui-datepicker { font-family: var(--font); font-size: 12px; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow); padding: 8px; background: #fff; }
.ui-datepicker .ui-datepicker-header { background: transparent; border: 0; font-weight: 600; }
.ui-datepicker th { color: var(--muted); font-weight: 600; font-size: 11px; }
.ui-datepicker td a, .ui-datepicker td span { text-align: center; border-radius: 6px; border: 0 !important; background: transparent !important; color: var(--text) !important; }
.ui-datepicker td a:hover { background: var(--brand-50) !important; color: var(--brand-600) !important; }
.ui-datepicker td.ui-datepicker-today a { background: var(--brand-100) !important; }
.ui-datepicker td.ui-datepicker-current-day a, .ui-datepicker td a.ui-state-active { background: var(--brand) !important; color: #fff !important; }
.ui-widget-header .ui-icon { filter: grayscale(1); }

/* loading overlay that many views render inline */
#loading { background-color: rgba(15, 23, 42, .55) !important; }
#loading p { font-family: var(--font); font-size: 14px; font-weight: 600; }

/* ---------- dashboard ------------------------------------------------------- */
.dash-hero {
    background: linear-gradient(120deg, #1B2E52 0%, #2E5496 70%, #3E67AE 100%);
    color: #fff;
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(27, 46, 82, .28);
}
.dash-hero h2 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.dash-hero p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 13px; }
.dash-hero .dash-date { text-align: right; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.dash-hero .dash-date strong { display: block; font-size: 16px; color: #fff; }
.dash-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 6px 0 12px; font-weight: 700; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.dash-tile {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; color: var(--text); text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-100); color: var(--text); }
.dash-tile-icon {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
}
.dash-tile strong { display: block; font-size: 13.5px; font-weight: 600; }
.dash-tile span { display: block; font-size: 11.5px; color: var(--muted); }
.dash-tile .dash-tile-icon { display: flex; font-size: 18px; color: #fff; }   /* wins over the generic span rule above */
.tone-blue { background: linear-gradient(135deg, #3E67AE, #2E5496); }
.tone-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.tone-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tone-violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.tone-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.tone-rose { background: linear-gradient(135deg, #f43f5e, #be123c); }
.tone-slate { background: linear-gradient(135deg, #64748b, #334155); }
.tone-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }

/* ---------- app-style shell (distributor): no sidebar, action bar of buttons ---------- */
body.app--bar .app-main { margin-left: 0; }
.app-topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: 6px; color: var(--text); text-decoration: none; }
.app-topbar-brand:hover, .app-topbar-brand:focus { color: var(--text); text-decoration: none; }
.app-topbar-brand .app-brand-mark { flex: 0 0 34px; width: 34px; height: 34px; font-size: 12.5px; border-radius: 9px; }
.app-topbar-brand > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-topbar-brand strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.app-topbar-brand small { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
.app-bar {
    position: sticky; top: var(--topbar-h); z-index: 1025;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 22px; background: #fff; border-bottom: 1px solid var(--border);
}
.app-bar .app-btn {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
    color: var(--text); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.app-bar .app-btn svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 18px; }
.app-bar .app-btn:hover, .app-bar .app-btn:focus { border-color: #BCC7DA; background: var(--brand-50); color: var(--text); text-decoration: none; }
.app-bar .app-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(46, 84, 150, .28); }
.app-bar .app-btn.active svg { color: #fff; }
.app-bar .app-bar-more { margin-left: auto; flex: 0 0 auto; }
.app-bar .app-bar-more .app-btn svg { color: var(--muted); }
.app-bar .dropdown-menu { border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow); padding: 6px; min-width: 210px; margin-top: 6px; }
.app-bar .dropdown-menu > li > a { padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--text); }
.app-bar .dropdown-menu > li > a:hover { background: var(--brand-50); color: var(--brand-600); }
.app-bar .dropdown-menu .divider { margin: 6px 0; }
body.app--bar .app-content { padding-top: 18px; }
@media (max-width: 991px) {
    body.app--bar .app-topbar-brand small { display: none; }
    body.app--bar .app-topbar-brand strong { max-width: 160px; }
    .app-bar { padding: 8px 12px; gap: 6px; }
    .app-bar .app-btn { padding: 9px 12px; font-size: 12.5px; }
}
@media (max-width: 640px) {
    body.app--bar .app-page-title { display: none; }
    .app-bar .app-btn { padding: 8px 10px; }
}

/* ---------- dashboard: stock finder (distributor) ---------------------------- */
.stock-finder { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 20px 14px; margin-top: 0; }
.stock-finder .sf-head { align-items: center; }
.stock-finder .sf-sub { font-size: 13px; }
.stock-finder .sf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.stock-finder .sf-head .dash-section-title { margin: 0 0 2px; }
.stock-finder .sf-sub { color: var(--muted); font-size: 12.5px; }
.stock-finder .sf-summary { font-size: 13px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.stock-finder .sf-summary b { color: var(--text); }
.stock-finder .sf-search { position: relative; margin-bottom: 10px; }
.stock-finder .sf-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.stock-finder .sf-search input {
    box-sizing: border-box;
    width: 100%; max-width: none; height: 48px; padding: 0 44px 0 44px; border: 1.5px solid var(--border); border-radius: 12px;
    font: inherit; font-size: 15px; background: #f8fafc; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.stock-finder .sf-search input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(46, 84, 150, .16); }
.stock-finder .sf-search input::-webkit-search-cancel-button { display: none; }
.stock-finder .sf-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; }
.stock-finder .sf-clear:hover { background: #eef2f7; color: #475569; }
.stock-finder .sf-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 12px; }
.stock-finder .sf-filters label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 0; min-width: 130px; flex: 1 1 130px; }
.stock-finder .sf-filters select { box-sizing: border-box; height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 12.5px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; max-width: none; width: 100%; }
.stock-finder .sf-filters .sf-reset { height: 34px; padding: 0 14px; flex: 0 0 auto; }
.stock-finder .sf-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.stock-finder table.dataTable { margin: 0 !important; }
.stock-finder .sf-code { font-weight: 600; }
.stock-finder .sf-sno { width: 44px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.stock-finder .sf-qty b { font-size: 13.5px; color: var(--success); }
.stock-finder tr.sf-nil td { color: var(--muted); }
.stock-finder tr.sf-nil .sf-qty b { color: var(--danger); }
.stock-finder .dataTables_wrapper .dataTables_info, .stock-finder .dataTables_wrapper .dataTables_paginate { padding: 8px 10px; }
.stock-finder .dataTables_processing { background: rgba(255, 255, 255, .85); color: var(--muted); border: 0; box-shadow: none; }
@media (max-width: 640px) { .stock-finder { padding: 14px 12px; } .stock-finder .sf-filters label { min-width: 46%; } }

/* ---------- login page ------------------------------------------------------ */
/* Light canvas (soft indigo/cyan glow + faint grid) with a single centred card. Used by Views/Shared/Login.cshtml
   for both the DMS login (code + user + password) and the legacy depot login. */
.auth-body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #F4F6FB 0%, #EDF0F6 100%); color: var(--text); overflow-x: hidden; font-family: var(--font); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.auth-body *, .auth-body *::before, .auth-body *::after { box-sizing: border-box; }   /* the login page does not load bootstrap */
.auth-canvas { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.auth-canvas::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.auth-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; animation: auth-float 18s ease-in-out infinite; }
.auth-blob.b1 { width: 520px; height: 520px; left: -140px; top: -160px; background: #B7C7E6; }
.auth-blob.b2 { width: 460px; height: 460px; right: -120px; top: 10%; background: #C9D6EE; animation-delay: -6s; }
.auth-blob.b3 { width: 420px; height: 420px; left: 30%; bottom: -200px; background: #DEE7F7; animation-delay: -12s; }
@keyframes auth-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, -30px, 0) scale(1.08); }
}
.auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; color: var(--text); margin-bottom: 16px; text-decoration: none; }
.auth-brand img.auth-logo.auth-logo--dms { height: 40px; max-width: 200px; background: transparent; border: 0; border-radius: 0; padding: 0; }
.auth-brand-sep { width: 1px; height: 34px; background: var(--border); }
.auth-mark {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(135deg, #2E5496, #1B2E52); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .3px;
    box-shadow: 0 10px 30px rgba(46, 84, 150, .4);
}
.auth-brand img.auth-logo { height: 46px; width: auto; max-width: 180px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px 10px; border: 1px solid var(--border); }
.auth-brand-name { font-size: 16px; font-weight: 700; line-height: 1.15; }
.auth-brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; }
.auth-card {
    width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 24px 28px 18px;
    border: 1px solid #e6ebf3;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
}
.auth-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 14px; }
.auth-card .auth-sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.auth-alert { display: flex; gap: 8px; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 0 0 16px; }
.auth-alert:empty, .auth-alert.is-empty { display: none; }
.auth-alert svg { flex: 0 0 16px; margin-top: 1px; }
.auth-field { margin-bottom: 12px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.auth-field label span { color: var(--muted); font-weight: 400; }
.auth-input { position: relative; }
.auth-input > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.auth-input input {
    width: 100%; height: 42px; padding: 0 44px 0 42px; border: 1.5px solid #e2e8f0; border-radius: 11px;
    font: inherit; font-size: 14px; color: var(--text); background: #f8fafc; outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-input input::placeholder { color: #a3aec0; }
.auth-input input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(46, 84, 150, .16); }
.auth-input input.auth-code { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.auth-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.auth-eye:hover { background: #eef2f7; color: #475569; }
.auth-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 16px; font-size: 12.5px; }
.auth-row--empty { margin: 0 0 6px; }
.auth-row .auth-hint { color: #94a3b8; font-size: 12px; text-align: right; white-space: nowrap; }
.auth-check { display: flex; align-items: center; gap: 8px; color: #475569; cursor: pointer; user-select: none; white-space: nowrap; }
.auth-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.auth-btn {
    width: 100%; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--brand); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 24px rgba(46, 84, 150, .32); transition: transform .12s, box-shadow .12s, filter .12s;
}
.auth-btn:hover { background: var(--brand-600); box-shadow: 0 14px 30px rgba(46, 84, 150, .4); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn[disabled] { opacity: .7; cursor: progress; }
.auth-help { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e2e8f0; font-size: 12px; color: var(--muted); text-align: center; display: flex; flex-direction: column; gap: 3px; }
.auth-help a { font-weight: 600; }
.auth-foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.auth-foot img { height: 22px; width: auto; }
.auth-foot .dot { opacity: .5; }
@media (max-width: 480px) {
    .auth-card { padding: 24px 20px; border-radius: 14px; }
    .auth-wrap { padding: 28px 12px; }
}

/* ---------- print ------------------------------------------------------------ */
@media print {
    .app-sidebar, .app-topbar, .app-footer, .app-backdrop, .app-menu-toggle { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .app-content { padding: 0; }
    body { background: #fff; }
    .thumbnail, .thumbnail-mod-1 { box-shadow: none; border-color: #ccc; }
}

/* stock finder: searchable dropdowns (bootstrap-select) sized like plain selects */
.stock-finder .sf-filters .bootstrap-select { width: 100% !important; }
.stock-finder .sf-filters .bootstrap-select > .btn { height: 34px; padding: 5px 28px 5px 10px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; border-radius: var(--radius-sm); background: #fff; }
.stock-finder .sf-filters .bootstrap-select .bs-searchbox input { height: 32px; font-size: 12.5px; }
.stock-finder .sf-filters .bootstrap-select .dropdown-menu li a { font-size: 12.5px; padding: 6px 12px; }

/* ---------- top bar in the band navy (matches the reference site's band) ---------- */
.app-topbar { background: var(--sidebar-bg); border-bottom: 1px solid #3A4E76; color: #E9EFFA; backdrop-filter: none; }
.app-page-title { color: #fff; }
.app-menu-toggle { background: transparent; border-color: #3A4E76; color: #E9EFFA; }
.app-menu-toggle:hover { background: rgba(255, 255, 255, .08); }
.app-topbar-brand, .app-topbar-brand:hover, .app-topbar-brand:focus { color: #fff; }
.app-topbar-brand small { color: var(--sidebar-muted); }
.app-topbar-brand .app-brand-mark { background: linear-gradient(135deg, #3E67AE, #82A8E9); box-shadow: none; }
.app-user { color: var(--sidebar-muted); }
.app-user strong { color: #fff; }
.app-avatar { background: linear-gradient(135deg, #3E67AE, #82A8E9); }
.app-logout { background: transparent; border-color: #3A4E76; color: #E9EFFA; }
.app-logout:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-pill { background: rgba(255, 255, 255, .08); border-color: #3A4E76; color: #E9EFFA; }
.app-pill.is-admin { background: #FAEBCE; border-color: #FAEBCE; color: #8A5A00; }
.app-brand { border-bottom-color: #3A4E76; }

/* ---------- distributor dispatch entry (SDMS Dispatch) ---------------------------- */
.de-page { max-width: 1180px; }
.de-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.de-title { font-size: 20px; margin: 0 0 2px; }
.de-sub { color: var(--muted); font-size: 12.5px; }
.de-head-links { display: flex; gap: 8px; flex-wrap: wrap; }
.de-alert { display: none; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 0 0 12px; }
.de-alert.err { display: block; background: #F8E1DE; border: 1px solid #ecb9b3; color: #9C231A; }
.de-alert.ok { display: block; background: #DCEFE4; border: 1px solid #b7dcc6; color: #186A46; }
.de-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 12px; }
.de-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.de-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 150px; }
.de-field > span { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.de-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.de-field--date { min-width: 150px; }
.de-field--grow { flex: 1 1 220px; }
.de-field input[type="text"], .de-field input[type="date"] { box-sizing: border-box; height: 36px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; width: 100%; max-width: none; }
.de-field input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(46, 84, 150, .16); }
.de-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.de-seg button { border: 0; background: transparent; padding: 8px 16px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.de-seg button.on { background: var(--brand); color: #fff; }
.de-inline { display: flex; gap: 6px; align-items: center; }
.de-inline .bootstrap-select { flex: 1 1 auto; width: auto !important; }
.de-inline .bootstrap-select > .btn { height: 36px; border-radius: var(--radius-sm); }
.de-newdealer { height: 36px; white-space: nowrap; }
.de-newdealer-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.de-newdealer-form input { box-sizing: border-box; height: 36px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; flex: 1 1 160px; max-width: none; }
.de-search { position: relative; }
.de-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.de-search input { box-sizing: border-box; width: 100%; max-width: none; height: 48px; padding: 0 180px 0 44px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; font-size: 15px; background: #F6F8FC; outline: none; }
.de-search input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(46, 84, 150, .16); }
.de-search input::-webkit-search-cancel-button { display: none; }
.de-search-hint { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10.5px; color: #94a3b8; letter-spacing: .4px; text-transform: uppercase; pointer-events: none; }
.de-results { margin-top: 10px; }
.de-results:empty { display: none; }
.de-none { color: var(--muted); font-size: 13px; padding: 8px 4px; }
.de-cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 2px 4px 6px; }
.de-results-table, .de-lines { margin: 0 !important; }
.de-results-table tr.nil td { color: var(--muted); }
.de-results-table b.green { color: var(--success); }
.de-results-table b.red { color: var(--danger); }
.de-nil { font-size: 11.5px; color: var(--muted); }
.de-code { font-weight: 600; }
.de-qtycol { width: 96px; }
input.de-qty { box-sizing: border-box; width: 84px; height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; font-weight: 600; text-align: right; }
input.de-qty:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(46, 84, 150, .16); }
.de-lines-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.de-total { font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; }
.de-total b { color: var(--text); }
.de-lines tr.over td { background: #FAEBCE !important; }
.de-sno { width: 40px; color: var(--muted); text-align: right; }
.de-remove { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.de-remove:hover { background: #F8E1DE; color: var(--danger); }
.de-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }
.de-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 20px; }
.de-actions .btn { height: 42px; padding: 0 22px; font-size: 13.5px; border-radius: 999px; display: inline-flex; align-items: center; }
.de-listbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.de-listbar label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.de-listbar input[type="date"] { height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; }
.de-listbar input[type="search"] { box-sizing: border-box; height: 34px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 13px; flex: 1 1 220px; max-width: none; margin-left: auto; }
.de-rowactions { white-space: nowrap; }
.de-rowactions .btn { padding: 3px 9px; font-size: 11.5px; }

/* compact dispatch form (Entry.cshtml): one header row, then two panes that fill the
   window - stock list on the left (scrolls), pick list + total + save on the right
   (always in view). Heights are set by fit() in the view. */
.de-compact { max-width: none; }
body.de-compact-page .app-footer { display: none; }
body.de-compact-page.app--bar .app-content { padding: 12px 16px 12px; }
.de-compact .de-alert { margin-bottom: 8px; }
.de-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; padding: 8px 12px; margin-bottom: 10px; }
.de-bar .de-field { gap: 2px; min-width: 120px; }
.de-bar .de-field > span { font-size: 10px; letter-spacing: .5px; white-space: nowrap; }
.de-bar .de-field input[type="text"], .de-bar .de-field input[type="date"] { height: 32px; font-size: 12.5px; }
.de-bar .de-field--date { min-width: 130px; max-width: 150px; }
.de-bar .de-field--grow { flex: 1 1 200px; }
.de-bar .de-seg button { padding: 6px 12px; font-size: 12px; }
.de-bar .bootstrap-select { width: 100% !important; }
.de-bar .bootstrap-select > .btn { height: 32px; padding: 4px 26px 4px 10px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; border-radius: var(--radius-sm); background: #fff; }
.de-bar-links { margin-left: auto; min-width: 0 !important; }
.de-bar-links .btn { height: 32px; padding: 0 12px; font-size: 12px; display: inline-flex; align-items: center; }
.de-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); gap: 10px; align-items: stretch; }
.de-pane--pick .de-sno { width: 28px; padding-left: 4px !important; padding-right: 4px !important; }
.de-pane--pick .de-availcol { width: 52px; }
.de-pane--pick .de-qtycol { width: 74px; }
.de-pane--pick td:last-child, .de-pane--pick th:last-child { width: 30px; padding-left: 2px !important; padding-right: 2px !important; }
.de-pane { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px; margin: 0; }
.de-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 8px; }
.de-scroll .table > thead > tr > th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--border); border-bottom: 0 !important; }
.de-compact .de-search input { height: 38px; padding: 0 84px 0 38px; font-size: 14px; border-radius: 10px; }
.de-compact .de-search > svg { left: 12px; }
.de-compact .de-search-hint { right: 12px; }
.de-compact .de-results { margin-top: 0; }
.de-compact .de-results:empty { display: block; }
.de-compact .de-results-table > thead > tr > th, .de-compact .de-lines > thead > tr > th { padding: 6px 8px; }
.de-compact .de-results-table > tbody > tr > td, .de-compact .de-lines > tbody > tr > td { padding: 3px 8px; font-size: 12.5px; }
.de-compact input.de-qty { width: 66px; height: 28px; font-size: 13px; padding: 2px 6px; }
.de-compact .de-qtycol { width: 78px; }
.de-availcol { width: 72px; white-space: nowrap; }
.de-addcol { width: 58px; }
.de-compact .btn-sm.de-add { padding: 3px 10px; font-size: 11.5px; }
.de-grade { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; background: var(--brand-100); color: var(--brand-600); border-radius: 999px; padding: 0 6px; vertical-align: middle; margin-left: 4px; }
.de-compact .de-lines-head { margin-bottom: 0; }
.de-compact .de-empty { padding: 10px 2px; }
.de-pick-foot { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.de-sum { display: flex; gap: 10px; margin-bottom: 8px; }
.de-sum > div { flex: 1; background: var(--bg); border-radius: var(--radius-sm); padding: 5px 10px; display: flex; flex-direction: column; }
.de-sum span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.de-sum b { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; color: var(--brand-600); }
.de-over-note { font-size: 11.5px; color: var(--warning); margin-bottom: 8px; }
.de-over-note--err { color: var(--danger); font-weight: 600; }
input.de-qty.bad, input.de-qty.bad:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(156, 35, 26, .14); color: var(--danger); }
.de-add[disabled] { background: #B8C2D6; border-color: #B8C2D6; cursor: not-allowed; opacity: 1; }
.de-compact .de-actions { margin: 0; gap: 6px; }
.de-compact .de-actions .btn { height: 36px; padding: 0 14px; font-size: 13px; flex: 1 1 auto; justify-content: center; }
/* admin Stock at distributor: table + a summary of exactly what is listed */
.sf-body { display: flex; align-items: flex-start; gap: 12px; }
.sf-body .sf-table { flex: 1 1 auto; min-width: 0; }
.sf-side { flex: 0 0 300px; width: 300px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.sf-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #F6F8FC; border-bottom: 1px solid var(--border); }
.sf-side-head strong { font-family: var(--font-heading); font-size: 14px; color: var(--brand-600); }
.sf-by { height: 28px; padding: 2px 6px; font-size: 11.5px; width: auto; }
.sf-side-note { font-size: 11px; color: var(--muted); padding: 5px 10px 0; }
.sf-side-scroll { max-height: 520px; overflow: auto; padding: 4px 6px 6px; }
.sf-side-table { margin: 0 !important; font-size: 12px; }
.sf-side-table > thead > tr > th { padding: 5px 6px; font-size: 9.5px; }
.sf-side-table > tbody > tr > td { padding: 5px 6px; border-color: #eef2f7; vertical-align: middle; }
.sf-side-table > tfoot > tr > td { padding: 6px; border-top: 2px solid var(--border); background: #F6F8FC; font-weight: 600; }
.sf-side-name { font-weight: 600; color: var(--text); line-height: 1.25; }
.sf-side-bar { display: block; height: 4px; background: #E6EBF3; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.sf-side-bar i { display: block; height: 100%; background: var(--brand); }
@media (max-width: 1200px) { .sf-body { display: block; } .sf-side { width: 100%; margin-top: 12px; } }

/* ledger popup - opened from Stock, CEO report and the receive report, so the user never leaves the page */
.lgm-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lgm { background: var(--card); border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .6); width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.lgm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.lgm-title { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--brand-600); }
.lgm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lgm-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; border-radius: 6px; }
.lgm-x:hover { background: var(--bg); color: var(--danger); }
.lgm-body { padding: 12px 18px 16px; overflow: auto; }
/* One row whatever the count: Opening stock only shows on some articles, so a fixed
   5-up grid dropped the sixth card onto a line of its own. The cards share the width. */
.lgm-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 10px; }
.lgm-kpis > div { background: var(--bg); border-radius: var(--radius-sm); padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.lgm-kpis span { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgm-kpis b { font-family: var(--font-heading); font-size: 17px; line-height: 1.2; color: var(--brand-600); }
.lgm-foot { padding: 10px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: #F9FBFD; }
.lgm table { margin: 0 !important; }
.lgm tr.lg-open td { background: #F6F8FC; font-weight: 600; }
@media (max-width: 800px) { .lgm-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* CEO report: article rows with their holders (works with 100+ distributors) */
.ceo-page { max-width: none; }
.ceo-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ceo-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.ceo-tab { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ceo-tab em { font-style: normal; font-weight: 400; font-size: 12px; opacity: .8; }
.ceo-tab:hover { border-color: #BCC7DA; background: var(--brand-50); }
.ceo-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ceo-tab.on em { color: #DEE7F7; }
#ceoArticles tbody tr.ceo-row { cursor: pointer; }
#ceoArticles tbody tr.ceo-row.shown > td { background: var(--brand-50); }
.ceo-chips { max-width: 520px; }
.ceo-chip { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; margin: 1px 4px 1px 0; font-size: 11.5px; white-space: nowrap; }
.ceo-chip i { font-style: normal; color: var(--muted); }
.ceo-chip-qty { font-weight: 700; color: var(--brand-600); }
.ceo-more { font-size: 11.5px; color: var(--brand); font-weight: 600; }
.ceo-bar { display: inline-block; width: 54px; height: 6px; background: #E6EBF3; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 5px; }
.ceo-bar i { display: block; height: 100%; background: var(--brand); }
#ceoDist td.green, .rightalign.green { color: var(--success); }
@media (max-width: 1100px) { .ceo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ceo-chips { max-width: 260px; } }

/* stock adjustment (count sheet) + article ledger */
.ad-diffcol { width: 66px; }
.de-sum b.green { color: var(--success); }
#lgTable tr.lg-open td { background: #F6F8FC; font-weight: 600; }
.lg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.lg-code { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--brand-600); }
#rrTable tbody tr, #lgTable tbody tr { cursor: pointer; }
#rrTable tbody tr.shown > td { background: var(--brand-50); }
.de-results-table b.green, .de-lines b.green { color: var(--success); }
.de-results-table b.red, .de-lines b.red { color: var(--danger); }

/* distributor Receive Stock (DistributorReceive.cshtml): dispatch cards + article lines */
.de-work .rc-pane-list { }
.de-work:has(.rc-pane-list) { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
/* where the goods were shipped from: one pill per plant / depot above the dispatch list */
.rc-srcbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #F9FBFD; }
.rc-src { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 3px 5px 3px 10px; font: inherit;
          font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rc-src:hover { border-color: #BCC7DA; background: var(--brand-50); color: var(--brand-600); }
.rc-src span { font-family: var(--font-mono); font-size: 10px; background: #EDF1F7; color: var(--muted); border-radius: 999px; padding: 1px 6px; }
.rc-src.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rc-src.on span { background: rgba(255,255,255,.25); color: #fff; }
.rc-card { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; }
.rc-card:hover { border-color: #BCC7DA; background: var(--brand-50); }
.rc-card.on { border-color: var(--brand); border-left-color: var(--brand); background: var(--brand-50); }
.rc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rc-card-top .de-code { font-size: 12.5px; }
.rc-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rc-card-qty { font-size: 12px; color: var(--text); margin-top: 3px; }
.rc-card-qty b { font-family: var(--font-heading); font-size: 15px; color: var(--brand-600); }
.rc-empty { padding: 24px 16px; line-height: 1.7; }
.rc-head { align-items: flex-start; }
.rc-head strong { font-family: var(--font-mono); font-size: 14px; }
.rc-shortcol { width: 54px; }
.rc-short { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--danger); }
.de-sum b.red { color: var(--danger); }
.de-sum b.green { color: var(--success); }
.de-compact .de-pick-foot .de-field > span { font-size: 10px; }
.de-compact .de-pick-foot input[type="text"] { height: 32px; font-size: 12.5px; }
@media (max-width: 900px) { .de-work:has(.rc-pane-list) { display: block; } }

/* step 17: the receive screen owns the window - only the article list scrolls */
body.de-noscroll { overflow: hidden; }
/* The picked dispatch is a flex column inside the pane, so .de-scroll can take the
   leftover height and the totals + Receive button stay pinned at the bottom. Without
   this the article table grows with its rows and pushes the button off the screen -
   and with the page itself not scrolling, it could not be reached at all. */
.de-pane > .rc-detail { flex: 1 1 auto; min-height: 0; flex-direction: column; }
.de-pane > .rc-detail > .de-scroll { flex: 1 1 auto; min-height: 0; }
.de-pane > .rc-detail > .de-pick-foot { flex: 0 0 auto; }
/* Sent | Less recv | Broken | Received. The two inputs are the only things typed into. */
.rc-lines .rc-inpcol { width: 86px; }
.rc-lines .rc-gotcol { width: 78px; }
.rc-lines .rc-inpcol input { width: 62px; text-align: right; }
.rc-lines .rc-less { border-color: #E4C7C7; }
.rc-lines .rc-broken { border-color: #E9D6B6; }
.rc-lines .rc-less:focus { border-color: var(--danger); }
.rc-lines .rc-broken:focus { border-color: #C58A1E; }
.rc-lines .rc-got { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--success); }
.rc-lines tr.over .rc-got { color: var(--danger); }
.rc-lines thead th.rc-inpcol { font-size: 10.5px; }
.rc-sum .rc-zero b { color: var(--muted) !important; }
.rc-foot-row { margin-bottom: 0; align-items: flex-end; }
.rc-foot-row .de-bar-links .btn { min-width: 170px; }

/* dispatch report (List.cshtml): filter bar, KPI strip, server-side table */
.de-report { max-width: 1500px; }
.dr-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.dr-filters .de-field { gap: 2px; min-width: 130px; }
.dr-filters .de-field > span { font-size: 10px; white-space: nowrap; }
.dr-filters .de-field input[type="text"], .dr-filters .de-field input[type="date"], .dr-filters .de-field input[type="search"], .dr-filters .ad-select { height: 32px; font-size: 12.5px; }
.dr-filters .de-field input[type="search"] { box-sizing: border-box; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; width: 100%; max-width: none; }
.dr-filters .bootstrap-select { width: 100% !important; }
.dr-filters .bootstrap-select > .btn { height: 32px; padding: 4px 26px 4px 10px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; border-radius: var(--radius-sm); background: #fff; }
.dr-filters .de-bar-links .btn { height: 32px; padding: 0 14px; font-size: 12.5px; display: inline-flex; align-items: center; }
.dr-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dr-kpis > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.dr-kpis span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.dr-kpis b { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; color: var(--brand-600); }
.slip-tag.dr-tag-non { background: #FAEBCE; color: #8A5A00; }
#drTable tbody tr { cursor: pointer; }
#drTable tbody tr.shown > td { background: var(--brand-50); }
#drTable tbody tr.dr-cancelled > td { color: var(--muted); }
#drTable tbody tr.dr-cancelled td.de-code { text-decoration: line-through; }
#drTable .de-rowactions { cursor: default; }
#drTable .de-rowactions .btn { margin-bottom: 2px; }
#drTable_processing { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; font-size: 12px; color: var(--muted); z-index: 2; }
@media (max-width: 900px) { .dr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slip-cancelled { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--danger); border: 2px solid var(--danger); border-radius: 6px; padding: 4px 12px; transform: rotate(-4deg); margin-top: 6px; }

@media (max-width: 900px) {
    .de-work { display: block; }
    .de-pane { margin-bottom: 10px; }
    .de-scroll { max-height: 50vh; }
    .de-bar-links { margin-left: 0; }
}

/* dispatch slip (screen + print) */
.slip { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; max-width: 820px; box-shadow: var(--shadow-sm); font-size: 13px; }
.slip-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--brand-600); padding-bottom: 14px; }
.slip-company { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--brand-600); }
.slip-meta { color: var(--muted); font-size: 12px; white-space: pre-line; }
.slip-title { text-align: right; }
.slip-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.slip-no { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--text); }
.slip-to { padding: 14px 0; border-bottom: 1px solid var(--border); }
.slip-party { font-size: 15px; font-weight: 600; margin-top: 2px; }
.slip-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; background: var(--brand-100); color: var(--brand-600); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.slip-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.slip-table th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--border); }
.slip-table td { padding: 8px 8px; border-bottom: 1px solid #eef1f6; }
.slip-table tfoot td { border-top: 2px solid var(--brand-600); border-bottom: 0; font-size: 14px; }
.slip-table .c { text-align: center; }
.slip-table .r { text-align: right; }
.slip-table .b { font-weight: 600; }
.slip-remark { margin-top: 14px; font-size: 12.5px; }
.slip-remark .slip-kicker { margin-right: 8px; }
.slip-sign { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.slip-sign > div { flex: 1; text-align: center; }
.slip-sign .line { border-top: 1px solid var(--text); margin-bottom: 6px; }
.slip-foot { margin-top: 18px; font-size: 10.5px; color: var(--muted); text-align: right; }
@media print {
    .app-bar, .noprint { display: none !important; }
    .de-page { max-width: none; }
    .slip { border: 0; box-shadow: none; padding: 0; max-width: none; }
}

/* ---------- admin: report cards, setup tables ---------------------------------- */
.rp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
@media (max-width: 1100px) { .rp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rp-cards { grid-template-columns: 1fr; } }
.rp-card { display: flex; flex-direction: column; gap: 6px; min-height: 180px; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.rp-card:hover, .rp-card:focus { color: var(--text); text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(21, 34, 58, .35); border-color: var(--brand); }
.rp-card strong { font-family: var(--font-heading); font-size: 17px; color: var(--brand-600); }
.rp-card > strong + span { color: var(--muted); font-size: 12.5px; line-height: 1.5; flex: 1 1 auto; }
.rp-open { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--brand); font-weight: 600; }
.rp-card:hover .rp-open { text-decoration: underline; }
.rp-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); }
.rp-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; margin-bottom: 4px; }
.rp-icon svg { width: 20px; height: 20px; }
.ad-table { margin: 0 !important; }
.ad-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.ad-pill.ok { background: #DCEFE4; color: #186A46; }
.ad-pill.off { background: #F8E1DE; color: #9C231A; }
.ad-code { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.ad-select { box-sizing: border-box; height: 36px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; width: 100%; max-width: none; background: #fff; }
.de-field input[type="number"] { box-sizing: border-box; height: 36px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; width: 100%; max-width: none; }
.sow-row { cursor: pointer; }
.sow-lines { margin: 0 !important; background: #F6F8FC; }
.sow-lines th, .sow-lines td { padding: 5px 10px !important; font-size: 12px; }
/* Stock on wheels: single-line rows (code and name are separate columns, no Articles
   button, no status column) so many more dispatches fit on one screen. */
.sow-table > tbody > tr.sow-row > td { padding-top: 5px !important; padding-bottom: 5px !important; white-space: nowrap; }
.sow-table > tbody > tr.sow-row:hover > td { background: var(--brand-50); }
.sow-table > tbody > tr.sow-row.shown > td { background: var(--brand-50); box-shadow: inset 0 -1px 0 var(--brand); }
.sow-table .ad-pill { margin-left: 6px; }

/* ---------- admin MIS report (dispatch report) ------------------------------------ */
.mis-page { max-width: 1400px; }
.mis-quick { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.mis-quick button { border: 0; background: transparent; padding: 7px 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mis-quick button.on { background: var(--brand-100); color: var(--brand-600); }
.mis-title-print { display: none; }
.mis-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.mis-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--brand); }
.mis-kpi .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.mis-kpi strong { font-family: var(--font-heading); font-size: 26px; color: var(--brand-600); line-height: 1.15; }
.mis-kpi .s { font-size: 11.5px; color: var(--muted); }
.mis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.mis-chart--wide { grid-column: span 2; }
.mis-grid > .de-card { margin: 0; min-width: 0; }
.mis-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mis-chart-head strong { font-family: var(--font-heading); font-size: 15px; color: var(--brand-600); }
.mis-canvas { width: 100%; height: 260px; }
.mis-canvas--short { height: 220px; }
.mis-grid--tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mis-table { font-size: 12.5px; }
.mis-details .de-listbar strong { font-family: var(--font-heading); font-size: 15px; color: var(--brand-600); margin-right: 6px; }
@media (max-width: 1200px) { .mis-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mis-chart--wide { grid-column: span 2; } }
@media (max-width: 720px) { .mis-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mis-grid, .mis-grid--tables { grid-template-columns: 1fr; } .mis-chart--wide { grid-column: span 1; } }
@media print {
    .mis-title-print { display: block; font-family: var(--font-heading); font-size: 16px; margin: 0 0 10px; }
    .mis-details { display: none; }
    .mis-kpis { grid-template-columns: repeat(3, 1fr); }
    .mis-grid { grid-template-columns: repeat(2, 1fr); page-break-inside: avoid; }
    .de-card, .mis-kpi { box-shadow: none; }
}

/* =============================================================================
   Step 17 screens: opening stock, movement (fast/slow/dead), order status, dealers
   ============================================================================= */

/* --- opening stock: the Excel template panel (download -> fill Qty -> upload) --- */
.op-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 6px; }
.op-step { display: flex; gap: 10px; align-items: flex-start; }
.op-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.op-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; max-height: 150px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.op-cats label { display: flex; align-items: center; gap: 5px; font-weight: 400; margin: 0; white-space: nowrap; font-size: 13px; }
.op-cats label em { color: var(--muted); font-style: normal; font-size: 12px; }
.op-cats label.is-worked { font-weight: 600; }
.op-was { color: var(--muted); font-size: 12px; }
.op-step b { font-size: 13px; }
.op-step .de-sub { line-height: 1.45; margin-top: 2px; }

/* --- movement: the bucket cards --- */
.mv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mv-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.mv-card:hover { box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35); }
.mv-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50) inset; }
.mv-card-t { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mv-card-n { font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--text); }
.mv-card-n span { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--muted); }
.mv-card-s { font-size: 12px; color: var(--text); }
.mv-card-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.mv-card.mv-fast { border-left-color: var(--success); }
.mv-card.mv-normal { border-left-color: var(--brand); }
.mv-card.mv-slow { border-left-color: #D89A2A; }
.mv-card.mv-dead { border-left-color: var(--danger); }
.mv-card.mv-new { border-left-color: #8FA6CC; }
/* the same five states as a tag inside the table */
/* the sum behind a column, under its name, so nobody has to ask where the number came from */
.mv-formula { display: block; margin-top: 2px; font-family: var(--font); font-size: 10px; font-weight: 400;
              text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .85; }
.mv-tag { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; background: #EDF1F7; color: var(--muted); }
.mv-tag.mv-fast, .mv-tag.mv-fast-x { background: #E4F0E4; color: #1F5B2E; }
.mv-tag.mv-normal { background: #E7EEF9; color: #24457E; }
.mv-tag.mv-slow { background: #FAEBCE; color: #8A5A00; }
.mv-tag.mv-dead { background: #F8E2E2; color: #922B2B; }
.mv-tag.mv-new { background: #EDF1F7; color: #52617A; }
.mv-table td, .mv-table th { vertical-align: middle; }
.mv-table .de-sub { font-size: 11px; }

/* --- order status: cards on the left, the seven steps on the right --- */
.de-work.ot-work { grid-template-columns: minmax(290px, 360px) minmax(0, 1fr); }
.ot-card { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; }
.ot-card:hover { border-color: #BCC7DA; background: var(--brand-50); }
.ot-card.on { border-color: var(--brand); border-left-color: var(--brand); background: var(--brand-50); }
.ot-progress { height: 5px; border-radius: 3px; background: #E7ECF3; margin: 7px 0 5px; overflow: hidden; }
.ot-progress i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.ot-progress i.s7 { background: var(--success); }
.ot-card-stage { font-size: 12px; }
.ot-card-stage b { color: var(--brand-600); }
.ot-card-stage b.s7 { color: var(--success); }
.ot-steps { list-style: none; margin: 4px 0 14px; padding: 0; }
.ot-step { display: flex; gap: 12px; padding: 0 0 2px; position: relative; }
.ot-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 26px; bottom: -2px; width: 2px; background: #E2E8F2; }
.ot-step.done:not(:last-child)::before { background: #BBD8C2; }
.ot-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #E2E8F2; background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; z-index: 1; }
.ot-step.done .ot-dot { border-color: var(--success); background: var(--success); color: #fff; }
.ot-step.now .ot-dot { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-50); }
.ot-step-body { padding: 3px 0 14px; line-height: 1.4; }
.ot-step-body b { font-size: 14px; color: var(--text); }
.ot-step:not(.done) .ot-step-body b { color: var(--muted); font-weight: 600; }
.ot-when { display: inline-block; margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.ot-when.ot-pending { font-style: italic; }
.ot-qty { display: inline-block; margin-left: 10px; font-size: 11.5px; font-weight: 700; color: var(--brand-600); }
.ot-lines-head { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 6px 0 4px; }
.ot-lines .de-sub { font-size: 11px; }
@media (max-width: 900px) { .de-work.ot-work { display: block; } }

/* --- dealers: the add / edit form above the list --- */
.dl-form .de-row { margin-bottom: 8px; }
.de-dealer-row { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.de-dealer-row .bootstrap-select { flex: 1 1 auto; min-width: 0; }
.de-dealer-add { flex: 0 0 auto; height: 34px; padding: 0 12px; font-size: 12.5px; }
.lgm.lgm--sm { width: min(760px, 100%); }
.lgm--sm .lgm-body { padding: 14px 18px; }

/* --- admin dead stock: the stage cards are not clickable --- */
.ds-stages .mv-card { cursor: default; }
.ds-stages .mv-card:hover { box-shadow: none; }

/* =============================================================================
   CEO report: the article x distributor grid
   Distributor names stand on end, so a column is only as wide as the quantity in
   it; the article column and the header stay put while the grid scrolls sideways,
   and each cell is shaded by its share of that article's network stock.
   ============================================================================= */
.ceo-grid-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ceo-grid { margin: 0 !important; border-collapse: separate; border-spacing: 0; }
.ceo-grid th, .ceo-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid #EDF1F7; padding: 4px 8px !important; font-size: 12.5px; vertical-align: middle; }
.ceo-grid thead th { position: sticky; top: 0; z-index: 3; background: #F6F8FC; border-bottom: 2px solid var(--border) !important; vertical-align: bottom; }
/* the rotated distributor heading */
.ceo-grid th.ceo-col { width: 46px; min-width: 46px; max-width: 46px; padding: 6px 2px !important; text-align: center; }
.ceo-vert { writing-mode: vertical-rl; transform: rotate(180deg); height: 156px; margin: 0 auto; display: flex; align-items: flex-end; gap: 5px; white-space: nowrap; overflow: hidden; }
.ceo-vert b { font-size: 11.5px; font-weight: 600; color: var(--text); max-height: 132px; overflow: hidden; text-overflow: ellipsis; }
.ceo-vert span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* frozen article + network total columns */
.ceo-grid .de-sno { position: sticky; left: 0; z-index: 2; background: #fff; width: 34px; min-width: 34px; text-align: right; }
.ceo-grid .ceo-art { position: sticky; left: 34px; z-index: 2; background: #fff; width: 300px; min-width: 300px; max-width: 300px; cursor: pointer; }
.ceo-grid .ceo-tot { position: sticky; left: 334px; z-index: 2; background: #fff; width: 84px; min-width: 84px; border-right: 2px solid var(--border) !important; }
/* a trailing column soaks up the leftover width, so the article and quantity columns
   keep their own size instead of being stretched across the card */
.ceo-grid .ceo-fill { width: 100%; background: #fff; border-right: 0 !important; }
.ceo-grid thead .ceo-fill { background: #F6F8FC; }
.ceo-grid tfoot .ceo-fill { background: #EEF2F8; }
.ceo-grid thead .de-sno, .ceo-grid thead .ceo-art, .ceo-grid thead .ceo-tot { z-index: 4; background: #F6F8FC; }
.ceo-grid tbody tr:hover .de-sno, .ceo-grid tbody tr:hover .ceo-art, .ceo-grid tbody tr:hover .ceo-tot { background: var(--brand-50); }
.ceo-grid tbody tr:hover td { background: var(--brand-50); }
.ceo-grid .ceo-art .de-sub { font-size: 10.5px; margin-top: 1px; }
.ceo-grid .ceo-art:hover .de-code { text-decoration: underline; }
/* the quantity cells */
.ceo-cell { text-align: right; font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.ceo-cell.ceo-nil { background: #FBFCFE; cursor: default; }
.ceo-cell.h1 { background: #EAF1FB; }
.ceo-cell.h2 { background: #CFE0F5; }
.ceo-cell.h3 { background: #A9C7EC; }
.ceo-cell.h4 { background: #7FA9DF; color: #10233F; font-weight: 700; }
.ceo-cell:not(.ceo-nil):hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.ceo-grid .ceo-others { background: #FDFBF4; }
.ceo-grid th.ceo-others .ceo-vert b { color: #8A5A00; }
/* the totals row at the bottom */
.ceo-grid tfoot td { position: sticky; bottom: 0; z-index: 3; background: #EEF2F8; font-weight: 700; border-top: 2px solid var(--border) !important; }
.ceo-grid tfoot .de-sno, .ceo-grid tfoot .ceo-art, .ceo-grid tfoot .ceo-tot { z-index: 4; background: #EEF2F8; }
.ceo-grid tr.shown .ceo-art { box-shadow: inset 3px 0 0 var(--brand); }
@media print { .ceo-grid-wrap { max-height: none; overflow: visible; } }

/* =============================================================================
   Search stock (CeoReport.cshtml) - one screen, nothing on it but the search.
   A compact bar (article + city chips) and the answer, which is the only part
   that scrolls. No KPI cards: this screen answers one question.
   ============================================================================= */
.ss-page { max-width: none; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
.ss-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ss-top .ceo-tabs { margin: 0; }
.ss-find { display: flex; flex-direction: column; min-height: 0; }
.ss-bar { padding: 10px 12px; margin-bottom: 10px; }
.ss-bar-row { display: flex; gap: 12px; align-items: center; }
/* the article box */
/* wide enough to read the longest article name in full once it is picked */
.ss-article { position: relative; flex: 0 0 auto; width: 510px; display: flex; align-items: center; }
.ss-mag { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.ss-article input[type="search"] { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; /* site.css caps inputs at 280px */
                                   height: 40px; padding: 0 88px 0 34px; font-size: 15px;
                                   border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ss-article input[type="search"]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-50); }
.ss-hint { position: absolute; right: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); pointer-events: none; }
/* An empty box needs no keyboard hint, and without it the placeholder has the whole width
   instead of running underneath the hint. */
.ss-article input[type="search"]:placeholder-shown { padding-right: 34px; }
.ss-article input[type="search"]:placeholder-shown ~ .ss-hint { display: none; }
.ss-suggest { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 3px; background: #fff;
              border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 14px 34px -12px rgba(15,23,42,.45);
              max-height: 340px; overflow: auto; }
.ss-opt { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid #F2F5FA; }
.ss-opt:last-child { border-bottom: 0; }
.ss-opt:hover { background: var(--brand-50); }
.ss-opt .de-code { font-size: 13px; }
.ss-none { padding: 10px 12px; color: var(--muted); font-size: 12.5px; }
/* the city chips sit on the same line and wrap inside their own strip */
.ss-cities { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-height: 68px; overflow: auto; }
.ss-city { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 3px 6px 3px 11px;
           font: inherit; font-size: 12px; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ss-city span { background: #EEF2F8; border-radius: 999px; padding: 0 6px; font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.ss-city:hover { border-color: #BCC7DA; background: var(--brand-50); }
.ss-city.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ss-city.on span { background: rgba(255,255,255,.22); color: #fff; }
.ss-clear { flex: 0 0 auto; }
/* the answer fills what is left; only this scrolls */
.ss-result { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.ss-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #F8FAFD; }
.ss-result-head strong { font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.ss-facts { margin-left: auto; font-size: 13px; color: var(--text); }
.ss-facts b { font-family: var(--font-heading); font-size: 16px; color: var(--brand-600); }
.ss-result .de-scroll { margin-top: 0; padding: 0 14px 12px; }
.ss-blank { padding: 30px 18px; line-height: 1.7; }
.ss-table { margin-top: 10px !important; }
.ss-table td, .ss-table th { vertical-align: middle; }
.ss-table tr.ss-wheels-only td { background: #FFFDF6; }
.ss-table tfoot td { background: #EEF2F8; font-weight: 700; }
.ss-elsewhere { margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
@media (max-width: 900px) {
    .ss-bar-row { flex-wrap: wrap; }
    .ss-article { width: 100%; }
    .ss-result { height: auto !important; }
}

/* the headline report on the admin dashboard: Search stock is the one people open daily */
.rp-card--lead { border-left-width: 4px; background: linear-gradient(180deg, var(--brand-50) 0%, var(--card) 55%); }
.rp-card--lead strong { font-size: 19px; }

/* the city box: the network runs to 160+ towns, so only the ones holding stock are pinned
   as chips and the rest are typed for */
.ss-cityfind { flex: 0 0 auto; }
.ss-cityfind input[type="search"] { width: 130px; height: 40px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; }
.ss-cityfind input[type="search"]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-50); }
.ss-city.ss-city-empty { border-style: dashed; color: var(--muted); }
.ss-city.ss-city-empty span { background: transparent; }
.ss-city.ss-city-empty.on { color: #fff; border-style: solid; }

/* the city-wise answer: one row per town, opened for the distributors in it */
.ss-cityrow { cursor: pointer; }
.ss-cityrow:hover > td { background: var(--brand-50); }
.ss-cityrow.shown > td { background: var(--brand-50); box-shadow: inset 0 -2px 0 var(--brand); }
.ss-cityname { font-size: 14px; }
.ss-detail > td { padding: 0 !important; background: #F6F8FC; }

/* The chosen cities lead the strip as filter boxes - cross first, then the town - the way
   a shopping site shows what is filtered, with Clear all beside them. */
.ss-showing { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 2px; }
.ss-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 6px; }
.ss-picked-city { display: inline-flex; align-items: center; gap: 6px; background: #EDF0F5; color: var(--ink); border: 1px solid transparent;
                  border-radius: var(--radius-sm); padding: 4px 12px 4px 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ss-picked-city:hover { background: #E3E8F0; border-color: #C8D2E2; }
.ss-picked-city.none { background: #fff; border-color: var(--border); color: var(--muted); font-weight: 500; }
.ss-picked-none { font-style: normal; font-family: var(--font-mono); font-size: 10px; background: #EDF0F5; color: var(--muted); border-radius: 3px; padding: 1px 5px; }
.ss-x-chip { border: 0; background: transparent; color: #5A6B85; width: 18px; height: 18px; border-radius: 3px;
             font: inherit; font-size: 17px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ss-picked-city:hover .ss-x-chip { color: var(--danger); }
.ss-x-chip:hover { background: var(--danger); color: #fff; }
.ss-dropall { border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 11.5px; font-weight: 700;
              letter-spacing: .5px; text-transform: uppercase; cursor: pointer; padding: 0 6px; }
.ss-dropall:hover { color: var(--danger); text-decoration: underline; }
/* nothing sits above the search box any more - the card is the top of the screen */
.ss-page > .de-alert { margin-bottom: 10px; }

/* ===================================================================
   Ordering (step 18) - the distributor raises an order on a plant
   =================================================================== */
.od-pane-new  { flex: 0 0 42%; min-width: 0; display: flex; flex-direction: column; }
.od-pane-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.od-form { padding: 10px 12px; border-bottom: 1px solid var(--rule, #DCE3EC); }
.od-form .de-row { gap: 10px; }

.od-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.od-article { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.od-mag { position: absolute; left: 9px; color: var(--muted); pointer-events: none; }
.od-article input[type="search"] {
    box-sizing: border-box; width: 100%; max-width: none; height: 34px;
    padding: 0 10px 0 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px;
}
.od-add input[type="number"] { box-sizing: border-box; width: 78px; height: 34px; text-align: right; font-weight: 600; }
.od-suggest {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 3px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 14px 34px -12px rgba(15,23,42,.45);
    max-height: 260px; overflow: auto;
}
.od-opt { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.od-opt:hover { background: var(--brand-50); }
.od-opt b { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--brand-600); }
.od-opt span { font-size: 11.5px; }

.od-lines input.de-qty { width: 76px; }

/* the order book */
.od-card { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm);
           padding: 8px 10px; margin-bottom: 8px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; }
.od-card:hover { border-color: #BCC7DA; background: var(--brand-50); }
.od-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.od-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.od-card-qty { font-size: 13px; margin-top: 3px; }
.od-card-stage { font-family: var(--font-mono); font-size: 11px; color: var(--brand-600); margin-top: 3px; }
.od-card-why { font-size: 12px; color: var(--danger); margin-top: 3px; }

.od-state { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
            border-radius: 999px; padding: 2px 9px; font-weight: 600; white-space: nowrap; }
.od-state.od-draft { background: #EDF1F7; color: var(--muted); }
.od-state.od-wait  { background: #FAEBCE; color: #8A5A00; }
.od-state.od-ok    { background: #E4F0E4; color: #1F5B2E; }
.od-state.od-no    { background: #F7E2E0; color: #9C231A; }
.od-state.od-off   { background: #EDF1F7; color: var(--muted); text-decoration: line-through; }

/* the seven steps inside the popup */
.od-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.od-step { display: flex; align-items: center; gap: 8px; flex: 1 1 150px; border: 1px solid var(--border);
           border-radius: var(--radius-sm); padding: 6px 10px; background: #fff; }
.od-step i { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
             width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             background: #EDF1F7; color: var(--muted); flex: none; }
.od-step b { display: block; font-size: 12.5px; color: var(--ink); }
.od-step span { display: block; font-size: 11px; }
.od-step.on { border-color: #BBD8C1; background: #F2F8F3; }
.od-step.on i { background: #1F5B2E; color: #fff; }

.oc-decide { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* pending report buckets */
.pd-buckets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.pd-bucket { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px; }
.pd-bucket .pd-b-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px;
                     text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pd-bucket b { font-family: var(--font-heading); font-size: 20px; color: var(--brand-600); }
.pd-bucket span.de-sub { display: block; font-size: 11.5px; }
.pd-bucket.late { background: #FBF1F0; }
.pd-bucket.late b { color: var(--danger); }
@media (max-width: 760px) { .pd-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .od-pane-new { flex: 1 1 auto; } }

/* ---------- dealer rewards (Tools/Rewards, script 34) ------------------------------------ */
.rw-page { max-width: 1320px; }
.rw-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.rw-chip.draft  { background: #EDF1F7; color: var(--muted); }
.rw-chip.live   { background: #DCEFE4; color: var(--success); }
.rw-chip.closed { background: #F3E9D7; color: var(--warning); }
.rw-chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* schemes list */
.rw-schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.rw-scheme { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rw-scheme.is-live { border-top: 3px solid var(--success); }
.rw-scheme h3 { font-size: 17px; margin: 0; }
.rw-scheme-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rw-scheme-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rw-scheme-facts > div { background: var(--bg); border-radius: var(--radius-sm); padding: 6px 8px; }
.rw-scheme-facts span { display: block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.rw-scheme-facts b { font-size: 13px; }
.rw-scheme-warn { font-size: 12px; color: var(--warning); background: #FBF3E3; border-radius: var(--radius-sm); padding: 5px 8px; }
.rw-scheme-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.rw-scheme-actions .btn { padding: 4px 10px; font-size: 12px; }
.rw-empty-big { text-align: center; padding: 40px 16px; color: var(--muted); }
.rw-empty-big b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }

/* period bar */
.rw-period { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 4px; flex-wrap: wrap; }
.rw-period-bar { flex: 0 0 180px; height: 6px; border-radius: 999px; background: #E3E8F1; overflow: hidden; }
.rw-period-bar i { display: block; height: 100%; background: var(--brand); }

/* setup */
.rw-step { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rw-step i { font-style: normal; font-family: var(--font-mono); font-weight: 600; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; }
.rw-step b { font-size: 15px; color: var(--brand-600); }
.rw-step span { color: var(--muted); font-size: 12px; }
.rw-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px 12px; }
.rw-grid .de-field--full { grid-column: 1 / -1; }
.rw-grid textarea { box-sizing: border-box; width: 100%; max-width: none; min-height: 90px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font: inherit; font-size: 12.5px; }
.rw-cat, .rw-cat-head { display: grid; grid-template-columns: minmax(180px, 1.2fr) 110px minmax(240px, 2.4fr) 150px 36px; gap: 10px; }
.rw-cat { align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.rw-cats .rw-cat:first-child { border-top: 0; }
.rw-cat input { box-sizing: border-box; height: 34px; width: 100%; max-width: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.rw-cat-head, .rw-slab-head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rw-mapped { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 34px; }
.rw-tag { background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; }
.rw-tag em { font-style: normal; color: var(--muted); }
.rw-none { color: var(--danger); font-size: 12px; }
.rw-x { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.rw-x:hover { background: #F8E1DE; color: var(--danger); }
.rw-add { margin-top: 8px; }
.rw-slab, .rw-slab-head { display: grid; grid-template-columns: 110px minmax(240px, 1fr) 140px 150px 36px; gap: 10px; align-items: center; }
.rw-slab { padding: 4px 0; }
.rw-slab input { box-sizing: border-box; height: 34px; width: 100%; max-width: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
/* scheme pictures: gift photo per slab, the scheme's leaflet / banners, the share box */
.rw-gift { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rw-gift img { width: 44px; height: 34px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; cursor: zoom-in; }
.rw-gift .btn { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.rw-gift .rw-x { font-size: 16px; padding: 4px 6px; }
.rw-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.rw-file { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.rw-file a.rw-file-pic { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--brand-50); color: var(--brand); text-decoration: none; font-weight: 700; font-family: var(--font-mono); }
.rw-file a.rw-file-pic img { width: 100%; height: 100%; object-fit: cover; }
.rw-file-foot { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; font-size: 12px; }
.rw-file-foot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; word-break: break-all; }
.rw-share code { font-size: 12px; background: var(--brand-50); padding: 4px 8px; border-radius: var(--radius-sm); }
.rw-gallery { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.rw-gallery a { flex: 0 0 auto; height: 120px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); text-decoration: none; font-weight: 600; padding: 0; }
.rw-gallery a img { height: 100%; width: auto; display: block; }
.rw-gallery a.rw-pdf { width: 120px; flex-direction: column; gap: 6px; font-size: 12px; text-align: center; padding: 8px; }
.rw-rung-img { width: 100%; height: 54px; object-fit: contain; margin: 2px 0; }
.rw-next-img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 4px; border: 1px solid var(--border); }
.rw-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-top: 4px; }
.rw-dirty { color: var(--warning); font-size: 12px; font-weight: 600; }

/* category picker (inside .lgm) */
.rw-pick-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.rw-pick-tools input { flex: 1; height: 34px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.rw-pick { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rw-pc { border-top: 1px solid var(--border); }
.rw-pc:first-child { border-top: 0; }
.rw-pc-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.rw-pc-row label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; flex: 1; }
.rw-pc-row input, .rw-sc input { margin: 0; width: 16px; height: 16px; flex: none; }
.rw-n { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rw-open { border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); font-size: 11.5px; padding: 2px 8px; cursor: pointer; color: var(--brand); white-space: nowrap; }
.rw-pc-subs { display: none; padding: 0 10px 8px 34px; columns: 2 260px; column-gap: 16px; }
.rw-pc.open .rw-pc-subs { display: block; }
.rw-sc { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; font-weight: 400; cursor: pointer; break-inside: avoid; font-size: 12.5px; }
.rw-taken { font-size: 11px; color: var(--warning); background: #FBF3E3; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.rw-pc.is-taken > .rw-pc-row label, .rw-sc.is-taken { color: var(--muted); cursor: not-allowed; }
.rw-pc.on > .rw-pc-row { background: #F2F8F3; }
.rw-pc.part > .rw-pc-row { background: #F7FAF7; }

/* report */
.rw-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rw-kpis small { color: var(--muted); font-size: 11.5px; }
.rw-ladder { display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.rw-rung { flex: 1 0 112px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 8px 10px 10px; cursor: pointer; text-align: left; font: inherit; display: flex; flex-direction: column; gap: 1px; position: relative; overflow: hidden; transition: box-shadow .12s, border-color .12s; }
.rw-rung:hover { box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35); }
.rw-rung.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100) inset; }
.rw-rung-p { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.rw-rung-n { font-family: var(--font-heading); font-size: 22px; line-height: 1.15; color: var(--brand-600); }
.rw-rung-n small { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--muted); }
.rw-rung-g { font-size: 11px; color: var(--muted); line-height: 1.3; height: 2.6em; overflow: hidden; }
.rw-rung-near { font-size: 11px; color: var(--warning); font-weight: 600; min-height: 1.4em; }
.rw-rung-fill { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--success); }
.rw-rung.zero .rw-rung-n { color: var(--muted); }
.rw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rw-filters .de-seg { flex-wrap: wrap; }
.rw-filters .de-seg button { padding: 6px 12px; }
.rw-filters .de-seg button span { font-weight: 400; opacity: .85; margin-left: 3px; }
.rw-filters input[type="search"] { box-sizing: border-box; height: 32px; min-width: 200px; flex: 1 1 200px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.rw-filters .ad-select { width: auto; height: 32px; font-size: 12.5px; }
.rw-table td { vertical-align: middle !important; }
.rw-table tbody tr.rw-row { cursor: pointer; }
.rw-table tbody tr.rw-row:hover td { background: #F6F8FC; }
.rw-dealer b { display: block; font-size: 13px; }
.rw-small { color: var(--muted); font-size: 11.5px; }
.rw-gst { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.rw-pts { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--brand-600); white-space: nowrap; }
.rw-prog { min-width: 260px; }
.rw-ok { display: inline-block; background: #DCEFE4; color: var(--success); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.rw-ok.top { background: #1F5B2E; color: #fff; }
.rw-bar { height: 8px; border-radius: 999px; background: #E3E8F1; overflow: hidden; margin: 2px 0 3px; }
.rw-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.rw-bar.near i { background: #D89A2A; }
.rw-togo { font-size: 12px; color: var(--muted); }
.rw-togo b { color: var(--text); }
.rw-near-tag { display: inline-block; background: #FBF1DC; color: #8A5A00; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; margin-left: 4px; }
.rw-due { color: var(--danger); font-weight: 600; }
.rw-out td { color: var(--muted); }
.rw-out .rw-pts { text-decoration: line-through; color: var(--muted); }
.rw-actions { white-space: nowrap; }
.rw-actions .btn { padding: 3px 8px; font-size: 11.5px; }
.rw-wa { color: #128C4A !important; border-color: #BFE3CD !important; }
.rw-more { text-align: center; padding: 10px; }
.rw-left { border-left: 4px solid #D89A2A; }

/* dealer card (statement + calls) */
.rw-card-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rw-two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.rw-sec { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 10px 0 6px; font-weight: 600; }
.rw-mix { display: flex; flex-direction: column; gap: 4px; }
.rw-mix-row { display: grid; grid-template-columns: 1fr 80px 80px; gap: 8px; font-size: 12.5px; align-items: center; }
.rw-mix-row b, .rw-mix-row span { text-align: right; }
.rw-mix-row span { color: var(--muted); }
.rw-calls { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.rw-call { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px; font-size: 12px; }
.rw-call b { color: var(--text); }
.rw-callform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rw-callform .de-field { min-width: 0; }
.rw-callform .de-field--full { grid-column: 1 / -1; }
.rw-callform textarea { box-sizing: border-box; width: 100%; max-width: none; min-height: 54px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 9px; font: inherit; font-size: 12.5px; }
.rw-callform select, .rw-callform input { box-sizing: border-box; height: 32px; width: 100%; max-width: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; font: inherit; font-size: 12.5px; background: #fff; }
.rw-ret td { color: var(--danger); }

@media (max-width: 1100px) { .rw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rw-two { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .rw-grid, .rw-cat, .rw-slab { grid-template-columns: 1fr; }
    .rw-cat-head, .rw-slab-head { display: none; }
    .rw-kpis, .rw-card-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rw-scheme-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .rw-filters, .rw-actions, .rw-ladder, .rw-savebar { display: none !important; } }

/* rewards report: one sentence + four "who do I call" tiles (they are also the filter) */
.rw-summary { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.rw-summary b { color: var(--text); font-size: 15px; }
.rw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rw-tile { text-align: left; font: inherit; background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .12s, border-color .12s; }
.rw-tile:hover { box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35); }
.rw-tile.on { box-shadow: 0 0 0 2px var(--brand) inset; }
.rw-tile-n { font-family: var(--font-heading); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--text); }
.rw-tile-t { font-size: 15px; font-weight: 700; color: var(--text); }
.rw-tile-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rw-tile.near { border-left-color: #D89A2A; background: #FFFBF2; }
.rw-tile.near .rw-tile-n { color: #8A5A00; }
.rw-tile.won  { border-left-color: var(--success); }
.rw-tile.won .rw-tile-n { color: var(--success); }
.rw-tile.buy  { border-left-color: var(--brand); }
.rw-tile.none { border-left-color: #A9B6CC; }
.rw-tile.due  { border-left-color: var(--danger); background: #FDF4F3; }
.rw-tile.due .rw-tile-n { color: var(--danger); }
.rw-tile-links { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.rw-tile-links .btn-link { padding: 0 4px; font-size: 12.5px; }
.rw-tile-links .btn-link.on { font-weight: 700; text-decoration: underline; }

/* rewards report, compact (2026-10-09): the dealer list must be on screen without scrolling */
.rw-page { max-width: none; }
.rw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.rw-top-l { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.rw-top-l .de-title { font-size: 19px; margin: 0; }
.rw-top-l .rw-period { margin: 0; }
.rw-top-l .rw-summary { margin: 0; font-size: 13px; }
.rw-top-l .rw-summary b { font-size: 13.5px; }
.rw-top-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rw-top-r .rw-share { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; }
.rw-list { padding: 10px 12px; }
.rw-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.rw-tile { flex-direction: row; align-items: center; gap: 10px; padding: 7px 12px; border-left-width: 4px; }
.rw-tile-n { font-size: 24px; min-width: 30px; text-align: center; }
.rw-tile-t { font-size: 13.5px; line-height: 1.25; }
.rw-tile-t small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.rw-tile-links { grid-column: auto; align-items: center; }
.rw-list .rw-filters { margin: 10px 0 8px; }
.rw-list .rw-filters .de-total { margin-left: auto; }
.rw-table > tbody > tr > td, .rw-table > thead > tr > th { padding: 5px 8px !important; }
.rw-table .rw-pts { font-size: 16px; }
.rw-table .rw-ok { margin-bottom: 1px; padding: 0 8px; font-size: 11px; }
.rw-table .rw-bar { height: 6px; margin: 2px 0; }
.rw-table .rw-small, .rw-table .rw-togo { font-size: 11.5px; line-height: 1.35; }
.rw-dealer b { font-size: 12.5px; }

/* rewards report: one stacked progress bar = every dealer, split by where they stand */
.rw-chart { margin-bottom: 10px; }
.rw-chart-bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: #E3E8F1; }
.rw-chart-part { border: 0; padding: 0 8px; min-width: 6px; font: inherit; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; transition: filter .12s; }
.rw-chart-part:hover { filter: brightness(1.08); }
.rw-chart-part + .rw-chart-part { border-left: 2px solid #fff; }
.rw-chart-part.won  { background: var(--success); }
.rw-chart-part.near { background: #D89A2A; }
.rw-chart-part.buy  { background: var(--brand); }
.rw-chart-part.none { background: #A9B6CC; }
.rw-chart-empty { margin: auto; font-size: 12px; color: var(--muted); }
.rw-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.rw-chart-key { border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rw-chart-key b { color: var(--text); }
.rw-chart-key span { font-size: 11px; }
.rw-chart-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rw-chart-key i.won { background: var(--success); }
.rw-chart-key i.near { background: #D89A2A; }
.rw-chart-key i.buy { background: var(--brand); }
.rw-chart-key i.none { background: #A9B6CC; }

/* rewards report: road view - one road per dealer, the slabs are milestones */
.rw-view button { padding: 6px 14px; }
.rd { overflow-x: auto; }
.rd-inner { min-width: 980px; }
.rd-row { display: grid; grid-template-columns: 210px 1fr 250px; align-items: center; gap: 0 14px; padding: 8px 6px; border-top: 1px solid var(--border); cursor: pointer; }
.rd-row:hover { background: #F6F8FC; }
.rd-row.is-near { background: #FFFBF2; }
.rd-row.is-near:hover { background: #FFF6E3; }
.rd-row.is-out { opacity: .55; }
.rd-headrow { border-top: 0; cursor: default; padding-top: 4px; padding-bottom: 6px; background: transparent !important; align-items: end; }
.rd-headrow .rd-name, .rd-headrow .rd-status { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rd-name { min-width: 0; display: flex; flex-direction: column; }
.rd-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-name small { font-size: 11px; color: var(--muted); }
.rd-pts { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--brand-600); line-height: 1.15; }
.rd-pts small { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--muted); }
.rd-track { padding: 0 36px 0 18px; }
.rd-lane { position: relative; height: 34px; }
.rd-headrow .rd-lane { height: 62px; }
/* the signboard above the roads: points, gift, value at each milestone */
.rd-sign { position: absolute; bottom: 0; transform: translateX(-50%); width: 92px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rd-sign img { width: 34px; height: 24px; object-fit: contain; margin-bottom: 1px; }
.rd-sign b { font-size: 11.5px; color: var(--text); }
.rd-sign small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
.rd-sign .rd-val { color: var(--success); font-weight: 600; }
.rd-sign-start { transform: none; width: auto; font-size: 10.5px; color: var(--muted); font-weight: 600; }
/* the road, the part already driven, the milestones and the "you are here" marker */
.rd-road { position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; border-radius: 999px; background: repeating-linear-gradient(90deg, #D5DCE8 0 14px, #E6EBF3 14px 22px); }
.rd-done { position: absolute; left: 0; top: 50%; height: 10px; margin-top: -5px; border-radius: 999px; background: linear-gradient(90deg, #5FB98A, var(--success)); }
.rd-done.near { background: linear-gradient(90deg, #5FB98A, var(--success) 60%, #D89A2A); }
.rd-ms { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; transform: translateX(-50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); z-index: 1; }
.rd-ms.passed { background: var(--success); color: #fff; }
.rd-ms.next { background: #fff; color: #8A5A00; border-color: #D89A2A; }
.rd-ms.next.hot { background: #D89A2A; color: #fff; border-color: #fff; animation: rd-pulse 1.6s ease-out infinite; }
.rd-ms.future { background: #EEF1F6; color: #94a3b8; }
@keyframes rd-pulse { 0% { box-shadow: 0 0 0 0 rgba(216, 154, 42, .55); } 100% { box-shadow: 0 0 0 10px rgba(216, 154, 42, 0); } }
.rd-me { position: absolute; top: 50%; transform: translate(-50%, -100%); margin-top: -6px; z-index: 2; pointer-events: none; }
.rd-me i { display: block; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand-600); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .35); }
.rd-me.near i { background: #C4401F; }
.rd-status { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-status small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-st { font-size: 13px; font-weight: 700; }
.rd-st.near { color: #8A5A00; }
.rd-st.won { color: var(--success); }
.rd-st.buy { color: var(--brand); }
.rd-st.none, .rd-st.out { color: var(--muted); }
.rd-won { color: var(--success) !important; }
.rd-headrow .rd-lane { height: 76px; }
.rd-sign { width: 104px; }
.rd-sign small { white-space: normal; max-width: 104px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rd-sign .rd-val { display: block; }
/* road view v2: points in their own column, "to go" written on the road, no status column, shorter rows */
.rd-row { grid-template-columns: 200px 72px 1fr; padding: 3px 6px; gap: 0 12px; }
.rd-headrow { padding-top: 2px; padding-bottom: 4px; }
.rd-headrow .rd-ptscol { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); text-align: right; }
.rd-ptscol { text-align: right; }
.rd-ptscol .rd-pts { font-size: 18px; }
.rd-name b { line-height: 1.25; }
.rd-name small { line-height: 1.2; }
.rd-track { padding: 0 44px 0 18px; }
.rd-lane { height: 40px; }
.rd-lane .rd-road, .rd-lane .rd-done { top: 14px; }
.rd-lane .rd-ms, .rd-lane .rd-me { top: 14px; }
.rd-tag { position: absolute; top: 27px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.rd-tag.near { color: #B4621A; }
.rd-tag.far { color: var(--brand); }
.rd-tag.none, .rd-tag.out { color: var(--muted); font-weight: 600; }
.rd-tag.won { color: var(--success); transform: translateX(-80%); }
.rd-track { padding: 0 58px 0 18px; }
/* rewards report: the group filter is one slim row of chips in the toolbar (no chart / tiles) */
.rw-list .rw-filters { margin-top: 0; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rw-chip-f { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rw-chip-f b { color: var(--text); }
.rw-chip-f::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #CBD3E1; }
.rw-chip-f.near::before { background: #D89A2A; }
.rw-chip-f.won::before { background: var(--success); }
.rw-chip-f.buy::before { background: var(--brand); }
.rw-chip-f.none::before { background: #A9B6CC; }
.rw-chip-f.due::before { background: var(--danger); }
.rw-chip-f:hover { border-color: var(--brand); }
.rw-chip-f.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rw-chip-f.on b { color: #fff; }
/* road view: serial number column */
.rd-row { grid-template-columns: 30px 200px 72px 1fr; }
.rd-sno { text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); }
.rd-headrow .rd-sno { font-family: var(--font-mono); font-size: 10px; }
/* scheme photos popup: bigger pictures, wrapping instead of a scroll strip */
.rw-gallery--pop { flex-wrap: wrap; overflow: visible; gap: 12px; }
.rw-gallery--pop a { height: 240px; }
.rw-gallery--pop a.rw-pdf { width: 170px; height: 240px; }
.rw-gallery--pop a { max-width: 100%; background: #fff; }
.rw-gallery--pop a img { max-width: 100%; height: 100%; object-fit: contain; }
/* milestones view, admin: distributor column */
.rd--admin .rd-row { grid-template-columns: 30px 190px 170px 72px 1fr; }
.rd--admin { min-width: 1150px; }
.rd-dist { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rd-dist b { font-size: 12.5px; color: var(--brand-600); }
.rd-dist small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-headrow .rd-dist { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rd-name .rd-distname { color: var(--muted); font-weight: 400; }
/* large view of a gift photo */
.rw-zoom { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 23, 42, .82); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.rw-zoom figure { margin: 0; text-align: center; max-width: 100%; max-height: 100%; }
.rw-zoom img { max-width: min(900px, 92vw); max-height: 80vh; object-fit: contain; background: #fff; border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.rw-zoom figcaption { color: #fff; font-size: 14px; font-weight: 600; margin-top: 10px; }
.rw-zoom-x { position: absolute; top: 14px; right: 18px; color: #fff !important; font-size: 32px; }
img.rw-next-img, .rd-sign img { cursor: zoom-in; }