/* =============================================================================
   MAS Shopping — brand layer for the order & shipping console.

   Tokens are the storefront's (mas-store app/globals.css) so both products read
   as one brand: teal primary, orange accent, soft green-white canvas, IBM Plex
   Sans Arabic. Loaded AFTER Bootstrap so its variables win; page-level <style>
   blocks may still refine, but should use these tokens rather than raw hex.
   ============================================================================= */

:root {
    /* Brand */
    --mas-primary: #1eb6b6;
    --mas-primary-dark: #05827b;
    --mas-primary-deep: #04625d;
    --mas-primary-soft: rgba(30, 182, 182, 0.10);
    --mas-primary-rgb: 30, 182, 182;
    --mas-accent: #ec4b00;
    --mas-accent-soft: rgba(236, 74, 0, 0.08);

    /* Surfaces */
    --mas-bg: #f6faf7;
    --mas-surface: #ffffff;
    --mas-surface-alt: #f2f3f7;
    --mas-border: #e4e4e4;
    --mas-border-soft: rgba(0, 0, 0, 0.07);

    /* Text */
    --mas-text: #1f1f1f;
    --mas-text-strong: #000000;
    --mas-text-muted: #686868;
    --mas-text-soft: #353535;

    /* Status (kept readable on white, tuned toward the brand) */
    --mas-success: #0f9d6b;
    --mas-warning: #d98a00;
    --mas-danger: #d93a2b;
    --mas-info: #1a8fb8;

    /* Shape */
    --mas-radius-pill: 68px;
    --mas-radius-lg: 16px;
    --mas-radius-md: 12px;
    --mas-radius-sm: 8px;
    --mas-shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
    --mas-shadow-hover: 0 8px 24px rgba(17, 24, 39, 0.08);
    --mas-ring: 0 0 0 0.22rem rgba(30, 182, 182, 0.22);

    --mas-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

    /* Legacy names used by older page styles — mapped onto the brand */
    --primary-color: var(--mas-primary-dark);
    --secondary-color: var(--mas-text-muted);
    --success-color: var(--mas-success);
    --warning-color: var(--mas-warning);
    --danger-color: var(--mas-danger);
    --info-color: var(--mas-info);
    --light-color: var(--mas-bg);
    --dark-color: var(--mas-text);

    /* Bootstrap 5.3 */
    --bs-primary: var(--mas-primary-dark);
    --bs-primary-rgb: 5, 130, 123;
    --bs-link-color: var(--mas-primary-dark);
    --bs-link-color-rgb: 5, 130, 123;
    --bs-link-hover-color: var(--mas-primary-deep);
    --bs-link-hover-color-rgb: 4, 98, 93;
    --bs-body-font-family: var(--mas-font);
    --bs-body-color: var(--mas-text);
    --bs-body-bg: var(--mas-bg);
    --bs-border-color: var(--mas-border);
    --bs-border-radius: var(--mas-radius-sm);
    --bs-focus-ring-color: rgba(30, 182, 182, 0.25);
    --bs-success: var(--mas-success);
    --bs-danger: var(--mas-danger);
    --bs-warning: var(--mas-warning);
    --bs-info: var(--mas-info);
}

/* ---------- Base ---------- */
html, body { font-family: var(--mas-font); }
body {
    background: var(--mas-bg);
    color: var(--mas-text);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, .btn, .form-control, .form-select, .dropdown-menu, .tooltip, .popover { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--mas-text-strong); font-weight: 700; }
a { color: var(--mas-primary-dark); }
a:hover { color: var(--mas-primary-deep); }
::selection { background: rgba(30, 182, 182, 0.22); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--mas-radius-sm); font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--mas-primary-dark);
    --bs-btn-border-color: var(--mas-primary-dark);
    --bs-btn-hover-bg: var(--mas-primary-deep);
    --bs-btn-hover-border-color: var(--mas-primary-deep);
    --bs-btn-active-bg: var(--mas-primary-deep);
    --bs-btn-active-border-color: var(--mas-primary-deep);
    --bs-btn-disabled-bg: var(--mas-primary-dark);
    --bs-btn-disabled-border-color: var(--mas-primary-dark);
    --bs-btn-focus-shadow-rgb: 30, 182, 182;
    background: var(--bs-btn-bg);
}
.btn-primary:hover { background: var(--bs-btn-hover-bg); }
.btn-outline-primary {
    --bs-btn-color: var(--mas-primary-dark);
    --bs-btn-border-color: var(--mas-primary-dark);
    --bs-btn-hover-bg: var(--mas-primary-dark);
    --bs-btn-hover-border-color: var(--mas-primary-dark);
    --bs-btn-active-bg: var(--mas-primary-deep);
    --bs-btn-active-border-color: var(--mas-primary-deep);
    --bs-btn-focus-shadow-rgb: 30, 182, 182;
}
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mas-accent);
    --bs-btn-border-color: var(--mas-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c93f00;
    --bs-btn-hover-border-color: #c93f00;
}
.text-primary { color: var(--mas-primary-dark) !important; }
.bg-primary { background-color: var(--mas-primary-dark) !important; }
.border-primary { border-color: var(--mas-primary) !important; }
.text-accent { color: var(--mas-accent) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--mas-radius-sm);
    border: 1px solid var(--mas-border);
    color: var(--mas-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--mas-primary);
    box-shadow: var(--mas-ring);
}
.form-check-input:checked { background-color: var(--mas-primary-dark); border-color: var(--mas-primary-dark); }
.form-check-input:focus { box-shadow: var(--mas-ring); border-color: var(--mas-primary); }
.form-label { font-weight: 600; color: var(--mas-text-soft); }

/* ---------- Cards, tables, badges ---------- */
.card {
    border: 1px solid var(--mas-border-soft);
    border-radius: var(--mas-radius-lg);
    box-shadow: var(--mas-shadow-card);
    background: var(--mas-surface);
}
.card-header {
    background: var(--mas-surface);
    border-bottom: 1px solid var(--mas-border-soft);
    font-weight: 700;
    color: var(--mas-text-strong);
}
.table { --bs-table-hover-bg: rgba(30, 182, 182, 0.05); }
.table thead th {
    background: var(--mas-surface-alt);
    color: var(--mas-text-soft);
    font-weight: 700;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--mas-border);
}
.badge { border-radius: var(--mas-radius-pill); font-weight: 600; }
.badge.bg-primary { background: var(--mas-primary-soft) !important; color: var(--mas-primary-deep); }
.page-link { color: var(--mas-primary-dark); }
.page-item.active .page-link { background: var(--mas-primary-dark); border-color: var(--mas-primary-dark); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--mas-primary-dark); }
.dropdown-item:active { background: var(--mas-primary-dark); }
.alert { border-radius: var(--mas-radius-md); }
.spinner-border.text-primary { color: var(--mas-primary) !important; }

/* =============================================================================
   App shell (layouts/app.blade.php)
   ============================================================================= */
.mas-sidebar {
    position: fixed; top: 0; right: 0; height: 100vh; width: var(--sidebar-width, 272px);
    background: var(--mas-surface);
    border-left: 1px solid var(--mas-border);
    display: flex; flex-direction: column;
    z-index: 1030; transition: transform .25s ease;
}
.mas-sidebar__brand {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1.4rem 1.25rem 1.1rem;
    border-bottom: 1px solid var(--mas-border-soft);
    text-decoration: none;
}
.mas-sidebar__brand img { height: 38px; width: auto; }
.mas-sidebar__tag {
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    color: var(--mas-text-muted);
}
.mas-sidebar__nav { padding: .9rem .75rem; overflow-y: auto; flex: 1; flex-wrap: nowrap; }
.mas-sidebar__section {
    font-size: .7rem; font-weight: 700; color: var(--mas-text-muted);
    padding: .9rem .85rem .35rem; letter-spacing: .03em;
}
.mas-sidebar .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: var(--mas-text-soft);
    padding: .62rem .85rem; margin-bottom: 2px;
    border-radius: var(--mas-radius-md);
    font-weight: 500; font-size: .92rem;
    transition: background .15s ease, color .15s ease;
}
.mas-sidebar .nav-link i { width: 20px; text-align: center; color: var(--mas-text-muted); transition: color .15s ease; }
.mas-sidebar .nav-link:hover { background: var(--mas-surface-alt); color: var(--mas-text-strong); }
.mas-sidebar .nav-link:hover i { color: var(--mas-primary-dark); }
.mas-sidebar .nav-link.active {
    background: var(--mas-primary-soft); color: var(--mas-primary-deep); font-weight: 700;
    box-shadow: inset -3px 0 0 var(--mas-primary);
}
.mas-sidebar .nav-link.active i { color: var(--mas-primary-dark); }
.mas-sidebar .nav-link:focus-visible { outline: none; box-shadow: var(--mas-ring); }
.mas-sidebar__foot {
    border-top: 1px solid var(--mas-border-soft);
    padding: .9rem 1rem; display: flex; align-items: center; gap: .65rem;
}
.mas-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: var(--mas-primary-soft); color: var(--mas-primary-deep);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.mas-sidebar__user { min-width: 0; flex: 1; line-height: 1.25; }
.mas-sidebar__user strong { display: block; font-size: .86rem; color: var(--mas-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mas-sidebar__user span { font-size: .74rem; color: var(--mas-text-muted); }
.mas-icon-btn {
    border: 1px solid var(--mas-border); background: var(--mas-surface); color: var(--mas-text-muted);
    width: 36px; height: 36px; border-radius: var(--mas-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.mas-icon-btn:hover { color: var(--mas-danger); border-color: rgba(217, 58, 43, .35); background: rgba(217, 58, 43, .05); }

.mas-main { margin-right: var(--sidebar-width, 272px); min-height: 100vh; display: flex; flex-direction: column; }
.mas-topbar {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--mas-border);
    padding: .85rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mas-topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 700; }
.mas-topbar__crumb { font-size: .78rem; color: var(--mas-text-muted); }
.mas-content { padding: 1.75rem 2rem 2.5rem; flex: 1; }
.mas-footer {
    padding: 1rem 2rem; border-top: 1px solid var(--mas-border-soft);
    font-size: .78rem; color: var(--mas-text-muted);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.mas-backdrop { display: none; }

/* Stats cards used across pages */
.stats-card {
    background: linear-gradient(135deg, var(--mas-primary) 0%, var(--mas-primary-dark) 100%);
    color: #fff; border-radius: var(--mas-radius-lg); padding: 1.4rem; margin-bottom: 1.5rem;
    box-shadow: 0 10px 24px rgba(5, 130, 123, .18);
}
.stats-card.success { background: linear-gradient(135deg, #17b07c 0%, #0b7d57 100%); box-shadow: 0 10px 24px rgba(15, 157, 107, .18); }
.stats-card.warning { background: linear-gradient(135deg, #f2a516 0%, #c77d00 100%); box-shadow: 0 10px 24px rgba(217, 138, 0, .18); }
.stats-card.danger  { background: linear-gradient(135deg, #f0563f 0%, #b92c1f 100%); box-shadow: 0 10px 24px rgba(217, 58, 43, .18); }
.stats-card .icon { font-size: 2.3rem; opacity: .85; }

@media (max-width: 991.98px) {
    .mas-sidebar { transform: translateX(100%); box-shadow: none; }
    .mas-sidebar.show { transform: translateX(0); box-shadow: -12px 0 32px rgba(17, 24, 39, .14); }
    .mas-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, .32); z-index: 1025; }
    .mas-main { margin-right: 0; }
    .mas-topbar { padding: .75rem 1rem; }
    .mas-content { padding: 1rem; }
    .mas-footer { padding: 1rem; }
}

/* =============================================================================
   Sign-in pages (layouts/guest.blade.php)
   ============================================================================= */
.mas-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--mas-bg); }
.mas-auth__panel {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(1200px 600px at 110% -10%, rgba(255, 255, 255, .14), transparent 60%),
        radial-gradient(800px 500px at -20% 120%, rgba(236, 74, 0, .20), transparent 60%),
        linear-gradient(150deg, var(--mas-primary) 0%, var(--mas-primary-dark) 55%, var(--mas-primary-deep) 100%);
    padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
}
.mas-auth__panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09;
    background-image: radial-gradient(#fff 1.2px, transparent 1.2px); background-size: 22px 22px;
}
.mas-auth__panel > * { position: relative; z-index: 1; }
.mas-auth__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.mas-auth__mark img { width: 38px; height: auto; }
.mas-auth__headline { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 700; color: #fff; line-height: 1.35; margin: 2.2rem 0 1rem; }
.mas-auth__lead { color: rgba(255, 255, 255, .86); font-size: 1rem; max-width: 30rem; line-height: 1.9; }
.mas-auth__features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .85rem; }
.mas-auth__features li { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .95); font-weight: 500; }
.mas-auth__features i {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
}
.mas-auth__legal { color: rgba(255, 255, 255, .7); font-size: .8rem; }
.mas-auth__form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.mas-auth__card {
    width: 100%; max-width: 420px; background: var(--mas-surface);
    border: 1px solid var(--mas-border-soft); border-radius: 20px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px rgba(17, 24, 39, .07);
    padding: 2.25rem 2rem;
}
.mas-auth__logo { display: block; margin: 0 auto 1.25rem; height: 112px; width: auto; }
.mas-auth__title { text-align: center; font-size: 1.4rem; font-weight: 700; color: var(--mas-text-strong); margin-bottom: .25rem; }
.mas-auth__subtitle { text-align: center; color: var(--mas-text-muted); font-size: .9rem; margin-bottom: 1.75rem; }
.mas-auth__card .form-control { padding: .72rem .95rem; }
.mas-auth__card .btn-primary { padding: .78rem 1rem; font-size: 1rem; }
.mas-auth__card .auth-links { text-align: center; margin-top: 1.25rem; font-size: .9rem; }
.mas-auth__card .auth-links a { font-weight: 600; text-decoration: none; }
.mas-auth__card .auth-links a:hover { text-decoration: underline; }
.mas-auth__card .text-danger { font-size: .84rem; margin-top: .3rem; }
.mas-auth__secure { text-align: center; margin-top: 1.5rem; font-size: .78rem; color: var(--mas-text-muted); }

@media (max-width: 991.98px) {
    .mas-auth { grid-template-columns: 1fr; }
    .mas-auth__panel { display: none; }
}

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

/* Key / value list (profile and detail pages) */
.mas-kv { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; margin: 0; }
.mas-kv dt, .mas-kv dd { margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--mas-border-soft); }
.mas-kv dt { color: var(--mas-text-muted); font-weight: 600; font-size: .9rem; }
.mas-kv dd { color: var(--mas-text-strong); font-weight: 500; }
.mas-kv dt:last-of-type, .mas-kv dd:last-of-type { border-bottom: 0; }
.mas-kv .ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.mas-note {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--mas-primary-soft); border: 1px solid rgba(30, 182, 182, .25);
    border-radius: var(--mas-radius-md); padding: 1rem 1.15rem; color: var(--mas-text-soft);
}
.mas-note i { color: var(--mas-primary-dark); margin-top: .2rem; }
@media (max-width: 575.98px) { .mas-kv { grid-template-columns: 1fr; } .mas-kv dt { border-bottom: 0; padding-bottom: 0; } }

/* =============================================================================
   Work-queue pages (orders console, returns): stage pipeline, toolbar, rows, empty state
   ============================================================================= */
    /* ---------- stage pipeline ---------- */
.stage-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.stage-tab {
    position: relative; flex: 1 0 auto;
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .75rem; border-radius: 14px; border: 1px solid var(--mas-border);
    background: #fff; color: var(--mas-text-soft); text-decoration: none; font-weight: 700; font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.stage-tab .si { width: 32px; height: 32px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mas-surface-alt); color: var(--mas-text-muted); }
.stage-tab .sl { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.stage-tab .badge { flex: none; }
.stage-tab .sl small { display: none; font-size: .72rem; font-weight: 600; color: var(--mas-text-muted); white-space: nowrap; }

.stage-tab .badge { margin-inline-start: auto; background: var(--mas-surface-alt) !important; color: var(--mas-text-strong); font-size: .78rem; padding: .25rem .5rem; }
.stage-tab:hover { border-color: rgba(30,182,182,.5); box-shadow: var(--mas-shadow-card); color: var(--mas-text-strong); transform: translateY(-1px); }
.stage-tab.active { background: linear-gradient(150deg, #1eb6b6, #05827b); border-color: #05827b; color: #fff; box-shadow: 0 10px 22px rgba(5,130,123,.22); }
.stage-tab.active .si { background: rgba(255,255,255,.18); color: #fff; }
.stage-tab.active .sl small { color: rgba(255,255,255,.8); }
.stage-tab.active .badge { background: rgba(255,255,255,.22) !important; color: #fff; }
.stage-tab.is-reject.active { background: linear-gradient(150deg, #f0563f, #b92c1f); border-color: #b92c1f; box-shadow: 0 10px 22px rgba(217,58,43,.2); }

/* ---------- toolbar ---------- */
.con-toolbar { background: #fff; border: 1px solid var(--mas-border-soft); border-radius: 16px; padding: .85rem; margin-bottom: 1rem; box-shadow: var(--mas-shadow-card); }
.con-toolbar .search { position: relative; }
.con-toolbar .search i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .9rem; color: var(--mas-text-muted); pointer-events: none; }
.con-toolbar .search .form-control { padding-inline-start: 2.4rem; }
.con-toolbar .form-control { height: 44px; }
.con-toolbar .btn { height: 44px; }
.con-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 .2rem .75rem; color: var(--mas-text-muted); font-size: .85rem; }
.con-meta strong { color: var(--mas-text-strong); }

/* ---------- order rows ---------- */
.order-card { border: 1px solid var(--mas-border-soft); border-radius: 16px; margin-bottom: .7rem; background: #fff; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.order-card:hover { border-color: rgba(30,182,182,.4); box-shadow: var(--mas-shadow-hover); }
.order-head {
    display: grid; align-items: center; gap: 1rem; padding: .9rem 1.1rem; cursor: pointer;
    grid-template-columns: minmax(140px, .8fr) minmax(190px, 1.5fr) minmax(140px, .9fr) minmax(100px, .65fr) minmax(0, 2.2fr);
}
.oc-id { display: flex; align-items: center; gap: .6rem; }
.oc-id .chev { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--mas-surface-alt); color: var(--mas-text-muted); font-size: .75rem; transition: transform .2s ease; }
.order-card.open .oc-id .chev { transform: rotate(-90deg); background: var(--mas-primary-soft); color: var(--mas-primary-dark); }
.oc-id strong { font-size: 1rem; color: var(--mas-text-strong); }
.oc-idtxt { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.oc-id .badge { font-size: .72rem; padding: .28rem .6rem; white-space: nowrap; }
.oc-cust { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.oc-cust .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mas-primary-soft); color: var(--mas-primary-deep); font-weight: 700; }
.oc-cust span { font-weight: 600; color: var(--mas-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-date { color: var(--mas-text-muted); font-size: .86rem; white-space: nowrap; }
.oc-date i { margin-inline-end: .35rem; }
.oc-total { font-weight: 800; color: var(--mas-text-strong); font-size: 1.02rem; white-space: nowrap; }
.oc-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.oc-right .btn-sm { border-radius: 9px; font-weight: 700; padding: .38rem .7rem; }
.oc-right .btn-success { --bs-btn-bg: #05827b; --bs-btn-border-color: #05827b; --bs-btn-hover-bg: #04625d; --bs-btn-hover-border-color: #04625d; }
.oto-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--mas-primary-deep); background: var(--mas-primary-soft); border: 1px solid rgba(30,182,182,.25); border-radius: var(--mas-radius-pill); padding: .2rem .65rem .2rem .45rem; margin-inline-end: .25rem; }
.oto-badge .badge { font-size: .68rem; }
.order-items { padding: .6rem 1.1rem 1rem; border-top: 1px dashed var(--mas-border); display: none; background: #fbfdfc; }
.order-items.open { display: block; }
.prod-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--mas-border-soft); }
.prod-row:last-child { border-bottom: 0; }
.prod-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 10px; background: #fff; border: 1px solid var(--mas-border-soft); }
.prod-barcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--mas-text-muted); }
.muted { color: var(--mas-text-muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.con-empty { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed var(--mas-border); border-radius: 18px; }
.con-empty img { width: 170px; height: auto; margin-bottom: 1rem; opacity: .95; }
.con-empty h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.con-empty p { color: var(--mas-text-muted); margin: 0; }

    @media (max-width: 1199.98px) {
    .order-head { grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.3fr) minmax(110px, .8fr); }
    .oc-date { display: none; }
    .oc-right { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .order-head { grid-template-columns: 1fr auto; }
    .oc-cust { grid-column: 1 / -1; order: 3; }
}

/* Modals used by work-queue pages */
.oto-modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.45); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1050; }
.oto-modal-backdrop.open { display: flex; }
.oto-modal { background: #fff; border-radius: 18px; padding: 1.4rem; max-width: 580px; width: 92%; max-height: 82vh; overflow: auto; box-shadow: 0 30px 70px rgba(17,24,39,.25); }

/* Bootstrap 5.3.0 hard-codes these colours (not via --bs-*-rgb), so re-tone them to the brand. */
.text-bg-primary { background-color: rgba(30,182,182,.14) !important; color: var(--mas-primary-deep) !important; }
.text-bg-info, .badge.bg-info { background-color: rgba(26,143,184,.14) !important; color: #136e8f !important; }
.text-bg-success, .badge.bg-success { background-color: rgba(15,157,107,.14) !important; color: #0b7d57 !important; }
.text-bg-warning, .badge.bg-warning { background-color: rgba(217,138,0,.16) !important; color: #9a6200 !important; }
.text-bg-danger, .badge.bg-danger { background-color: rgba(217,58,43,.12) !important; color: #b92c1f !important; }
.text-bg-secondary, .badge.bg-secondary { background-color: var(--mas-surface-alt) !important; color: var(--mas-text-soft) !important; }
.stage-tab.active .badge { color: #fff !important; }
.notification-badge { background-color: var(--mas-danger) !important; color: #fff !important; }

/* =============================================================================
   Legacy SB-Admin markup (reports, settings, notifications, create/edit)
   Those pages were built on SB-Admin utility classes Bootstrap 5 does not ship.
   ============================================================================= */
.text-gray-800 { color: var(--mas-text-strong) !important; }
.text-gray-600 { color: var(--mas-text-soft) !important; }
.text-gray-300 { color: #c4cbd3 !important; }
.text-xs { font-size: .8rem; }
.font-weight-bold { font-weight: 700 !important; }
.btn-block { display: block; width: 100%; }
.no-gutters { --bs-gutter-x: 0; }
.card.shadow, .card.shadow-sm { box-shadow: var(--mas-shadow-card) !important; }
.card-header .text-primary, .card-header h6.text-primary { color: var(--mas-text-strong) !important; }
.card-header h5, .card-header h6 { font-weight: 700; }

/* KPI cards: accent edge + tinted icon chip */
.card[class*="border-right-"] { border: 1px solid var(--mas-border-soft) !important; border-right: 4px solid var(--acc, #05827b) !important; border-radius: var(--mas-radius-lg); }
.border-right-primary { --acc: #05827b; --acc-soft: rgba(5,130,123,.10); }
.border-right-success { --acc: #0f9d6b; --acc-soft: rgba(15,157,107,.10); }
.border-right-warning { --acc: #d98a00; --acc-soft: rgba(217,138,0,.12); }
.border-right-info    { --acc: #1eb6b6; --acc-soft: rgba(30,182,182,.12); }
.border-right-danger  { --acc: #d93a2b; --acc-soft: rgba(217,58,43,.10); }
.card[class*="border-right-"] .text-xs { color: var(--mas-text-muted) !important; font-weight: 700; letter-spacing: 0; }
.card[class*="border-right-"] .h5 { white-space: nowrap; font-size: clamp(1.1rem, .85rem + .7vw, 1.45rem); font-weight: 800 !important; color: var(--mas-text-strong); }
.card[class*="border-right-"] .fa-2x {
    width: 52px; height: 52px; border-radius: 14px; font-size: 1.3rem !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acc-soft); color: var(--acc) !important;
}

/* Secondary-tone buttons: calm instead of solid grey / yellow / cyan */
.btn-secondary { --bs-btn-color: var(--mas-text-strong); --bs-btn-bg: #fff; --bs-btn-border-color: var(--mas-border); --bs-btn-hover-color: var(--mas-text-strong); --bs-btn-hover-bg: var(--mas-surface-alt); --bs-btn-hover-border-color: #d4d4d4; --bs-btn-active-bg: var(--mas-surface-alt); --bs-btn-active-color: var(--mas-text-strong); }
.btn-info { --bs-btn-color: var(--mas-primary-deep); --bs-btn-bg: rgba(30,182,182,.12); --bs-btn-border-color: rgba(30,182,182,.3); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--mas-primary-dark); --bs-btn-hover-border-color: var(--mas-primary-dark); }
.btn-warning { --bs-btn-color: #8a5800; --bs-btn-bg: rgba(217,138,0,.14); --bs-btn-border-color: rgba(217,138,0,.35); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c77d00; --bs-btn-hover-border-color: #c77d00; }
.btn-success { --bs-btn-bg: #0f9d6b; --bs-btn-border-color: #0f9d6b; --bs-btn-hover-bg: #0b7d57; --bs-btn-hover-border-color: #0b7d57; }
.btn-outline-info { --bs-btn-color: var(--mas-primary-dark); --bs-btn-border-color: rgba(30,182,182,.5); --bs-btn-hover-bg: var(--mas-primary-dark); --bs-btn-hover-border-color: var(--mas-primary-dark); --bs-btn-hover-color: #fff; }
.btn-group > .btn-outline-primary, .btn-group > .btn-outline-info, .btn-group > .btn-outline-success { --bs-btn-color: var(--mas-text-soft); --bs-btn-border-color: var(--mas-border); --bs-btn-hover-bg: var(--mas-primary-soft); --bs-btn-hover-color: var(--mas-primary-deep); --bs-btn-hover-border-color: rgba(30,182,182,.4); background: #fff; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--mas-text-muted); font-size: .85rem; margin: 0; }
.breadcrumb a { text-decoration: none; }