/* ============================================================
   site.css  –  Galactic-Web shared stylesheet
   No external CSS frameworks.
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    background: #f5f5f5;
    color: #1a1a2e;
    min-height: 100vh;
}

a { color: #ff6b00; text-decoration: none; }
a:hover { color: #e05f00; text-decoration: none; }

button { cursor: pointer; font-family: inherit; }

/* ── Layout shell ─────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 220px;
    height: 100vh;
    background: #12122a;
    color: #a2a3b7;
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
}

.main-wrapper {
    margin-left: 220px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sidebar header ───────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #1e1e40;
    flex-shrink: 0;
    position: relative;
}

.sidebar-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.sidebar-logo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    text-transform: uppercase;
    flex: 1;
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: #a2a3b7;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 8px;
    right: 10px;
}

/* ── Navigation list ──────────────────────────────────────── */
.nav-list {
    list-style: none;
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
    border-bottom: 1px solid #1e1e40;
}

.nav-item { }

.nav-link {
    display: block;
    padding: 12px 20px;
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a2a3b7;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-link:hover { background: #1e1e40; color: #fff; text-decoration: none; }

.nav-item.nav-active .nav-link {
    background: #ff6b00;
    color: #fff;
}

.nav-icon { font-size: 0.7rem; opacity: 0.7; margin-right: 6px; }

.nav-badge {
    display: inline-block;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
}

.nav-divider { height: 1px; background: #1e1e40; margin: 8px 0; }

.nav-admin-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #4a4a5a;
    padding: 4px 20px;
    text-transform: uppercase;
}

/* ── Sidebar footer ───────────────────────────────────────── */
.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #1e1e40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-footer-actions {
    display: flex;
    width: 100%;
    gap: 6px;
    padding-bottom: 10px;
}

.sidebar-footer-actions .btn-foot {
    flex: 1;
    background: #1e1e40;
    border: none;
    color: #a2a3b7;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 8px;
    transition: all 0.2s;
}

.sidebar-footer-actions .btn-foot:hover { background: #ff6b00; color: #fff; }

.sidebar-username {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-logout {
    background: none;
    border: none;
    color: #f44336;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
    transition: opacity 0.2s;
}

.btn-logout:hover { opacity: 0.8; }

/* ── Top bar ──────────────────────────────────────────────── */
.top-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 52px;
    background: #12122a;
    border-bottom: 1px solid #0a0a1a;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    width: 32px;
}

.hamburger span {
    display: block;
    height: 2px;
    background: #a2a3b7;
    border-radius: 2px;
    transition: background 0.15s;
}

.hamburger:hover span { background: #ffffff; }

.page-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    flex: 1;
}

.top-bar-right { display: flex; align-items: center; gap: 12px; }

.conn-indicator {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #c8d0dc;
    display: inline-block;
}

.conn-indicator.conn-online  { background: #22c55e; }
.conn-indicator.conn-offline { background: #e05c5c; }

/* ── Content area ─────────────────────────────────────────── */
.content-area { flex: 1; padding: 30px; }
.content-area-flush { padding: 0; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }

/* ── Connection status banner ─────────────────────────────── */
.conn-banner {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.conn-banner.conn-banner--warn {
    background: #f59e0b;
    color: #fff;
}
.conn-banner.conn-banner--error {
    background: #dc2626;
    color: #fff;
}
.conn-banner.conn-banner--visible {
    display: block;
}

/* ── Website launch card ──────────────────────────────────── */
.website-launch-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.website-launch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 48px 56px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.website-launch-icon {
    font-size: 2.8rem;
    line-height: 1;
}

.website-launch-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.website-launch-url {
    font-size: 0.85rem;
    color: #5e6c84;
    margin: 0;
}

.website-launch-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff6b00;
    color: #fff;
    border-radius: 4px;
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.website-launch-btn:hover { background: #e05f00; text-decoration: none; color: #fff; }

/* ── Page toolbar ─────────────────────────────────────────── */
.page-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-input, .filter-select {
    background: #fff;
    border: 1px solid #dfe1e6;
    color: #1a1a2e;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.search-input { min-width: 240px; }
.filter-select { min-width: 160px; }
.search-input:focus, .filter-select:focus { border-color: #ff6b00; box-shadow: 0 0 0 2px rgba(255,107,0,0.15); }
.search-input::placeholder { color: #666666; }

/* ── Data table ───────────────────────────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    font-size: 1rem;
    border: 1px solid #e4e7ec;
}

.data-table thead tr { background: #174480; }

.data-table th {
    text-align: left;
    padding: 11px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    border-bottom: 2px solid #0f2e58;
    white-space: nowrap;
}

.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #f0f1f4;
    vertical-align: middle;
    word-break: break-word;
    color: #1a1a2e;
    font-size: 1rem;
}

.data-table tbody tr:hover { background: #f5f5f5; }
.data-table tbody tr:last-child td { border-bottom: none; }

.row-loading td, .empty-row { color: #97a0af; font-style: italic; }

/* ── Orders tab bar ───────────────────────────────────────── */
.or-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    border-bottom: 2px solid #e4e7ec;
    background: #fff;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.or-tabs::-webkit-scrollbar { display: none; }
.or-tab {
    background: none; border: none; border-bottom: 3px solid transparent;
    color: #5e6c84; padding: 14px 18px; font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    margin-bottom: -2px; display: flex; align-items: center; gap: 7px;
    flex-shrink: 0;
}
.or-tab:hover { color: #1a1a2e; background: #f5f7fa; }
.or-tab.active { color: #ff6b00; border-bottom-color: #ff6b00; background: #fff8f4; }
.or-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: #e4e7ec; color: #5e6c84;
    font-size: 0.75rem; font-weight: 700; min-width: 22px; height: 22px;
    border-radius: 20px; padding: 0 6px;
}
.or-tab-count:empty { display: none; }
.or-tab-count-alert { background: #ffebe6; color: #bf2600; }
.or-tab-spacer {
    flex: 1;
    min-width: 24px;
    flex-shrink: 0;
}
.or-tab.active .or-tab-count { background: #fff4ee; color: #c75000; }
.or-tab.active .or-tab-count-alert { background: #ffebe6; color: #bf2600; }

/* ── Orders search panel ───────────────────────────────────────── */
.or-search-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    margin-bottom: 14px;
}

.or-search-panel .pt-search-wrap {
    flex: 1;
    max-width: 520px;
}

.or-search-scope {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #174480;
    white-space: nowrap;
    padding: 3px 10px;
    background: #eef3fb;
    border-radius: 20px;
}

/* ── Orders pagination bar ─────────────────────────────────────── */
.or-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid #e4e7ec;
    background: #fff;
    font-size: 0.85rem;
}
.or-pager-btn {
    padding: 5px 14px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.or-pager-btn:hover:not(:disabled) { background: #fff4ee; border-color: #ff6b00; color: #ff6b00; }
.or-pager-btn:disabled { opacity: .4; cursor: default; }
.or-pager-info { color: #5e6c84; font-size: 0.85rem; }

/* ── Bulk action bar ───────────────────────────────────────────── */
.or-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #fff4ee;
    border: 1px solid #ffd5b8;
    border-radius: 6px;
    margin: 0 0 8px;
    flex-wrap: wrap;
}
.or-bulk-count { font-size: 0.85rem; font-weight: 600; color: #c75000; flex-shrink: 0; }
.or-bulk-select {
    flex: 1; min-width: 200px; max-width: 320px;
    padding: 5px 8px; border: 1px solid #dfe1e6; border-radius: 4px;
    font-size: 0.85rem; background: #fff; color: #1a1a2e; font-family: inherit;
}

/* ── Bonkers logo in order total cell ─────────────────────────── */
.or-bonkers-logo {
    height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.col-shopify { width: 36px; text-align: center; padding: 0 8px !important; }
.or-shopify-link { display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity 0.15s; }
.or-shopify-link:hover { opacity: 1; }
.or-shopify-logo { height: 20px; width: auto; display: block; }

/* ── Order row icons (delivery van + note) ─────────────────────── */
.or-icon {
    display: inline-block;
    font-size: 1rem;
    cursor: default;
    line-height: 1;
    margin-right: 3px;
    opacity: .75;
    position: relative;
}
.or-icon:hover { opacity: 1; }
.or-icon-warn { color: #dc2626; opacity: 1; }

/* Shared icon popup (appended to body, fixed position) */
.or-popup {
    display: none;
    position: absolute;
    z-index: 9999;
    background: #1a1a2e;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    padding: 8px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    min-width: 160px;
    max-width: 340px;
    pointer-events: auto;
}
.or-pop-table { border-collapse: collapse; width: 100%; }
.or-pop-table tr + tr td { border-top: 1px solid rgba(255,255,255,.1); padding-top: 4px; margin-top: 4px; }
.or-pop-label {
    color: rgba(255,255,255,.55);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    padding-right: 10px;
    vertical-align: top;
    padding-top: 3px;
    padding-bottom: 3px;
}
.or-pop-value {
    color: #fff;
    word-break: break-word;
    vertical-align: top;
    padding-top: 3px;
    padding-bottom: 3px;
}
.or-pop-value a { color: #7eb8f7; text-decoration: underline; }
.or-pop-value a:hover { color: #b8d9fb; }

/* ── Checked row highlight ─────────────────────────────────────── */
.orders-table tr.row-checked td { background: #fff8f4; }
.orders-table tbody tr { cursor: pointer; }
.orders-table tbody tr td.col-check { cursor: default; }
.orders-table th.col-check,
.orders-table td.col-check {
    padding: 0 8px 0 14px !important;
    vertical-align: middle;
    white-space: nowrap;
}
.orders-table th.col-order,
.orders-table td.col-order {
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}
.orders-table th.col-check input,
.orders-table td.col-check input {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* ── Center all orders columns except checkbox, Order #, Customer ── */
.orders-table thead th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) { text-align: center; }
.orders-table tbody td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) { text-align: center; }
.orders-table thead th.col-customer,
.orders-table tbody td.col-customer { text-align: left; padding-left: 14px !important; }
.col-customer-icons { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }

/* ── Sortable column headers ───────────────────────────────────── */
.orders-table thead th[data-sort],
.drafts-table thead th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.orders-table thead th[data-sort]:hover,
.drafts-table thead th[data-sort]:hover { background: #1a5299; color: #fff; }
.orders-table thead th.sort-active.sort-asc::after,
.drafts-table thead th.sort-active.sort-asc::after  { content: ' \2191'; opacity: .8; font-size: .75em; }
.orders-table thead th.sort-active.sort-desc::after,
.drafts-table thead th.sort-active.sort-desc::after { content: ' \2193'; opacity: .8; font-size: .75em; }

/* Column widths (desktop) */
@media (min-width: 769px) {
    .data-table { table-layout: fixed; }
    .col-title    { width: 28%; }
    .col-status   { width: 10%; }
    .col-type     { width: 12%; }
    .col-price    { width: 9%; }
    .col-stock    { width: 7%; }
    .col-name     { width: 14%; }
    .col-customer { width: 20%; text-align: left; }
    .col-total    { width: 9%; }
    .col-date     { width: 14%; }
    .col-id       { width: 8%; }
    .col-items    { width: 12%; }
    .col-actions  { width: 80px; text-align: right; }

    /* Orders table specific columns */
    .orders-table               { table-layout: fixed; }
    .orders-table .col-check    { width: 38px; }
    .orders-table .col-order    { width: 90px; }
    .orders-table .col-customer { width: auto; text-align: left; }
    .orders-table .col-date     { width: 11%; }
    .orders-table .col-total    { width: 9%; }
    .orders-table .col-location { width: 8%; }
    .orders-table .col-delivery { width: 13%; }
    .orders-table .col-status   { width: 9%; }
}

/* ── Mobile card view ─────────────────────────────────────── */
@media (max-width: 768px) {
    .data-table thead { display: none; }

    .data-table, .data-table tbody,
    .data-table tr, .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        background: #fff;
        border: 1px solid #e4e7ec;
        border-radius: 6px;
        margin-bottom: 12px;
        padding: 8px 0;
    }

    .data-table tr:hover { background: #f5f5f5; }

    .data-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 14px;
        border-bottom: 1px solid #f0f1f4;
    }

    .data-table td:last-child { border-bottom: none; }

    .data-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #5e6c84;
        min-width: 90px;
        flex-shrink: 0;
    }

    .col-actions { justify-content: flex-end; }
    .col-actions::before { display: none; }

    .page-toolbar { flex-direction: column; }
    .search-input, .filter-select { min-width: 0; width: 100%; }
}

/* ── Badge / status pill ──────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-green  { background: #e3fcef; color: #006644; }
.badge-blue   { background: #fff4ee; color: #c75000; }
.badge-yellow { background: #fffae6; color: #974f0c; }
.badge-red    { background: #ffebe6; color: #bf2600; }
.badge-grey   { background: #f5f5f5; color: #555570; }
.badge-dark   { background: #dfe1e6; color: #253858; }
.badge-orange { background: #fff4e5; color: #b94300; }
.badge-oos    { background: #ffebe6; color: #bf2600; }

/* ── Action buttons ───────────────────────────────────────── */
.btn-action {
    border: 1px solid #dfe1e6;
    background: #fff;
    color: #5e6c84;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-action:hover, .btn-view:hover { border-color: #ff6b00; color: #ff6b00; background: #fff4ee; }
.btn-edit:hover   { border-color: #ff991f; color: #974f0c; background: #fff4e5; }
.btn-delete:hover { border-color: #ff5630; color: #bf2600; background: #ffebe6; }

.btn-primary {
    background: #174480;
    border: none;
    color: #fff;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
}

.btn-primary:hover { background: #0f2f5e; color: #fff; }

.btn-secondary {
    background: #fff;
    border: 1px solid #dfe1e6;
    color: #1a1a2e;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.btn-secondary:hover { background: #f5f5f5; border-color: #b3b9c4; }
.btn-full { width: 100%; }

/* ── Currency input wrapper ───────────────────────────────── */
.ld-currency-wrap {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.ld-currency-wrap:focus-within { border-color: #ff6b00; }

.ld-currency-wrap .currency-prefix {
    padding: 6px 10px;
    background: #f5f5f5;
    color: #555570;
    font-size: 0.875rem;
    border-right: 1px solid #dfe1e6;
    user-select: none;
}

.ld-currency-wrap input {
    border: none;
    background: transparent;
    color: #1a1a2e;
    padding: 6px 10px;
    font-size: 0.875rem;
    outline: none;
    width: 100%;
}

/* ── Form controls ────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-control {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.form-control:focus { outline: none; border-color: #ff6b00; }
.form-control option { background: #fff; color: #1a1a2e; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 300;
    align-items: center;
    justify-content: center;
}

.modal-overlay.visible { display: flex; }

.modal-box {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    width: min(560px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e4e7ec;
    flex-shrink: 0;
}

.modal-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a1a2e;
}

.modal-close {
    background: none;
    border: none;
    color: #97a0af;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

.modal-close:hover { color: #ff5630; }

.modal-body { padding: 20px; overflow-y: auto; flex: 1; color: #1a1a2e; line-height: 1.6; }

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e4e7ec;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Image lightbox (shared, multi-image) ─────────────────── */
.gw-lightbox-box {
    width: min(900px, 96vw);
    background: #1a2030;
    border-color: #2d3a4f;
}

.gw-lightbox-box .modal-header {
    border-bottom-color: #2d3a4f;
    background: #1a2030;
}

.gw-lightbox-box .modal-title  { color: #e2e8f0; }
.gw-lightbox-box .modal-close  { color: #7a8ca0; }
.gw-lightbox-box .modal-close:hover { color: #ff5630; }

.gw-lightbox-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 56px;
    background: #1a2030;
    min-height: 220px;
}

.gw-lightbox-body img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.gw-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e2e8f0;
    font-size: 2rem;
    line-height: 1;
    width: 40px;
    height: 52px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gw-lb-nav:hover  { background: rgba(255,255,255,0.18); color: #fff; }
.gw-lb-prev       { left: 8px; }
.gw-lb-next       { right: 8px; }

.gw-lightbox-counter {
    text-align: center;
    padding: 6px 0 12px;
    font-size: 0.78rem;
    color: #7a8ca0;
    background: #1a2030;
    border-radius: 0 0 8px 8px;
}

/* Responsive 16:9 YouTube embed inside the lightbox */
.gw-lightbox-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 4px;
}

.gw-lightbox-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
}

/* ── Login page ───────────────────────────────────────────── */
.login-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    width: 380px;
    max-width: 90%;
    padding: 40px;
}

.login-logo {
    text-align: center;
    margin-bottom: 8px;
    font-size: 30px;
    font-weight: 800;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-sub {
    text-align: center;
    color: #999;
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-error {
    background: #fff3f3;
    color: #e74c3c;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 15px;
    text-align: center;
}

.login-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: #ff6b00;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.btn-login:hover { background: #e05f00; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Dashboard grid ───────────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.dash-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 20px 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dash-card.dash-card-warn { border-color: #ff991f; background: #fff4e5; }

.dash-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: #ff6b00;
    line-height: 1;
}

.dash-card.dash-card-warn .dash-card-value { color: #974f0c; }

.dash-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #97a0af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

/* ── Statistics ───────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.stats-nec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 24px; margin-top: 24px; }
.stats-section--wide { min-width: 0; }
.stats-nec-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.stats-nec-th { padding: 10px 16px; text-align: right; font-weight: 700; color: #5e6c84; border-bottom: 2px solid #e8edf5; font-size: 1rem; }
.stats-nec-th.stats-nec-location { text-align: left; }
.stats-nec-td { padding: 10px 16px; text-align: right; border-bottom: 1px solid #e8edf5; color: #1a1a2e; font-size: 1rem; }
.stats-nec-td.stats-nec-location { text-align: left; color: #5e6c84; }
.stats-nec-td.stats-nec-total, .stats-nec-foot.stats-nec-total { font-weight: 600; color: #1a1a2e; }
.stats-nec-empty { text-align: center; color: #aaa; padding: 14px; font-size: 1rem; }
.stats-nec-foot { padding: 10px 16px; text-align: right; font-weight: 700; color: #5e6c84; border-top: 2px solid #e8edf5; font-size: 1rem; }

.stats-section {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stats-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5e6c84;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e7ec;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f1f4;
}

.stats-row:last-child { border-bottom: none; }
.stats-label { font-size: 1rem; color: #5e6c84; }
.stats-value { font-size: 1.05rem; font-weight: 600; color: #1a1a2e; }

/* ── Empty / loading states ───────────────────────────────── */
.loading-state, .empty-state {
    text-align: center;
    padding: 48px;
    color: #97a0af;
    font-style: italic;
}

.loading-text { color: #97a0af; font-style: italic; text-align: center; padding: 20px; }

/* ── Mobile sidebar overlay ───────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 190;
}

.sidebar-overlay.visible { display: block; }

/* ── Mobile layout ────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }

    .sidebar-close { display: block; }

    .main-wrapper { margin-left: 0; min-width: 0; }

    .hamburger { display: flex; }

    .content-area { padding: 16px; }
    .sidebar-footer-actions { display: none; }
}

/* ── Product title ────────────────────────────────────────── */
.product-title { font-weight: 600; color: #1a1a2e; }

.pc-status-pill { margin-left: 5px; }

/* ── Toolbar count label ─────────────────────────────────── */
.toolbar-count {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: #000000;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 0;
}

/* ── Stock zero highlight ────────────────────────────────── */
.stock-zero { color: #bf2600; font-weight: 600; }

/* ── Detail table (modal) ────────────────────────────────── */
.detail-table {
    width: 100%;
    border-collapse: collapse;
}
.detail-table th,
.detail-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #f0f1f4;
    font-size: 0.85rem;
    color: #1a1a2e;
}
.detail-table th {
    color: #5e6c84;
    font-weight: 600;
    width: 130px;
    white-space: nowrap;
}

/* ── Products page layout ────────────────────────────────── */
.products-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 100%;
    padding: 12px 16px 16px 0;
}

/* ── Filter panel (left sidebar on products page) ────────── */
.filter-panel {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    max-height: calc(100vh - 76px);
}

.filter-panel .column-panel-header {
    padding: 14px 16px 10px;
    display: flex;
    align-items: center;
}

.filter-panel .column-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-panel-close-btn { display: none; }

.fp-reset-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #9aa3b8;
    font-size: 0.85rem;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.fp-reset-btn:hover { color: #e05c5c; background: #fef2f2; }

.fp-clear-btn {
    background: none;
    border: 1px solid #d0d5de;
    color: #6b7a99;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}

.fp-clear-btn:hover { border-color: #e05c5c; color: #e05c5c; }

.filter-section {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #edf0f5;
}

.filter-section:last-child { border-bottom: none; }

.filter-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7a99;
    margin-bottom: 10px;
}

.filter-check {
    /* black text */
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 1rem;
    color: #000000;
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
}

.filter-check:hover { color: #000000; }

.filter-check input[type=checkbox] {
    accent-color: #ff6b00;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Count badge on filter checkboxes */
.fc-badge {
    display: none;
    margin-left: auto;
    background: #dbeafe;
    color: #000000;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    text-align: center;
    flex-shrink: 0;
}

.filter-divider {
    height: 1px;
    background: #edf0f5;
    margin: 5px 0;
}

/* ── Products main content ───────────────────────────────── */
.products-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Products toolbar (above table) ─────────────────────── */
.products-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pt-filter-toggle { display: none; }  /* Hidden by default, shown on mobile */

.pt-add-btn { white-space: nowrap; text-decoration: none; }

.pt-search {
    flex: 1;
    min-width: 200px;
    max-width: 480px;
}

/* ── Products search wrapper (website-style) ────────────── */
.pt-search-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 480px;
    background: #fff;
    border: 2px solid #174480;
    border-radius: 6px;
    padding: 0 14px 0 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pt-search-wrap:focus-within {
    border-color: #1a5299;
    box-shadow: 0 0 0 3px rgba(23,68,128,0.15);
}

.pt-search-icon {
    font-size: 1rem;
    color: #174480;
    margin-right: 8px;
    flex-shrink: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.pt-search-wrap .search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #000000;
    padding: 9px 0;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    min-width: 0;
    border-radius: 0;
}

.pt-search-wrap .search-input::placeholder {
    color: #666666;
    font-weight: 400;
}

.pt-search-wrap .search-input:focus {
    border: none;
    box-shadow: none;
}

.pt-search-clear {
    background: none;
    border: none;
    color: #174480;
    font-size: 1rem;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.pt-search-clear:hover { opacity: 1; }

/* ── Mobile column picker bar (hidden on desktop) ──────────── */
.pt-mobile-pickers {
    display: none;
}

.pt-mobile-pickers {
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: none;
    gap: 10px;
    flex-wrap: wrap;
}

.pt-mobile-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.pt-mobile-picker-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #5e6c84;
    white-space: nowrap;
    min-width: 36px;
}

.pt-mobile-picker-select {
    flex: 1;
    border: 1px solid #d0d5de;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1a1a2e;
    background: #fff;
    cursor: pointer;
    min-width: 0;
}

.sort-select {
    background: #ffffff;
    border: 1px solid #d0d5de;
    color: #1a2030;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    outline: none;
    min-width: 120px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.sort-select:focus { border-color: #2563eb; }

/* ── Inline column-header select ─────────────────────────── */
.thead-pickers th {
    padding: 7px 8px 4px;
    background: #f5f5f5;
    border-bottom: none;
}

.thead-labels th {
    padding: 8px 14px 10px;
    border-bottom: 1px solid #dde2ea;
}

.sort-select-inline {
    background: #ffffff;
    border: 1px solid #d0d5de;
    color: #2a3448;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    outline: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
}

.sort-select-inline:hover,
.sort-select-inline:focus { border-color: #2563eb; color: #1a2030; }

/* ── Product thumbnail ───────────────────────────────────── */
.prod-thumb {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 4px;
    background: transparent;
    display: block;
}

.prod-thumb-empty {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 4px;
    background: #f4f6f9;
    border: 1px solid #dde2ea;
}

/* ── Sort-able table headers ─────────────────────────────── */
.sort-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
    white-space: nowrap;
}

.sort-th:hover { color: #fff; }

.sort-arrow {
    display: inline-block;
    font-size: 0.85rem;
    color: #2563eb;
    margin-left: 2px;
}

/* Column widths for products table */
@media (min-width: 769px) {
    .products-table { table-layout: fixed; }
    .products-table .col-img     { width: 68px; }
    .products-table .col-title   { width: auto; }
    .products-table .col-info1   { width: 143px; text-align: center; }
    .products-table .col-info2   { width: 143px; text-align: center; }
    .products-table .col-info3   { width: 143px; text-align: center; }
    .products-table .col-info4   { width: 143px; text-align: center; }
    .products-table .col-info5   { width: 143px; text-align: center; }
}

/* Progressive column hiding on narrower desktop widths
   Column order: 1=img, 2=title, 3=info1, 4=info2, 5=info3, 6=info4, 7=info5 */
@media (min-width: 769px) and (max-width: 1750px) {
    .products-table col.col-info5 { width: 0; }
    .products-table tr > :nth-child(7) { display: none; }
}
@media (min-width: 769px) and (max-width: 1550px) {
    .products-table col.col-info4 { width: 0; }
    .products-table tr > :nth-child(6) { display: none; }
}
@media (min-width: 769px) and (max-width: 1350px) {
    .products-table col.col-info3 { width: 0; }
    .products-table tr > :nth-child(5) { display: none; }
}
@media (min-width: 769px) and (max-width: 1150px) {
    .products-table col.col-info2 { width: 0; }
    .products-table tr > :nth-child(4) { display: none; }
}

/* Centre all td/th in non-title columns */
.products-table td:not(:nth-child(2)),
.products-table .thead-labels th:not(:nth-child(2)),
.products-table .thead-pickers th:not(:nth-child(2)) {
    text-align: center;
}

.products-table .col-img { padding: 4px 8px; }

/* pc-label/pc-value: hidden on desktop, used by card mode on mobile */
.pc-label { display: none; }
.pc-value  { display: inline; }

/* Whole-row pointer cursor only in card mode (applied via CSS, reinforced in JS) */
.pc-row { cursor: default; }

.type-tag {
    font-size: 0.82rem;
    padding: 3px 9px;
    vertical-align: middle;
    opacity: 0.85;
}
.type-tag-case   { background: #dbeafe; color: #1d4ed8; }
.type-tag-bundle { background: #ffedd5; color: #c2410c; }

/* ── Mobile: stack filter panel above table ──────────────── */
@media (max-width: 900px) {
    .products-layout { flex-direction: column; }
    .filter-panel {
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #dde2ea;
        align-self: auto;
    }
    .filter-section { display: flex; flex-wrap: wrap; gap: 0 16px; }
    .filter-section-title { width: 100%; }
}

/* ============================================================
   Product Detail Page  (Views/Products/Detail.cshtml)
   ============================================================ */

.product-detail-page { max-width: 1100px; }
.pd-loading  { color: #6b7a99; padding: 40px; font-style: italic; }
.pd-error    { color: #e05c5c; padding: 20px; }
.pd-back     { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #2563eb; margin-bottom: 16px; text-decoration: none; }
.pd-back:hover { text-decoration: underline; }
.pd-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.pd-hero { flex-shrink: 0; }
.pd-hero-img { width: 120px; height: 120px; object-fit: contain; border-radius: 8px; border: 1px solid #dde2ea; background: transparent; }
.pd-hero-empty { width: 120px; height: 120px; border-radius: 8px; border: 1px solid #dde2ea; background: #f4f6f9; }
.pd-header-info { flex: 1; min-width: 0; }
.pd-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pd-title { font-size: 1.35rem; font-weight: 700; color: #1a2030; line-height: 1.2; }
.pd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-issues-badge { font-size: 0.8rem; }
.pd-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #dde2ea; margin-bottom: 20px; }
.pd-tab { background: none; border: none; border-bottom: 3px solid transparent; color: #6b7a99; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
.pd-tab:hover { color: #2563eb; }
.pd-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.pd-panel { display: none; }
.pd-panel.active { display: block; }
.pd-panel-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7a99; margin-bottom: 12px; }
.pd-detail-table th { width: 180px; text-transform: none; font-size: 0.85rem; font-weight: 600; color: #6b7a99; letter-spacing: 0; }
.pd-detail-table td { font-size: 0.9rem; }
.pd-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; }
.pd-tag { font-size: 0.75rem; }
.pd-description { background: #f4f6f9; border: 1px solid #dde2ea; border-radius: 6px; padding: 16px 20px; font-size: 0.92rem; line-height: 1.7; color: #2a3448; max-width: 720px; }
.pd-description p { margin-bottom: 10px; }
.pd-description h1, .pd-description h2, .pd-description h3 { color: #1a2030; margin: 14px 0 6px; }
.pd-issues-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pd-issue-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #dc2626; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 5px; padding: 8px 12px; }
.pd-contents-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.pd-empty { color: #6b7a99; font-style: italic; font-size: 0.88rem; }
@media (min-width: 600px) { .pd-header { flex-direction: row; } }

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — EDIT PAGE  (redesign)
════════════════════════════════════════════════════════════════ */

/* ── Loading skeleton ─────────────────────────────────────── */
@@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.pds-wrap     { padding: 0 20px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 1200px; }
.pds-hero     { display: flex; gap: 16px; align-items: flex-start; }
.pds-hero-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.pds-shimmer  { border-radius: 6px; background: linear-gradient(90deg, #e8ecf0 25%, #f4f6f9 50%, #e8ecf0 75%); background-size: 400px 100%; animation: shimmer 1.4s infinite; }
.pds-img      { width: 120px; height: 120px; flex-shrink: 0; border-radius: 10px; }
.pds-line     { height: 16px; border-radius: 4px; }
.pds-line-lg  { width: 60%; height: 24px; }
.pds-line-md  { width: 40%; }
.pds-line-sm  { width: 25%; height: 12px; }
.pds-tabs-bar { height: 42px; border-radius: 0; margin: 0 -20px; }
.pds-body     { display: flex; gap: 16px; }
.pds-card     { flex: 1; height: 200px; border-radius: 8px; }

/* ── Page shell ───────────────────────────────────────────── */
.pd-page { display: flex; flex-direction: column; min-height: 100%; flex: 1; width: 100%; min-width: 0; overflow-x: clip; }

/* When rendered inside a flush content-area (no outer padding) the scroll
   container is the flush <main> element itself, so sticky top offsets must
   be relative to that container, not the viewport. */
.content-area-flush .pd-page .pd-sticky-header { top: 52px; }

/* ── Shared: card ─────────────────────────────────────────── */
.pd-card {
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.pd-card-full { margin-bottom: 16px; }
.pd-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    font-size: 0.95rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #ffffff;
    border-bottom: 1px solid #0f2e58;
    background: #174480;
}

/* ── Shared: inputs ───────────────────────────────────────── */
.pd-input {
    background: #ffffff; border: 1px solid #c8d0dc; color: #111827;
    border-radius: 6px; padding: 10px 12px; font-size: 1rem;
    font-family: inherit; outline: none; width: 100%; max-width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.pd-input:focus { border-color: #2563eb; background: #ffffff; }
.pd-input::placeholder { color: #9ca3af; }

.pd-select {
    background: #ffffff; border: 1px solid #c8d0dc; color: #111827;
    border-radius: 6px; padding: 10px 12px; font-size: 1rem;
    font-family: inherit; outline: none; width: 100%; max-width: 100%; cursor: pointer;
    transition: border-color 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.pd-select:focus { border-color: #2563eb; }

/* ── Combo-box (vendor / product type) ─────────────────────── */
.pd-combo { position: relative; }
.pd-combo-input { padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }
.pd-combo-list {
    display: none; position: fixed; z-index: 9999;
    background: #fff; border: 1px solid #c8d0dc; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    max-height: 220px; overflow-y: auto;
    margin: 0; padding: 4px 0; list-style: none;
}
.pd-combo-list.pd-combo-open { display: block; }
.pd-combo-item {
    padding: 9px 14px; font-size: 1rem; color: #111827; cursor: pointer;
}
.pd-combo-item:hover { background: #f0f4ff; }

.pd-label {
    display: block;
    font-size: 0.9rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #4b5563; margin-bottom: 6px;
}

.pd-field-group { display: flex; flex-direction: column; }
.pd-field-wide  { grid-column: span 2; }
.pd-value       { font-size: 0.92rem; color: #1e293b; padding: 2px 0; }
.pd-field-toggle-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }

.pd-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    padding: 20px 22px;
}

/* ── Shared: buttons ──────────────────────────────────────── */
.pd-btn {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    padding: 9px 16px; border-radius: 7px; font-size: 1rem; font-weight: 500;
    cursor: pointer; border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none; white-space: nowrap; font-family: inherit;
}
.pd-btn-icon { gap: 5px; }
.pd-btn-primary { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.pd-btn-primary:hover { background: #1d4ed8; color: #fff; }
.pd-btn-ghost   { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.35); }
.pd-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.6); }
.pd-btn-ghost-dark  { background: transparent; color: #1a2030; border-color: #1a2030; }
.pd-btn-ghost-dark:hover { background: #f1f3f7; color: #1a2030; border-color: #374151; }
.pd-btn-danger  { background: transparent; color: #dc2626; border-color: #fca5a5; }
.pd-btn-danger:hover { background: #fee2e2; color: #dc2626; }
.pd-btn-xs { padding: 6px 12px; font-size: 0.9rem; }
.pd-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Toggle switch ────────────────────────────────────────── */
.pd-toggle { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }
.pd-toggle input { opacity: 0; width: 0; height: 0; }
.pd-toggle-track {
    position: absolute; inset: 0; border-radius: 20px;
    background: #d0d5de; cursor: pointer;
    transition: background 0.2s;
}
.pd-toggle-track::before {
    content: ''; position: absolute;
    width: 14px; height: 14px; border-radius: 50%;
    left: 3px; top: 3px;
    background: #ffffff; transition: transform 0.2s, background 0.2s;
}
.pd-toggle input:checked + .pd-toggle-track { background: #2563eb; }
.pd-toggle input:checked + .pd-toggle-track::before { transform: translateX(18px); background: #fff; }

/* ── Action bar ───────────────────────────────────────────── */
.pd-sticky-header {
    position: sticky;
    top: 52px;
    z-index: 50;
}
.pd-actionbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 24px;
    background: #174480;
    border-bottom: 1px solid #0f2e58;
}
.pd-actionbar-sep     { width: 1px; height: 26px; background: rgba(255,255,255,0.25); margin: 0 4px; }
.pd-actionbar-spacer  { flex: 1; }
.pd-save-status { font-size: 1rem; font-weight: 500; }
.pd-save-saving { color: #6b7a99; }
.pd-save-ok     { color: #16a34a; }
.pd-save-err    { color: #dc2626; }
.pd-dirty-badge {
    font-size: 0.9rem; font-weight: 600; padding: 5px 12px;
    background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
    border-radius: 20px; letter-spacing: 0.02em;
}

/* ── Hero card ────────────────────────────────────────────── */
.pd-hero-card {
    display: flex; align-items: stretch; gap: 28px;
    padding: 0 28px 0 0;
    background: #ffffff;
    border-bottom: 1px solid #e4e7ec;
}
.pd-hero-img-col {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}
.pd-hero-img-with-thumbs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}
.pd-hero-img-wrap {
    width: 200px;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    border-right: 1px solid #e4e7ec;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
}
/* The zoom button is absolutely positioned to guarantee it covers the full wrap */
.pd-img-zoom-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    display: block;
}
.pd-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: none; border-radius: 0; background: transparent; }
.pd-hero-img-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.35; width: 100%; height: 100%; }
.pd-img-zoom-hint { position: absolute; bottom: 6px; right: 8px; font-size: 1rem; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.pd-img-zoom-btn:hover .pd-img-zoom-hint { opacity: 0.7; }
.pd-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px 0 20px; }

/* ── Product image thumbnail strip ─── */
.pd-thumb-strip {
    display: grid;
    grid-template-rows: repeat(4, 30px);
    grid-auto-flow: column;
    grid-auto-columns: 30px;
    gap: 4px;
    align-content: start;
    width: 40px;   /* 30px thumb + 6px left-pad + rounding — always reserves space */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 6px 6px;
    visibility: hidden;  /* hidden but still occupies space, preventing layout shift */
    flex-shrink: 0;
}

.pd-thumb-item {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #dde2ea;
    background: #f8fafc;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.pd-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-thumb-item:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}

.pd-thumb-item.pd-thumb-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.28);
}

.pd-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
}

.pd-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px 0 20px; }

.pd-hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pd-status-badge {
    display: inline-flex; align-items: center;
    font-size: 0.92rem; font-weight: 700; padding: 5px 14px;
    border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase;
}
.pd-status-active   { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.pd-status-draft    { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
.pd-status-archived { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.pd-status-unknown  { background: #f4f6f9; color: #6b7a99; border: 1px solid #dde2ea; }

.pd-type-badge {
    display: inline-flex; align-items: center;
    font-size: 0.88rem; font-weight: 700; padding: 4px 11px;
    border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase;
}
.pd-type-case    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.pd-type-bundle  { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.pd-type-default { background: #f4f6f9; color: #6b7a99; border: 1px solid #dde2ea; }

.pd-title-input {
    background: none; border: none; border-bottom: 2px solid #dde2ea;
    color: #111827; font-size: 1.65rem; font-weight: 700;
    padding: 6px 0; width: 100%; outline: none; font-family: inherit;
    border-radius: 0; transition: border-color 0.2s;
}
.pd-title-input:focus { border-bottom-color: #2563eb; }
.pd-title-input::placeholder { color: #9ca3af; }

.pd-hero-row2 {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
}

/* Status select colour states */
.pd-select-status { font-weight: 600; }
.pd-status-sel-active   { color: #16a34a !important; border-color: #bbf7d0 !important; }
.pd-status-sel-draft    { color: #a16207 !important; border-color: #fef08a !important; }
.pd-status-sel-archived { color: #64748b !important; border-color: #cbd5e1 !important; }

/* ── Tabs ─────────────────────────────────────────────────── */
.pd-tabs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    padding: 0 24px; background: #174480;
    border-bottom: 1px solid #0f2e58;
}
.pd-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 14px 20px; font-size: 1rem; font-weight: 600;
    color: rgba(255,255,255,0.75); background: none; border: none;
    border-bottom: 3px solid transparent; cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px; letter-spacing: 0.01em;
}
.pd-tab:hover { color: #ffffff; }
.pd-tab.active { color: #ffffff; border-bottom-color: #ffffff; }
.pd-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #dc2626; color: #ffffff;
    font-size: 0.82rem; font-weight: 700; min-width: 20px; height: 20px;
    border-radius: 20px; padding: 0 6px; margin-left: 2px;
}

/* ── Panel & grid ─────────────────────────────────────────── */
.pd-panel { display: none; padding: 28px; }
.pd-panel.active { display: block; }
.pd-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    align-items: start;
}
.pd-col { display: flex; flex-direction: column; }

/* ── Price cards ──────────────────────────────────────────── */

/* Row 1: Cost + RRP (2 equal columns) */
.pd-price-row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #dde2ea;
    border-top: 1px solid #dde2ea;
}
/* Row 2: Retail · Gold · Sale Day · WS inc VAT · WS ex VAT (5 equal columns) */
.pd-price-row-bottom {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #dde2ea;
    border-top: 1px solid #dde2ea;
}
.pd-price-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 20px 16px;
    background: #ffffff;
    transition: background 0.12s;
}
.pd-price-card:hover { background: #fafbfd; }
.pd-price-card-label {
    font-size: 0.92rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #4b5563;
    display: flex; align-items: center; gap: 8px;
}
.pd-price-card-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.pd-dot-cost      { background: #7c3aed; }
.pd-dot-rrp       { background: #9ca3af; }
.pd-dot-retail    { background: #2563eb; }
.pd-dot-wholesale { background: #0891b2; }
.pd-dot-gold      { background: #d97706; }
.pd-dot-sale      { background: #dc2626; }

/* VAT tag badges in label */
.pd-vat-tag {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 2px 6px; border-radius: 4px;
    background: #e0f2fe; color: #0369a1;
    text-transform: none;
}
.pd-vat-tag-ex { background: #f0fdf4; color: #15803d; }

.pd-price-card-input {
    display: flex; align-items: center;
    background: #ffffff; border: 1px solid #d0d5de; border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.pd-price-card-input:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.10); }
.pd-currency-sym {
    padding: 0 9px; font-size: 1rem; color: #52637a;
    background: #f4f6f9; border-right: 1px solid #d0d5de;
    align-self: stretch; display: flex; align-items: center;
    flex-shrink: 0;
}
.pd-price-card-input .pd-input {
    background: none; border: none; border-radius: 0; padding: 10px 10px;
    font-size: 1.05rem; font-weight: 600; color: #1e2a3a;
}
.pd-price-card-input .pd-input:focus { background: none; }
.pd-price-card-sub { font-size: 0.85rem; color: #aab4c8; }

/* Cost reveal button */
.pd-cost-reveal-btn {
    margin-left: auto; display: inline-flex; align-items: center;
    background: none; border: 1px solid #e0e5ee; border-radius: 5px;
    padding: 3px 6px; cursor: pointer; color: #7c3aed;
    transition: background 0.12s, border-color 0.12s;
}
.pd-cost-reveal-btn:hover { background: #f3f0ff; border-color: #c4b5fd; }
.pd-cost-reveal-active { background: #ede9fe !important; border-color: #a78bfa !important; }

/* Cost panel: hidden/shown */
.pd-cost-panel { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s; max-height: 200px; opacity: 1; }
.pd-cost-panel-hidden { max-height: 0 !important; opacity: 0; pointer-events: none; }

/* stat badge row */
.pd-price-stats {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 22px;
}
.pd-stat-badge {
    display: inline-flex; align-items: center;
    font-size: 0.78rem; font-weight: 700;
    padding: 3px 8px; border-radius: 10px;
    white-space: nowrap; line-height: 1.4;
}
.pd-stat-blue   { background: #dbeafe; color: #1d4ed8; }
.pd-stat-purple { background: #ede9fe; color: #6d28d9; }
.pd-stat-green  { background: #dcfce7; color: #15803d; }
.pd-stat-red    { background: #fee2e2; color: #dc2626; }
.pd-stat-muted  { background: #f1f3f7; color: #7a8799; }

.pd-disc-pill { display: inline-flex; align-items: center;
    font-size: 0.78rem; font-weight: 700; padding: 2px 7px;
    border-radius: 10px; background: #dbeafe; color: #1d4ed8;
}
.pd-disc-gold { background: #ffedd5; color: #c2410c; }
.pd-disc-sale { background: #fee2e2; color: #dc2626; }
.pd-price-cost .pd-price-card-label { color: #7c3aed; }
.pd-price-rrp  .pd-price-card-label { color: #6b7a99; }
/* ex-VAT wholesale card subtle tint */
.pd-price-wholesale-exvat { background: #f8fffe; }
.pd-price-wholesale-exvat:hover { background: #f0fdfa; }

/* ── Stock ────────────────────────────────────────────────── */
.pd-stock-list { display: flex; flex-direction: column; gap: 0; }
.pd-stock-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #edf0f5;
}
.pd-stock-item:last-child { border-bottom: none; }
.pd-stock-loc {
    flex: 1; font-size: 1rem; color: #374151; font-weight: 500;
}
.pd-stock-num {
    font-size: 1.05rem; font-weight: 700; color: #111827;
    min-width: 44px; text-align: right;
}
.pd-stock-num-total { color: #2563eb; font-size: 1rem; }
.pd-stock-num-ro    { color: #aab4c8; font-size: 0.95rem; font-weight: 500; }
.pd-stock-zero      { color: #dc2626 !important; }
.pd-stock-divider   { height: 1px; background: #dde2ea; margin: 0 16px; }
.pd-stock-total-row { background: #f4f6f9; }
.pd-stock-ro-row    { background: transparent; }
.pd-stock-delta {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
    padding: 2px 7px; border-radius: 10px; margin-left: 6px;
    line-height: 1.4; flex-shrink: 0;
}
.pd-stock-delta-up   { background: #dcfce7; color: #15803d; }
.pd-stock-delta-down { background: #fee2e2; color: #dc2626; }

/* ── Locked / read-only card overlay ─────────────────────────── */
.pd-card-locked {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
/* Restore pointer events on the card itself so the tooltip pseudo-element fires */
.pd-card-locked::after {
    content: attr(data-pd-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    max-width: 240px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    z-index: 9999;
    pointer-events: none;
}
.pd-card-locked:hover::after {
    display: block;
}
/* Transparent hit-area overlay so hover fires despite pointer-events:none on children */
.pd-card-locked::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: auto;
    cursor: default;
}
.pd-card-lock-badge {
    margin-left: auto;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 2px 8px; border-radius: 8px;
    background: #f1f5f9; color: #64748b;
    border: 1px solid #cbd5e1;
}

/* Individual auto-bundle fields locked (readonly/disabled inputs) */
.pd-ab-field[readonly],
.pd-ab-field[disabled] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}
/* Tooltip on the parent field-group when its field is locked */
.pd-field-group[data-pd-tip] {
    position: relative;
}
.pd-field-group[data-pd-tip]::after {
    content: attr(data-pd-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: normal;
    max-width: 200px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    z-index: 9999;
    pointer-events: none;
}
.pd-field-group[data-pd-tip]:hover::after {
    display: block;
}
/* Locked spinbox fields (bundle/case) */
.pd-bc-field input[readonly] {
    background: #f1f5f9;
    color: #94a3b8;
    opacity: 0.7;
}
.pd-bc-field button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pd-offset-row { display: flex; align-items: center; gap: 6px; }
.pd-offset-btn  {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: #f4f6f9; border: 1px solid #d0d5de; color: #6b7a99;
    border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.pd-offset-btn:hover { background: #e8edf5; color: #1a2030; }
.pd-input-offset { width: 58px; text-align: center; padding: 7px 4px; font-size: 1rem; }

/* ── Spinboxes ────────────────────────────────────────────── */
.pd-spinbox { display: flex; align-items: center; gap: 0; border: 1px solid #d0d5de; border-radius: 6px; overflow: hidden; }
.pd-spin-btn {
    width: 34px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: #f4f6f9; border: none; border-right: 1px solid #d0d5de; color: #6b7a99;
    cursor: pointer; font-size: 1.1rem; transition: background 0.15s;
    flex-shrink: 0;
}
.pd-spin-btn:last-child { border-right: none; border-left: 1px solid #d0d5de; }
.pd-spin-btn:hover { background: #e8edf5; color: #1a2030; }
.pd-input-spin { border: none; border-radius: 0; text-align: center; width: 58px; flex: 1; font-size: 1rem; }
.pd-input-spin:focus { background: #ffffff; }

/* ── Visibility toggles ───────────────────────────────────── */
/* -- Visibility toggles (action bar pills) ------------------------- */
.pd-vis-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.pd-vis-toggle { position: relative; cursor: pointer; }
.pd-vis-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-vis-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px; font-size: 1rem; font-weight: 600;
    border: 1px solid #c8d0dc; background: #f4f6f9; color: #374151;
    transition: all 0.15s; user-select: none;
}
.pd-vis-pill svg { opacity: 0; transition: opacity 0.15s; }
.pd-vis-on .pd-vis-pill   { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.pd-vis-on .pd-vis-pill svg  { opacity: 1; }
.pd-vis-off .pd-vis-pill  { background: #fff1f2; color: #e11d48; border-color: #fecdd3; text-decoration: line-through; }

/* -- Plain checkbox lists (tags / flags / deals) -------------------- */
.pd-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.pd-card-subcats { grid-column: span 2; }
.pd-chk-list { display: flex; flex-direction: column; gap: 0; padding: 6px 0; }
.pd-chk-list-wrap { flex-direction: row; flex-wrap: wrap; gap: 0; }
.pd-chk-label {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; cursor: pointer; user-select: none;
    border-bottom: 1px solid #f0f2f5; transition: background 0.12s;
}
.pd-chk-label:last-child { border-bottom: none; }
.pd-chk-list-wrap .pd-chk-label { border-bottom: none; min-width: 160px; flex: 1; }
.pd-chk-label:hover { background: #f4f6f9; }
.pd-chk-label input[type=checkbox] {
    width: 17px; height: 17px; accent-color: #2563eb;
    flex-shrink: 0; cursor: pointer; margin: 0;
}
.pd-chk-label span {
    font-size: 1rem; color: #4b5670; font-weight: 500; line-height: 1.2;
}
.pd-banners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}
.pd-banner-card {
    border: 1px solid #dde2ea; border-radius: 10px; overflow: hidden;
    background: #ffffff; display: flex; flex-direction: column;
}
.pd-banner-preview-area {
    flex: 1; min-height: 90px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
    position: relative; transition: background 0.2s, color 0.2s;
}
.pd-banner-preview-area {
    height: 52px; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; position: relative; transition: background 0.2s, color 0.2s;
}
.pd-banner-preview-area:not(.pd-banner-has-text) .pd-banner-preview-text { display: none; }
.pd-banner-preview-area:not(.pd-banner-has-text) .pd-banner-preview-empty { display: block; }
.pd-banner-preview-area.pd-banner-has-text .pd-banner-preview-empty { display: none; }
.pd-banner-preview-empty { color: #aab4c8; font-size: 0.78rem; font-style: italic; }
.pd-banner-controls {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-top: 1px solid #dde2ea; background: #f4f6f9;
}
.pd-banner-name { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: #374151; letter-spacing: 0.04em; min-width: 64px; flex-shrink: 0; }
.pd-colour-input { width: 28px; height: 28px; border: 1px solid #d0d5de; border-radius: 5px; padding: 1px; cursor: pointer; background: #ffffff; flex-shrink: 0; }
.pd-banner-text-input { flex: 1; min-width: 0; }

/* ── Firing Order panel ───────────────────────────────────── */
.fo-add-row {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid #dde2ea;
}
.fo-input-fw { flex: 1; min-width: 0; }
.fo-table .fo-th-num     { width: 48px; text-align: center; }
.fo-table .fo-th-actions { width: 110px; }
.fo-table .fo-td-num     { text-align: center; font-variant-numeric: tabular-nums; color: #374151; font-weight: 600; }
.fo-table .fo-td-fw      { word-break: break-word; }
.fo-table .fo-td-actions { white-space: nowrap; text-align: right; display: flex; gap: 4px; justify-content: flex-end; padding: 6px 10px; }

/* ── Description (TinyMCE, full-width card in Product tab) ── */
.pd-desc-card { margin-top: 16px; }
.pd-desc-card .tox-tinymce { border: 1px solid #dde2ea !important; border-radius: 0 0 6px 6px !important; }
.pd-desc-textarea {
    width: 100%; min-height: 640px;
    background: #f8fafc; border: none; color: #1a2030;
    font-size: 1rem; font-family: 'Cascadia Code', 'Consolas', monospace;
    padding: 14px 16px; resize: vertical; outline: none;
    line-height: 1.6; display: block;
}

/* ── Tables (vol pricing / bundle) ────────────────────────── */
.pd-table-wrap { overflow-x: auto; }
.pd-table {
    width: 100%; border-collapse: collapse;
}
.pd-table th {
    font-size: 0.92rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #374151; padding: 13px 14px;
    background: #f8fafc; border-bottom: 1px solid #dde2ea;
    text-align: left; white-space: nowrap;
}
.pd-th-del { width: 50px; }
.pd-table td { padding: 11px 12px; border-bottom: 1px solid #edf0f5; vertical-align: middle; font-size: 1rem; color: #111827; }
.pd-table tbody tr:hover td { background: #f4f6f9; }
.pd-table tfoot td { padding: 8px; border-top: 1px solid #dde2ea; background: #f4f6f9; }
.pd-tfoot-add td { border-bottom: none; }
/* Bundle contents — clickable rows */
.pd-bundle-table tbody tr[data-productid] { cursor: pointer; }
.pd-bundle-table tbody tr[data-productid]:hover td { background: #eef2ff; }
.pd-bundle-row-link td:first-child { color: #4361c2; font-weight: 500; }
/* Inside bundles — clickable rows (same treatment) */
.pd-inside-bundles-table tbody tr[data-productid] { cursor: pointer; }
.pd-inside-bundles-table tbody tr[data-productid]:hover td { background: #eef2ff; }
.pd-inside-bundles-table .pd-bundle-row-link td:first-child { color: #4361c2; font-weight: 500; }
/* Thumbnail column in bundle tables */
.pd-th-img { width: 44px; padding: 0 8px !important; }
.pd-td-thumb { width: 44px; padding: 4px 8px !important; }
.pd-tbl-thumb { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: #f4f6f9; border: 1px solid #dde2ea; display: block; }
.pd-tbl-thumb-empty { display: block; width: 36px; height: 36px; border-radius: 4px; background: #f4f6f9; border: 1px solid #edf0f5; }
.pd-input-tbl  { padding: 6px 8px; font-size: 1rem; font-weight: 600; color: #1e2a3a; flex: 1; min-width: 0; background: none; border: none; border-radius: 0; }
.pd-input-tbl:focus { background: none; outline: none; }
/* price cell wrapper — matches pd-price-card-input style */
.pd-vol-cell {
    display: flex; align-items: center;
    border: 1px solid #d0d5de; border-radius: 6px;
    overflow: hidden; background: #fff;
    transition: border-color 0.15s;
}
.pd-vol-cell:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.10); }
.pd-vol-sym {
    padding: 0 8px; font-size: 1rem; color: #52637a;
    background: #f4f6f9; border-right: 1px solid #d0d5de;
    align-self: stretch; display: flex; align-items: center; flex-shrink: 0;
}
.pd-vol-td-price { padding: 8px 10px 4px; vertical-align: top; }
.pd-vol-stats { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; min-height: 18px; }
.pd-th-sub { font-size: 0.72rem; font-weight: 400; opacity: 0.7; display: block; line-height: 1.2; }
.pd-currency-cell { display: none; } /* kept for safety, hidden */

/* ── Issues ───────────────────────────────────────────────── */
.pd-issues-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.pd-issue-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; font-size: 1rem; color: #dc2626;
    background: #fee2e2; border: 1px solid #fca5a5; border-radius: 7px;
}
.pd-issue-icon {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: #fca5a5; color: #dc2626; display: flex; align-items: center;
    justify-content: center; font-size: 0.75rem; font-weight: 800;
}
.pd-empty { color: #aab4c8; font-style: italic; font-size: 1rem; }

/* ── Responsive ───────────────────────────────────────────── */
@@media (max-width: 900px) {
    .pd-panel-grid { grid-template-columns: 1fr; }
    .pd-tags-grid   { grid-template-columns: 1fr 1fr; }
    .pd-card-subcats { grid-column: span 2; }
    .pd-price-row-top    { grid-template-columns: 1fr 1fr; }
    .pd-price-row-bottom { grid-template-columns: 1fr 1fr 1fr; }
}
@@media (max-width: 600px) {
    .pd-hero-card   { flex-direction: column; }
    .pd-hero-row2   { flex-direction: column; }
    .pd-hero-vis-toggles { flex-wrap: wrap; }
    .pd-tags-grid   { grid-template-columns: 1fr; }
    .pd-card-subcats { grid-column: span 1; }
    .pd-banners-grid { grid-template-columns: 1fr; }
    .pd-price-row-top    { grid-template-columns: 1fr; }
    .pd-price-row-bottom { grid-template-columns: 1fr 1fr; }
}
.pd-hero-row {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 16px 20px 0; flex-wrap: wrap;
}
.pd-hero-img-wrap { flex-shrink: 0; }
.pd-hero-img      { width: 100%; height: 100%; object-fit: contain; border-radius: 0;
                    background: transparent; border: none; }
.pd-hero-fields   { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.pd-hero-meta     { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Shared input / select ────────────────────────────────── */
.pd-input {
    background: #ffffff; border: 1px solid #d0d5de; color: #1a2030;
    border-radius: 4px; padding: 7px 10px; font-size: 1rem; outline: none;
    transition: border-color 0.15s; box-sizing: border-box;
}
.pd-input:focus    { border-color: #2563eb; }
.pd-input-title    { width: 100%; font-size: 1.15rem; font-weight: 600; padding: 8px 10px; }
.pd-input-sm       { width: 140px; }
.pd-input-price    { flex: 1; min-width: 0; text-align: left; }
.pd-input-spin     { width: 72px;  text-align: center; }
.pd-input-offset   { width: 60px;  text-align: center; }
.pd-input-vol      { width: 90px; }
.pd-select {
    background: #ffffff; border: 1px solid #d0d5de; color: #1a2030;
    border-radius: 4px; padding: 7px 10px; font-size: 1rem; outline: none;
    cursor: pointer; transition: border-color 0.15s;
}
.pd-select:focus   { border-color: #2563eb; }

/* ── Tab bar ──────────────────────────────────────────────── */
.pd-tabbar {
    display: flex; flex-wrap: wrap; gap: 0;
    padding: 0 20px; border-bottom: 2px solid #dde2ea; margin-top: 14px;
}
.pd-tab {
    background: transparent; border: none; border-bottom: 3px solid transparent;
    color: rgba(255,255,255,0.75); padding: 10px 18px; font-size: 1rem; cursor: pointer;
    margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.pd-tab:hover  { color: #ffffff; }
.pd-tab.active { color: #ffffff; border-bottom-color: #ffffff; }

/* ── Panel (legacy duplicate — overridden above) ──────────── */

/* ── Section ──────────────────────────────────────────────── */
.pd-section { margin-bottom: 18px; }
.pd-section-title {
    font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #2563eb; margin-bottom: 10px;
}

/* ── Two / Three column layouts ───────────────────────────── */
.pd-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pd-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 900px) {
    .pd-two-col   { grid-template-columns: 1fr; }
    .pd-three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .pd-three-col { grid-template-columns: 1fr; }
}

/* ── Pricing grid ─────────────────────────────────────────── */
.pd-price-grid { display: flex; flex-direction: column; gap: 7px; }
.pd-price-row  { display: flex; align-items: center; gap: 8px; }
.pd-price-row label { min-width: 110px; font-size: 0.95rem; color: #6b7a99; }
.pd-disc-label  { font-size: 0.88rem; color: #16a34a; min-width: 60px; }
.pd-calc-value  { font-size: 0.95rem; color: #6b7a99; min-width: 80px; }

/* ── Stock grid ───────────────────────────────────────────── */
.pd-stock-grid  { display: flex; flex-direction: column; gap: 6px; }
.pd-stock-row   { display: flex; align-items: center; gap: 10px; }
.pd-stock-row label { min-width: 110px; font-size: 0.95rem; color: #6b7a99; flex-shrink: 0; }
.pd-stock-val   { min-width: 46px; font-size: 1rem; text-align: right; }
.pd-stock-total { min-width: 46px; font-size: 1.05rem; font-weight: 700; color: #2563eb; text-align: right; }
.pd-stock-ro    { min-width: 46px; font-size: 1rem; color: #aab4c8; text-align: right; }
.pd-stock-sep   { border-top: 1px solid #dde2ea; padding-top: 6px; margin-top: 2px; }

/* ── Offset controls ──────────────────────────────────────── */
.pd-offset-ctrl   { display: flex; align-items: center; gap: 3px; margin-left: 6px; }
.pd-offset-btn {
    width: 26px; height: 26px; padding: 0; font-size: 1rem; line-height: 1;
    background: #f4f6f9; border: 1px solid #d0d5de; color: #6b7a99;
    border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pd-offset-btn:hover { background: #e8edf5; }

/* ── Meta / spec grid ─────────────────────────────────────── */
.pd-meta-grid {
    display: grid; grid-template-columns: 130px 1fr; gap: 7px 10px; align-items: center;
}
.pd-meta-grid label { font-size: 0.95rem; color: #6b7a99; }
.pd-cb-inline  { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }

/* ── Spinbox ──────────────────────────────────────────────── */
.pd-spinbox  { display: flex; align-items: center; gap: 3px; }
.pd-spin-btn {
    width: 26px; height: 26px; padding: 0; font-size: 1rem; line-height: 1;
    background: #f4f6f9; border: 1px solid #d0d5de; color: #6b7a99;
    border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pd-spin-btn:hover { background: #e8edf5; }

/* ── Checkbox list ────────────────────────────────────────── */
.pd-cb-list       { display: flex; flex-direction: column; gap: 5px; }
.pd-checkbox-label {
    display: flex; align-items: center; gap: 7px; font-size: 1rem;
    color: #2a3448; cursor: pointer; user-select: none;
}
.pd-checkbox-label input[type=checkbox] { accent-color: #2563eb; width: 15px; height: 15px; flex-shrink: 0; }

/* ── Banners ──────────────────────────────────────────────── */
.pd-banner-grid   { display: flex; flex-direction: column; gap: 10px; }
.pd-banner-row    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-banner-label  { min-width: 76px; font-size: 0.95rem; color: #6b7a99; }
.pd-banner-colour { width: 40px; height: 30px; padding: 2px; border: 1px solid #d0d5de;
                    border-radius: 4px; background: #ffffff; cursor: pointer; }
.pd-banner-text   { flex: 1; min-width: 140px; max-width: 320px; }
.pd-banner-preview {
    display: none; padding: 3px 10px; border-radius: 3px; font-size: 0.78rem;
    font-weight: 700; color: #ffffff; white-space: nowrap;
}

/* ── Description ──────────────────────────────────────────── */
.pd-textarea         { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 1rem; resize: vertical; }
.pd-description-area { min-height: 220px; }
.pd-description-preview {
    background: #f4f6f9; border: 1px solid #dde2ea; border-radius: 6px;
    padding: 16px 20px; font-size: 1rem; line-height: 1.7; color: #2a3448;
    min-height: 60px; max-width: 760px;
}

/* ── Volume / bundle table ────────────────────────────────── */
.pd-vol-table {
    width: 100%; border-collapse: collapse; font-size: 1rem;
    background: #ffffff; border-radius: 6px; overflow: hidden;
}
.pd-vol-table th {
    background: #f4f6f9; color: #2563eb; font-weight: 600; padding: 8px 10px;
    text-align: left; border-bottom: 1px solid #dde2ea; white-space: nowrap;
}
.pd-vol-table td { padding: 5px 6px; border-bottom: 1px solid #edf0f5; }
.pd-vol-table tfoot td { background: #f4f6f9; border-top: 1px solid #dde2ea; padding: 6px 6px; }
.pd-vol-table tbody tr:hover { background: #f4f6f9; }

/* ── Issues list ──────────────────────────────────────────── */
.pd-issues-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pd-issue-item  {
    display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
    color: #dc2626; background: #fee2e2; border: 1px solid #fca5a5;
    border-radius: 5px; padding: 8px 12px;
}

/* ── Hero row2 visibility toggles ────────────────────────── */
.pd-hero-vis-toggles {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 4px 0;
}

/* ── Bundle Contents — info row ───────────────────────────── */
.pd-inforow {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    padding: 14px 16px;
}
.pd-inforow .pd-field-group { flex: 1; min-width: 180px; }
.pd-info-value {
    display: block; font-size: 0.92rem; font-weight: 600; color: #1e293b;
    padding: 7px 10px; background: #f4f6f9; border: 1px solid #dde2ea;
    border-radius: 6px; min-height: 34px;
}
.pd-input-sm { max-width: 120px; }

/* ── Bundle table stat cells ──────────────────────────────── */
.pd-td-stat {
    font-size: 0.84rem; color: #374151; font-weight: 500;
    padding: 6px 8px; white-space: nowrap;
}

/* ── Bundle Stats cards grid ──────────────────────────────── */
.pd-bundle-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px;
}
.pd-bstat-card {
    background: #f8fafc; border: 1px solid #dde2ea; border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.pd-bstat-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6b7a99;
}
.pd-bstat-price {
    font-size: 1.35rem; font-weight: 700; color: #1e293b; line-height: 1.1;
}
.pd-bstat-comp {
    font-size: 0.78rem; color: #64748b;
}
.pd-bstat-saving {
    font-size: 0.78rem; font-weight: 600; color: #16a34a;
}
.pd-bstat-vsrrp {
    font-size: 0.78rem; font-weight: 600; color: #2563eb;
}
.pd-bstat-cost {
    font-size: 0.78rem; color: #64748b; margin-top: 4px;
    padding-top: 6px; border-top: 1px solid #e8edf5;
}

/* ═══════════════════════════════════════════════════════════════════
   ORDER DETAIL PAGE  (od-*)
   Full-width layout — scoped under .od-context
═══════════════════════════════════════════════════════════════════ */

/* ── Context wrapper: fill the full content area ────────────────── */
.od-context { display: flex; flex-direction: column; min-height: 100%; }

/* ── Skeleton: full width ───────────────────────────────────────── */
.od-context .pds-wrap { max-width: none; padding: 0 0 40px; }

/* ── Page shell ─────────────────────────────────────────────────── */
.od-page { width: 100%; padding: 0 0 48px; }

/* ── Action bar: sticky, full bleed ─────────────────────────────── */
.od-context .pd-actionbar { padding: 12px 28px; gap: 12px; }
.od-context .pd-actionbar .pd-btn { font-size: 0.88rem; padding: 8px 14px; gap: 6px; }

/* ── Hero card ───────────────────────────────────────────────────── */
.od-hero-card {
    background: #ffffff;
    border-bottom: 1px solid #e4e7ec;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.od-hero-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.od-hero-name { font-size: 1.75rem; font-weight: 800; color: #1e293b; letter-spacing: -0.02em; }
.od-hero-sub  { font-size: 0.95rem; color: #64748b; }
.od-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ── Tab nav: full bleed ─────────────────────────────────────────── */
.od-context .pd-tabs {
    border-radius: 0; border-left: none; border-right: none;
    padding: 0 24px;
}
.od-context .pd-tab { font-size: 0.9rem; padding: 14px 18px; gap: 7px; }

/* ── Panels: full bleed, generous padding ───────────────────────── */
.od-context .pd-panel { padding: 28px 28px 0; }

/* ── Two-column grid: 38/62 split so right (line items) is wider ── */
.od-context .pd-panel-grid {
    grid-template-columns: 38fr 62fr;
    gap: 0 24px;
    align-items: start;
}

/* ── Cards: no rounded corners on outer edges, bigger feel ─────── */
.od-context .pd-card { border-radius: 10px; margin-bottom: 20px; }
.od-context .pd-card-header {
    padding: 16px 24px;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

/* ── Field grids: 3 columns on left, more breathing room ───────── */
.od-context .pd-fields-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 24px;
    padding: 22px 24px;
}
.od-context .pd-field-wide { grid-column: 1 / -1; }
.od-context .pd-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 5px; color: #6b7a99; }
.od-context .pd-value { font-size: 1.05rem; font-weight: 500; color: #1e293b; }
.od-context .pd-input,
.od-context .pd-select { font-size: 0.95rem; padding: 8px 12px; }
.od-context .pd-textarea { font-size: 0.9rem; padding: 10px 12px; }
.od-context .pd-textarea[readonly] { background: #f8fafc; color: #475569; cursor: default; resize: none; }

/* ── Line-items table ───────────────────────────────────────────── */
.od-items-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.od-items-table th {
    text-align: left; padding: 10px 14px; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a99;
    border-bottom: 2px solid #e8edf5;
}
.od-items-table td { padding: 12px 14px; border-bottom: 1px solid #f0f4fa; vertical-align: middle; }
.od-items-table tbody tr:last-child td { border-bottom: none; }
.od-items-table .od-td-num    { text-align: right; }
.od-items-table .od-td-center { text-align: center !important; }
.od-items-table .od-td-status { text-align: right; padding-right: 18px; white-space: nowrap; }
.od-items-table .od-td-img    { width: 54px; padding: 8px 10px; }
.od-item-row:hover { background: #f8faff; }
.od-item-row[data-product-id]:hover .od-item-title { color: #1a5fcc; text-decoration: underline; }
.od-item-img { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; border: 1px solid #e8edf5; }
.od-item-img-empty {
    width: 44px; height: 44px; border-radius: 5px; border: 1px solid #e8edf5;
    background: #f4f6fb; display: flex; align-items: center; justify-content: center; color: #c0c8d8;
}
.od-item-title { font-weight: 600; color: #1e293b; font-size: 0.92rem; }
.od-item-bundle-child td { background: #f8fafc; }
.od-item-bundle-child .od-item-img-cell { border-left: 3px solid #cbd5e1; padding-left: 28px !important; }
.od-item-bundle-child .od-item-title { font-weight: 400; color: #475569; font-size: 0.87rem; }
.od-fulfil-badge {
    display: inline-block; padding: 3px 9px; border-radius: 10px;
    font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.od-fulfil-unfulfilled { background: #fff3cd; color: #92600a; }
.od-fulfil-fulfilled   { background: #d1fae5; color: #065f46; }
.od-fulfil-cancelled   { background: #f1f5f9; color: #64748b; text-decoration: line-through; }

/* ── Fulfillment counts row ─────────────────────────────────────── */
.od-fulfil-counts {
    display: flex; gap: 24px; padding: 14px 24px;
    background: #f8fafc; border-bottom: 1px solid #e8edf5;
}
.od-fulfil-count { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.od-fulfil-count-num { font-size: 1.5rem; font-weight: 800; color: #1e293b; }
.od-fulfil-count-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a99; }

/* ── Order stats grid ───────────────────────────────────────────── */
.od-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
    border: 1px solid #e8edf5; border-radius: 8px; overflow: hidden;
    margin: 0 24px 20px;
}
.od-stat-cell {
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid #e8edf5; border-right: 1px solid #e8edf5;
}
.od-stat-cell:nth-child(3n) { border-right: none; }
.od-stat-cell:nth-last-child(-n+3) { border-bottom: none; }
.od-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a99; }
.od-stat-value { font-size: 1.1rem; font-weight: 800; color: #1e293b; }
.od-stat-cell.od-stat-total { grid-column: 1 / -1; background: #f4f7ff; }
.od-stat-cell.od-stat-total .od-stat-value { font-size: 1.35rem; color: #1a4a96; }

/* ── Packaging / tracking card ──────────────────────────────────── */
.od-pack-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    padding: 20px 24px;
}
.od-pack-field { display: flex; flex-direction: column; gap: 5px; }
.od-pack-field-full { grid-column: 1 / -1; }
.od-pack-label { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a99; }
.od-pack-value { font-size: 1rem; font-weight: 600; color: #1e293b; }
.od-pack-link  { font-size: 0.95rem; color: #1a5fcc; text-decoration: none; }
.od-pack-link:hover { text-decoration: underline; }
.od-track-status-badge {
    display: inline-block; padding: 4px 12px; border-radius: 12px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.od-track-none      { background: #f1f5f9; color: #64748b; }
.od-track-planned   { background: #e0f2fe; color: #0369a1; }
.od-track-locked    { background: #fef9c3; color: #92600a; }
.od-track-delivered { background: #d1fae5; color: #065f46; }
.od-track-waiting   { background: #ede9fe; color: #5b21b6; }

/* ── Address block ──────────────────────────────────────────────── */
.od-address-block { padding: 20px 24px 22px; }
.od-address-block > .od-address-block { padding: 0; }
.od-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-bottom: 0;
}
.od-addr-grid .pd-card { margin-bottom: 0; }
.od-addr-name {
    font-size: 1.15rem; font-weight: 700; color: #1e293b;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid #e8edf5;
}
.od-addr-company { font-size: 1rem; font-weight: 600; color: #475569; margin-bottom: 2px; }
.od-addr-row     { font-size: 1rem; color: #334155; line-height: 1.7; }
.od-addr-phone {
    font-size: 0.95rem; color: #64748b;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #e8edf5;
    display: flex; align-items: center; gap: 6px;
}
.od-addr-phone::before {
    content: '';
    display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2 2.5c0-.3.2-.5.5-.5h2l1 2.5-1.5 1a7 7 0 0 0 3 3l1-1.5L10.5 8v2c0 .3-.2.5-.5.5A9 9 0 0 1 1.5 3c0-.3.2-.5.5-.5Z' stroke='%2364748b' stroke-width='1.3'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-size: contain;
}
.od-addr-empty { font-size: 1rem; color: #94a3b8; padding: 20px 24px 22px; display: block; }

/* ── Embedded map ───────────────────────────────────────────────── */
.od-map-wrap   { border-top: 1px solid #e8edf5; }
.od-map-iframe { width: 100%; height: 240px; display: block; }

/* ── Order status badges ────────────────────────────────────────── */
.od-status-badge {
    display: inline-block; padding: 4px 12px; border-radius: 12px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.od-status-new       { background: #dbeafe; color: #1d4ed8; }
.od-status-processing{ background: #e0f2fe; color: #0369a1; }
.od-status-packed    { background: #fef9c3; color: #92600a; }
.od-status-dispatched{ background: #ede9fe; color: #5b21b6; }
.od-status-delivered { background: #d1fae5; color: #065f46; }
.od-status-bonkers   { background: #fce7f3; color: #9d174d; }
.od-status-cancelled { background: #f1f5f9; color: #64748b; }
.od-status-archived  { background: #f1f5f9; color: #64748b; }
.od-status-onhold    { background: #fff3cd; color: #92600a; }
.od-status-partpaid  { background: #fde68a; color: #78350f; }

/* ── Note display ───────────────────────────────────────────────── */
.od-note-text {
    font-size: 0.95rem; color: #334155; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 6px;
    padding: 10px 14px; line-height: 1.65; white-space: pre-wrap;
    min-height: 40px;
}
.od-note-empty { color: #94a3b8; font-style: italic; }

/* ── Delivery date fields ───────────────────────────────────────── */
.od-date-row { display: flex; align-items: center; gap: 12px; }
.od-date-row label { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: #334155; cursor: pointer; }
.od-date-row input[type=date] { padding: 7px 12px; border: 1px solid #d0d9ea; border-radius: 6px; font-size: 0.9rem; color: #1e293b; background: #fff; }
.od-date-row input[type=date]:disabled { background: #f4f6fb; color: #94a3b8; cursor: not-allowed; }

/* ── Save status ────────────────────────────────────────────────── */
.od-save-status { font-size: 0.88rem; color: #64748b; }
.od-save-status.od-saved  { color: #16a34a; }
.od-save-status.od-saving { color: #1a5fcc; }
.od-save-status.od-error  { color: #dc2626; }
.od-btn-waiting { opacity: 0.55; cursor: wait !important; }

/* ── Responsive collapse ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .od-context .pd-panel-grid { grid-template-columns: 1fr 1fr; }
    .od-stats-grid { grid-template-columns: 1fr 1fr; margin: 0 20px 20px; }
    .od-stats-grid .od-stat-cell:nth-child(3n) { border-right: 1px solid #e8edf5; }
    .od-stats-grid .od-stat-cell:nth-child(2n) { border-right: none; }
    .od-stats-grid .od-stat-cell:nth-last-child(-n+2) { border-bottom: none; }
    .od-stats-grid .od-stat-cell:nth-last-child(-n+3) { border-bottom: 1px solid #e8edf5; }
    .od-pack-grid { grid-template-columns: 1fr 1fr; }
    .od-context .pd-fields-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .od-context .pd-panel-grid { grid-template-columns: 1fr; }
    .od-context .pd-panel { padding: 16px 16px 0; }
    .od-hero-card { padding: 18px 16px; }
    .od-hero-name { font-size: 1.5rem; }
    .od-stats-grid { grid-template-columns: 1fr 1fr; margin: 0 16px 16px; }
    .od-pack-grid { grid-template-columns: 1fr 1fr; padding: 16px; }
    .od-context .pd-fields-grid { grid-template-columns: 1fr; }
    .od-fulfil-counts { gap: 16px; padding: 12px 16px; }
}


/* ════════════════════════════════════════════════════════════════
   STOCK MANAGER  (sm-*)
   ════════════════════════════════════════════════════════════════ */

.sm-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sm-stat-card {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Blue header band */
.sm-stat-header {
    background: #174480;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 12px 18px;
}

.sm-stat-body {
    padding: 10px 18px 6px;
    flex: 1;
}

.sm-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 1rem;
}

.sm-stat-row:last-child { border-bottom: none; }

.sm-stat-label { color: #64748b; font-size: 1rem; }

.sm-stat-val {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a2a4a;
}

/* Create list button inside card */
.sm-stat-footer {
    padding: 12px 18px 14px;
}

.sm-card-btn {
    display: block;
    text-align: center;
    font-size: 1rem;
}

.sm-td-id    { color: #64748b; font-size: 0.95rem; width: 50px; }
.sm-td-notes { color: #64748b; font-size: 0.95rem; max-width: 280px; }
.sm-td-actions { white-space: nowrap; }

.sm-btn-arrived {
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.sm-btn-delete {
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 6px;
    background: none;
    border: 1px solid #e0e0e0;
    color: #bf2600;
    cursor: pointer;
    transition: background 0.15s;
}

.sm-btn-delete:hover { background: #ffebe6; border-color: #bf2600; }
.sm-btn-confirm      { background: #ffebe6 !important; border-color: #bf2600 !important; font-weight: 700; }

/* NEC action bar */
.sm-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* NEC button — blue base, flash overrides applied via JS */
.sm-nec-btn {
    font-size: 1rem;
    border: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ── Stock List page (sl-*) ─────────────────────────────────────── */

.sl-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 14px;
}

.sl-toolbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #174480;
    margin-right: 8px;
}

.sl-toolbar-search {
    flex: 1;
    min-width: 160px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1a2a4a;
    background: #f8fafc;
}

.sl-toolbar-search:focus {
    outline: none;
    border-color: #174480;
    background: #fff;
}

.sl-toolbar-spacer { flex: 1; }

/* Totals bar */
.sl-totals-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.sl-total-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 20px;
    border-right: 1px solid #f0f2f5;
}

.sl-total-item:last-child { border-right: none; }

.sl-total-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
}

.sl-total-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2a4a;
}

/* Product table */
.sl-table-wrap {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.sl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sl-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #dde2ea;
    padding: 9px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    white-space: nowrap;
}

.sl-table thead th.sl-th-num { text-align: right; }

.sl-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

.sl-table tbody tr:last-child td { border-bottom: none; }

.sl-table tbody tr:hover { background: #f8fafc; }

.sl-td-title {
    font-weight: 600;
    color: #1a2a4a;
    max-width: 320px;
}

.sl-title-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sl-prod-thumb {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #f1f5f9;
}

.sl-prod-thumb-placeholder {
    background: #e2e8f0;
}

.sl-td-num { text-align: right; color: #1a2a4a; font-weight: 600; }
.sl-td-zero { color: #94a3b8; }
.sl-td-stock { color: #166534; }

.sl-wanted-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.sl-btn-qty {
    width: 26px;
    height: 26px;
    border: 1px solid #dde2ea;
    border-radius: 6px;
    background: #f8fafc;
    color: #1a2a4a;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}

.sl-btn-qty:hover { background: #e8f0fb; border-color: #174480; }

.sl-wanted-input {
    width: 52px;
    height: 26px;
    text-align: center;
    border: 1px solid #dde2ea;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a2a4a;
    background: #fff;
}

.sl-wanted-input:focus { outline: none; border-color: #174480; }
.sl-wanted-nonzero { background: #f0f5ff !important; border-color: #174480 !important; }

/* Notes row above submit */
.sl-notes-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.sl-notes-input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1a2a4a;
    background: #fff;
}

.sl-notes-input:focus { outline: none; border-color: #174480; }

/* Hangar NEC page */
.sl-nec-panel {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 600px;
    margin-bottom: 16px;
}

.sl-nec-title {
    font-size: 1rem;
    font-weight: 700;
    color: #174480;
    margin-bottom: 16px;
}

.sl-nec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.sl-nec-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid #dde2ea;
}

.sl-nec-table td {
    padding: 7px 12px 7px 0;
    border-bottom: 1px solid #f0f2f5;
    color: #1a2a4a;
    font-weight: 600;
}

.sl-nec-table tr:last-child td { border-bottom: none; }

/* ── Stock List two-column layout ───────────────────────────────── */
.sl-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sl-table-col {
    flex: 1;
    min-width: 0;
}

/* Right control panel */
.sl-panel {
    width: 270px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 16px;
}

.sl-panel-card {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 14px 16px;
}

.sl-panel-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    margin-bottom: 9px;
}

/* Quick-set buttons */
.sl-panel-btn {
    display: block;
    width: 100%;
    margin-bottom: 7px;
    padding: 9px 12px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    background: #f8fafc;
    color: #1a2a4a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}

.sl-panel-btn:last-child { margin-bottom: 0; }
.sl-panel-btn:hover { background: #e8f0fb; border-color: #174480; color: #174480; }

.sl-panel-btn-danger {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #b91c1c;
}
.sl-panel-btn-danger:hover { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

/* Filter checkboxes */
.sl-panel-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: #1a2a4a;
    cursor: pointer;
    user-select: none;
}
.sl-panel-check:last-child { margin-bottom: 0; }
.sl-panel-check input[type=checkbox] { cursor: pointer; accent-color: #174480; width: 15px; height: 15px; }

/* Stats rows */
.sl-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.83rem;
}
.sl-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.sl-stat-label { color: #64748b; }
.sl-stat-val   { font-weight: 700; color: #1a2a4a; }
.sl-stat-val-accent { font-weight: 700; color: #174480; }

/* Notes + submit inside panel */
.sl-panel-notes {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1a2a4a;
    resize: vertical;
    min-height: 62px;
    background: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.sl-panel-notes:focus { outline: none; border-color: #174480; }

.sl-panel-submit {
    width: 100%;
    padding: 10px;
    font-size: 0.88rem;
}

@media (max-width: 800px) {
    .sm-stats-grid   { grid-template-columns: 1fr; }
    .sm-actions-bar  { flex-direction: column; }
    .sl-toolbar      { flex-direction: column; align-items: stretch; }
    .sl-totals-bar   { flex-direction: column; }
    .sl-total-item   { border-right: none; border-bottom: 1px solid #f0f2f5; }
    .sl-layout       { flex-direction: column; }
    .sl-panel        { width: 100%; position: static; }
}


/* ════════════════════════════════════════════════════════════════
   DISPATCHES  (dp-*)
   ════════════════════════════════════════════════════════════════ */

.dp-search-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.dp-search-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dp-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.dp-select, .dp-date {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1a2a4a;
    background: #f8fafc;
    min-width: 160px;
}

.dp-select:focus, .dp-date:focus {
    outline: none;
    border-color: #174480;
    background: #fff;
}

.dp-clear-btn { align-self: flex-end; }

/* Notice / spinner */
.dp-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 32px;
    color: #64748b;
    font-size: 0.95rem;
    background: #f8fafc;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    margin-bottom: 14px;
}

.dp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #dde2ea;
    border-top-color: #174480;
    border-radius: 50%;
    animation: dp-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes dp-spin { to { transform: rotate(360deg); } }

/* ── Combined info + prizes panel ────────────────────────────────── */
.dp-info-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.dp-info-stats {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.dp-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 20px;
    border-right: 1px solid #f0f2f5;
}

.dp-info-item:last-child { border-right: none; }

.dp-info-item-highlight { background: #f0f5ff; }

.dp-info-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    white-space: nowrap;
}

.dp-info-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2a4a;
    white-space: nowrap;
}

.dp-info-side {
    border-top: 1px solid #dde2ea;
    padding: 14px 18px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    background: #fafbfc;
}

.dp-info-side:empty { display: none; }

#dp-issues-wrap,
#dp-prizes-wrap {
    flex: 1;
    min-width: 200px;
}

/* Issues inside panel */
.dp-issues-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b45300;
    margin-bottom: 4px;
}

.dp-issues-list {
    margin: 0;
    padding-left: 16px;
    color: #7a3500;
    font-size: 1rem;
    line-height: 1.6;
}

/* Prizes inside panel */
.dp-prizes-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #166534;
    margin-bottom: 4px;
}

.dp-prizes-list {
    margin: 0;
    padding-left: 16px;
    color: #14532d;
    font-size: 1rem;
    line-height: 1.6;
}

/* ── Navigator ───────────────────────────────────────────────────── */

/*
   The navigator is a rigid 3-zone stack.
   Heights are fixed so NOTHING on the page moves when clicking Next/Prev:
     Zone 1 — previous stop:  160px (hidden when empty via opacity, not display)
     Zone 2 — active + nav:   card 180px + nav row 52px = 232px
     Zone 3 — upcoming list:  6 rows × 52px = 312px (scrolls internally if needed)
   Zones 1 and 3 use overflow:hidden so varying content can never burst out.
*/

.dp-navigator {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Zone 1 — previous stop, always occupies its space */
.dp-prev-slot {
    height: 200px;
    overflow: hidden;
    position: relative;
    visibility: hidden;   /* hides content but keeps the space reserved */
}

.dp-prev-slot.dp-slot-visible {
    visibility: visible;
}

.dp-prev-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    padding: 0 4px 4px;
}

/* Zone 2 — active card + nav row, rigid block */
.dp-active-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.dp-stop-card-active {
    height: 220px;
    overflow: hidden;
    border-color: #174480;
    border-width: 2px;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(23,68,128,0.10);
    display: flex;
    align-items: stretch;
    padding: 0;
    background: #fff;
    cursor: pointer;
    transition: background 0.12s;
}

.dp-stop-card-active:hover {
    background: #f6f9ff;
}

/* Nav row — independent panel, full border-radius */
.dp-nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 10px;
}

.dp-nav-btn {
    min-width: 110px;
    height: 36px;
    flex-shrink: 0;
}

.dp-btn-speak {
    min-width: 90px;
}

.dp-nav-counter {
    flex: 1;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

/* Zone 3 — upcoming list, all remaining drops */
#dp-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* ── Stop cards ──────────────────────────────────────────────────── */
.dp-stop-card {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 16px 20px;
    box-sizing: border-box;
}

/* Previous (delivered) — muted, fills its zone */
.dp-stop-card-prev {
    height: 100%;
    box-sizing: border-box;
    opacity: 0.5;
    font-size: 1rem;
    border-style: dashed;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Upcoming rows */
.dp-stop-card-upcoming {
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    font-size: 1rem;
    background: #f8fafc;
    border: 1px solid #eef0f4;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.12s;
}

.dp-stop-card-upcoming:hover {
    background: #eef3fb;
    border-color: #c7d9f0;
}

/* ── Three-column stat layout (used in active, prev and upcoming cards) ── */

/* Row that holds the three columns — fills the card */
.dp-card-cols {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

/* Each column */
.dp-card-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 16px;
    min-width: 0;
    overflow: hidden;
}

/* Left: takes up to 35% of width, left-aligned */
.dp-card-col-left {
    flex: 0 0 35%;
    align-items: flex-start;
    border-right: 1px solid #eef0f4;
}

/* Mid: absolutely centred over the full panel width */
.dp-card-col-mid {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
    padding: 10px 36%;
}

/* Right: takes up to 30% of width, right-aligned, pushed to far end */
.dp-card-col-right {
    flex: 0 0 30%;
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
    border-left: 1px solid #eef0f4;
}

/* Shared label above value */
.dp-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 3px;
    white-space: nowrap;
}

/* Values — upcoming rows */
.dp-col-val-loc {
    font-size: 1.1rem;
    font-weight: 700;
    color: #174480;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dp-col-val-order {
    font-size: 1.1rem;
    font-weight: 900;
    color: #0d1b2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.dp-col-val-boxes {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0d1b2e;
    line-height: 1;
    text-align: right;
}

/* Larger values for active / prev cards */
.dp-stop-card-active .dp-col-val-loc,
.dp-stop-card-prev .dp-col-val-loc {
    font-size: 1.3rem;
}

.dp-stop-card-active .dp-col-val-order,
.dp-stop-card-prev .dp-col-val-order {
    font-size: 2.2rem;
}

.dp-stop-card-active .dp-col-val-boxes,
.dp-stop-card-prev .dp-col-val-boxes {
    font-size: 2.6rem;
}

.dp-card-col-mid .dp-col-label,
.dp-card-col-right .dp-col-label {
    text-align: right;
}

.dp-card-col-mid .dp-col-label {
    text-align: center;
}

/* Upcoming rows: hide labels, enlarge values to match boxes column */
.dp-stop-card-upcoming .dp-col-label {
    display: none;
}

.dp-stop-card-upcoming .dp-col-val-loc,
.dp-stop-card-upcoming .dp-col-val-order {
    font-size: 1.8rem;
    letter-spacing: 0;
}



/* Contents panel — shown below navigator on card click */
/* Contents modal — fixed overlay */
.dp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, 0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dp-modal-box {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dp-contents-panel {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 40px rgba(10,20,40,0.22);
}

.dp-contents-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #f0f5ff;
    border-bottom: 1px solid #dde2ea;
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
}

.dp-contents-panel-header span {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #174480;
}

.dp-contents-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}

.dp-contents-close:hover { color: #0d1b2e; }

.dp-contents-panel-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
}

.dp-contents-line {
    font-size: 1.05rem;
    color: #1e3a5f;
    font-weight: 600;
    line-height: 1.5;
}

.dp-contents-loading,
.dp-contents-empty {
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}

.dp-no-boxes { color: #b91c1c; font-weight: 800; }

@media (max-width: 800px) {
    .dp-search-bar      { flex-direction: column; align-items: stretch; }
    .dp-info-panel      { flex-direction: column; }
    .dp-info-side       { flex-direction: column; }
    .dp-nav-btn         { min-width: 80px; }
    .dp-btn-speak       { min-width: 70px; }
}

/* ── Top-bar shortcut buttons (Send SMS / Send Email) ─────────────── */

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.top-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #174480;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.top-bar-btn svg { flex-shrink: 0; }

.top-bar-btn:hover {
    background: #1a56aa;
    box-shadow: 0 2px 8px rgba(23,68,128,0.25);
}

.top-bar-btn:active { background: #0f2d60; }

/* ── Compose panel overlay ─────────────────────────────────────────── */

.compose-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,20,40,0.45);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}

.compose-overlay.compose-open {
    display: flex;
}

.compose-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(10,20,40,0.22);
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #174480;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.compose-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
}

.compose-close:hover { opacity: 1; }

.compose-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.compose-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a5568;
    margin-bottom: 2px;
}

.compose-input,
.compose-select,
.compose-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1e3a5f;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.15s;
    resize: vertical;
}

.compose-input:focus,
.compose-select:focus,
.compose-textarea:focus {
    outline: none;
    border-color: #174480;
    background: #fff;
}

.compose-input-valid  { border-color: #16a34a !important; background: #f0fdf4 !important; }
.compose-input-invalid { border-color: #dc2626 !important; background: #fef2f2 !important; }

.compose-error {
    font-size: 0.83rem;
    color: #dc2626;
    min-height: 1.2em;
    font-weight: 600;
}

.compose-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.compose-cancel {
    background: #e2e8f0;
    color: #374151;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.compose-cancel:hover { background: #cbd5e1; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE BREAKPOINTS
════════════════════════════════════════════════════════════════ */

/* ── Tablet & Mobile (≤900px) ──────────────────────────────── */
@media (max-width: 900px) {
    /* Orders table: hide delivery & location columns */
    .orders-table .col-delivery,
    .orders-table .col-location { display: none; }

    /* Stock List: stack layout */
    .sl-layout { flex-direction: column; }
    .sl-panel { width: 100%; position: static; }
}

/* Column picker panel – hidden everywhere by default; shown only on mobile via toggle */
.column-panel {
    display: none;
}
.pt-columns-toggle { display: none; }

/* ── Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    /* iOS Safari zooms into any input with font-size < 16px.
       Force all inputs, selects and textareas to exactly 16px on mobile
       to suppress that behaviour globally. The more-specific class rules
       below are also overridden individually to ensure !important wins. */
    input, select, textarea { font-size: 16px !important; }
    .pt-search-wrap .search-input { font-size: 16px !important; }
    .search-input, .filter-select  { font-size: 16px !important; }

    /* Top bar: hide SMS/Email button labels */
    .top-bar-btn span { display: none; }
    .top-bar-btn { padding: 7px 10px; }

    /* Products: show mobile filter toggle, hide filter panel by default */
    .pt-filter-toggle { display: inline-flex; }

    /* Products: hide filter panel by default, show with toggle */
    .filter-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        z-index: 210;
        background: #fff;
        flex-direction: column;
        border-radius: 0;
        border: none;
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }
    .filter-panel.filter-panel-open { display: flex; }
    .filter-panel-close-btn { display: block; }

    /* Column picker panel – slides in from the right */
    .column-panel {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        z-index: 210;
        background: #fff;
        flex-direction: column;
        box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    }
    .column-panel.column-panel-open { display: flex; }

    .column-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
        border-bottom: 1px solid #e4e7ec;
        flex-shrink: 0;
    }
    .column-panel-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a2e;
    }
    .column-panel-close {
        background: none;
        border: none;
        font-size: 1.1rem;
        color: #5e6c84;
        cursor: pointer;
        padding: 4px 6px;
        line-height: 1;
        border-radius: 4px;
    }
    .column-panel-close:hover { background: #f0f1f4; color: #1a1a2e; }

    .cp-picker-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        border-bottom: 1px solid #f0f1f4;
        box-sizing: border-box;
        width: 100%;
    }
    .cp-picker-row:last-child { border-bottom: none; }
    .cp-picker-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: #5e6c84;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        width: 40px;
        flex-shrink: 0;
    }
    .cp-picker-select {
        flex: 1;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.9rem;
        padding: 7px 10px;
        border: 1px solid #d0d7e2;
        border-radius: 6px;
        background: #f8f9fb;
        color: #1a1a2e;
        appearance: auto;
    }
    .cp-picker-select:focus {
        outline: none;
        border-color: #174480;
        background: #fff;
    }

    .cp-sort-section { border-bottom: 2px solid #e4e7ec; margin-bottom: 0; }
    /* picker rows handle their own horizontal padding; remove the
       section's side padding only from the rows so section titles
       still sit flush with the panel's standard indent */
    .column-panel .filter-section { padding-left: 0; padding-right: 0; }
    .column-panel .filter-section-title { padding-left: 16px; padding-right: 16px; }

    .cp-sort-dir {
        display: flex;
        flex: 1;
        min-width: 0;
        width: 100%;
        gap: 0;
        border: 1px solid #d0d7e2;
        border-radius: 6px;
        overflow: hidden;
    }
    .cp-sort-btn {
        flex: 1;
        padding: 7px 0;
        font-size: 0.88rem;
        font-weight: 600;
        background: #f8f9fb;
        color: #5e6c84;
        border: none;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }
    .cp-sort-btn + .cp-sort-btn { border-left: 1px solid #d0d7e2; }
    .cp-sort-btn:hover { background: #eef1f8; color: #1a1a2e; }
    .cp-sort-btn.cp-sort-btn-active {
        background: #174480;
        color: #fff;
    }

    /* Show the Columns button on mobile */
    .pt-columns-toggle { display: inline-flex; }

    /* ── Products toolbar: Add top-right, search full-width, Filters full-width ── */
    .products-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }
    /* Row 1: a spacer pushes Add to the right */
    .pt-toolbar-spacer {
        flex: 1;
        order: 1;
    }
    .pt-add-btn {
        order: 1;
        margin-left: auto;
        flex-shrink: 0;
    }
    /* Row 2: search takes full width */
    .pt-search-wrap {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
    /* Row 3: Filters and Columns sit side-by-side, each taking half the row */
    .pt-filter-toggle {
        order: 3;
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
    .pt-columns-toggle {
        order: 3;
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
    /* Row 4: count */
    .toolbar-count    { display: block; width: 100%; text-align: center; margin: 10px 0 4px; font-size: 0.85rem; color: #5e6c84; }
    .pt-add-btn span  { display: inline; }

    /* ── Products table: card mode ───────────────────────────────── */

    /* Strip the table-level box so cards float freely instead of
       sitting inside one big panel (the per-row card styling below
       gives each card its own border/background/radius) */
    .products-table {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    /* Also strip the scroll-wrapper box */
    .products-main .table-wrap {
        overflow-x: visible;
        background: transparent;
    }
    .products-table thead { display: none; }

    /* Each row becomes a card */
    .products-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e4e7ec;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .products-table tbody tr:hover { background: #f4f6fb; }
    .products-table tbody tr:active { background: #eef1f8; }

    /* Hide all cells by default; show only what we need */
    .products-table tbody td { display: none; border: none; }

    /* ─────────────────────────────────────────────────────────────
       HEADER ROW: image left, title + status pill to the right
    ───────────────────────────────────────────────────────────── */

    /* The two header cells sit side-by-side using table-cell display */
    .products-table tbody td.col-img {
        display: table-cell;
        width: 60px;
        min-width: 60px;
        vertical-align: middle;
        padding: 14px 0 14px 14px;
        border-bottom: 1px solid #e4e7ec;
    }
    .products-table tbody td.col-title {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        padding: 12px 14px 12px 10px;
        border-bottom: 1px solid #e4e7ec;
        text-align: left;
    }
    .products-table .prod-thumb,
    .products-table .prod-thumb-empty {
        width: 48px;
        height: 48px;
        border-radius: 7px;
        object-fit: contain;
        display: block;
    }
    .products-table tbody td.col-title .product-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a2e;
        text-decoration: none;
        line-height: 1.3;
        display: block;
        text-align: left;
    }
    .products-table tbody td.col-title .product-title:hover { color: #174480; }

    /* Status pill: all badges on a single line */
    .products-table .pc-status-pill {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
        margin-top: 4px;
        overflow: hidden;
    }
    /* hide the standalone status cell – shown inside col-title on mobile */
    .products-table tbody td.col-status { display: none; }

    /* ─────────────────────────────────────────────────────────────
       DATA ROWS: label left, value right, divider between each
    ───────────────────────────────────────────────────────────── */
    .products-table tbody td.pc-data-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border-top: 1px solid #f0f1f4;
        gap: 12px;
        text-align: left;
    }
    .products-table tbody td.pc-data-row .pc-label {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #5e6c84;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex-shrink: 0;
        text-align: left;
    }
    .products-table tbody td.pc-data-row .pc-value {
        font-size: 0.9rem;
        font-weight: 500;
        color: #1a1a2e;
        text-align: right;
    }
    .products-table tbody td.pc-data-row.stock-zero .pc-value { color: #bf2600; font-weight: 700; }
    .products-table tbody td.pc-data-row .pc-empty { color: #b0b8cc; font-weight: 400; }

    /* Orders table: also hide date column */
    .orders-table .col-date { display: none; }

    /* Order/Product Detail: actionbar wraps, fields grid → 1 col */
    .pd-actionbar { flex-wrap: wrap; gap: 8px 6px; }
    .pd-fields-grid { grid-template-columns: 1fr; gap: 14px; }
    .pd-field-wide { grid-column: span 1; }

    /* Stock List: hide Required & To Max columns */
    .sl-table th:nth-child(3),
    .sl-table td:nth-child(3),
    .sl-table th:nth-child(4),
    .sl-table td:nth-child(4) { display: none; }

    /* Stock Index: stats grid → 1 col */
    .sm-stats-grid { grid-template-columns: 1fr; }

    /* Dispatches: search bar wraps */
    .dp-search-bar { flex-wrap: wrap; }

    /* Email compose: nearly full-screen */
    .compose-panel {
        max-width: 98vw;
        max-height: 95vh;
        margin: 1vh;
    }
    .compose-body { max-height: calc(95vh - 140px); overflow-y: auto; }

    /* HugeRTE editor height reduced */
    .tox-tinymce { height: 220px !important; }
}

/* ── Narrow tablet / large phone (≤600px) ──────────────────── */
@media (max-width: 600px) {
    /* Stock Index stats: ensure single column */
    .sm-stats-grid { display: flex; flex-direction: column; gap: 12px; }

    /* Statistics page */
    .stats-grid { display: flex; flex-direction: column; gap: 16px; }
}

/* ── Phone (≤520px) ────────────────────────────────────────── */
@media (max-width: 520px) {
    .compose-panel { max-width: 100%; margin: 12px; border-radius: 10px; }

    /* Draft Orders toolbar: search goes full-width */
    .page-toolbar .search-input { min-width: 0; width: 100%; }

    /* Orders table: card mode */
    .orders-table thead { display: none; }
    .orders-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #fff;
        padding: 12px;
    }
    .orders-table tbody tr:hover { background: #f8fafc; }
    .orders-table tbody td {
        display: block;
        border: none;
        padding: 6px 0;
        text-align: left;
    }
    .orders-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: #5e6c84;
        display: block;
        margin-bottom: 3px;
    }
    .orders-table .col-check { display: none; }

    /* Stock List: toolbar search full-width */
    .sl-toolbar { flex-wrap: wrap; }
    .sl-toolbar .sl-toolbar-search { flex: 1 1 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   DEEP MOBILE PASS — Phase 2
════════════════════════════════════════════════════════════════ */

/* ── Shared global polish ────────────────────────────────────── */
@media (max-width: 768px) {
    /* Top-bar title: prevent overflow when title is long */
    .top-bar { min-width: 0; }
    .page-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Reduce content-area horizontal padding to recover screen width */
    .content-area { padding: 12px 10px; }

    /* Remove asymmetric padding from products-layout so cards sit flush */
    .products-layout { padding: 0; gap: 0; }
}

@media (max-width: 480px) {
    .content-area { padding: 8px; }

    /* Ensure key action buttons have comfortable tap targets */
    .pd-btn { min-height: 44px; }
    .btn-primary, .btn-secondary { min-height: 44px; }
}

/* ── Product Detail — actionbar ───────────────────────────── */
@media (max-width: 768px) {
    /* Ghost buttons: icon-only; keep Save label for clarity */
    .pd-actionbar .pd-btn-ghost span { display: none; }
    /* Keep icon visible; reduce padding */
    .pd-actionbar .pd-btn { padding: 9px 10px; min-height: 40px; }
    /* Save button: keep text, give it a clear visual priority */
    #pd-btn-save { padding: 9px 14px; }
    /* Sticky offset: flush scroll container starts at 0, not 56px */
    .content-area-flush .pd-page .pd-sticky-header { top: 52px; }
    .content-area-flush .pd-page .pd-actionbar { padding: 10px 14px; gap: 6px 4px; }
    /* Dirty badge: smaller on mobile */
    .pd-dirty-badge { font-size: 0.8rem; padding: 4px 9px; }
}

@media (max-width: 480px) {
    /* Very small phones: hide low-priority action buttons */
    .pd-btn-duplicate,
    .pd-btn-createcase { display: none; }
    /* Separator: hide to recover space */
    .pd-actionbar-sep { display: none; }
    /* Save status text: hide, status conveyed by dirty badge */
    .pd-save-status { display: none; }
}

/* ── Product Detail — hero card ───────────────────────────── */
@media (max-width: 600px) {
    .pd-hero-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 14px;
    }
    .pd-hero-img-wrap {
        width: 120px;
        flex-shrink: 0;
    }
    .pd-thumb-strip {
        grid-template-rows: repeat(4, 22px);
        grid-auto-columns: 22px;
        max-width: 90px;
    }
    .pd-thumb-item { width: 22px; height: 22px; }
    .pd-hero-body { gap: 10px; }
    .pd-title-input { font-size: 1.15rem; }
    .pd-hero-row2 { gap: 8px; }
}

@media (max-width: 400px) {
    /* Very small phones: stack image above title */
    .pd-hero-card {
        flex-direction: column;
        gap: 12px;
    }
    .pd-hero-img-wrap {
        width: 80px;
        height: 80px;
    }
    .pd-thumb-strip {
        grid-template-rows: repeat(4, 20px);
        grid-auto-columns: 20px;
        max-width: 80px;
    }
    .pd-thumb-item { width: 20px; height: 20px; }
    .pd-title-input { font-size: 1.1rem; }
}

/* ── Product Detail — tabs ────────────────────────────────── */
@media (max-width: 768px) {
    /* Tabs scroll horizontally instead of wrapping */
    .pd-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pd-tabs::-webkit-scrollbar { display: none; }
    .pd-tab { padding: 12px 14px; font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; }
}

/* ── Product Detail — overflow containment ───────────────── */
@media (max-width: 768px) {
    /* pd-page fills the flush content area; clip avoids breaking sticky */
    .pd-page { overflow-x: clip; min-width: 0; }
    /* Cards must not exceed their parent */
    .pd-card,
    .pd-card-full {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
    }
    /* Hero card constrained */
    .pd-hero-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
    }
    /* Hero body can shrink */
    .pd-hero-body { min-width: 0; }
    /* Panels must not exceed viewport */
    .pd-panel { max-width: 100%; min-width: 0; overflow: hidden; }
    /* Fields grid containment */
    .pd-fields-grid { min-width: 0; max-width: 100%; }
    /* Panel grid containment */
    .pd-panel-grid { min-width: 0; max-width: 100%; }
    .pd-col { min-width: 0; max-width: 100%; }
    /* Action bar and tabs containment */
    .pd-actionbar { max-width: 100%; min-width: 0; }
    .pd-tabs { max-width: 100%; min-width: 0; }
    /* Description can't exceed card width */
    .pd-description { max-width: 100%; }
    /* Meta grid responsive on mobile */
    .pd-meta-grid { grid-template-columns: 1fr; }
    /* Table wrap ensures tables scroll rather than overflowing the page */
    .pd-table-wrap { max-width: 100%; min-width: 0; }
}

/* ── Product Detail — panel & grid ───────────────────────── */
@media (max-width: 768px) {
    .pd-panel { padding: 16px; width: 100%; box-sizing: border-box; }
    /* Two-col layout → single column */
    .pd-panel-grid { grid-template-columns: 1fr; }
    /* Fields grids → single column; wide fields no longer need to span */
    .pd-fields-grid { grid-template-columns: 1fr; gap: 14px; }
    .pd-field-wide { grid-column: span 1; }
    /* Tags grid → two columns on tablet */
    .pd-tags-grid { grid-template-columns: repeat(2, 1fr); }
    .pd-card-subcats { grid-column: span 2; }
    /* Vis-toggles wrap and shrink on tablet */
    .pd-hero-vis-toggles { flex-wrap: wrap; gap: 6px; }
    .pd-vis-pill { padding: 7px 12px; font-size: 0.92rem; }
}

@media (max-width: 480px) {
    .pd-panel { padding: 10px 8px; width: 100%; box-sizing: border-box; }
    /* Tags grid → single column on phones */
    .pd-tags-grid { grid-template-columns: 1fr; }
    .pd-card-subcats { grid-column: span 1; }
}

/* ── Product Detail — price rows ─────────────────────────── */
@media (max-width: 768px) {
    /* Bottom row: 5 col → 2 col; top row contained */
    .pd-price-row-top,
    .pd-price-row-bottom { max-width: 100%; min-width: 0; overflow: hidden; }
    .pd-price-row-top    { grid-template-columns: 1fr 1fr; }
    .pd-price-row-bottom { grid-template-columns: repeat(2, 1fr); }
    /* Price card tighter on tablet */
    .pd-price-card { padding: 14px 14px 12px; gap: 10px; }
    /* Price card inputs fill their cell */
    .pd-price-card-input { width: 100%; box-sizing: border-box; }
    .pd-price-card-input .pd-input { min-width: 0; width: 100%; }
    }

    @media (max-width: 480px) {
        /* Phone: both rows → single column */
        .pd-price-row-top    { grid-template-columns: 1fr; }
        .pd-price-row-bottom { grid-template-columns: 1fr; }
        /* Price card padding tighter on phones */
        .pd-price-card { padding: 12px 12px 10px; gap: 8px; }
        .pd-price-card-label { font-size: 0.84rem; }
    }

/* ── Product Detail — banner controls ────────────────────── */
@media (max-width: 600px) {
    .pd-banners-grid { grid-template-columns: 1fr; }
    .pd-banner-controls { flex-wrap: wrap; }
    .pd-banner-text-input { flex: 1 1 100%; }
}

/* ── Product Detail — description card editor ────────────── */
@media (max-width: 768px) {
    .pd-desc-textarea { min-height: 320px; }
}

/* ── Product Detail — tags grid ──────────────────────────── */
@media (max-width: 480px) {
    .pd-tags-grid { grid-template-columns: 1fr; }
    .pd-card-subcats { grid-column: span 1; }
}

/* ── Order Detail — two-col grid ─────────────────────────── */
@media (max-width: 768px) {
    /* Order detail overview grid → single column */
    .od-page .pd-panel-grid { grid-template-columns: 1fr; }
}

/* ── Order Detail — items table ──────────────────────────── */
@media (max-width: 520px) {
    /* Hide Unit/Total columns on phones; keep Qty and total price */
    .od-items-table .od-td-num:nth-child(4) { display: none; }
}

/* ── Order Detail — stats & pack grids ───────────────────── */
@media (max-width: 600px) {
    .od-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .od-pack-grid  { grid-template-columns: 1fr !important; }
    .od-stat-total { grid-column: span 2 !important; }
}

/* ── Order Detail — map iframe ───────────────────────────── */
.od-map-iframe { max-width: 100%; width: 100%; }
@media (max-width: 600px) {
    .od-addr-grid { grid-template-columns: 1fr; }
}

/* ── Stock Manager — actions bar ─────────────────────────── */
@media (max-width: 600px) {
    .sm-actions-bar { display: flex; }
    .sm-nec-btn { width: 100%; }
}

/* ── Stock Manager — orders table card mode ──────────────── */
@media (max-width: 520px) {
    .sm-table thead { display: none; }
    .sm-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #fff;
        padding: 10px 12px;
    }
    .sm-table tbody td {
        display: block;
        border: none;
        padding: 5px 0;
        text-align: left;
    }
    .sm-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.72rem;
        color: #5e6c84;
        display: block;
        margin-bottom: 2px;
    }
    .sm-table tbody td:last-child { padding-top: 8px; }
}

/* ── Draft Orders — generic data-table card mode ────────── */
@media (max-width: 520px) {
    .data-table thead { display: none; }
    .data-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #fff;
        padding: 10px 12px;
    }
    .data-table tbody tr.row-loading { display: table-row; }
    .data-table tbody td {
        display: block;
        border: none;
        padding: 5px 0;
        text-align: left;
    }
    .data-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.72rem;
        color: #5e6c84;
        display: block;
        margin-bottom: 2px;
    }
    .data-table .col-actions { border-top: 1px solid #f0f1f4; padding-top: 8px !important; }
    .data-table .col-actions::before { display: none; }
}

/* ── Dispatches — info panel & navigator ─────────────────── */
@media (max-width: 768px) {
    .dp-info-panel { flex-direction: column; gap: 12px; }
    .dp-info-stats { flex-wrap: wrap; }
    .dp-info-item  { min-width: 0; flex: 1 1 calc(50% - 6px); }
    .dp-info-side  { width: 100%; }
}

@media (max-width: 600px) {
    .dp-navigator { flex-direction: column; gap: 0; }
    .dp-prev-slot { height: 140px; }
    .dp-active-block { width: 100%; }
    .dp-nav-row {
        flex-wrap: wrap;
        gap: 8px;
        position: sticky;
        bottom: 0;
        z-index: 10;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        margin-bottom: 0;
        padding: 10px 14px;
        height: auto;
    }
    .dp-nav-btn { flex: 1 1 auto; min-height: 44px; }
    .dp-btn-speak { flex: 1 1 100%; }
    .dp-search-bar { flex-wrap: wrap; gap: 8px; }
    .dp-search-field { flex: 1 1 calc(50% - 4px); }
    .dp-search-field:last-of-type { flex: 1 1 100%; }
    #dp-upcoming-list { padding-bottom: 8px; }
}

/* ── Login page ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-box { padding: 24px 16px; margin: 20px 12px; }
}

/* ── Order Detail — delivery date row & fulfil counts ────── */
@media (max-width: 520px) {
    .od-date-row { flex-wrap: wrap; gap: 8px; }
    .od-date-row input[type=date] { width: 100%; }
    .od-fulfil-counts { flex-wrap: wrap; gap: 12px 20px; }
    .od-fulfil-count { min-width: 60px; }
}

/* ── Order Detail — items table: card mode on phones ─────── */
@media (max-width: 480px) {
    .od-items-table thead { display: none; }
    .od-items-table tbody tr {
        display: block;
        border-bottom: 1px solid #e4e7ec;
        padding: 10px 14px;
    }
    .od-items-table tbody td {
        display: block;
        border: none;
        padding: 4px 0;
        text-align: left !important;
    }
    .od-items-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.7rem;
        color: #5e6c84;
        display: block;
        margin-bottom: 2px;
    }
    .od-item-bundle-child .od-item-img-cell { padding-left: 16px !important; }
}

/* ── Product Detail — stock offset controls ───────────────── */
@media (max-width: 768px) {
    /* Stock items: let offset row wrap below the name/number on narrow screens */
    .pd-stock-item {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 12px 16px;
    }
    .pd-stock-loc { flex: 1 1 auto; }
    .pd-stock-num { min-width: 36px; }
    .pd-offset-row { flex: 1 1 100%; justify-content: flex-start; }
    .pd-input-offset { width: 52px; }
}

/* ── Product Detail — spinboxes full-width on mobile ─────── */
@media (max-width: 768px) {
    /* Spinbox expands to fill field-group width */
    .pd-spinbox { width: 100%; }
    .pd-input-spin { flex: 1; width: auto; }
    .pd-spin-btn { width: 40px; height: 42px; font-size: 1.2rem; }
}

/* ── Product Detail — volume price table → cards on mobile ── */
@media (max-width: 600px) {
    /* Hide the normal thead */
    #pd-vol-table thead { display: none; }

    /* Each row becomes a card */
    #pd-vol-table tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid #dde2ea;
        border-radius: 8px;
        margin: 0 0 10px;
        padding: 10px 14px 12px;
        position: relative;
    }

    /* Each cell becomes a label + input row */
    #pd-vol-table tbody td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        border: none;
    }

    /* Label from data-label attribute */
    #pd-vol-table tbody td::before {
        content: attr(data-label);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6b7a99;
        min-width: 76px;
        flex-shrink: 0;
    }

    /* Delete button cell: right-aligned at the top of the card */
    #pd-vol-table tbody td.pd-vol-td-del {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 0;
    }
    #pd-vol-table tbody td.pd-vol-td-del::before { display: none; }

    /* Inputs fill remaining space */
    #pd-vol-table tbody td .pd-vol-cell,
    #pd-vol-table tbody td input.pd-input { flex: 1; min-width: 0; width: 100%; }

    /* Stat pills wrap below the input */
    #pd-vol-table tbody td { flex-wrap: wrap; }
    #pd-vol-table tbody td .pd-vol-stats { flex: 1 1 100%; margin-left: 86px; }

    /* tfoot add-row: stack vertically as a card too */
    #pd-vol-table tfoot tr.pd-tfoot-add { display: block; }
    #pd-vol-table tfoot td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        border: none;
        background: none;
    }
    #pd-vol-table tfoot td .pd-vol-cell,
    #pd-vol-table tfoot td input.pd-input { flex: 1; min-width: 0; }
    #pd-vol-table tfoot td:last-child { justify-content: flex-end; padding-top: 8px; }
    .pd-vol-cell { min-width: 0; }
}

/* ── Product Detail — vis toggles wrap on narrow screens ─── */
@media (max-width: 480px) {
    .pd-hero-vis-toggles { gap: 6px; }
    .pd-vis-pill { padding: 7px 12px; font-size: 0.92rem; }
}

/* ── Shared: compose panel footer buttons stack on phones ── */
@media (max-width: 480px) {
    .compose-footer { flex-direction: column; gap: 8px; }
    .compose-footer .compose-cancel,
    .compose-footer .btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   ORDER STOCK PAGE
════════════════════════════════════════════════════════════════ */

/* ── Page layout ──────────────────────────────────────────── */
.so-page {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    min-height: 100%;
    flex: 1;
    width: 100%;
    overflow-x: hidden;
}

/* ── Panels ───────────────────────────────────────────────── */
.so-products-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 10px;
    overflow: hidden;
}

.so-order-panel {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Panel headers ────────────────────────────────────────── */
.so-panel-header {
    padding: 16px 20px;
    background: #174480;
    border-bottom: 1px solid #0f2e58;
}

.so-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    margin: 0;
}

/* ── Search section ───────────────────────────────────────── */
.so-search-section {
    padding: 16px 20px;
    border-bottom: 1px solid #dde2ea;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.so-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.so-search-input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    font-size: 16px;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

.so-search-input:focus {
    border-color: #2563eb;
}

.so-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7a99;
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.so-search-clear:hover {
    opacity: 1;
}

.so-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #1a2030;
    cursor: pointer;
    user-select: none;
}

.so-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ── Products list ────────────────────────────────────────── */
.so-products-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.so-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.so-product-item:hover {
    background: #f0f4ff;
    border-color: #2563eb;
}

.so-low-stock {
    background: #fff0f0;
    border-color: #f0c0c0;
}

.so-low-stock:hover {
    background: #ffe0e0;
    border-color: #e88;
}

.so-product-info {
    flex: 1;
    min-width: 0;
}

.so-product-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a2030;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.so-product-meta {
    display: flex;
    gap: 12px;
    font-size: 0.95rem;
    color: #000000;
    font-weight: 600;
}

.so-product-stock,
.so-product-case {
    white-space: nowrap;
}

.so-product-thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #f1f5f9;
}

.so-product-thumb-placeholder {
    background: #e2e8f0;
}

.so-qty-case {
    font-size: 1rem !important;
}

/* ── Product quantity controls ────────────────────────────── */
.so-product-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.so-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #c8d0dc;
    background: #ffffff;
    color: #1a2030;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.so-qty-btn:hover {
    background: #f0f4ff;
    border-color: #2563eb;
    color: #2563eb;
}

.so-qty-btn:active {
    background: #dbeafe;
}

.so-qty-input {
    width: 60px;
    height: 32px;
    text-align: center;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.so-qty-input:focus {
    border-color: #2563eb;
}

.so-no-products {
    padding: 40px 20px;
    text-align: center;
    color: #6b7a99;
    font-style: italic;
    font-size: 0.95rem;
}

/* ── Order content ────────────────────────────────────────── */
.so-order-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

/* ── Basket header ────────────────────────────────────────── */
.so-basket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.so-basket-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2030;
    margin: 0;
}

/* ── Basket list ──────────────────────────────────────────── */
.so-basket-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px;
}

.so-basket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #dde2ea;
    border-radius: 6px;
    font-size: 0.9rem;
}

.so-basket-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a2030;
    font-weight: 500;
}

.so-basket-qty {
    flex-shrink: 0;
    font-weight: 600;
    color: #2563eb;
}

.so-basket-empty {
    padding: 20px;
    text-align: center;
    color: #6b7a99;
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Order summary ────────────────────────────────────────── */
.so-order-summary {
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #dde2ea;
    border-radius: 6px;
    margin-bottom: 16px;
}

.so-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.95rem;
}

.so-summary-label {
    color: #6b7a99;
    font-weight: 500;
}

.so-summary-value {
    color: #1a2030;
    font-weight: 700;
}

/* ── Notes section ────────────────────────────────────────── */
.so-notes-section {
    margin-bottom: 16px;
}

.so-notes-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b5563;
    margin-bottom: 8px;
}

.so-notes-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s;
}

.so-notes-textarea:focus {
    border-color: #2563eb;
}

/* ── Buttons ──────────────────────────────────────────────── */
.so-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

.so-btn-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
}

.so-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}

.so-btn-secondary {
    background: transparent;
    color: #6b7a99;
    border-color: #dde2ea;
}

.so-btn-secondary:hover {
    background: #f9fafb;
    border-color: #c8d0dc;
    color: #1a2030;
}

.so-btn-full {
    width: 100%;
}

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 900px) {
    .so-page {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .so-order-panel {
        width: 100%;
        max-height: 60vh;
    }

    .so-products-panel {
        min-height: 400px;
    }

    .so-product-controls {
        flex-wrap: nowrap;
    }

    .so-qty-input {
        width: 50px;
    }
}

@media (max-width: 600px) {
    .so-page {
        padding: 8px;
        gap: 8px;
    }

    .so-panel-header {
        padding: 12px 16px;
    }

    .so-panel-title {
        font-size: 1rem;
    }

    .so-search-section {
        padding: 12px 16px;
    }

    .so-products-list {
        padding: 8px;
    }

    .so-product-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .so-product-controls {
        width: 100%;
        justify-content: flex-end;
    }

    .so-order-content {
        padding: 16px;
    }

    .so-basket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Order Detail — Display Planner tab
══════════════════════════════════════════════════════════════ */

/* Toolbar */
.od-disp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
}
.od-disp-toolbar-sep {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 2px;
}

/* Duration badge in card header */
.od-disp-duration-badge {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 10px;
}

/* Table */
.od-disp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
    color: #1e293b;
}
.od-disp-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.od-disp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.od-disp-table tbody tr:last-child td { border-bottom: none; }
.od-disp-table tbody tr:hover { background: #f8fafc; }
.od-disp-row-unpositioned td { color: #94a3b8; }
.od-disp-row-unpositioned td input { color: #94a3b8; }

.od-disp-th-pos   { width: 64px; text-align: center; }
.od-disp-th-img   { width: 40px; }
.od-disp-th-fw    { text-align: left; }
.od-disp-th-dur   { width: 72px; text-align: center; white-space: nowrap; }
.od-disp-th-nec   { width: 80px; text-align: center; white-space: nowrap; }
.od-disp-th-notes { min-width: 140px; }
.od-disp-th-act   { width: 120px; }

.od-disp-td-pos   { text-align: center; }
.od-disp-td-img   { padding: 4px 6px; }
.od-disp-td-dur   { text-align: center; color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-disp-td-nec   { text-align: center; color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-disp-td-title { word-break: break-word; }
.od-disp-td-act   { text-align: right; white-space: nowrap; }
.od-disp-td-notes { }
.od-disp-anytime-pos { color: #94a3b8; font-size: 0.75rem; }

/* Position input */
.od-disp-pos-input {
    width: 52px;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 4px;
    font-size: 0.95rem;
    color: #1e293b;
}
.od-disp-pos-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.15); }

/* Notes input */
.od-disp-note-input {
    width: 100%;
    min-width: 120px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.95rem;
    color: #374151;
    background: transparent;
}
.od-disp-note-input:focus { outline: none; border-color: #6366f1; background: #fff; }

/* Thumbnail */
.od-disp-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    background: #f8fafc;
}
.od-disp-img-empty {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

/* Qty badge */
.od-disp-qty {
    font-size: 0.75rem;
    color: #6366f1;
    font-weight: 600;
    margin-left: 4px;
}

/* Noise / fanned badges */
.od-disp-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}
.od-disp-fan   { background: #ede9fe; color: #6d28d9; }
.od-disp-loud  { background: #fee2e2; color: #b91c1c; }
.od-disp-quiet { background: #d1fae5; color: #065f46; }

/* "Anytime" section */
.od-disp-anytime-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    padding: 0 2px;
}

/* Row action buttons */
.od-disp-btn-up,
.od-disp-btn-dn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid #334155;
    color: #334155;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.od-disp-btn-up:hover, .od-disp-btn-dn:hover { background: #f1f5f9; }

.od-disp-btn-lock {
    width: 26px;
    height: 22px;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
    border: 1px solid #6366f1;
    color: #6366f1;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.od-disp-btn-lock:hover { background: #ede9fe; }
.od-disp-btn-lock.is-linked { background: #ede9fe; }

.od-disp-td-act { text-align: right; white-space: nowrap; display: flex; gap: 3px; align-items: center; justify-content: flex-end; padding-right: 6px; }

/* ── Tools page ──────────────────────────────────────────────────────── */
.tools-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tools-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 22px 24px;
}

.tools-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
}

.tools-section-desc {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 16px;
}

.tools-section-desc.danger-text {
    color: #b91c1c;
}

.tools-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tools-btn {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: opacity .15s, background .15s;
}

.tools-btn:disabled,
.tools-btn.tools-btn-working {
    opacity: 0.55;
    cursor: not-allowed;
}

.tools-btn-primary {
    background: #3b82f6;
    color: #fff;
}
.tools-btn-primary:hover:not(:disabled) { background: #2563eb; }

.tools-btn-danger {
    background: #dc2626;
    color: #fff;
}
.tools-btn-danger:hover:not(:disabled) { background: #b91c1c; }

/* Activity log */
.tools-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Courier New', monospace;
    background: #0f172a;
    color: #94a3b8;
    border-radius: 7px;
    padding: 10px 12px;
    min-height: 60px;
}

.tools-log-entry { line-height: 1.5; }
.tools-log-ts { color: #475569; }
.tools-log-entry.log-error { color: #f87171; }
.tools-log-entry.log-success { color: #4ade80; }
.tools-log-entry.log-info { color: #60a5fa; }

/* ── Dispatch Checking page ─────────────────────────────────────── */

.dc-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 14px 12px;
}

@media (max-width: 480px) {
    .dc-page { padding: 10px 10px; }
    .dc-title { font-size: 1.2rem; margin-bottom: 2px; }
    .dc-hint  { margin-bottom: 10px; }
    .dc-result-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dc-result-card { padding: 10px 12px; }
    .dc-card-value  { font-size: 0.9rem; }
    .dc-result-order-name { font-size: 1.3rem; }
}

.dc-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0 0 6px;
}

.dc-hint {
    font-size: 0.875rem;
    color: #60a5fa;
    margin: 0 0 18px;
}

.dc-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dc-input {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    outline: none;
}

.dc-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}

.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}

.dc-btn:disabled { opacity: .5; cursor: not-allowed; }
.dc-btn:not(:disabled):hover { opacity: .85; }

.dc-btn-primary  { background: #3b82f6; color: #fff; }
.dc-btn-secondary{ background: #334155; color: #e2e8f0; }
.dc-btn-sm       { padding: 6px 12px; font-size: 0.8rem; }

.dc-camera-container {
    margin-top: 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

#dc-qr-reader {
    width: 100%;
    max-width: 420px;
}

.dc-video {
    width: 100%;
    max-width: 420px;
    max-height: 220px;
    object-fit: cover;
    border-radius: 6px;
    background: #000;
}

.dc-error {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.4);
    border-radius: 6px;
    color: #f87171;
    font-size: 0.875rem;
}

/* Result panel */

.dc-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.dc-result-order-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-right: 10px;
}

.dc-result-customer {
    font-size: 1rem;
    color: #94a3b8;
}

.dc-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.dc-result-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px 16px;
}

.dc-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: 6px;
}

.dc-card-value {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
}