/* ============================================================
   ShopIt Design System — Dark Navy / Slate
   Tokens -> Typography -> Layout -> Components
   ============================================================ */
:root {
    /* Brand navy scale */
    --navy-950: #070C18;
    --navy-900: #0B1220;
    --navy-800: #0F1A30;
    --navy-700: #15233F;
    --navy-600: #1D2E4E;

    /* Slate neutral scale */
    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748B;
    --slate-400: #94A3B8;
    --slate-300: #CBD5E1;
    --slate-200: #E2E8F0;
    --slate-100: #F1F5F9;
    --slate-50:  #F8FAFC;

    /* Accent — azure (cohesive cool accent for navy/slate) */
    --accent-700: #2257C0;
    --accent-600: #356FE0;
    --accent-500: #4F8EF7;
    --accent-400: #7AA8FA;
    --accent-300: #A8C6FC;
    --accent-soft: rgba(79, 142, 247, 0.12);
    --accent-rgb: 79, 142, 247;

    /* Semantic */
    --success: #10B981;
    --success-soft: rgba(16, 185, 129, 0.12);
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --danger: #EF4444;
    --danger-soft: rgba(239, 68, 68, 0.12);

    /* Semantic surfaces */
    --bg: #EEF1F6;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --text: #1E293B;
    --text-muted: #64748B;
    --heading: #0F1A30;

    /* Radii & elevation */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(11, 18, 32, 0.16);

    --sidebar-width: 232px;
    --sidebar-collapsed-width: 80px;

    /* Typography scale (panel-wide) */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 12.5px;
    --text-label: 10.5px;
    --heading-page: 1.15rem;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-brand: 'Manrope', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

    /* Legacy aliases — keep existing markup themed via one source of truth */
    --blue: var(--navy-700);
    --blue-dark: var(--navy-900);
    --blue-light: var(--slate-100);
    --orange: var(--accent-500);
    --orange-dark: var(--accent-600);
    --orange-light: var(--accent-soft);
    --primary: var(--accent-500);
    --primary-dark: var(--accent-600);
    --primary-light: var(--accent-soft);
    --accent: var(--navy-700);
    --accent-dark: var(--navy-900);
}

* { box-sizing: border-box; }

/* Keep scroll; hide visible scrollbars panel-wide (same idea as sidebar-nav) */
*,
*::before,
*::after {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--heading);
    letter-spacing: -0.02em;
}

a { color: var(--accent-600); }
a:hover { color: var(--accent-700); }

.brand-logo span, .sidebar-brand h2 span:not(.sidebar-brand-owner):not(.sidebar-brand-name) { color: var(--accent-500); }

/* ===== Auth ===== */
.auth-page {
    min-height: 100vh;
    background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--slate-800) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container { width: 100%; max-width: 480px; }

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.auth-brand .brand-logo { color: #fff; font-size: 2rem; font-weight: 800; font-family: var(--font-display); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.auth-brand p { color: rgba(255,255,255,.9); }

.user-type-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.user-type-tabs label {
    flex: 1; min-width: 100px; text-align: center; padding: 10px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: all .2s;
}
.user-type-tabs input { display: none; }
.user-type-tabs input:checked + span { color: var(--accent-600); font-weight: 600; }
.user-type-tabs label:has(input:checked) {
    border-color: var(--accent-500); background: var(--accent-soft);
}

/* ===== Buttons ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    border-color: var(--accent-600);
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .28);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
    border-color: var(--accent-700);
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), .38);
}

.btn-outline-primary {
    color: var(--accent-600);
    border-color: var(--accent-500);
}
.btn-outline-primary:hover {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--slate-600);
    border-color: var(--border-strong);
}
.btn-outline-secondary:hover {
    background: var(--slate-700);
    border-color: var(--slate-700);
    color: #fff;
}

html.panel-layout,
body.panel-layout,
body:has(.panel-wrapper) {
    height: 100%;
    overflow: hidden;
}

/* ===== Panel layout — deep slate-navy sidebar ===== */
.panel-wrapper {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.panel-wrapper:has(.pos-page) {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.sidebar {
    grid-column: 1;
    grid-row: 1;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(185deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
    color: rgba(255,255,255,.92);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    border-right: 1px solid rgba(255,255,255,.06);
    transition: width 0.22s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-collapse-btn {
    position: absolute;
    /* Centres on the same line as the brand mark and the notification bell:
       the brand row is 44px tall plus 16px padding, so its midline sits at 38px. */
    top: 26px;
    right: 2px;
    /* Above .sidebar-brand (z-index 120) so the header does not steal clicks */
    z-index: 130;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--navy-800, #1e293b);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-collapse-btn:hover {
    background: var(--navy-700, #334155);
    color: #fff;
}

.sidebar-collapse-btn i {
    font-size: 0.62rem;
    line-height: 1;
}

.sidebar-collapse-icon-collapsed { display: none; }

.panel-wrapper.sidebar-is-collapsed .sidebar-collapse-icon-expanded { display: none; }
.panel-wrapper.sidebar-is-collapsed .sidebar-collapse-icon-collapsed { display: inline; }

.panel-wrapper.sidebar-is-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
}

/* Let the collapse control sit on the outer border without being clipped */
.panel-wrapper.sidebar-is-collapsed .sidebar {
    overflow: visible;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-brand-text,
.panel-wrapper.sidebar-is-collapsed .sidebar-brand-tagline,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav span,
.panel-wrapper.sidebar-is-collapsed .sidebar-user-meta,
.panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn span,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-chevron {
    display: none !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav .nav-section {
    display: block !important;
    height: 1px;
    margin: 10px 14px 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    text-transform: none;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-brand {
    justify-content: center;
    padding: 16px 10px;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-collapse-btn {
    top: 26px;
    right: -12px;
    width: 24px;
    height: 24px;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-brand-mark {
    display: flex;
}

/* Icon rail: hide sidebar notification bell (Notifications Center remains in nav) */
.panel-wrapper.sidebar-is-collapsed .panel-notification-bell-wrap--sidebar {
    display: none !important;
}

/* Collapsed nav: equal inset so icons stay centered */
.panel-wrapper.sidebar-is-collapsed .sidebar-nav {
    padding: 10px 0;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav a,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 40px !important;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    margin: 2px auto !important;
    padding: 0 !important;
    border-radius: 10px;
    box-sizing: border-box;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav a > i:first-child,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item > i:first-child,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle > i:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px;
    margin: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1;
    flex-shrink: 0;
}

/* Collapsed hover: panel accent for seller/agent; purple only for admin */
.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav a:hover,
.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover,
.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav-group-toggle:hover {
    background: rgba(var(--accent-rgb), 0.42) !important;
    color: #fff !important;
}

.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav a:hover > i:first-child,
.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover > i:first-child,
.panel-wrapper:not(.admin-panel).sidebar-is-collapsed .sidebar-nav-group-toggle:hover > i:first-child {
    color: #fff !important;
}

.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav a:hover,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle:hover,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle.active:hover {
    background: rgba(109, 40, 217, 0.55) !important;
    color: #fff !important;
}

.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav a:hover > i:first-child,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover > i:first-child,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle:hover > i:first-child {
    color: #fff !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-user-block {
    justify-content: center;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn,
.panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn.w-100 {
    width: 40px !important;
    max-width: 40px;
    height: 40px;
    padding: 0 !important;
    margin: 8px auto 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    align-self: center;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
}

.sidebar.agent-sidebar {
    background: linear-gradient(185deg, var(--slate-800) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
}

.sidebar.admin-sidebar {
    background: linear-gradient(185deg, #1a1033 0%, #12082a 55%, #0a0418 100%);
}

.sidebar.admin-sidebar .sidebar-flyout-menu,
.panel-wrapper.sidebar-is-collapsed .sidebar.admin-sidebar .sidebar-flyout-menu {
    background: linear-gradient(165deg, #1a1033 0%, #12082a 100%);
    border-color: rgba(167, 139, 250, 0.15);
}

/* ===== Seller / retailer panel — admin-style sidebar menu, accent #0450d5 ===== */
.panel-wrapper.seller-panel {
    --seller-blue: #0450d5;
    --seller-blue-dark: #0342b0;
    --seller-blue-darker: #023491;
    --seller-blue-light: #7aa8fa;
    --seller-blue-soft: rgba(4, 80, 213, 0.12);
    --seller-blue-rgb: 4, 80, 213;

    --accent-700: #023491;
    --accent-600: #0342b0;
    --accent-500: #0450d5;
    --accent-400: #0450d5;
    --accent-300: #3b7aef;
    --accent-soft: rgba(4, 80, 213, 0.12);
    --accent-rgb: 4, 80, 213;

    --primary: var(--accent-500);
    --primary-dark: var(--accent-600);
    --primary-light: var(--accent-soft);
    --orange: var(--accent-500);
    --orange-dark: var(--accent-600);
    --orange-light: var(--accent-soft);
}

/* Dark blue-tinted rail (same pattern as admin purple rail) */
.panel-wrapper.seller-panel .sidebar:not(.admin-sidebar),
.panel-wrapper.seller-panel .sidebar.agent-sidebar {
    background: linear-gradient(185deg, #0B1A3A 0%, #081428 55%, #050C1A 100%);
    border-right: 1px solid rgba(122, 168, 250, 0.18);
}

.panel-wrapper.seller-panel .sidebar-brand h2 span:not(.sidebar-brand-owner):not(.sidebar-brand-name) {
    color: var(--seller-blue-light);
}

.panel-wrapper.seller-panel .sidebar-collapse-btn {
    background: #0c2a6b;
    border-color: rgba(122, 168, 250, 0.28);
    color: rgba(239, 246, 255, 0.9);
}

.panel-wrapper.seller-panel .sidebar-collapse-btn:hover {
    background: #1340a0;
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav a.active {
    background: rgba(122, 168, 250, 0.18);
    color: #fff;
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav a.sidebar-nav-item:hover:not(.sidebar-nav-group-toggle) {
    background: rgba(4, 80, 213, 0.4);
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav a.sidebar-nav-item.active:not(.sidebar-nav-group-toggle) {
    background: linear-gradient(180deg, rgba(3, 55, 155, 0.88) 0%, rgba(2, 40, 120, 0.78) 100%);
    box-shadow: none;
    border-radius: 10px;
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav a.sidebar-nav-item:not(.sidebar-nav-group-toggle).active {
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav-group,
.panel-wrapper.seller-panel .sidebar-nav-group.is-open {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 2px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.panel-wrapper.seller-panel .sidebar-nav-group-toggle > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #93b8fc;
}

.panel-wrapper.seller-panel .sidebar-nav-group-toggle:hover {
    background: rgba(4, 80, 213, 0.4);
    color: #fff;
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav-group-toggle:hover > i:first-child {
    color: #bfdbfe;
}

/* Open but not the current section — keep default rail styling */
.panel-wrapper.seller-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle:not(.active) {
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

/* Current Finance section — same theme active treatment as other menus */
.panel-wrapper.seller-panel .sidebar-nav-group-toggle.active,
.panel-wrapper.seller-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle.active {
    background: linear-gradient(180deg, rgba(3, 55, 155, 0.88) 0%, rgba(2, 40, 120, 0.78) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav-group-toggle.active > i:first-child,
.panel-wrapper.seller-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle.active > i:first-child {
    color: #bfdbfe;
}

.panel-wrapper.seller-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle:hover,
.panel-wrapper.seller-panel .sidebar-nav-group-toggle.active:hover {
    background: rgba(4, 80, 213, 0.55);
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav-submenu {
    padding: 0;
    margin: 0;
}

.panel-wrapper.seller-panel .sidebar-nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    padding: 9px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    background: transparent;
    transition: background .18s ease, color .18s ease;
}

.panel-wrapper.seller-panel .sidebar-nav-subitem > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #93b8fc;
}

.panel-wrapper.seller-panel .sidebar-nav-bullet {
    display: none;
}

.panel-wrapper.seller-panel .sidebar-nav-subitem:hover {
    background: rgba(4, 80, 213, 0.4);
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav-subitem:hover > i:first-child,
.panel-wrapper.seller-panel .sidebar-nav-subitem.active > i:first-child {
    color: #bfdbfe;
}

.panel-wrapper.seller-panel .sidebar-nav-subitem.active {
    background: linear-gradient(180deg, rgba(3, 55, 155, 0.88) 0%, rgba(2, 40, 120, 0.78) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.panel-wrapper.seller-panel .sidebar-nav-group.is-open .sidebar-nav-group-chevron {
    transform: rotate(180deg);
    color: #bfdbfe;
}

.panel-wrapper.seller-panel .sidebar-nav > a.sidebar-nav-item,
.panel-wrapper.seller-panel .sidebar-nav > .sidebar-nav-item,
.panel-wrapper.seller-panel .sidebar-nav-group-toggle,
.panel-wrapper.seller-panel .sidebar-nav a {
    padding: 9px 10px;
    gap: 10px;
    border-radius: 10px;
    margin-bottom: 2px;
}

.panel-wrapper.seller-panel .sidebar-nav > a.sidebar-nav-item > i:first-child,
.panel-wrapper.seller-panel .sidebar-nav > .sidebar-nav-item > i:first-child,
.panel-wrapper.seller-panel .sidebar-nav a > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #93b8fc;
}

.panel-wrapper.seller-panel .sidebar-nav a:hover > i:first-child,
.panel-wrapper.seller-panel .sidebar-nav a.active > i:first-child {
    color: #bfdbfe;
}

/* Plain links (no sidebar-nav-item class) still get admin-style hover */
.panel-wrapper.seller-panel .sidebar-nav a:hover {
    background: rgba(4, 80, 213, 0.4);
    color: #fff;
}

.panel-wrapper.seller-panel .sidebar-nav a.active {
    background: linear-gradient(180deg, rgba(3, 55, 155, 0.88) 0%, rgba(2, 40, 120, 0.78) 100%);
    color: #fff;
    box-shadow: none;
    border-radius: 10px;
}

.panel-wrapper.seller-panel .nav-section {
    color: rgba(147, 184, 252, 0.48);
}

.panel-wrapper.seller-panel .sidebar-nav-chevron {
    color: #93b8fc;
}

.panel-wrapper.seller-panel .sidebar-user-avatar,
.panel-wrapper.seller-panel .sidebar-user-initial {
    background: linear-gradient(145deg, #0450d5 0%, #0342b0 55%, #023491 100%);
    box-shadow: 0 4px 12px rgba(4, 80, 213, 0.35);
}

.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav a:hover,
.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover,
.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav-group-toggle:hover {
    background: rgba(4, 80, 213, 0.55) !important;
    color: #fff !important;
}

.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav a:hover > i:first-child,
.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item:hover > i:first-child,
.panel-wrapper.seller-panel.sidebar-is-collapsed .sidebar-nav-group-toggle:hover > i:first-child {
    color: #fff !important;
}

/* ===== Admin panel — light purple theme ===== */
.panel-wrapper.admin-panel:not(.sidebar-is-collapsed) {
    --sidebar-width: 204px; /* slightly tighter when expanded; collapsed stays 80px */
}

.panel-wrapper.admin-panel {
    --admin-purple: #7c3aed;
    --admin-purple-dark: #6d28d9;
    --admin-purple-darker: #5b21b6;
    --admin-purple-light: #a78bfa;
    --admin-purple-soft: rgba(124, 58, 237, 0.1);
    --admin-purple-bg: #f5f3ff;
    --admin-purple-bg-alt: #ede9fe;
    --admin-purple-surface: #faf9ff;
    --admin-purple-border: rgba(124, 58, 237, 0.14);
    --admin-purple-rgb: 124, 58, 237;
    --accent-700: #5b21b6;
    --accent-600: #6d28d9;
    --accent-500: #7c3aed;
    --accent-400: #a78bfa;
    --accent-300: #c4b5fd;
    --accent-soft: rgba(124, 58, 237, 0.12);
    --accent-rgb: 124, 58, 237;
    --border: rgba(124, 58, 237, 0.12);
    --surface-2: #faf9ff;
}

.panel-wrapper.admin-panel .main-content {
    background: var(--admin-purple-bg);
}

.panel-wrapper.admin-panel .sidebar.admin-sidebar {
    border-right: 1px solid rgba(167, 139, 250, 0.18);
}

.panel-wrapper.admin-panel .sidebar-brand h2 span:not(.sidebar-brand-owner):not(.sidebar-brand-name) {
    color: var(--admin-purple-light);
}

.panel-wrapper.admin-panel .sidebar-collapse-btn {
    background: #2e1065;
    border-color: rgba(167, 139, 250, 0.25);
}

.panel-wrapper.admin-panel .sidebar-collapse-btn:hover {
    background: #4c1d95;
}

.panel-wrapper.admin-panel .sidebar-nav a.active {
    background: rgba(167, 139, 250, 0.18);
    color: #fff;
    box-shadow: none;
}

.panel-wrapper.admin-panel .sidebar-nav a.sidebar-nav-item:hover:not(.sidebar-nav-group-toggle) {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
}

.panel-wrapper.admin-panel .sidebar-nav a.sidebar-nav-item.active:not(.sidebar-nav-group-toggle) {
    background: linear-gradient(180deg, rgba(62, 32, 120, 0.82) 0%, rgba(42, 20, 88, 0.72) 100%);
    box-shadow: none;
    border-radius: 10px;
    color: #fff;
}

.panel-wrapper.admin-panel .sidebar-nav a.sidebar-nav-item:not(.sidebar-nav-group-toggle).active {
    box-shadow: none;
}

/* Expanded groups: no nested card — children look like top-level menu rows */
.panel-wrapper.admin-panel .sidebar-nav-group,
.panel-wrapper.admin-panel .sidebar-nav-group.is-open {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.panel-wrapper.admin-panel .sidebar-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 2px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.panel-wrapper.admin-panel .sidebar-nav-group-toggle > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
}

/* Parent toggle: hover only — never compete with an active child */
.panel-wrapper.admin-panel .sidebar-nav-group-toggle:hover {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
    box-shadow: none;
}

.panel-wrapper.admin-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle,
.panel-wrapper.admin-panel .sidebar-nav-group-toggle.active {
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
}

.panel-wrapper.admin-panel .sidebar-nav-group.is-open .sidebar-nav-group-toggle:hover {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
}

.panel-wrapper.admin-panel .sidebar-nav-submenu {
    padding: 0;
    margin: 0;
}

.panel-wrapper.admin-panel .sidebar-nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    padding: 9px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    background: transparent;
    transition: background .18s ease, color .18s ease;
}

.panel-wrapper.admin-panel .sidebar-nav-subitem > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #c4b5fd;
}

.panel-wrapper.admin-panel .sidebar-nav-bullet {
    display: none;
}

.panel-wrapper.admin-panel .sidebar-nav-subitem:hover {
    background: rgba(109, 40, 217, 0.35);
    color: #fff;
}

.panel-wrapper.admin-panel .sidebar-nav-subitem:hover > i:first-child,
.panel-wrapper.admin-panel .sidebar-nav-subitem.active > i:first-child {
    color: #ddd6fe;
}

.panel-wrapper.admin-panel .sidebar-nav-subitem.active {
    background: linear-gradient(180deg, rgba(62, 32, 120, 0.82) 0%, rgba(42, 20, 88, 0.72) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.panel-wrapper.admin-panel .sidebar-nav-group.is-open .sidebar-nav-group-chevron {
    transform: rotate(180deg);
    color: #ddd6fe;
}

.panel-wrapper.admin-panel .sidebar-nav > a.sidebar-nav-item,
.panel-wrapper.admin-panel .sidebar-nav > .sidebar-nav-item,
.panel-wrapper.admin-panel .sidebar-nav-group-toggle {
    padding: 9px 10px;
    gap: 10px;
    border-radius: 10px;
    margin-bottom: 2px;
}

.panel-wrapper.admin-panel .sidebar-nav > a.sidebar-nav-item > i:first-child,
.panel-wrapper.admin-panel .sidebar-nav > .sidebar-nav-item > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
}

.panel-wrapper.admin-panel .sidebar-brand--text-only {
    gap: 0;
}

.panel-wrapper.admin-panel .sidebar-brand--text-only .sidebar-brand-mark {
    display: flex;
}

.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-brand--text-only .sidebar-brand-mark {
    display: flex;
}

.panel-wrapper.admin-panel .nav-section--admin {
    padding: 12px 12px 6px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.48);
}

.panel-wrapper.admin-panel .sidebar-user-avatar,
.panel-wrapper.admin-panel .sidebar-user-initial {
    background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.panel-wrapper.admin-panel .admin-page-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.panel-wrapper .panel-info-tip,
.panel-wrapper .admin-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    padding: 0;
    border-radius: 50%;
    color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    font-size: 0.95rem;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

.panel-wrapper.admin-panel .panel-info-tip,
.panel-wrapper.admin-panel .admin-info-tip {
    color: var(--admin-purple);
    background: rgba(124, 58, 237, 0.08);
}

.panel-wrapper .panel-info-tip:hover,
.panel-wrapper .panel-info-tip:focus-visible,
.panel-wrapper .admin-info-tip:hover,
.panel-wrapper .admin-info-tip:focus-visible {
    color: var(--primary-dark, #1d4ed8);
    background: rgba(37, 99, 235, 0.14);
    outline: none;
    transform: scale(1.05);
}

.panel-wrapper.admin-panel .panel-info-tip:hover,
.panel-wrapper.admin-panel .panel-info-tip:focus-visible,
.panel-wrapper.admin-panel .admin-info-tip:hover,
.panel-wrapper.admin-panel .admin-info-tip:focus-visible {
    color: var(--admin-purple-dark);
    background: rgba(124, 58, 237, 0.14);
}

.panel-info-tooltip .tooltip-inner,
.admin-info-tooltip .tooltip-inner,
.seller-panel-info-tooltip .tooltip-inner,
.admin-panel-info-tooltip .tooltip-inner,
.panel-wrapper.admin-panel .panel-info-tooltip .tooltip-inner,
.panel-wrapper.admin-panel .admin-info-tooltip .tooltip-inner {
    max-width: 340px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    background: #111111;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.panel-info-tooltip .tooltip-arrow::before,
.admin-info-tooltip .tooltip-arrow::before,
.seller-panel-info-tooltip .tooltip-arrow::before,
.admin-panel-info-tooltip .tooltip-arrow::before,
.panel-wrapper.admin-panel .panel-info-tooltip .tooltip-arrow::before,
.panel-wrapper.admin-panel .admin-info-tooltip .tooltip-arrow::before {
    border-top-color: #111111;
}

.admin-panel-info-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.admin-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #111111;
}

.admin-panel-info-tooltip.bs-tooltip-end .tooltip-arrow::before,
.admin-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-end .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-left-color: #111111;
}

.admin-panel-info-tooltip.bs-tooltip-start .tooltip-arrow::before,
.admin-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-start .tooltip-arrow::before,
.seller-panel-info-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-right-color: #111111;
}

.panel-wrapper.admin-panel .panel-info-tooltip .tooltip-arrow::before,
.panel-wrapper.admin-panel .admin-info-tooltip .tooltip-arrow::before {
    border-top-color: var(--admin-purple, #7c3aed);
}

.all-orders-header h1,
.products-header h1,
.page-header h1,
.wallet-page-title,
.wallet-card-title,
.user-mgmt-header h1,
.catalog-upload-top h1,
.support-portal-page-header h1,
.notifications-center-header h1,
.online-orders-header h1,
.single-product-title-row h1,
.inventory-scan-header h1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.panel-wrapper.admin-panel .btn-primary {
    background: linear-gradient(135deg, var(--admin-purple) 0%, var(--admin-purple-dark) 100%);
    border-color: var(--admin-purple-dark);
    box-shadow: 0 6px 16px rgba(var(--admin-purple-rgb), 0.28);
}

.panel-wrapper.admin-panel .btn-primary:hover,
.panel-wrapper.admin-panel .btn-primary:focus {
    background: linear-gradient(135deg, var(--admin-purple-dark) 0%, var(--admin-purple-darker) 100%);
    border-color: var(--admin-purple-darker);
    box-shadow: 0 8px 20px rgba(var(--admin-purple-rgb), 0.34);
}

.panel-wrapper.admin-panel .btn-outline-primary {
    color: var(--admin-purple-dark);
    border-color: var(--admin-purple);
}

.panel-wrapper.admin-panel .btn-outline-primary:hover {
    background: var(--admin-purple);
    border-color: var(--admin-purple);
    color: #fff;
}

.panel-wrapper.admin-panel a:not(.btn):not(.sidebar-nav-item):not(.sidebar-nav-subitem):not(.sidebar-logout-btn):not(.page-link):not(.admin-finance-main-tab):not(.admin-finance-period-tab):not(.admin-partners-tab):not(.admin-partners-page-link):not(.admin-orders-tab):not(.admin-home-quick-link):not(.retailer-products-tab):not(.retailer-products-tabs-cta) {
    color: var(--admin-purple-dark);
}

.panel-wrapper.admin-panel a:not(.btn):not(.sidebar-nav-item):not(.sidebar-nav-subitem):not(.sidebar-logout-btn):not(.page-link):not(.admin-home-quick-link):hover {
    color: var(--admin-purple-darker);
}

.panel-wrapper.admin-panel .form-control:focus,
.panel-wrapper.admin-panel .form-select:focus {
    border-color: var(--admin-purple);
    box-shadow: 0 0 0 0.2rem rgba(var(--admin-purple-rgb), 0.14);
}

/* Native select options: light purple theme instead of system grey highlight */
.panel-wrapper.admin-panel select,
.panel-wrapper.admin-panel .form-select {
    accent-color: var(--admin-purple);
}

.panel-wrapper.admin-panel select option,
.panel-wrapper.admin-panel .form-select option {
    background-color: #fff;
    color: var(--heading, #0f172a);
}

.panel-wrapper.admin-panel select option:checked,
.panel-wrapper.admin-panel select option:hover,
.panel-wrapper.admin-panel select option:focus,
.panel-wrapper.admin-panel .form-select option:checked,
.panel-wrapper.admin-panel .form-select option:hover,
.panel-wrapper.admin-panel .form-select option:focus {
    /* gradient forces paint on Windows/Chrome where solid bg is ignored */
    background: linear-gradient(0deg, var(--admin-purple-bg-alt) 0%, var(--admin-purple-bg-alt) 100%);
    background-color: var(--admin-purple-bg-alt);
    color: var(--admin-purple-darker);
}

.panel-wrapper.admin-panel select option:checked:hover,
.panel-wrapper.admin-panel .form-select option:checked:hover {
    background: linear-gradient(0deg, var(--admin-purple-soft) 0%, var(--admin-purple-soft) 100%);
    background-color: var(--admin-purple-soft);
    color: var(--admin-purple-darker);
}

/* Custom admin select (replaces native list so hover is themeable) */
.panel-wrapper.admin-panel .admin-custom-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.panel-wrapper.admin-panel .admin-custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.panel-wrapper.seller-panel .admin-custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pos-fs-body .admin-custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.panel-wrapper.admin-panel .admin-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--admin-purple-border);
    border-radius: var(--radius, 0.375rem);
    background: #fff;
    color: var(--heading, #0f172a);
    font-size: inherit;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.panel-wrapper.admin-panel .admin-custom-select--sm .admin-custom-select-trigger {
    min-height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.panel-wrapper.admin-panel .admin-custom-select-trigger:hover {
    border-color: rgba(var(--admin-purple-rgb), 0.35);
}

.panel-wrapper.admin-panel .admin-custom-select.is-open .admin-custom-select-trigger,
.panel-wrapper.admin-panel .admin-custom-select-trigger:focus {
    border-color: var(--admin-purple);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--admin-purple-rgb), 0.14);
}

.panel-wrapper.admin-panel .admin-custom-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-wrapper.admin-panel .admin-custom-select-chevron {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--admin-purple-dark);
    opacity: 0.85;
    transition: transform 0.15s ease;
}

.panel-wrapper.admin-panel .admin-custom-select.is-open .admin-custom-select-chevron {
    transform: rotate(180deg);
}

/* Menus are portaled to document.body (avoid overflow:hidden clip) — styles must not require .admin-panel ancestor */
.admin-custom-select-menu {
    --admin-purple: #7c3aed;
    --admin-purple-dark: #6d28d9;
    --admin-purple-darker: #5b21b6;
    --admin-purple-soft: rgba(124, 58, 237, 0.1);
    --admin-purple-bg: #f5f3ff;
    --admin-purple-bg-alt: #ede9fe;
    --admin-purple-surface: #faf9ff;
    --admin-purple-border: rgba(124, 58, 237, 0.14);
    position: fixed;
    z-index: 2000;
    max-height: min(320px, 55vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    margin: 0;
    list-style: none;
    background: var(--admin-purple-surface);
    border: 1px solid var(--admin-purple-border);
    border-radius: 0.375rem;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.14);
    box-sizing: border-box;
}

.admin-custom-select-group {
    padding: 0.45rem 0.65rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--admin-purple-dark);
    background: transparent;
    pointer-events: none;
}

.admin-custom-select-option {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #0f172a;
    text-align: left;
    padding: 0.4rem 0.65rem;
    font: inherit;
    font-size: inherit;
    line-height: 1.35;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-custom-select--sm .admin-custom-select-option,
.admin-custom-select-menu.admin-custom-select-menu--sm .admin-custom-select-option {
    font-size: 0.875rem;
    padding: 0.3rem 0.5rem;
}

.admin-custom-select-option:hover,
.admin-custom-select-option:focus {
    background: var(--admin-purple-bg-alt);
    color: var(--admin-purple-darker);
    outline: none;
}

.admin-custom-select-option.is-selected {
    background: var(--admin-purple-soft);
    color: var(--admin-purple-darker);
    font-weight: 600;
}

.admin-custom-select-option.is-selected:hover,
.admin-custom-select-option.is-selected:focus {
    background: var(--admin-purple-bg-alt);
    color: var(--admin-purple-darker);
}

.admin-custom-select-option.is-disabled,
.admin-custom-select-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.panel-wrapper.admin-panel .admin-custom-select.is-disabled .admin-custom-select-trigger,
.panel-wrapper.admin-panel .admin-custom-select-trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--admin-purple-surface);
}

.panel-wrapper.admin-panel .panel-card,
.panel-wrapper.admin-panel .card {
    border-color: var(--admin-purple-border);
    background: #fff;
}

.panel-wrapper.admin-panel .panel-card .card-header {
    background: var(--admin-purple-surface);
    border-bottom-color: var(--admin-purple-border);
}

.panel-wrapper.admin-panel .orders-list-pagination,
.panel-wrapper.admin-panel .admin-partners-pagination,
.panel-wrapper.admin-panel .admin-support-cms-pagination {
    background: var(--admin-purple-surface);
    border-top-color: var(--admin-purple-border);
}

.panel-wrapper.admin-panel .pagination .page-item.active .page-link {
    background: var(--admin-purple);
    border-color: var(--admin-purple);
    color: #fff;
}

.panel-wrapper.admin-panel .pagination .page-link:hover {
    color: var(--admin-purple-dark);
    border-color: var(--admin-purple-border);
    background: var(--admin-purple-soft);
}

.panel-wrapper.admin-panel .admin-finance-notice {
    background: var(--admin-purple-surface);
    border-color: #ddd6fe;
    color: var(--slate-600);
}

.panel-wrapper.admin-panel .admin-finance-notice i {
    color: var(--admin-purple);
}

.panel-wrapper.admin-panel .admin-finance-kpi-card,
.panel-wrapper.admin-panel .admin-finance-panel {
    border-color: var(--admin-purple-border);
}

.panel-wrapper.admin-panel .admin-finance-pagination.orders-list-pagination {
    background: var(--admin-purple-surface);
    border-top-color: var(--admin-purple-border);
}

.panel-wrapper.admin-panel .admin-landing-icon {
    color: var(--admin-purple-light);
    background: var(--admin-purple-soft);
}

.panel-wrapper.admin-panel .page-header h1,
.panel-wrapper.admin-panel .admin-finance-header h1 {
    color: var(--slate-900);
}

/* Admin panel — unified typography */
.panel-wrapper.admin-panel .main-content {
    font-size: var(--text-base);
}

.panel-wrapper.admin-panel .admin-page-header,
.panel-wrapper.admin-panel .catalog-rules-header,
.panel-wrapper.admin-panel .user-mgmt-header,
.panel-wrapper.admin-panel .admin-finance-header,
.panel-wrapper.admin-panel .admin-support-page-header,
.panel-wrapper.admin-panel .admin-partners-header,
.panel-wrapper.admin-panel .page-header {
    margin-bottom: 12px;
}

.panel-wrapper.admin-panel .sidebar-nav a > i:first-child,
.panel-wrapper.admin-panel .sidebar-nav-group-toggle > i:first-child {
    color: #c4b5fd;
}

.panel-wrapper.admin-panel .sidebar-nav a:hover > i:first-child,
.panel-wrapper.admin-panel .sidebar-nav a.active > i:first-child,
.panel-wrapper.admin-panel .sidebar-nav-group-toggle:hover > i:first-child {
    color: var(--admin-purple-light);
}

.panel-wrapper.admin-panel .sidebar-nav-chevron {
    color: var(--admin-purple-light);
}

.panel-wrapper.admin-panel .admin-page-header h1,
.panel-wrapper.admin-panel .admin-page-title,
.panel-wrapper.admin-panel .catalog-rules-header h1,
.panel-wrapper.admin-panel .user-mgmt-header h1,
.panel-wrapper.admin-panel .admin-finance-header h1,
.panel-wrapper.admin-panel .admin-support-page-header h1,
.panel-wrapper.admin-panel .admin-partners-header h1,
.panel-wrapper.admin-panel .page-header h1 {
    font-family: var(--font-display);
    font-size: var(--heading-page);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--heading);
    line-height: 1.25;
}

.panel-wrapper.admin-panel .admin-page-subtitle,
.panel-wrapper.admin-panel .catalog-rules-subtitle,
.panel-wrapper.admin-panel .user-mgmt-subtitle,
.panel-wrapper.admin-panel .admin-finance-header-sub,
.panel-wrapper.admin-panel .admin-support-page-header .text-muted,
.panel-wrapper.admin-panel .page-header p,
.panel-wrapper.admin-panel .page-header .text-muted {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 42rem;
}

.panel-wrapper.admin-panel .admin-finance-panel h2,
.panel-wrapper.admin-panel .admin-finance-dash-payout h2,
.panel-wrapper.admin-panel .panel-card > .card-header {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.panel-wrapper.admin-panel .admin-finance-kpi-title {
    font-size: var(--text-sm);
}

.panel-wrapper.admin-panel .admin-finance-kpi-value {
    font-size: 1.05rem;
}

.admin-landing-hero {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
}

.admin-landing-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
}

.admin-landing-hero h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.admin-landing-subtitle {
    color: var(--slate-600, #475569);
    margin-bottom: 1rem;
}

/* Admin home dashboard */
.admin-home-header {
    margin-bottom: 1.25rem;
}

.admin-home-section {
    margin-bottom: 1.5rem;
}

.admin-home-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.admin-home-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
}

.admin-home-section-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--admin-purple-dark, #6d28d9);
    text-decoration: none;
}

.admin-home-section-link:hover {
    color: var(--admin-purple-darker, #5b21b6);
    text-decoration: underline;
}

.admin-home-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--admin-purple-dark, #6d28d9);
    background: var(--admin-purple-soft, rgba(124, 58, 237, 0.1));
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.admin-home-kpi-attention {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
}

/* Force a balanced KPI grid (3×2 on desktop) instead of uneven wrap */
.admin-home-kpi-grid.admin-finance-kpi-grid,
.admin-home-kpi-grid.admin-finance-kpi-grid--dash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

@media (min-width: 1100px) {
    .admin-home-kpi-grid.admin-finance-kpi-grid,
    .admin-home-kpi-grid.admin-finance-kpi-grid--dash {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-home-kpi-grid.admin-finance-kpi-grid,
    .admin-home-kpi-grid.admin-finance-kpi-grid--dash {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .admin-home-kpi-grid.admin-finance-kpi-grid,
    .admin-home-kpi-grid.admin-finance-kpi-grid--dash {
        grid-template-columns: 1fr;
    }
}

.admin-home-kpi-grid .admin-finance-kpi-card--dash {
    min-height: 100%;
    height: 100%;
}

.admin-home-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-home-kpi-trend--up {
    color: #15803d;
}

.admin-home-kpi-trend--down {
    color: #b91c1c;
}

.admin-home-kpi-trend--flat {
    color: #64748b;
}

.admin-home-alerts {
    display: grid;
    gap: 8px;
}

.admin-home-alert {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-home-alert:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.1);
    color: inherit;
}

.admin-home-alert--critical {
    border-color: rgba(185, 28, 28, 0.28);
    background: #fff7f7;
}

.admin-home-alert--warning {
    border-color: rgba(217, 119, 6, 0.28);
    background: #fffbeb;
}

.admin-home-alert--info {
    border-color: rgba(37, 99, 235, 0.2);
    background: #f8fafc;
}

.admin-home-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-purple-soft, rgba(124, 58, 237, 0.1));
    color: var(--admin-purple-dark, #6d28d9);
    font-size: 1rem;
}

.admin-home-alert--critical .admin-home-alert-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-home-alert--warning .admin-home-alert-icon {
    background: #fef3c7;
    color: #b45309;
}

.admin-home-alert--info .admin-home-alert-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-home-alert-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.admin-home-alert-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--slate-900, #0f172a);
}

.admin-home-alert-detail {
    font-size: 0.78rem;
    color: #64748b;
}

.admin-home-alert-count {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--slate-900, #0f172a);
    min-width: 2ch;
    text-align: right;
}

.admin-home-alert-chevron {
    color: #94a3b8;
    font-size: 0.85rem;
}

.admin-home-split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: stretch;
}

.admin-home-split-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    min-height: 480px;
}

.admin-home-split-main > .admin-home-section {
    margin-bottom: 0;
}

.admin-home-section--links {
    flex: 0 0 auto;
}

.admin-home-section--status {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.admin-home-section--status > .admin-home-section-head {
    flex: 0 0 auto;
}

.admin-home-section--status > .admin-home-status {
    flex: 1 1 auto;
    min-height: 0;
}

.admin-home-section--feed {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    margin-bottom: 0;
}

.admin-home-section--feed > .admin-home-section-head {
    flex: 0 0 auto;
}

.admin-home-section--feed > .admin-home-feed-shell {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 992px) {
    .admin-home-split {
        grid-template-columns: 1fr;
    }

    .admin-home-split-main,
    .admin-home-section--feed {
        min-height: 0;
        height: auto;
    }
}

.admin-home-status {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.35rem 0;
    overflow: hidden;
}

.admin-home-status-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.admin-home-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.78rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-home-status-row:last-child {
    border-bottom: 0;
}

.admin-home-status-row:hover {
    background: var(--admin-purple-surface, #faf9ff);
    color: inherit;
}

.admin-home-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--slate-900, #0f172a);
    min-width: 0;
}

.admin-home-status-label i {
    color: var(--admin-purple, #7c3aed);
}

.admin-home-status-row.is-ok .admin-home-status-label i {
    color: #16a34a;
}

.admin-home-status-row.is-warn .admin-home-status-label i {
    color: #d97706;
}

.admin-home-status-row.is-critical .admin-home-status-label i {
    color: #dc2626;
}

.admin-home-status-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-align: right;
    white-space: nowrap;
}

.admin-home-status-row.is-warn .admin-home-status-value {
    color: #b45309;
}

.admin-home-status-row.is-critical .admin-home-status-value {
    color: #b91c1c;
}

.admin-home-tools-dropdown {
    position: relative;
}

.admin-home-tools-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: #fff;
    color: var(--admin-purple-dark, #6d28d9);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
}

.admin-home-tools-toggle:hover,
.admin-home-tools-dropdown.is-open .admin-home-tools-toggle {
    border-color: rgba(124, 58, 237, 0.35);
    background: var(--admin-purple-surface, #faf9ff);
}

.admin-home-tools-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.admin-home-tools-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--slate-800, #1e293b);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-home-tools-item i {
    color: var(--admin-purple, #7c3aed);
    width: 1rem;
    text-align: center;
}

.admin-home-tools-item:hover {
    background: var(--admin-purple-surface, #faf9ff);
    color: var(--admin-purple-darker, #5b21b6);
}

.admin-home-quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 700px) {
    .admin-home-quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .admin-home-quick-links {
        grid-template-columns: 1fr;
    }
}

.admin-home-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    height: 52px;
    box-sizing: border-box;
    padding: 0 1rem;
    border-radius: 10px;
    border: 1px solid var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: #fff;
    color: var(--slate-800, #1e293b);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-home-quick-link i {
    flex: 0 0 auto;
    color: var(--admin-purple, #7c3aed);
    font-size: 1.05rem;
}

.admin-home-quick-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-home-quick-link:hover {
    border-color: rgba(124, 58, 237, 0.35);
    background: var(--admin-purple-surface, #faf9ff);
    color: var(--admin-purple-darker, #5b21b6);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.1);
}

.admin-home-quick-link--accent,
.admin-home-quick-link--accent span,
.admin-home-quick-link--accent i {
    color: #fff;
}

.admin-home-quick-link--accent {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #6d28d9;
}

.admin-home-quick-link--accent:hover,
.admin-home-quick-link--accent:hover span,
.admin-home-quick-link--accent:hover i {
    color: #fff;
}

.admin-home-quick-link--accent:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.admin-home-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
}

.admin-home-empty > i {
    font-size: 1.35rem;
    color: #16a34a;
    margin-top: 0.1rem;
}

.admin-home-feed,
.admin-home-feed-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0;
}

.admin-home-empty.admin-home-feed-shell {
    flex-direction: row;
    align-items: flex-start;
    overflow: hidden;
}

.admin-home-feed-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-home-feed-item:last-child {
    border-bottom: 0;
}

a.admin-home-feed-item:hover {
    background: var(--admin-purple-surface, #faf9ff);
    color: inherit;
}

.admin-home-feed-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.95rem;
}

.admin-home-feed-icon--green {
    background: #dcfce7;
    color: #15803d;
}

.admin-home-feed-icon--amber {
    background: #fef3c7;
    color: #b45309;
}

.admin-home-feed-icon--purple {
    background: var(--admin-purple-soft, rgba(124, 58, 237, 0.1));
    color: var(--admin-purple-dark, #6d28d9);
}

.admin-home-feed-icon--blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-home-feed-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-home-feed-cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-home-feed-title {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--slate-900, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-home-feed-detail {
    font-size: 0.76rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-home-feed-time {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    padding-top: 0.15rem;
}

.panel-wrapper.admin-panel .admin-home-section-title {
    color: var(--slate-900, #0f172a);
}


.admin-partners-page .admin-partners-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.admin-partners-stat {
    background: #fff;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 110px;
}

.admin-partners-stat strong {
    display: block;
    font-size: 1.25rem;
    line-height: 1.2;
}

.admin-partners-stat span {
    font-size: 0.75rem;
    color: var(--slate-500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-partners-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-partners-header {
    align-items: center;
}

.admin-partners-search-form {
    flex: 0 1 320px;
    min-width: 220px;
    margin-left: auto;
}

.admin-partners-search {
    position: relative;
}

.admin-partners-search .bi {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400, #94a3b8);
    pointer-events: none;
}

.admin-partners-search input {
    width: 100%;
    padding: 0.45rem 0.85rem 0.45rem 2.25rem;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 999px;
    font-size: 0.875rem;
    background: #fff;
}

.admin-partners-search input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.admin-partners-table-wrap.admin-partners-table-loading {
    opacity: 0.65;
    pointer-events: none;
}

.admin-partners-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--slate-200, #e2e8f0);
    background: #fff;
    color: var(--slate-700, #334155);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-partners-tab:hover {
    border-color: #7c3aed;
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.06);
}

.admin-partners-tab.active {
    background: #4c1d95;
    border-color: #4c1d95;
    color: #fff;
}

.admin-partners-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
}

.admin-partners-tab.active .admin-partners-tab-count {
    background: rgba(255, 255, 255, 0.2);
}

.admin-partners-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--slate-200, #e2e8f0);
    background: var(--slate-50, #f8fafc);
}

.admin-partners-pagination .pagination .page-link {
    min-width: 2rem;
    text-align: center;
}

.admin-partners-page-ellipsis .page-link {
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}

.admin-partners-table-wrap {
    padding: 0;
    overflow: hidden;
}

.admin-partners-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-partners-table {
    font-size: 0.78rem;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-partners-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 3;
    font-weight: 600;
}

.admin-partners-table th.admin-partners-action-col {
    left: 0;
    z-index: 5;
    background: #f8fafc;
}

.admin-partners-table td.admin-partners-action-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    min-width: 118px;
    box-shadow: 4px 0 8px -4px rgba(15, 23, 42, 0.12);
}

.admin-partners-table.table-striped > tbody > tr:nth-of-type(odd):not(.admin-partners-row-pending):not(.admin-partners-row-blocked) > td.admin-partners-action-col {
    background: #f1f5f9;
}

.admin-partners-table > tbody > tr.admin-partners-row-pending > td.admin-partners-action-col {
    background: #fffbeb;
}

.admin-partners-table > tbody > tr.admin-partners-row-blocked > td.admin-partners-action-col {
    background: #fff7f7;
}

.admin-partners-row-pending {
    background-color: rgba(254, 243, 199, 0.35) !important;
}

.admin-partners-sensitive {
    font-family: ui-monospace, monospace;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-partners-hash {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-partners-truncate {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-partners-alert {
    margin-bottom: 1rem;
}

.admin-partners-action-col {
    min-width: 118px;
    width: 118px;
}

.admin-partners-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.admin-partners-blocked-badge {
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

.admin-partners-toggle-btn {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
}

.admin-partners-row-blocked {
    background-color: rgba(254, 226, 226, 0.35) !important;
}

.catalog-rules-steps {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.catalog-rules-steps-list {
    padding-left: 1.15rem;
    margin-bottom: 0;
}

.catalog-rules-steps-list li + li {
    margin-top: 4px;
}

.catalog-rules-page {
    max-width: 100%;
    font-size: var(--text-base);
    position: relative;
}

.catalog-rules-page--booting {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.catalog-rules-page--ready {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.catalog-rules-header {
    margin-bottom: 16px;
}

.catalog-rules-header h1 {
    margin: 0 0 4px;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}

.catalog-rules-subtitle {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--slate-500);
}

.catalog-rules-view-tabs {
    margin-top: 2px;
}

.catalog-rules-view-tabs button.online-view-tab {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.catalog-rules-tab-content {
    margin-top: 0;
}

.catalog-rules-tab-pane {
    animation: catalogRulesTabIn .18s ease;
}

@keyframes catalogRulesTabIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.catalog-rules-page .catalog-rules-tabs {
    margin-bottom: 16px;
}

.catalog-rules-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.catalog-rules-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-700);
    font-size: var(--text-sm);
}

.catalog-rules-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: 0;
    font-size: 1rem;
}

.category-hsn-search.catalog-search-select {
    position: relative;
}

.category-hsn-search .catalog-search-select-list {
    display: none;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.category-hsn-search .catalog-search-select-list.open {
    display: block;
}

.category-hsn-search .catalog-search-select-item {
    padding: 0.45rem 0.65rem;
    cursor: pointer;
}

.category-hsn-search .catalog-search-select-item:hover,
.category-hsn-search .catalog-search-select-item.active {
    background: rgba(13, 110, 253, 0.08);
}

.catalog-rules-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.catalog-rules-gst-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    max-width: 360px;
}

.catalog-rules-gst-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 8px;
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
}

.catalog-rules-gst-option:has(input:checked) {
    border-color: var(--accent-500, #6366f1);
    background: var(--accent-soft, #eef2ff);
}

.catalog-rules-leaf-list {
    max-height: 420px;
    overflow-y: auto;
}

.catalog-rules-tree-branch {
    margin-bottom: 2px;
}

.catalog-rules-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    min-height: 28px;
    cursor: pointer;
    user-select: none;
}

.catalog-rules-tree-row:hover .catalog-rules-tree-row-label {
    color: var(--accent-600);
}

.catalog-rules-tree-row-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
}

.catalog-rules-tree-toggle,
.catalog-rules-tree-toggle-spacer {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.catalog-rules-tree-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.catalog-rules-tree-toggle:hover {
    color: var(--accent-600);
    background: var(--surface-2);
}

.catalog-rules-tree-children {
    margin-left: 6px;
    border-left: 1px solid var(--border);
    padding-left: 6px;
}

.catalog-rules-leaf-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--surface);
    font-size: var(--text-base);
    transition: border-color .15s, background .15s;
}

.catalog-rules-leaf-item:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.catalog-rules-leaf-item.active {
    border-color: var(--accent-500);
    background: var(--accent-soft);
}

.catalog-rules-leaf-item span {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.catalog-rules-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-rules-mapping-toolbar {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.catalog-rules-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
    user-select: none;
}

.catalog-rules-mapping-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.catalog-rules-mapping-collapse-btn,
.catalog-rules-mapping-collapse-spacer {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.catalog-rules-mapping-collapse-btn {
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.catalog-rules-mapping-collapse-btn:hover {
    color: var(--accent-600);
    background: var(--surface-2);
}

.catalog-rules-mapping-block:not(.is-mapped) .catalog-rules-mapping-collapse-btn {
    opacity: 0.4;
    pointer-events: none;
}

.catalog-rules-mapping-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.catalog-rules-field-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
}

.catalog-rules-field-group-toggle .form-select {
    width: auto;
    min-width: 130px;
}

.catalog-rules-mapping-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.catalog-rules-mapping-block.is-mapped.is-collapsed .catalog-rules-mapping-body,
.catalog-rules-mapping-block:not(.is-mapped) .catalog-rules-mapping-body {
    display: none;
}

.catalog-rules-mapping-body {
    margin-left: 30px;
}

.catalog-rules-mapping-values {
    margin: 0 0 4px 0;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted, #f8f9fa);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.catalog-rules-mapping-value-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    margin: 0;
    cursor: pointer;
}

.catalog-rules-required-toggle {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.catalog-rules-tree {
    max-height: 480px;
    overflow-y: auto;
}

.catalog-rules-tree-btn {
    border: 0;
    background: transparent;
    padding: 4px 0;
    text-align: left;
    width: 100%;
}

.catalog-rules-tree-btn:hover {
    color: var(--accent-600);
}

.catalog-rules-table th {
    background: var(--surface-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--heading);
    border-bottom: 1px solid var(--border);
}

.catalog-rules-master-table {
    overflow: hidden;
}

.catalog-rules-master-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.catalog-rules-master-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.catalog-rules-panel-search {
    max-width: 260px;
    min-width: 180px;
}

.catalog-rules-mapping-block--filtered {
    display: none !important;
}

.catalog-rules-master-title {
    font-weight: 600;
}

.catalog-rules-master-tabs {
    margin-bottom: 0;
}

.catalog-rules-master-tabs .online-view-tab {
    font-size: 12px;
    padding: 6px 14px;
}

.master-catalog-row-inactive {
    opacity: 0.92;
}

.master-catalog-row-inactive .master-catalog-path {
    color: var(--slate-600);
}

.catalog-rules-master-table .table-responsive {
    max-height: calc(100vh - 280px);
    overflow: auto;
}

.category-cascade-field--confirmed .category-cascade-label::after {
    content: '\2713';
    margin-left: 6px;
    color: var(--accent-600);
    font-size: 11px;
    font-weight: 700;
}

.category-cascade-field .category-cascade-input:not(:disabled):placeholder-shown {
    border-color: var(--border);
}

.category-cascade-field--confirmed .category-cascade-input {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: var(--accent-soft);
}

.category-cascade {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.category-cascade-field .form-label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.category-cascade-field.is-disabled .category-cascade-input {
    background: var(--surface-2, #f8fafc);
    cursor: not-allowed;
}

.category-cascade-select .catalog-search-select-list {
    z-index: 1200;
}

.catalog-rules-cascade-card.panel-card,
.catalog-rules-cascade-card .card-body {
    overflow: visible;
}

.catalog-rules-category-layout > [class*="col-"] {
    overflow: visible;
}

.category-cascade-field[data-level="3"] .catalog-search-select-list.open {
    top: auto;
    bottom: calc(100% + 4px);
    margin-top: 0;
    margin-bottom: 0;
}

.category-cascade-add-btn {
    font-weight: 600;
}

.category-cascade-add-btn[data-mode="rename"] {
    border-color: var(--accent-500, #6366f1);
    color: var(--accent-700, #4338ca);
}

.category-cascade-add {
    color: var(--accent-600);
    font-weight: 600;
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 9px;
}

.category-right-placeholder {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-right-placeholder-icon {
    font-size: 2.25rem;
    color: var(--text-muted);
    opacity: 0.75;
}

.category-right-panel {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.category-right-panel.category-right-panel--visible {
    opacity: 1;
    transform: translateY(0);
}

.catalog-rules-category-layout .panel-card {
    min-height: 320px;
}

.category-cascade-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.category-cascade-delete-btn {
    line-height: 1;
    text-decoration: none !important;
}

.category-cascade-delete-btn:hover {
    opacity: 0.85;
}

.master-catalog-path {
    font-size: 13px;
}

#masterCatalogTable .btn + .btn {
    margin-left: 4px;
}

.sidebar-brand {
    padding: 14px 36px 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 120;
}

.sidebar-brand-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-right: 4px;
}

.sidebar-brand-mark {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    overflow: hidden;
}
.sidebar-brand-mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.panel-mobile-bar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: lowercase;
}
.panel-mobile-bar-brand-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sidebar-brand-text {
    min-width: 0;
    flex: 1;
}

.sidebar-brand-tagline {
    margin: 0 0 0 54px;
    padding: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
}

.sidebar-brand h2 { margin: 0; font-size: 1.22rem; font-weight: 700; color: #fff; font-family: var(--font-brand); line-height: 1.15; letter-spacing: -0.02em; text-transform: lowercase; }
.sidebar-brand-owner {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.82);
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
    vertical-align: middle;
}

.sidebar-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 6px 10px 8px;
    /* Keep scroll; hide the visible scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.sidebar-nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; margin-bottom: 1px; border-radius: 6px;
    color: rgba(255,255,255,.72);
    text-decoration: none; font-size: 12.5px; font-weight: 500; transition: all .18s;
}
.sidebar-nav a:hover {
    background: rgba(255,255,255,.06); color: #fff;
}
.sidebar-nav a.active {
    background: rgba(var(--accent-rgb), .18);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent-500);
}
.sidebar-nav a.sidebar-nav-item.active {
    background: rgba(var(--accent-rgb), .22);
    box-shadow: none;
    border-radius: 8px;
}
.sidebar-nav-chevron {
    margin-left: auto;
    font-size: 11px;
    color: var(--accent-400);
    flex-shrink: 0;
    transition: transform .18s ease;
}

.sidebar-nav-group {
    margin-bottom: 2px;
}

.sidebar-nav-group-toggle {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sidebar-nav-group.is-open .sidebar-nav-group-chevron {
    transform: rotate(180deg);
}

.sidebar-nav-submenu {
    display: none;
    padding: 2px 0 6px;
}

.sidebar-nav-group.is-open .sidebar-nav-submenu {
    display: block;
}

.sidebar-nav-subitem {
    display: block;
    padding: 6px 10px 6px 34px;
    margin-bottom: 1px;
    border-radius: 6px;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    transition: all .18s;
}

.sidebar-nav-subitem:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sidebar-nav-subitem.active {
    background: rgba(var(--accent-rgb), .14);
    color: #fff;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group:not(.is-open) .sidebar-nav-submenu,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-chevron,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle .sidebar-nav-chevron {
    display: none !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group.is-open {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100%;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-group-toggle,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-group-toggle,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle.active,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle.active {
    color: inherit;
    background: transparent !important;
    text-align: center;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle > i:first-child,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle > i:first-child {
    color: #c4b5fd !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle.active,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle.active,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-group-toggle {
    background: transparent !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle:hover,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group-toggle:hover,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-group-toggle:hover {
    background: rgba(109, 40, 217, 0.55) !important;
}

/* Collapsed submenu = same 40×40 icon tiles as main nav */
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-submenu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 40px !important;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    margin: 2px auto !important;
    padding: 0 !important;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: inherit;
    background: transparent;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem .sidebar-nav-bullet,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem > span {
    display: none !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem > i:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px;
    margin: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1;
    color: #c4b5fd !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem:hover,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem.active,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem:hover,
.panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem.active {
    color: #fff !important;
    background: rgba(109, 40, 217, 0.55) !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem:hover > i:first-child,
.panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem.active > i:first-child {
    color: #fff !important;
}

/* Collapsed sidebar tip uses Bootstrap tooltip (see panel.js) */
.sidebar-nav-tooltip .tooltip-inner,
.sidebar-nav-tooltip--seller .tooltip-inner {
    max-width: 260px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    background: #111111;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.sidebar-nav-tooltip .tooltip-arrow::before,
.sidebar-nav-tooltip--seller .tooltip-arrow::before {
    border-right-color: #111111;
}

.sidebar-nav a > i:first-child { font-size: .9rem; color: var(--accent-300); width: 16px; text-align: center; flex-shrink: 0; }
.sidebar-nav a:hover > i:first-child, .sidebar-nav a.active > i:first-child { color: var(--accent-400); }
.sidebar-nav a.active .sidebar-nav-chevron { color: var(--accent-400); }

.sidebar-nav a.sidebar-nav-orders-link {
    position: relative;
}

.sidebar-nav a.sidebar-nav-products-link {
    position: relative;
}

.sidebar-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--sidebar-bg, #0f172a);
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav a.sidebar-nav-orders-link {
    position: relative;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav a.sidebar-nav-products-link {
    position: relative;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    margin-left: 0;
    font-size: 9px;
    line-height: 15px;
}

.sidebar-nav .nav-section {
    padding: 10px 10px 4px;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}
.sidebar-nav .nav-section:first-child { margin-top: 0; }

.sidebar-nav .nav-static {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12.5px;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

/* Partners flyout (admin) */
.sidebar-flyout {
    position: relative;
    margin-bottom: 1px;
}

.sidebar-flyout-trigger {
    width: 100%;
}

.sidebar-flyout-caret {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.sidebar-flyout:hover .sidebar-flyout-caret,
.sidebar-flyout:focus-within .sidebar-flyout-caret {
    opacity: 0.9;
    transform: rotate(90deg);
}

.sidebar-flyout.is-active-group .sidebar-flyout-trigger:not(.active) {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-flyout-menu {
    display: none;
    padding: 2px 0 6px 8px;
}

.sidebar-flyout:hover .sidebar-flyout-menu,
.sidebar-flyout:focus-within .sidebar-flyout-menu {
    display: block;
}

.sidebar-flyout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 28px;
    margin-bottom: 1px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-flyout-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.sidebar-flyout-link.active {
    background: rgba(var(--accent-rgb), 0.2);
    color: #fff;
}

.sidebar-flyout-link > i {
    font-size: 0.82rem;
    color: var(--accent-300);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-flyout-link:hover > i,
.sidebar-flyout-link.active > i {
    color: var(--accent-400);
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout-caret {
    display: none;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout-menu {
    display: none !important;
    padding: 6px;
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    min-width: 172px;
    background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 8px 16px 32px rgba(0, 0, 0, 0.4);
    z-index: 160;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout-menu::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout:hover .sidebar-flyout-menu,
.panel-wrapper.sidebar-is-collapsed .sidebar-flyout:focus-within .sidebar-flyout-menu {
    display: block !important;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout-link {
    padding: 8px 12px;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout {
    position: relative;
}

.panel-wrapper.sidebar-is-collapsed .sidebar-flyout-trigger.active {
    background: rgba(var(--accent-rgb), 0.22);
    border-radius: 10px;
}

.sidebar-user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}
.sidebar-user-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name {
    font-weight: 600;
    font-size: 13px;
    opacity: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sidebar-user-role {
    font-size: 11px;
    opacity: 0.72;
    line-height: 1.3;
    margin-top: 1px;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 12px 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.user-info { font-size: 11.5px; opacity: .85; }
.sidebar-footer .btn { font-size: 12px; padding: 5px 10px; }

.main-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 20px 24px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: var(--text-base);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.page-header h1 {
    font-size: var(--heading-page);
    margin: 0;
    font-weight: 700;
    color: var(--heading);
}
.page-header p,
.page-header .text-muted {
    font-size: var(--text-sm);
}

/* ===== KPI cards (dashboard) ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
    margin-bottom: 18px;
    align-items: stretch;
}
@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .kpi-grid { grid-template-columns: 1fr; }
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    min-height: 132px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.kpi-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
a.kpi-card-link:hover {
    border-color: rgba(var(--accent-rgb), .35);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.kpi-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    background: var(--accent-soft);
    color: var(--accent-600);
}
.kpi-icon.blue   { background: rgba(var(--accent-rgb), .12); color: var(--accent-600); }
.kpi-icon.green  { background: var(--success-soft); color: var(--success); }
.kpi-icon.amber  { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.violet { background: rgba(124, 92, 246, .12); color: #7c5cf6; }
.kpi-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.1;
}
.kpi-delta {
    margin-top: auto;
    padding-top: 10px;
    min-height: 22px;
    font-size: var(--text-xs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}
.kpi-delta.up { color: var(--success); font-weight: 600; }
.kpi-delta.down { color: var(--danger); font-weight: 600; }
.kpi-delta.flat { color: var(--text-muted); }

/* ===== Stat cards ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-500);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card.blue-accent { border-top-color: var(--navy-700); }
.stat-card .label { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 4px; }
.stat-card .value { font-size: 1.1rem; font-weight: 700; color: var(--heading); font-family: var(--font-display); }
.stat-card.orange .value { color: var(--accent-600); }
.stat-card.warning .value { color: var(--warning); }
.stat-card.success .value { color: var(--success); }

/* ===== Referral code box ===== */
.referral-box {
    background: linear-gradient(135deg, var(--slate-100) 0%, var(--accent-soft) 100%);
    border: 1.5px dashed var(--accent-500);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.referral-code {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--navy-800);
    font-family: var(--font-mono);
}

/* ===== Tabs ===== */
.nav-tabs-custom {
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.nav-tabs-custom a {
    padding: 8px 14px; text-decoration: none; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: var(--text-sm); font-weight: 500;
    transition: color .2s, border-color .2s;
}
.nav-tabs-custom a:hover { color: var(--slate-700); }
.nav-tabs-custom a.active {
    color: var(--accent-600); border-bottom-color: var(--accent-500); font-weight: 600;
}

/* ===== Online orders filter pills ===== */
.orders-filter-bar--list-only {
    justify-content: flex-end;
}
.online-manage-link {
    font-size: 12px;
    text-decoration: none;
}
.online-manage-link:hover {
    text-decoration: underline;
}
.online-order-manage-page .online-manage-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-500);
    text-decoration: none;
    margin-bottom: 8px;
}
.online-order-manage-page .online-manage-back:hover {
    color: var(--accent-600);
}
.online-manage-header {
    margin-bottom: 16px;
}
.online-manage-header-row {
    margin-top: 6px;
}
.online-manage-header-info {
    min-width: 0;
    flex: 1 1 240px;
}
.online-manage-header-subtitle {
    margin-bottom: 0;
}
.online-manage-header-right {
    flex: 0 1 auto;
    gap: 0;
}
.retailer-purchase-manage-page .online-manage-header-right {
    gap: 16px;
    align-items: center;
}
.retailer-purchase-manage-page .online-manage-total-block {
    margin-right: 0;
    padding-right: 16px;
}
.online-manage-total-block {
    min-width: 108px;
    border-color: var(--slate-200) !important;
}
.online-manage-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.online-manage-summary {
    text-align: right;
}
.online-manage-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin-top: 4px;
}
.online-manage-tabs {
    margin-bottom: 0;
}
.online-manage-tab--locked {
    opacity: 0.5;
    filter: blur(0.4px);
    cursor: not-allowed;
}
.online-manage-tab--locked:hover,
.online-manage-tab--locked.active,
.online-manage-tab--locked.is-active {
    opacity: 0.55;
}
.online-manage-products-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}
.online-manage-controls {
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}
.online-manage-controls .orders-filter-bar.online-manage-tabs {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.online-manage-controls .catalog-qc-pills.online-manage-accepted-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 12px 16px 12px 20px;
    background: var(--slate-50);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.online-manage-accepted-subtabs .catalog-qc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.online-manage-accepted-subtabs .products-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}
.online-manage-accepted-subtabs .catalog-qc-pill.active .products-filter-pill-count {
    background: rgba(255, 255, 255, 0.72);
}
.online-manage-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, var(--accent-soft) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-top: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: 0;
    box-shadow: none;
}
.online-manage-bulk-bar.online-manage-bulk-bar--label-only {
    justify-content: flex-end;
}
.online-manage-bulk-bar.online-manage-bulk-bar--label-only .online-manage-bulk-actions {
    margin-left: 0;
}
.online-manage-bulk-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.online-manage-bulk-count {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--heading);
}
.online-manage-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
.online-manage-bulk-actions .btn-primary {
    min-width: 9rem;
}
.online-manage-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.online-manage-invoice-btn--draft {
    border-color: #fcd34d;
    color: #b45309;
    background: #fffbeb;
}
.online-manage-invoice-btn--draft:hover {
    border-color: #f59e0b;
    color: #92400e;
    background: #fef3c7;
}
.online-manage-bulk-clear {
    color: var(--slate-600);
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
}
.online-manage-bulk-clear:hover {
    color: var(--heading);
}
.online-manage-bulk-hint {
    max-width: 420px;
    line-height: 1.35;
}
.retailer-accepted-bulk-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.retailer-bulk-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}
.retailer-bulk-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.retailer-bulk-field-label {
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1;
    white-space: nowrap;
}
.retailer-bulk-margin-input,
.retailer-bulk-amount-input {
    width: 5.5rem;
}
.retailer-accepted-publish-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, rgba(248, 250, 252, 0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.retailer-accepted-publish-bar .retailer-accepted-bulk-pricing {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}
.retailer-accepted-publish-bar .retailer-bulk-field--inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.retailer-accepted-publish-bar .retailer-bulk-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400);
}
.retailer-accepted-publish-bar .retailer-bulk-margin-input {
    min-height: 33px;
    height: 33px;
    border-radius: 10px;
    border-color: var(--border);
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}
.retailer-accepted-publish-bar .retailer-bulk-publish-btn {
    min-height: 33px;
    height: 33px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.22);
}
.retailer-channel-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.retailer-channel-badges--inline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.retailer-channel-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
.retailer-channel-edit-link:hover,
.retailer-channel-edit-link:focus-visible {
    color: var(--accent, #4f8ef7);
    text-decoration: underline;
    outline: none;
}
.retailer-channel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.retailer-channel-badge--success {
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.14) 0%, rgba(25, 135, 84, 0.08) 100%);
    border-color: rgba(25, 135, 84, 0.18);
    color: #157347;
}
.retailer-channel-badge--neutral {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.16) 0%, rgba(148, 163, 184, 0.08) 100%);
    border-color: rgba(100, 116, 139, 0.16);
    color: #64748b;
}
.retailer-col-channels,
.retailer-col-review-action {
    vertical-align: middle;
    text-align: center;
}
.retailer-col-channels {
    min-width: 8.5rem;
    width: 8.5rem;
}
.retailer-col-review-action {
    min-width: 6.5rem;
    width: 6.5rem;
}
.retailer-accepted-action-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.retailer-row-review-btn {
    min-height: 30px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}
.retailer-review-rated-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(25, 135, 84, 0.18);
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.12) 0%, rgba(25, 135, 84, 0.06) 100%);
    color: #157347;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.retailer-review-rated-badge:hover,
.retailer-review-rated-badge:focus-visible {
    background: rgba(25, 135, 84, 0.14);
    outline: none;
}
.retailer-review-prompt-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 16px 12px;
    padding: 0.7rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.95) 0%, rgba(254, 243, 199, 0.55) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.retailer-review-prompt-copy {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #92400e;
}
.retailer-review-prompt-icon {
    flex-shrink: 0;
    color: #03a685;
    font-size: 0.95rem;
    line-height: 1;
}
.retailer-review-prompt-banner .btn {
    flex-shrink: 0;
    min-height: 34px;
    height: 34px;
    border-radius: 999px;
    font-weight: 600;
    padding: 0 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* B2B review modal — aligned with B2C review sheet */
.b2b-review-dialog {
    max-width: min(580px, calc(100vw - 24px));
}
.b2b-review-modal-content {
    border: 1px solid #eef0f5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.22),
        0 2px 8px rgba(15, 23, 42, 0.06);
}
.b2b-review-modal-head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    padding: 1rem 1.15rem 0.35rem;
}
.b2b-review-modal-head-center {
    text-align: center;
}
.b2b-review-modal-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #282c3f;
}
.b2b-review-close {
    border: 0;
    background: none;
    font-size: 1.15rem;
    color: #535766;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
}
.b2b-review-close:hover,
.b2b-review-close:focus-visible {
    background: rgba(15, 23, 42, 0.05);
    outline: none;
}
.b2b-review-head-spacer { display: block; }
.b2b-review-stepper {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #696b79;
    margin-bottom: 0.2rem;
}
.b2b-review-earn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 1.25rem;
    background: linear-gradient(90deg, rgba(4, 80, 213, 0.1) 0%, #f4f7ff 100%);
    color: #282c3f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.b2b-review-earn .bi {
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: var(--seller-blue, #0450d5);
}
.b2b-review-earn strong {
    font-weight: 800;
    color: var(--seller-blue-dark, #0342b0);
}
.b2b-review-form {
    padding: 0.85rem 1.25rem 1.25rem;
}
.b2b-review-product {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.25rem 0;
}
.b2b-review-product img {
    width: 72px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    background: #f5f5f6;
    border: 1px solid #eef0f5;
}
.b2b-review-product strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #282c3f;
    line-height: 1.35;
}
.b2b-review-product > div > span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #696b79;
}
.b2b-review-purchased-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.b2b-review-purchased-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}
.b2b-review-size-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(100, 116, 139, 0.14);
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
}
.b2b-review-stars,
.b2b-live-stars {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 0 1rem calc(72px + 0.9rem);
}
.b2b-live-star {
    border: 0;
    background: none;
    padding: 0 1px;
    color: #c5c8ce;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.b2b-live-star i {
    display: block;
    line-height: 1;
}
.b2b-live-star.is-on {
    color: #03a685;
}
.b2b-review-form textarea {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font: inherit;
    resize: vertical;
    min-height: 130px;
    background: #fbfcfe;
}
.b2b-review-form textarea:focus {
    outline: none;
    border-color: var(--seller-blue, #0450d5);
    box-shadow: 0 0 0 3px rgba(4, 80, 213, 0.14);
    background: #fff;
}
.b2b-review-photos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0.45rem;
    flex-wrap: wrap;
}
.b2b-review-photo-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.b2b-review-photo-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eaeaec;
    background: #f8fafc;
}
.b2b-review-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.b2b-review-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
}
.b2b-review-photo-box {
    width: 72px;
    height: 72px;
    border: 2px dashed #282c3f;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #9aa0a6;
    font-size: 1.55rem;
    background: #fff;
}
.b2b-review-photo-box.d-none {
    display: none !important;
}
.b2b-review-photo-btn {
    position: relative;
    border: 0;
    background: #282c3f;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.b2b-review-photo-btn::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right-color: #282c3f;
}
.b2b-review-photo-hint {
    margin: 0 0 0.75rem;
    font-size: 11px;
    color: #878b94;
}
.b2b-review-error {
    color: #c62828;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 0.7rem;
}
.b2b-review-consent {
    margin: 0 0 0.95rem;
    font-size: 11px;
    line-height: 1.45;
    color: #878b94;
}
.b2b-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}
.b2b-review-skip,
.b2b-review-cancel {
    border: 0;
    background: transparent;
    color: #696b79;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.45rem 0.35rem;
    cursor: pointer;
}
.b2b-review-skip:hover,
.b2b-review-cancel:hover {
    color: #282c3f;
}
.b2b-review-submit {
    margin-left: auto;
    min-width: 10.5rem;
    border: 0;
    background: var(--seller-blue, #0450d5);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    cursor: pointer;
}
.b2b-review-submit:hover:not(:disabled) {
    background: var(--seller-blue-dark, #0342b0);
}
.b2b-review-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
@media (max-width: 575.98px) {
    .b2b-review-stars,
    .b2b-live-stars {
        margin-left: 0;
    }
    .b2b-review-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .b2b-review-submit {
        margin-left: 0;
        width: 100%;
    }
}
.retailer-purchase-manage-page .retailer-pricing-table tbody td {
    vertical-align: middle;
}
.retailer-purchase-manage-page .retailer-pricing-table thead th.retailer-col-channels,
.retailer-purchase-manage-page .retailer-pricing-table thead th.retailer-col-review-action {
    text-align: center;
}
.retailer-purchase-manage-page .retailer-pricing-table tbody td.retailer-col-channels,
.retailer-purchase-manage-page .retailer-pricing-table tbody td.retailer-col-review-action,
.retailer-purchase-manage-page .retailer-pricing-table tbody td.retailer-col-status {
    vertical-align: middle;
}
.retailer-row-publish-btn {
    padding: 2px 10px;
    min-height: 28px;
    height: 28px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
}
.retailer-channel-edit-link.retailer-row-publish-btn {
    padding: 0;
    min-height: 0;
    height: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.retailer-col-available-stock {
    min-width: 5.5rem;
    width: 5.5rem;
    text-align: center;
    vertical-align: middle;
}
.retailer-purchase-manage-page .retailer-pricing-table thead th.retailer-col-available-stock {
    text-align: center;
}
.retailer-available-stock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    color: var(--heading);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.retailer-available-stock--partial {
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.22);
}
.retailer-available-stock--empty {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
}
.online-manage-products-card .online-manage-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
    background: var(--surface);
}
.online-order-manage-page .online-manage-lines-table {
    margin-bottom: 0;
}
.online-order-manage-page .online-manage-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--surface);
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}
.online-order-manage-page .online-manage-lines-table tbody tr:first-child td {
    border-top: none;
}
.online-order-manage-page .online-manage-lines-table tbody tr:last-child td {
    border-bottom: none;
}
.online-order-manage-page .online-manage-lines-table thead th.online-manage-select-col {
    z-index: 5;
}
@media (max-width: 768px) {
    .online-manage-bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .online-manage-bulk-actions {
        margin-left: 0;
        justify-content: flex-start;
    }
    .retailer-accepted-publish-bar {
        justify-content: stretch;
    }
    .retailer-accepted-publish-bar .retailer-accepted-bulk-pricing {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}
.online-manage-select-col {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}
.online-manage-select-col .form-check-input,
.online-manage-select-all {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    margin: 0;
    float: none;
    cursor: pointer;
}
.online-order-manage-page .online-manage-lines-table thead th.online-manage-select-col .form-check-input {
    margin-top: 0;
}
.online-manage-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
}
.online-manage-lines-table .font-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.orders-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.orders-list-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 180px;
    padding: 0 0.85rem 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50, #f8fafc);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.orders-list-search-wrap:focus-within {
    background: #fff;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.orders-list-search-icon {
    flex-shrink: 0;
    color: var(--slate-400, #94a3b8);
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none;
}
.orders-list-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.orders-list-search-input:focus {
    background: transparent;
    box-shadow: none;
}
.orders-list-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 320px;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
}
.orders-status-filter-wrap {
    position: relative;
    flex: 0 0 auto;
}
.orders-status-filter {
    width: auto;
    min-width: 148px;
    max-width: 180px;
    flex: 0 0 auto;
    border-radius: 999px;
    border-color: var(--border);
    background: var(--slate-50, #f8fafc);
    font-size: 0.8125rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.orders-status-filter-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--slate-500, #64748b);
    font-size: 0.75rem;
    line-height: 1;
}
.orders-status-filter-wrap:has(.admin-custom-select) .orders-status-filter-chevron {
    display: none;
}
.orders-status-filter:focus {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.all-orders-table tr.online-order-row--new td {
    background-color: #e8f4fc;
}
.all-orders-table tr.online-order-row--new:hover td {
    background-color: #d9eefb;
}
.orders-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.orders-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--slate-700);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
button.orders-pill {
    appearance: none;
    -webkit-appearance: none;
}
.orders-pill:hover {
    color: var(--heading);
    background: var(--slate-100);
    border-color: var(--border-strong);
}
.orders-pill.active {
    color: #fff;
    background: var(--accent-600);
    border-color: var(--accent-600);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--accent-rgb), .35);
}
.orders-pill.active:hover {
    color: #fff;
    background: var(--accent-700);
    border-color: var(--accent-700);
}

/* ===== Upload Catalog ===== */
.catalog-upload-page {
    max-width: 100%;
}

/* Catalog upload — Orders-style richer hub (single-upload mode) */
.catalog-upload-richer.retailer-products-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.catalog-upload-richer-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}
.catalog-upload-richer-header h1 {
    margin: 0;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.catalog-upload-richer .retailer-products-tabs {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--rp-control-height);
    max-width: 100%;
}
.catalog-upload-richer .retailer-products-tab {
    height: calc(var(--rp-control-height) - (var(--rp-rail-pad) * 2));
    min-height: calc(var(--rp-control-height) - (var(--rp-rail-pad) * 2));
    white-space: nowrap;
}

/* Summary card under QC tabs — matches mock: filter + icon metrics */
.catalog-upload-summary-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 16px;
    background: var(--surface, #fff);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.catalog-upload-summary-filter {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 20px;
}
.catalog-upload-summary-filter-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--heading);
}
.catalog-upload-richer-filter-form {
    margin: 0;
}
.catalog-upload-summary-select-wrap {
    max-width: 280px;
    height: 38px;
}
.catalog-upload-summary-select-wrap .form-select {
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    background: var(--surface, #fff);
}
.catalog-upload-richer-stats {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.06);
}
.catalog-upload-richer-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 132px;
    padding: 16px 22px;
    text-align: left;
}
.catalog-upload-richer-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.15rem;
    line-height: 1;
}
.catalog-upload-richer-stat-icon--total {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-600, #356FE0);
}
.catalog-upload-richer-stat-icon--pass {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    border-radius: 999px;
}
.catalog-upload-richer-stat-icon--action {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
    border-radius: 999px;
}
.catalog-upload-richer-stat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.catalog-upload-richer-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--heading);
}
.catalog-upload-richer-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-500);
}
.catalog-upload-richer-stat--warn .catalog-upload-richer-stat-value {
    color: var(--heading);
}

/* Empty state — folder illustration + CTA */
.catalog-upload-empty-card.panel-card.retailer-products-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
}
.catalog-upload-richer-empty {
    padding: 56px 24px 64px;
}
.catalog-upload-empty-card .catalog-empty-state {
    border: none;
    margin: 0;
}
.catalog-upload-empty-illustration {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.catalog-upload-empty-folder {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 72px;
}
.catalog-upload-empty-folder > .bi-folder-fill {
    font-size: 4.25rem;
    line-height: 1;
    color: var(--accent-500, #4F8EF7);
    filter: drop-shadow(0 8px 16px rgba(53, 111, 224, 0.22));
}
.catalog-upload-empty-doc {
    position: absolute;
    top: 10px;
    right: 6px;
    font-size: 1.65rem;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
}
.catalog-upload-richer-empty-title {
    margin: 14px 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--heading);
}
.catalog-upload-richer-empty p {
    margin: 0 auto 18px;
    max-width: 28rem;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slate-500);
}
.catalog-upload-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
}
@media (max-width: 900px) {
    .catalog-upload-summary-card {
        flex-direction: column;
    }
    .catalog-upload-richer-stats {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        width: 100%;
        flex-wrap: wrap;
    }
    .catalog-upload-richer-stat {
        flex: 1 1 140px;
    }
}
@media (max-width: 768px) {
    .catalog-upload-richer .retailer-products-tabs {
        width: 100%;
    }
}
.catalog-upload-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.catalog-upload-top h1 {
    margin: 0;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.catalog-upload-help {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.catalog-help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-600);
    text-decoration: none;
}
.catalog-help-link:hover { color: var(--accent-700); text-decoration: underline; }
.catalog-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-700);
    background: #EEF2FF;
    border: 1px solid #C7D7FE;
    border-radius: 8px;
    text-decoration: none;
}
.catalog-help-btn:hover {
    background: #E0E7FF;
    color: var(--accent-700);
}
.catalog-upload-lead {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--slate-500);
}
.catalog-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.catalog-btn-primary {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}
.catalog-btn-outline {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border-width: 1.5px;
}
.catalog-section-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
}
.catalog-overview-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.catalog-overview-card {
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.catalog-overview-card:last-child { border-right: none; }
.catalog-overview-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.2;
}
.catalog-overview-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--slate-500);
}
.catalog-upload-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0;
}
.catalog-upload-tab {
    padding: 10px 2px 12px;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.catalog-upload-tab:hover {
    color: var(--heading);
    text-decoration: none;
}
.catalog-upload-tab.active {
    color: var(--accent-600);
    border-bottom-color: var(--accent-600);
    font-weight: 700;
}
.catalog-upload-tab[aria-selected="true"] {
    color: var(--accent-600);
    border-bottom-color: var(--accent-600);
}
.catalog-qc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 12px;
}
.catalog-qc-pill {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.catalog-qc-pill:hover {
    color: var(--heading);
    border-color: var(--border-strong);
    text-decoration: none;
}
.catalog-qc-pill.active,
.catalog-qc-pill[aria-current="page"] {
    color: var(--accent-600);
    border-color: var(--accent-500);
    background: var(--accent-soft);
    box-shadow: none;
    font-weight: 700;
}
.catalog-qc-pill.active:hover,
.catalog-qc-pill[aria-current="page"]:hover {
    color: var(--accent-700);
    border-color: var(--accent-600);
}
.catalog-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.catalog-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.catalog-filter-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-600);
    white-space: nowrap;
}
.catalog-filter-select {
    min-width: 180px;
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 8px;
}
.catalog-search-form { flex: 1; max-width: 280px; }
.catalog-search-wrap {
    position: relative;
}
.catalog-search-wrap input {
    padding-right: 36px !important;
    font-size: 12.5px;
    border-radius: 8px;
}
.catalog-search-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.catalog-qc-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #FEF9C3;
    border: 1px solid #FDE047;
    border-radius: 8px;
    font-size: 12.5px;
    color: #854D0E;
    line-height: 1.45;
}
.catalog-qc-banner i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.catalog-upload-card {
    padding: 4px 0 0;
    overflow: hidden;
}
.catalog-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.catalog-product-cell img {
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.catalog-serial-col {
    width: 64px;
    text-align: center;
    white-space: nowrap;
}
.catalog-serial-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--accent-600);
}
.catalog-qc-toast-host {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 1080;
    max-width: 360px;
}
.catalog-qc-toast-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}
.catalog-qc-toast-text {
    font-size: 13px;
}
.catalog-qc-toast {
    margin: 0;
    font-size: 13px;
}
.catalog-qc-issue-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.catalog-qc-issue-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 4px;
}
.catalog-qc-issues-cell {
    max-width: 360px;
    vertical-align: top;
}
.catalog-qc-issues-list {
    margin: 0;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--slate-700);
    line-height: 1.45;
}
.catalog-qc-issues-list li + li {
    margin-top: 4px;
}
.catalog-qc-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.catalog-qc-badge-pass {
    background: #DCFCE7;
    color: #15803D;
}
.catalog-qc-badge-error {
    background: #FEE2E2;
    color: #B91C1C;
}
.catalog-qc-badge-progress {
    background: #DBEAFE;
    color: #1D4ED8;
}
.catalog-qc-badge-incomplete {
    background: #f3f4f6;
    color: #374151;
}
.catalog-qc-badge-action {
    background: #FFEDD5;
    color: #C2410C;
}
.catalog-empty-state {
    text-align: center;
    padding: 48px 24px 56px;
    color: var(--slate-500);
    font-size: 12.5px;
}
.catalog-empty-art {
    position: relative;
    width: 120px;
    height: 100px;
    margin: 0 auto 20px;
    color: var(--slate-300);
}
.catalog-empty-art > .bi-phone {
    font-size: 4rem;
}
.catalog-empty-search {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 2rem;
    color: var(--slate-400);
}
@media (max-width: 768px) {
    .catalog-overview-row { grid-template-columns: 1fr; }
    .catalog-overview-card {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .catalog-overview-card:last-child { border-bottom: none; }
    .catalog-upload-top { flex-direction: column; }
}

/* ===== Add single product (category wizard) ===== */
.single-product-page {
    max-width: 100%;
}
.single-product-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.single-product-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.single-product-title-row h1 {
    margin: 0;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.single-product-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--slate-600);
    text-decoration: none;
}
.single-product-back:hover {
    border-color: var(--accent-500);
    color: var(--accent-600);
}
.single-product-steps {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    padding-bottom: 0;
}
.single-product-tabs-row {
    margin-bottom: 16px;
}
.single-product-tabs-row .retailer-products-tabs {
    max-width: 100%;
}
.single-product-page .retailer-products-tab.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.single-product-page .retailer-products-tab.is-done {
    color: var(--success, #15803d);
}
.single-product-page .retailer-products-tab.is-done .bi {
    margin-right: 4px;
}
.single-product-page .retailer-products-tab {
    cursor: default;
}
.single-product-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.single-product-step.active {
    color: var(--accent-600);
    border-bottom-color: var(--accent-500);
}
.single-product-step.done {
    color: var(--success);
}
.single-product-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    background: var(--slate-100);
    color: var(--slate-600);
}
.single-product-step.active .single-product-step-num {
    background: var(--accent-soft);
    color: var(--accent-700);
}
.single-product-step.done .single-product-step-num {
    background: var(--success-soft);
    color: var(--success);
}
.single-product-card .card-body {
    padding: 20px;
}
.single-product-search-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 6px;
}
.single-product-search {
    max-width: 100%;
    margin-bottom: 8px;
}
.single-product-search-results {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 14px;
}
.single-product-search-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.single-product-search-item:last-child { border-bottom: none; }
.single-product-search-item:hover {
    background: var(--accent-soft);
}
.single-product-search-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--heading);
}
.single-product-search-path {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.single-product-search-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.single-product-picker {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 260px);
    gap: 16px;
    margin-top: 8px;
}
.single-product-columns {
    display: flex;
    gap: 0;
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow-x: auto;
}
.single-product-columns.is-locked {
    pointer-events: none;
}
.single-product-columns.is-locked .single-product-category-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.single-product-page--list-online .single-product-search input:disabled {
    background: var(--surface-2);
    cursor: not-allowed;
    opacity: 0.85;
}
.catalog-qc-badge-offline {
    background: #E5E7EB;
    color: #374151;
}
.single-product-column {
    flex: 0 0 180px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 160px;
}
.single-product-column:last-child { border-right: none; }
.single-product-column-list {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}
.single-product-category-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
}
.single-product-category-item:hover {
    background: var(--slate-100);
}
.single-product-category-item.active {
    background: var(--accent-500);
    color: #fff;
    font-weight: 600;
}
.single-product-summary {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.single-product-summary-label {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 8px;
    font-weight: 600;
}
.single-product-breadcrumb {
    font-size: 12.5px;
    line-height: 1.45;
    min-height: 2.5em;
}
.single-product-guide {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}
.single-product-guide i {
    font-size: 1.25rem;
    color: var(--accent-500);
    display: block;
    margin-bottom: 6px;
}
.single-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.single-product-footer--sticky {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: 24px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding: 14px 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
}
.single-product-main-image-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--accent-soft, rgba(79, 142, 247, 0.12));
    border: 1px solid rgba(53, 111, 224, 0.18);
    color: var(--slate-700);
    text-align: left;
}
.photo-guidelines-main-note {
    margin-bottom: 18px;
}
.photo-guidelines-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.single-product-main-image-note > .bi {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.05rem;
    color: var(--accent-600);
}
.single-product-main-image-note strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
    color: var(--heading);
}
.single-product-main-image-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--slate-600);
}
.single-product-image-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.single-product-breadcrumb-active {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}
.single-product-preview-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--surface-2, #f8fafc);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    overflow: hidden;
}
.single-product-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 176px;
    color: var(--slate-400);
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
}
.single-product-preview-empty > .bi {
    font-size: 2rem;
    line-height: 1;
    opacity: 0.85;
}
.single-product-preview-stage .single-product-image-previews {
    margin-bottom: 0;
    max-height: 320px;
    overflow-y: auto;
}
.single-product-preview-stage .single-product-image-card {
    background: var(--surface, #fff);
}
.single-product-thumb--stage {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 220px;
}
.single-product-thumb--stage img {
    object-fit: contain;
    background: #fff;
}
.single-product-fit-guide {
    display: none;
}
.single-product-fit-svg {
    width: 100px;
    height: auto;
}
.single-product-image-hint {
    font-size: 12px;
    color: var(--slate-600);
    text-align: center;
    margin: 0 0 12px;
}
.single-product-upload-btn {
    width: 100%;
    font-weight: 600;
}
.single-product-image-previews {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.single-product-image-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: var(--surface-2, #f8fafc);
}
.single-product-image-card-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0.01em;
}
.single-product-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.single-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-product-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.single-product-guidelines {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--slate-700);
}
.single-product-guidelines > i {
    color: var(--warning);
    font-size: 1rem;
}
.single-product-guidelines > span {
    flex: 1 1 auto;
    min-width: 0;
}
.single-product-guidelines-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--warning);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.single-product-guidelines-btn:hover,
.single-product-guidelines-btn:focus-visible {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    outline: none;
}
.single-product-guidelines-btn i {
    font-size: 0.95rem;
}
.single-product-idle-hint {
    margin-top: 8px;
}

/* ---- Photo Guidelines Modal (catalog upload) ---- */
.photo-guidelines-modal .modal-dialog {
    max-width: 780px;
}
.photo-guidelines-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}
.photo-guidelines-header {
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0));
}
.photo-guidelines-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.photo-guidelines-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.photo-guidelines-header .modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--slate-900);
    margin: 0;
}
.photo-guidelines-subtitle {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--slate-500);
    line-height: 1.5;
}
.photo-guidelines-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #fff;
}
.photo-guidelines-section-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-700);
    margin: 0 0 12px;
}
.photo-guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.photo-guidelines-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.photo-guidelines-rule-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.photo-guidelines-rule-title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-900);
}
.photo-guidelines-rule-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate-600);
}
.photo-guidelines-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.photo-guidelines-column {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
}
.photo-guidelines-column--do {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.28);
}
.photo-guidelines-column--do .photo-guidelines-section-title {
    color: #047857;
}
.photo-guidelines-column--do .photo-guidelines-section-title i {
    color: #059669;
}
.photo-guidelines-column--avoid {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.28);
}
.photo-guidelines-column--avoid .photo-guidelines-section-title {
    color: #b91c1c;
}
.photo-guidelines-column--avoid .photo-guidelines-section-title i {
    color: #dc2626;
}
.photo-guidelines-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--slate-700);
    line-height: 1.5;
}
.photo-guidelines-list li {
    position: relative;
    padding-left: 20px;
}
.photo-guidelines-list li::before {
    position: absolute;
    left: 0;
    top: 1px;
    font-family: "bootstrap-icons";
    font-size: 0.9rem;
    line-height: 1.4;
}
.photo-guidelines-column--do .photo-guidelines-list li::before {
    content: "\F26A";
    color: #059669;
}
.photo-guidelines-column--avoid .photo-guidelines-list li::before {
    content: "\F62A";
    color: #dc2626;
}
.photo-guidelines-styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.photo-guidelines-style-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.photo-guidelines-style-tag {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}
.photo-guidelines-style-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-900);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.photo-guidelines-style-title i {
    color: #2563eb;
}
.photo-guidelines-style-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate-600);
}
.photo-guidelines-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.22);
    color: var(--slate-700);
    font-size: 12.5px;
    line-height: 1.5;
}
.photo-guidelines-note i {
    color: #1d4ed8;
    font-size: 1.05rem;
    margin-top: 2px;
}
.photo-guidelines-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--border);
    background: #fff;
}
@media (max-width: 575.98px) {
    .single-product-guidelines {
        flex-wrap: wrap;
    }
    .single-product-guidelines-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .photo-guidelines-header {
        padding: 16px 18px 14px;
    }
    .photo-guidelines-body {
        padding: 16px 18px;
    }
    .photo-guidelines-footer {
        padding: 12px 18px 16px;
    }
}
.single-product-category-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--accent-500);
}
.single-product-category-item {
    position: relative;
}
.single-product-selected-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}
@media (max-width: 900px) {
    .single-product-picker {
        grid-template-columns: 1fr;
    }
    .single-product-top {
        flex-direction: column;
    }
}

/* ===== Catalog multi-product details (step 2) ===== */
.catalog-details-page {
    padding-bottom: 96px;
}

.catalog-details-page--booting {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.catalog-details-page--ready {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.catalog-details-page .panel-card {
    overflow: visible;
}
.catalog-details-page .catalog-details-main,
.catalog-details-page .catalog-image-views-card {
    box-shadow: var(--shadow-sm);
}
.catalog-details-page .single-product-steps {
    margin-bottom: 18px;
}
.catalog-details-category {
    font-size: 12.5px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.catalog-hsn-field-wrap .catalog-product-search-select {
    width: 100%;
}

.catalog-hsn-finder-btn {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent-600, #4f46e5);
    text-decoration: none;
}

.catalog-hsn-finder-btn:hover,
.catalog-hsn-finder-btn:focus {
    color: var(--accent-700, #4338ca);
    text-decoration: none;
}

.catalog-hsn-picker-modal .modal-header {
    padding: 1.25rem 1.25rem 0;
}

.catalog-hsn-picker-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: min(52vh, 420px);
    overflow: auto;
}

.catalog-hsn-picker-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--slate-50, #f8fafc);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border);
}

.catalog-hsn-picker-table tbody td {
    font-size: 13px;
    vertical-align: top;
}

.catalog-hsn-picker-code {
    font-weight: 600;
    white-space: nowrap;
    color: var(--slate-800);
}

.catalog-hsn-picker-desc {
    color: var(--slate-600);
    line-height: 1.45;
}

.catalog-hsn-picker-select {
    font-weight: 500;
    color: var(--accent-600, #4f46e5);
    text-decoration: none;
}

.catalog-hsn-picker-select:hover {
    color: var(--accent-700, #4338ca);
}

.catalog-product-strip-wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
    border-top: 2px solid var(--accent-500);
    padding-top: 12px;
}
.catalog-strip-nav {
    flex: 0 0 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--slate-600);
}
.catalog-product-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex: 1;
    padding: 4px 2px;
    scroll-behavior: smooth;
}
.catalog-product-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 12px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    min-width: 150px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.catalog-product-tab.active {
    background: var(--accent-soft);
    border-bottom-color: var(--accent-500);
}
.catalog-product-tab.active .catalog-product-tab-label {
    color: var(--accent-700);
}
.catalog-product-tab-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.catalog-product-tab-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog-product-tab-thumb--empty {
    background: linear-gradient(135deg, var(--slate-100) 0%, var(--slate-200) 100%);
    filter: blur(0);
}
.catalog-product-tab-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
}
.catalog-add-product-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 88px;
    padding: 8px 12px;
    border: 1px dashed var(--accent-400);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-700);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.catalog-add-product-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.catalog-details-layout {
    align-items: flex-start;
}
.catalog-details-main-body {
    padding: 20px 24px 24px;
}

.catalog-details-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.catalog-copy-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
}

.catalog-copy-all .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.catalog-copy-all .form-check-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--slate-700);
    line-height: 1.3;
}

.catalog-delete-product-btn {
    padding: 0 !important;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.catalog-details-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.catalog-details-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.catalog-details-fields {
    --bs-gutter-y: 1.125rem;
    --bs-gutter-x: 1.125rem;
    overflow: visible;
}

.catalog-details-fields .form-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--slate-700);
}

.catalog-details-fields .form-control,
.catalog-details-fields .form-select,
.catalog-details-fields .catalog-size-toggle {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 38px;
}

.catalog-details-fields > [class*="col-"] {
    margin-bottom: 4px;
    overflow: visible;
}

.catalog-details-attributes {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.catalog-details-attributes hr {
    display: none;
}

.catalog-details-attributes h6.catalog-field-group-label {
    font-size: 11px;
    margin: 0 0 10px;
}

.catalog-details-attributes h6.catalog-field-group-label:not(:first-child) {
    margin-top: 16px;
}

.catalog-details-attributes .row.g-2,
.catalog-details-attributes .row.g-3,
.catalog-details-attributes .row.g-4 {
    --bs-gutter-y: 1.125rem;
    --bs-gutter-x: 1.125rem;
}

.catalog-details-attributes .form-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.catalog-details-attributes .form-control,
.catalog-details-attributes .form-select {
    min-height: 38px;
    font-size: 13px;
    padding: 8px 12px;
}

.catalog-details-attributes .col-md-6 {
    margin-bottom: 2px;
}

.catalog-details-attributes + .catalog-details-divider {
    margin-top: 28px;
}

.catalog-details-divider + .catalog-details-other-attributes {
    margin-top: 12px;
}

.catalog-details-other-attributes {
    margin-top: 4px;
    margin-bottom: 8px;
}

.catalog-details-other-attributes .form-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--slate-700);
}

.catalog-details-other-attributes .form-control,
.catalog-details-other-attributes .form-select {
    min-height: 38px;
    font-size: 13px;
    padding: 8px 12px;
}

.catalog-description-field {
    position: relative;
}

.catalog-description-field .catalog-description-input {
    min-height: 96px;
    resize: vertical;
}

.catalog-description-counter {
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.catalog-field-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 10px;
}
.catalog-details-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}
.catalog-guidelines-card {
    margin-top: 0;
}
.catalog-guidelines-compact {
    padding: 10px 12px;
    font-size: 11.5px;
    align-items: flex-start;
    gap: 10px;
}
.catalog-guidelines-compact strong {
    font-size: 12px;
}
.catalog-guidelines-compact p {
    font-size: 11px;
    line-height: 1.4;
}
.catalog-image-views-card .card-body {
    padding: 16px;
}

/* Image upload — Front/Rear portrait on top, Other Images below */
.catalog-image-upload-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.catalog-image-primary-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.catalog-image-primary-label,
.catalog-image-other-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 6px;
}

.catalog-image-primary-box {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1.5px dashed #c5d4e8;
    border-radius: 8px;
    background: #fafbfd;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.catalog-image-primary-box:hover,
.catalog-image-primary-box:focus-within {
    border-color: var(--accent-500);
    background: var(--accent-soft);
}

.catalog-image-primary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 12px 10px;
    color: var(--accent-600);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    pointer-events: none;
}

.catalog-image-primary-empty i {
    font-size: 18px;
}

.catalog-image-primary-box.has-image {
    aspect-ratio: 3 / 4;
}

.catalog-image-primary-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-image-primary-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.catalog-image-other-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.catalog-image-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 120px;
    padding: 14px 12px;
    border: 1.5px dashed #c5d4e8;
    border-radius: 8px;
    background: #fafbfd;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.catalog-image-dropzone.is-dragover {
    border-color: var(--accent-500);
    background: var(--accent-soft);
}

.catalog-image-dropzone.is-full {
    justify-content: flex-start;
    min-height: auto;
}

.catalog-image-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 10px 8px;
    pointer-events: none;
}

.catalog-image-dropzone-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.catalog-image-dropzone-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
}

.catalog-image-dropzone-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 200px;
}

.catalog-image-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.catalog-image-other-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
}

.catalog-image-other-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.catalog-image-other-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catalog-image-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    padding: 0;
}

.catalog-image-remove:hover {
    background: rgba(220, 38, 38, 0.9);
}
.catalog-details-footer {
    position: fixed;
    left: var(--sidebar-width, 240px);
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
}
.catalog-details-footer-actions {
    display: flex;
    gap: 10px;
}
.catalog-size-dropdown {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.catalog-size-dropdown .catalog-size-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--slate-700);
    cursor: pointer;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.catalog-size-dropdown .catalog-size-toggle-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-size-dropdown .catalog-size-toggle-label.is-placeholder {
    color: var(--text-muted, #94a3b8);
}

.catalog-size-dropdown .catalog-size-toggle-chevron {
    flex-shrink: 0;
    color: var(--slate-500);
    font-size: 12px;
    transition: transform .15s ease, color .15s ease;
}

.catalog-size-dropdown .catalog-size-toggle:hover,
.catalog-size-dropdown .catalog-size-toggle:focus,
.catalog-size-dropdown .catalog-size-toggle:active,
.catalog-size-dropdown .catalog-size-toggle:focus-visible {
    background: #fff;
    border-color: var(--accent-400);
    color: var(--slate-700);
    box-shadow: none;
    outline: none;
}

.catalog-size-dropdown.show .catalog-size-toggle,
.catalog-size-dropdown .catalog-size-toggle[aria-expanded="true"] {
    background: #fff;
    border-color: var(--accent-500);
    color: var(--slate-700);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.catalog-size-dropdown.show .catalog-size-toggle-chevron,
.catalog-size-dropdown .catalog-size-toggle[aria-expanded="true"] .catalog-size-toggle-chevron {
    transform: rotate(180deg);
    color: var(--accent-600);
}

.catalog-size-menu {
    --bs-dropdown-min-width: 0;
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 8px;
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: auto;
    min-width: 0 !important;
    max-width: none;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    margin: 0 !important;
    z-index: 1100;
    border: 1px solid var(--accent-300);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.16);
    background: #fff;
    transform: none !important;
}

.catalog-size-dropdown:not(.dropup) > .catalog-size-menu {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
}

.catalog-size-dropdown.dropup > .catalog-size-menu {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}

.catalog-size-dropdown .dropdown-menu.show {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.catalog-size-menu--paired {
    min-width: 280px !important;
}

.catalog-size-menu--paired > li:nth-child(odd) .catalog-size-option {
    border-right: 1px solid var(--slate-100);
}

.catalog-size-menu > li {
    min-width: 0;
}

.catalog-size-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
    color: var(--slate-700);
    width: 100%;
    min-width: 0;
}
.catalog-size-option:hover {
    background: var(--accent-soft);
    color: var(--accent-700);
}
.catalog-size-option input {
    margin: 0;
    flex-shrink: 0;
}
.catalog-details-main input[readonly] {
    background: var(--surface-2);
    cursor: default;
}

.catalog-size-variant-section {
    margin-top: 16px;
    padding-top: 16px;
    clear: both;
    border-top: 1px solid var(--border, #e5e7eb);
}

.catalog-size-variant-section .form-check-label {
    font-size: 12px;
}

.catalog-copy-price-check {
    margin-bottom: 8px;
}

.catalog-size-variant-table-wrap {
    max-height: 260px;
}

.catalog-size-variant-table-wrap {
    max-height: 320px;
    overflow: auto;
}

.catalog-size-variant-table th,
.catalog-size-variant-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.catalog-size-variant-table input.form-control-sm,
.catalog-size-variant-table select.form-select-sm {
    min-width: 88px;
}

.catalog-size-variant-table .catalog-variant-measurement-select {
    min-width: 110px;
}

.catalog-size-variant-table .catalog-variant-measurement-select .catalog-product-search-select {
    width: 100%;
}

.catalog-size-variant-table .catalog-variant-measurement-select .catalog-search-select-trigger {
    min-height: 31px;
    padding: 4px 8px;
    font-size: 12px;
}

.catalog-size-variant-table .catalog-variant-measurement-select .catalog-search-select-value {
    font-size: 12px;
}

.catalog-size-variant-table .catalog-variant-measurement-select .catalog-search-select-chevron {
    font-size: 11px;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-cell {
    min-width: 118px;
    white-space: normal;
    overflow: visible;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-cell--gst {
    min-width: 100px;
    width: 100px;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-cell--hsn {
    min-width: 148px;
    width: 148px;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-select .catalog-product-search-select {
    width: 100%;
    min-width: 0;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-select .catalog-search-select-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    align-items: center;
    column-gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: 31px;
    padding: 4px 8px;
    font-size: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-select .catalog-search-select-value {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0;
    font-size: 12px;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-tax-select .catalog-search-select-chevron {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    flex: none;
}

.retailer-pos-create-page .catalog-size-variant-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-th-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    line-height: 1.25;
    vertical-align: middle;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-th-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-th-req {
    margin-left: 1px;
    line-height: 1;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-col-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: 0;
    transform: none;
}

.retailer-pos-create-page .catalog-size-variant-table .catalog-variant-col-tip .bi {
    display: block;
    line-height: 1;
}

/* Retailer POS edit: only pricing fields stay editable */
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-price-edit-locked {
    filter: blur(0.35px);
    opacity: 0.88;
    pointer-events: none !important;
    user-select: none;
}
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-price-edit-locked input,
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-price-edit-locked button,
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-price-edit-locked select,
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-price-edit-locked .catalog-search-select-trigger {
    pointer-events: none !important;
}
.retailer-pos-create-page.catalog-details-page--price-edit #sizeVariantTable td:not(.catalog-price-edit-locked) {
    position: relative;
    z-index: 1;
}
.retailer-pos-create-page.catalog-details-page--price-edit .catalog-copy-price-check {
    position: relative;
    z-index: 1;
}

.retailer-pos-create-page .catalog-size-variant-table .variant-incl-gst-input {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    pointer-events: auto;
}

.retailer-variant-field-tooltip .tooltip-inner {
    max-width: 280px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    background: #111111;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.retailer-variant-field-tooltip .tooltip-arrow::before {
    border-top-color: #111111;
}

.retailer-variant-field-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.retailer-variant-field-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #111111;
}

.catalog-search-select {
    position: relative;
}

/* Legacy admin cascade + old filter-style selects */
.category-cascade-select .catalog-search-select-filter + .catalog-search-select-list,
.catalog-search-select:not(.catalog-product-search-select) .catalog-search-select-list {
    display: none;
    position: absolute;
    z-index: 1100;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.catalog-search-select:not(.catalog-product-search-select) .catalog-search-select-list.open {
    display: block;
}

.catalog-search-select:not(.catalog-product-search-select) .catalog-search-select-item {
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
}

.catalog-search-select:not(.catalog-product-search-select) .catalog-search-select-item:hover,
.catalog-search-select:not(.catalog-product-search-select) .catalog-search-select-item.active {
    background: var(--accent-soft);
    color: var(--accent-700);
}

/* Seller product details — compact searchable dropdown */
.catalog-product-search-select .catalog-search-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--slate-700);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.catalog-product-search-select .catalog-search-select-trigger:hover {
    border-color: var(--accent-400);
}

.catalog-product-search-select.is-open .catalog-search-select-trigger {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.catalog-product-search-select.catalog-search-select--locked .catalog-search-select-trigger {
    background: var(--surface-2);
    color: var(--slate-700);
    cursor: not-allowed;
    opacity: 0.92;
}

.catalog-product-search-select.catalog-search-select--locked .catalog-search-select-trigger:hover {
    border-color: var(--border);
    box-shadow: none;
}

.catalog-attr-locked .form-control[readonly] {
    background: var(--surface-2);
    cursor: not-allowed;
}

.catalog-product-search-select .catalog-search-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-product-search-select .catalog-search-select-value.is-placeholder {
    color: var(--text-muted, #94a3b8);
}

.catalog-product-search-select .catalog-search-select-chevron {
    flex-shrink: 0;
    color: var(--slate-500);
    font-size: 12px;
    transition: transform .15s ease, color .15s ease;
}

.catalog-product-search-select.is-open .catalog-search-select-chevron {
    transform: rotate(180deg);
    color: var(--accent-600);
}

.catalog-product-search-select .catalog-search-select-panel {
    display: none;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--accent-300);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.16);
}

.catalog-product-search-select.is-open .catalog-search-select-panel,
.catalog-product-search-select .catalog-search-select-panel.is-fixed {
    display: flex;
    flex-direction: column;
}

.catalog-product-search-select .catalog-search-select-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: #f8fbff;
    flex-shrink: 0;
}

.catalog-product-search-select .catalog-search-select-search .bi-search {
    color: var(--accent-500);
    font-size: 14px;
}

.catalog-product-search-select .catalog-search-select-query {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 13px;
    outline: none;
    color: var(--slate-700);
}

.catalog-product-search-select .catalog-search-select-query::placeholder {
    color: var(--text-muted, #94a3b8);
    font-size: 10px;
}

.catalog-product-search-select .catalog-search-select-list {
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.catalog-product-search-select .catalog-search-select-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--slate-700);
}

.catalog-product-search-select .catalog-search-select-item:hover,
.catalog-product-search-select .catalog-search-select-item.active {
    background: var(--accent-soft);
    color: var(--accent-700);
}

.catalog-product-search-select .catalog-search-select-item.active {
    font-weight: 600;
}

.catalog-product-search-select .catalog-search-select-item--rich {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    line-height: 1.25;
}

.catalog-product-search-select .catalog-search-select-item-code {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.catalog-product-search-select .catalog-search-select-item-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #6c757d);
    font-weight: 400;
    white-space: normal;
}

.catalog-hsn-selected-desc {
    margin-top: 0.25rem;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .catalog-details-footer {
        left: 0;
        flex-wrap: wrap;
    }
    .catalog-details-aside {
        position: static;
    }
    .catalog-image-primary-col {
        grid-template-columns: 1fr 1fr;
    }
    .catalog-image-other-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .catalog-image-dropzone {
        min-height: 110px;
    }
    .catalog-details-main-body {
        padding: 18px 16px 20px;
    }
}

/* ===== All orders page ===== */
.all-orders-page {
    max-width: 100%;
}
.all-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.all-orders-header h1 {
    margin: 0 0 4px;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.all-orders-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--slate-500);
}
.all-orders-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.all-orders-type-filter {
    flex-shrink: 0;
}

/* ===== Order date range filter ===== */
.order-date-filter {
    position: relative;
    flex-shrink: 0;
}
.order-date-filter-form {
    margin: 0;
}
.order-date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--heading);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    white-space: nowrap;
    overflow: visible;
    height: auto;
    min-height: 36px;
    box-sizing: border-box;
}
.order-date-trigger:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.order-date-trigger-chevron {
    font-size: 11px;
    color: var(--slate-500);
}
.order-date-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: min(300px, calc(100vw - 24px));
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.order-date-dropdown--calendar {
    width: min(300px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    max-height: min(72vh, 540px);
    overflow: hidden;
    padding-bottom: 0;
}
.order-date-dropdown-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.order-date-calendars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 6px;
}
.order-date-cal-title {
    display: none; /* month/year already shown in selects */
}
.order-date-cal-nav {
    margin-bottom: 6px;
}
.order-date-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 4px;
}
.order-date-pill {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50, #f8fafc);
    color: var(--heading);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.order-date-pill:hover {
    background: var(--slate-100);
    border-color: var(--border-strong, #cbd5e1);
}
.order-date-pill.active {
    background: var(--accent-soft);
    border-color: rgba(var(--accent-rgb), .35);
    color: var(--accent-700);
}
.order-date-day.is-today:not(.is-selected) {
    box-shadow: inset 0 -2px 0 var(--accent-600);
}
.order-date-apply-btn {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    border-color: var(--accent-600);
    color: #fff;
    min-width: 72px;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .25);
}
.order-date-apply-btn:hover,
.order-date-apply-btn:focus {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
    border-color: var(--accent-700);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .35);
}
/* Compact mobile/tablet date picker — must beat later left/right overrides */
@media (max-width: 767.98px) {
    .order-date-calendars {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 8px !important;
    }

    .order-date-cal[data-offset="1"] {
        display: none !important;
    }

    .order-date-cal-title {
        display: none !important; /* month/year already in selects */
    }

    .order-date-filter .order-date-dropdown,
    .order-date-filter .order-date-dropdown--calendar,
    .admin-finance-payout-date-filter .order-date-dropdown,
    .admin-finance-ledger-date-filter .order-date-dropdown,
    .admin-finance-txn-date-filter .order-date-dropdown,
    .admin-finance-credit-due-date-filter .order-date-dropdown,
    .admin-orders-header-actions .order-date-dropdown {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%);
        width: min(300px, calc(100vw - 20px)) !important;
        max-width: min(300px, calc(100vw - 20px)) !important;
        max-height: min(76dvh, 420px) !important;
        flex-direction: column;
        gap: 0;
        z-index: 1200 !important;
        padding: 8px 8px 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 48px rgba(15, 10, 30, 0.32) !important;
        overflow: hidden !important;
        display: flex !important;
    }

    .order-date-dropdown-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order-date-filter .order-date-dropdown:not([hidden]),
    .order-date-filter .order-date-dropdown--calendar:not([hidden]),
    .admin-finance-payout-date-filter .order-date-dropdown:not([hidden]),
    .admin-finance-ledger-date-filter .order-date-dropdown:not([hidden]),
    .admin-finance-txn-date-filter .order-date-dropdown:not([hidden]),
    .admin-finance-credit-due-date-filter .order-date-dropdown:not([hidden]),
    .admin-orders-header-actions .order-date-dropdown:not([hidden]) {
        display: flex !important;
        pointer-events: auto !important;
    }

    .order-date-filter .order-date-dropdown:not([hidden]) .order-date-day {
        pointer-events: auto !important;
        z-index: 2;
    }

    .order-date-filter .order-date-dropdown[hidden],
    .order-date-filter .order-date-dropdown--calendar[hidden] {
        display: none !important;
        transform: none;
    }

    .order-date-cal-nav {
        flex-shrink: 0;
        gap: 4px;
        margin-bottom: 6px !important;
    }

    .order-date-cal-nav .form-select,
    .order-date-month-select,
    .order-date-year-select {
        font-size: 12px;
        padding-top: 4px;
        padding-bottom: 4px;
        min-height: 32px;
    }

    .order-date-nav-btn {
        width: 30px;
        height: 30px;
    }

    .order-date-weekdays {
        font-size: 10px;
        margin-bottom: 2px;
        gap: 0;
    }

    .order-date-grid {
        gap: 1px;
    }

    .order-date-day {
        aspect-ratio: auto !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 10.5px;
        border-radius: 7px;
    }

    .order-date-inputs {
        flex-shrink: 0;
        gap: 5px;
        margin: 0 0 12px !important;
    }

    .order-date-display {
        padding: 4px 7px !important;
        font-size: 10.5px !important;
        gap: 0;
    }

    .order-date-display-kicker {
        font-size: 9px;
    }

    .order-date-quick-pills {
        flex-shrink: 0;
        flex-wrap: wrap !important;
        gap: 8px;
        margin: 6px 0 4px;
        overflow: visible;
        padding-bottom: 0;
    }

    .order-date-pill {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 7px 12px;
        white-space: nowrap;
    }

    .order-date-actions {
        flex-shrink: 0;
        margin-top: 6px !important;
        padding-top: 8px !important;
        background: var(--surface, #fff);
    }
}
.order-date-quick-ranges {
    display: grid;
    gap: 6px;
}
.order-date-quick-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--heading);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.order-date-quick-option:hover {
    background: var(--slate-50);
    border-color: var(--slate-200);
}
.order-date-quick-option i {
    display: none;
    color: var(--accent-600);
}
.order-date-quick-option.active {
    background: rgba(var(--accent-rgb), .1);
    border-color: rgba(var(--accent-rgb), .25);
    color: var(--accent-700);
}
.order-date-quick-option.active i {
    display: inline-flex;
}
.order-date-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 12px;
}
.order-date-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--heading);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    line-height: 1.25;
}
.order-date-display-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-500);
}
.order-date-display.is-active {
    border-color: var(--accent-600);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15);
    background: rgba(var(--accent-rgb), 0.06);
}

.order-date-display.is-active .order-date-display-kicker {
    color: var(--accent-700);
}
.order-date-cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.order-date-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--slate-600);
    cursor: pointer;
}
.order-date-nav-btn:hover {
    background: var(--slate-100);
}
.order-date-month-select,
.order-date-year-select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--heading, #0f172a);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
    min-height: 32px;
    padding: 4px 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23475569' d='M4.2 5.8L8 9.6l3.8-3.8 1.2 1.2L8 12 3 7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}
.order-date-month-select:hover,
.order-date-year-select:hover {
    border-color: rgba(var(--accent-rgb, 4, 80, 213), 0.45);
}
.order-date-month-select:focus,
.order-date-year-select:focus {
    outline: none;
    border-color: var(--accent-500, #0450d5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 4, 80, 213), 0.16);
}
.order-date-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-500);
}
.order-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.order-date-day {
    aspect-ratio: auto;
    height: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: var(--heading);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
.order-date-day:hover:not(.is-muted) {
    background: var(--slate-100);
}
.order-date-day.is-muted {
    color: var(--slate-400);
}
.order-date-day.is-in-range {
    border-radius: 0;
    background: rgba(var(--accent-rgb), .12);
}
.order-date-day.is-selected {
    background: var(--accent-600);
    color: #fff;
    font-weight: 700;
}
.order-date-day.is-selected.is-in-range {
    border-radius: 999px;
}
.order-date-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--surface, #fff);
    border-radius: 0 0 var(--radius) var(--radius);
    position: relative;
    z-index: 2;
}
.order-date-today-btn {
    padding-left: 0;
    text-decoration: none;
    font-weight: 600;
}
.all-orders-type-select {
    min-width: 140px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 32px 7px 12px;
    border-radius: var(--radius-sm);
    border-color: var(--border);
    color: var(--heading);
    cursor: pointer;
}
.all-orders-card {
    padding: 4px 0 0;
    overflow: hidden;
}
.orders-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--slate-200, #e2e8f0);
    background: var(--slate-50, #f8fafc);
}
#retailer-orders-pagination.orders-list-pagination {
    justify-content: space-between;
}
.orders-list-pagination .pagination .page-link {
    min-width: 2rem;
    text-align: center;
}
.orders-list-page-ellipsis .page-link {
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}
.all-orders-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.all-orders-type-online {
    background: var(--accent-600);
    color: #fff;
}
.all-orders-type-pos {
    background: var(--slate-100);
    color: var(--slate-600);
    border: 1px solid var(--border);
}
.orders-type-cell {
    white-space: nowrap;
    vertical-align: middle;
}
.orders-type-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
.orders-exchange-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.orders-exchange-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    color: #9a3412;
    background: #ffedd5;
    border: 1px solid #fdba74;
    margin: 0;
}
.orders-exchange-meta {
    font-size: 11px;
    color: var(--slate-500);
    line-height: 1.25;
}
.orders-exchange-detail-card {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(249, 115, 22, 0.22);
    background: #fff7ed;
    border-radius: 14px;
}
.orders-exchange-detail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.orders-exchange-detail-title .orders-exchange-badge {
    margin-left: 0;
}
.orders-exchange-detail-title strong {
    font-size: 14px;
    color: var(--heading);
    letter-spacing: 0.01em;
}
.orders-exchange-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 16px;
    font-size: 13px;
}
.orders-exchange-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.orders-exchange-detail-grid strong {
    font-weight: 700;
    color: var(--heading);
    line-height: 1.25;
}
@media (max-width: 900px) {
    .orders-exchange-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.all-orders-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    white-space: nowrap;
}
.all-orders-status-pending {
    background: #FEF9C3;
    color: #B45309;
}
.all-orders-status-processing {
    background: #DBEAFE;
    color: #1D4ED8;
}
.all-orders-status-shipped {
    background: #E0E7FF;
    color: #4338CA;
}
.all-orders-status-completed {
    background: #DCFCE7;
    color: #15803D;
}
.all-orders-status-cancelled {
    background: #FEE2E2;
    color: #B91C1C;
}
.all-orders-status-returns {
    background: #FFEDD5;
    color: #C2410C;
}
.all-orders-status-rto {
    background: #F3E8FF;
    color: #7E22CE;
}
.all-orders-payment {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    white-space: nowrap;
}
.all-orders-payment-paid {
    background: #DCFCE7;
    color: #15803D;
}
.all-orders-payment-unpaid {
    background: #FEE2E2;
    color: #B91C1C;
}
.all-orders-payment-cod {
    background: #FEF3C7;
    color: #B45309;
}
.all-orders-payment--split {
    white-space: normal;
    line-height: 1.35;
    text-align: left;
}
.all-orders-payment--multi {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: #1e3a8a;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(16, 185, 129, 0.12), rgba(245, 158, 11, 0.14));
    border: 1px solid rgba(37, 99, 235, 0.35);
    cursor: pointer;
    white-space: nowrap;
}
button.all-orders-payment--multi {
    appearance: none;
    font: inherit;
    line-height: inherit;
}
.all-orders-payment-split-wrap {
    display: inline-flex;
    vertical-align: middle;
}
/* Source tip stays in DOM for text; floating tip is portaled to body to avoid overflow clip. */
.all-orders-payment-split-wrap > .panel-icon-tooltip--split {
    display: none !important;
}
.panel-split-float-tooltip {
    position: fixed;
    z-index: 1080;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 12px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.panel-split-float-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}
.panel-split-float-tooltip.is-below {
    transform: translate(-50%, 8px) scale(0.96);
}
.panel-split-float-tooltip.is-below.is-visible {
    transform: translate(-50%, 0) scale(1);
}
.panel-split-float-tooltip-arrow {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    transform: translateX(-50%);
}
.panel-split-float-tooltip:not(.is-below) .panel-split-float-tooltip-arrow {
    top: 100%;
    border-top-color: #111827;
}
.panel-split-float-tooltip.is-below .panel-split-float-tooltip-arrow {
    bottom: 100%;
    border-bottom-color: #111827;
}

/* ===== Online orders page ===== */
.online-orders-page .page-header {
    margin-bottom: 12px;
}
.online-orders-card {
    padding: 4px 0 0;
    overflow: hidden;
}
.online-orders-table-wrap {
    overflow-x: auto;
}
.online-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.online-orders-table thead th {
    padding: 10px 16px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.online-orders-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    color: var(--slate-700);
}
.online-orders-table tbody tr:last-child td {
    border-bottom: none;
}
.online-orders-table tbody tr:hover {
    background: var(--slate-50);
}
.online-order-id {
    font-size: 12px;
    color: var(--slate-500);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}
.orders-order-id-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    white-space: normal;
}
.orders-order-number {
    font-weight: 700;
    color: var(--heading, #0f1a30);
}
.orders-order-barcode-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.orders-order-barcode {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 2px 4px;
    image-rendering: pixelated;
}
.orders-order-barcode-code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
    letter-spacing: 0.02em;
}
.orders-return-meta {
    display: grid;
    gap: 4px;
    font-size: 0.875rem;
}
.orders-return-total {
    font-size: 0.95rem;
}

/* Return modal — premium themed selects */
#orders-return-modal .modal-content {
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}
#orders-return-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, #fff 100%);
}
#orders-return-modal .modal-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading);
}
#orders-return-modal .modal-body {
    padding: 18px 20px 12px;
}
#orders-return-modal .modal-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    background: #fafbfc;
}
#orders-return-modal .orders-return-table {
    margin-bottom: 0;
}
#orders-return-modal .orders-return-table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    border-bottom-color: var(--border);
    white-space: nowrap;
}
#orders-return-modal .orders-return-table tbody td {
    vertical-align: middle;
    padding-top: 12px;
    padding-bottom: 12px;
}
#orders-return-modal .orders-return-qty,
#orders-return-modal select.orders-return-select {
    min-height: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--heading);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
#orders-return-modal select.orders-return-select {
    min-width: 150px;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--slate-500) 50%),
        linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 2px),
        calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
#orders-return-modal .orders-return-qty:hover,
#orders-return-modal select.orders-return-select:hover {
    border-color: var(--border-strong, #cbd5e1);
}
#orders-return-modal .orders-return-qty:focus,
#orders-return-modal select.orders-return-select:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
    outline: none;
}
#orders-return-modal .form-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    margin-bottom: 6px;
}
#orders-return-modal .orders-return-total {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, #fff 70%);
    font-weight: 600;
    color: var(--slate-600);
}
#orders-return-modal .orders-return-total strong {
    color: var(--accent-700, var(--accent-600));
    font-weight: 800;
}
.panel-wrapper.seller-panel #orders-return-modal .admin-custom-select--seller {
    width: 100%;
    min-width: 150px;
}
.panel-wrapper.seller-panel #orders-return-modal .admin-custom-select--seller .admin-custom-select-trigger {
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--heading);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.panel-wrapper.seller-panel #orders-return-modal .admin-custom-select--seller .admin-custom-select-trigger:hover {
    border-color: var(--border-strong);
}
.panel-wrapper.seller-panel #orders-return-modal .admin-custom-select--seller.is-open .admin-custom-select-trigger,
.panel-wrapper.seller-panel #orders-return-modal .admin-custom-select--seller .admin-custom-select-trigger:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
    outline: none;
}
.admin-custom-select-menu--seller.orders-return-select-menu,
.panel-wrapper.seller-panel .admin-custom-select-menu--seller {
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.online-customer-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
}
.online-customer-sub {
    font-size: 11px;
    color: var(--slate-500);
    margin-top: 2px;
    line-height: 1.35;
}
.online-order-date {
    font-size: 12px;
    color: var(--slate-500);
    white-space: nowrap;
}
.online-order-total {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--heading);
    white-space: nowrap;
}
.online-orders-empty {
    text-align: center;
    padding: 32px 16px !important;
    color: var(--slate-500);
    font-size: 12.5px;
}

.orders-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 280px;
    width: 100%;
    padding: 48px 24px;
    margin: 0;
    text-align: center;
    color: var(--text-muted, #64748b);
}

.orders-list-empty i {
    font-size: 2.25rem;
    opacity: 0.5;
    line-height: 1;
}

.orders-list-empty p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading, #0f172a);
}

.orders-unified-page .panel-card.retailer-products-card:has(.orders-list-empty),
.orders-table-panel:has(> .orders-list-empty) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 280px;
}
.online-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.online-status i { font-size: 11px; }
.online-status-pending {
    background: #FEF9C3;
    color: #B45309;
}
.online-status-processing {
    background: #DBEAFE;
    color: #1D4ED8;
}
.online-status-completed {
    background: #DCFCE7;
    color: #15803D;
}
.online-status-shipped {
    background: #E0E7FF;
    color: #4338CA;
}
.online-status-returns {
    background: #FFEDD5;
    color: #C2410C;
}
.online-status-rto {
    background: #F3E8FF;
    color: #7E22CE;
}
.online-status-cancelled {
    background: #FEE2E2;
    color: #B91C1C;
}
.online-order-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.online-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--slate-500);
    text-decoration: none;
    border-radius: 6px;
    transition: color .15s, background .15s, border-color .15s;
}
.online-action-icon:hover {
    color: var(--accent-600);
    background: var(--accent-soft);
}
.online-action-icon i { font-size: 14px; }
.online-action-icon--invoice {
    color: #dc2626;
}
.online-action-icon--invoice:hover {
    color: #b91c1c;
    background: #fef2f2;
}
.online-orders-action-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.online-action-link {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.online-action-link:hover { text-decoration: underline; }
.online-action-process { color: var(--accent-600); }
.online-action-cancel { color: #DC2626; }
.online-action-ship { color: #15803D; }
.online-action-ship i { font-size: 12px; }
.online-action-complete { color: #15803D; }
.online-action-complete i { font-size: 12px; }

/* Retailer B2B purchased products (mirrors online orders table) */
.retailer-purchases-page .retailer-purchase-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
}
.retailer-purchases-page .retailer-orders-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}
.retailer-purchases-page .retailer-products-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 14px;
}
.retailer-products-page-header {
    margin-bottom: 12px;
}
/*
 * Products tabs row: tabs + date + CTA share one fixed control height.
 * (CTA is not a Bootstrap .btn, so height locks reliably.)
 */
.retailer-products-tabs-row {
    --rp-control-height: 40px;
    --rp-item-pad-x: 14px;
    --rp-font: 0.8125rem;
    --rp-lh: 1.2;
    --rp-icon: 1rem;
    --rp-radius-rail: 12px;
    --rp-radius-item: 9px;
    --rp-rail-pad: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 12px;
    width: 100%;
}
.retailer-products-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--rp-control-height);
    min-height: var(--rp-control-height);
    padding: var(--rp-rail-pad);
    margin-bottom: 0;
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: var(--rp-radius-rail);
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
}
.retailer-products-tabs-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
    height: var(--rp-control-height);
}
.retailer-products-tabs-actions .order-date-filter,
.retailer-products-tabs-actions .order-date-filter-form {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
}
.retailer-products-tabs-actions .order-date-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: var(--rp-control-height) !important;
    min-height: var(--rp-control-height) !important;
    max-height: var(--rp-control-height) !important;
    padding: 0 var(--rp-item-pad-x) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rp-radius-rail) !important;
    background: var(--surface, #fff) !important;
    color: var(--heading) !important;
    font-size: var(--rp-font) !important;
    font-weight: 600 !important;
    line-height: var(--rp-lh) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    white-space: nowrap;
}
.retailer-products-tabs-actions .order-date-trigger:hover {
    border-color: var(--border-strong, var(--border)) !important;
    box-shadow: none !important;
}
.retailer-products-tabs-actions .order-date-trigger > .bi:first-child,
.retailer-products-tabs-cta > .bi {
    font-size: var(--rp-icon) !important;
    line-height: 1 !important;
}
.retailer-products-tabs-actions .order-date-trigger-chevron {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    opacity: 0.75;
}
.retailer-products-tabs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 var(--rp-item-pad-x);
    border: 1px solid var(--accent-600);
    border-radius: var(--rp-radius-rail);
    background: var(--accent-600);
    color: #fff;
    font-size: var(--rp-font);
    font-weight: 600;
    line-height: var(--rp-lh);
    box-shadow: none;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.retailer-products-tabs-cta:hover,
.retailer-products-tabs-cta:focus {
    background: var(--accent-700, #1d4ed8);
    border-color: var(--accent-700, #1d4ed8);
    color: #fff;
    text-decoration: none;
    box-shadow: none;
}
.retailer-products-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 var(--rp-item-pad-x);
    border: none;
    border-radius: var(--rp-radius-item);
    background: transparent;
    color: var(--slate-500);
    font-size: var(--rp-font);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    line-height: var(--rp-lh);
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.retailer-products-tab:hover {
    color: var(--heading);
    background: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}
.retailer-products-tab.is-active {
    background: var(--surface, #fff);
    color: var(--accent-600);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.retailer-products-tab.is-active:hover {
    color: var(--accent-600);
    background: var(--surface, #fff);
}
.retailer-products-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    font-size: var(--rp-icon);
    line-height: 1;
    color: inherit;
}
.retailer-products-tab-label {
    line-height: var(--rp-lh);
}
.retailer-products-shell .retailer-products-page-header {
    margin-bottom: 12px;
}
.retailer-products-shell > .retailer-products-tabs-row {
    flex: 0 0 auto;
}
@media (max-width: 768px) {
    .retailer-products-tabs {
        width: 100%;
    }
    .retailer-products-tabs-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}
.retailer-pos-products-page .products-header {
    margin-bottom: 12px;
}
.retailer-pos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 40px 24px 48px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
}
.retailer-pos-empty-art {
    width: min(280px, 72vw);
    margin-bottom: 18px;
}
.retailer-pos-empty-art img {
    display: block;
    width: 100%;
    height: auto;
}
.retailer-pos-empty-title {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--heading);
}
.retailer-pos-empty-text {
    margin: 0 0 22px;
    max-width: 360px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.retailer-pos-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Scan Physical Tag — premium bind panel */
.retailer-pos-scan-page.retailer-products-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.main-content:has(.retailer-pos-scan-page.retailer-products-shell) {
    display: flex;
    flex-direction: column;
}
.retailer-pos-scan-hero {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
}
.retailer-pos-scan-panel {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    width: 100%;
    min-height: 420px;
    background:
        radial-gradient(ellipse 80% 60% at 12% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.retailer-pos-scan-panel-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, #1e3a8a 0%, #2563eb 48%, #3b82f6 100%);
    color: #fff;
}
.retailer-pos-scan-icon-ring {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    font-size: 2.4rem;
    z-index: 1;
}
.retailer-pos-scan-scanline {
    position: absolute;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: retailer-pos-scanline 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes retailer-pos-scanline {
    0%, 100% { top: 28%; opacity: 0.35; }
    50% { top: 68%; opacity: 1; }
}
.retailer-pos-scan-panel-body {
    padding: 28px 32px 30px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.retailer-pos-scan-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-500);
    text-decoration: none;
}
.retailer-pos-scan-back:hover {
    color: var(--accent-600);
}
.retailer-pos-scan-title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.02em;
}
.retailer-pos-scan-lead {
    margin: 0 0 18px;
    max-width: 420px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.retailer-pos-scan-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.retailer-pos-scan-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--slate-600);
}
.retailer-pos-scan-points i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, rgba(37, 99, 235, 0.1));
    color: var(--accent-600);
    flex-shrink: 0;
}
.retailer-pos-bind-form {
    margin-top: auto;
    max-width: 480px;
}
.retailer-pos-scan-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--heading);
}
.retailer-pos-scan-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.retailer-pos-scan-field:focus-within {
    border-color: var(--accent-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.retailer-pos-scan-field-icon {
    color: var(--accent-600);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.retailer-pos-scan-input.form-control,
.retailer-pos-scan-field .retailer-pos-scan-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.9375rem;
    font-weight: 500;
}
.retailer-pos-scan-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.retailer-pos-scan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.retailer-pos-scan-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 768px) {
    .retailer-pos-scan-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .retailer-pos-scan-panel-visual {
        min-height: 140px;
    }
    .retailer-pos-scan-panel-body {
        padding: 22px 18px 24px;
    }
}
.main-content:has(.retailer-pos-products-page.retailer-products-shell) {
    display: flex;
    flex-direction: column;
}
.retailer-pos-products-page.retailer-products-shell {
    /* Grow to fill short viewports; never shrink below content (keeps page scroll). */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.retailer-pos-products-page.retailer-products-shell > .retailer-products-page-header,
.retailer-pos-products-page.retailer-products-shell > .retailer-products-tabs,
.retailer-pos-products-page.retailer-products-shell > .retailer-products-tabs-row,
.retailer-pos-products-page.retailer-products-shell > .products-filters-card {
    flex: 0 0 auto;
}
.retailer-pos-products-page .retailer-pos-filters-card {
    width: 100%;
}
.retailer-pos-products-page .retailer-pos-filters-main {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
}
.retailer-pos-products-page .retailer-pos-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 34px;
}
.retailer-pos-products-page .retailer-pos-filters-row .products-filter-pills {
    flex: 1 1 auto;
    min-width: 0;
}
.retailer-pos-products-page .retailer-pos-inline-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 320px;
    width: 320px;
    max-width: min(320px, 100%);
    height: 34px;
    min-height: 34px;
    margin: 0 0 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.retailer-pos-products-page .retailer-pos-inline-search-icon {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--slate-400, #94a3b8);
}
.retailer-pos-products-page .retailer-pos-inline-search-input.form-control,
.retailer-pos-products-page .retailer-pos-inline-search-input.form-control-sm,
.retailer-pos-products-page .retailer-pos-inline-search-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--slate-600);
}
.retailer-pos-products-page .retailer-pos-inline-search-input::placeholder {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 1;
}
.retailer-pos-products-page .retailer-pos-inline-search:hover {
    border-color: var(--border-strong);
}
.retailer-pos-products-page .retailer-pos-inline-search:focus-within {
    border-color: var(--accent-500);
    background: var(--accent-soft);
}
.retailer-pos-products-page .retailer-pos-inline-search:focus-within .retailer-pos-inline-search-icon,
.retailer-pos-products-page .retailer-pos-inline-search:focus-within .retailer-pos-inline-search-input {
    color: var(--accent-600);
}
@media (max-width: 768px) {
    .retailer-pos-products-page .retailer-pos-inline-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}

/* Purchases list — same filter-row + search UI as My POS Products */
.retailer-purchases-page.retailer-products-shell > .retailer-purchases-filters-card {
    flex: 0 0 auto;
}
.retailer-purchases-page .retailer-purchases-filters-card {
    width: 100%;
}
.retailer-purchases-page .retailer-purchases-filters-main {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
}
.retailer-purchases-page .retailer-purchases-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 34px;
}
.retailer-purchases-page .ledger-summary-row .all-orders-status {
    white-space: nowrap;
}
.retailer-purchases-page .ledger-summary-row .retailer-purchases-inline-search {
    margin-left: auto;
}
.ledger-page .ledger-tabs-actions {
    gap: 12px;
    margin-left: auto;
}
.ledger-page--landing .retailer-products-page-header.all-orders-header {
    align-items: center;
    margin-bottom: 12px;
}
.ledger-page--landing .ledger-landing-header-actions {
    align-self: center;
}
.ledger-page--landing .ledger-landing-header-actions .order-date-filter,
.ledger-page--landing .ledger-landing-header-actions .order-date-filter-form {
    margin: 0;
}
.ledger-page--landing .ledger-day-table .retailer-order-actions {
    width: 1%;
    white-space: nowrap;
}
.ledger-page--detail .ledger-download-btn {
    white-space: nowrap;
}
.ledger-page .ledger-header-search {
    min-width: 220px;
    max-width: 320px;
    width: min(100%, 320px);
}
.ledger-page .ledger-filters-card .ledger-header-search {
    max-width: 360px;
    width: min(100%, 360px);
}
.ledger-page .ledger-day-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.08), transparent 55%),
        radial-gradient(100% 120% at 100% 0%, rgba(15, 118, 110, 0.07), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
}
.ledger-page .ledger-day-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    flex: 1 1 420px;
    min-width: 0;
}
.ledger-page .ledger-day-summary-metrics--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-basis: 560px;
}
.ledger-page .ledger-day-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.ledger-page .ledger-day-metric-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
}
.ledger-page .ledger-day-metric-value {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    line-height: 1.15;
}
.ledger-page .ledger-day-metric--sales .ledger-day-metric-value {
    color: #15803d;
}
.ledger-page .ledger-day-metric--refunds .ledger-day-metric-value {
    color: #c2410c;
}
.ledger-page .ledger-day-metric--net .ledger-day-metric-value {
    color: #1d4ed8;
}
.ledger-page .ledger-day-metric--credit .ledger-day-metric-value {
    color: #0f766e;
}
.ledger-page .ledger-day-summary-search {
    flex: 0 1 280px;
    min-width: 200px;
    max-width: 300px;
    margin-left: auto;
}
.ledger-page .ledger-day-summary-search .retailer-pos-inline-search-input,
.ledger-page .ledger-day-summary-search .form-control {
    height: 38px;
    border-radius: 10px;
    border-color: rgba(15, 23, 42, 0.1);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
@media (max-width: 1100px) {
    .ledger-page .ledger-day-summary-metrics--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .ledger-page .ledger-day-summary-metrics,
    .ledger-page .ledger-day-summary-metrics--4 {
        grid-template-columns: 1fr;
        flex-basis: 100%;
    }
    .ledger-page .ledger-day-summary-search {
        margin-left: 0;
        max-width: none;
        width: 100%;
        flex-basis: 100%;
    }
}
.ledger-page .ledger-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    color: #334155;
    text-decoration: none;
    vertical-align: -0.15em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ledger-page .ledger-back-link:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}
.ledger-page .ledger-day-row {
    cursor: pointer;
}
.ledger-page .ledger-day-row:hover td {
    background: rgba(239, 246, 255, 0.72);
}
.ledger-page .ledger-sno {
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    width: 4.5rem;
}
.ledger-page--detail .retailer-products-tabs-row {
    margin-bottom: 12px;
}
.ledger-page--detail tr.ledger-entry-row--link {
    cursor: pointer;
}
.ledger-page--detail tr.ledger-entry-row--link:hover > td {
    background: var(--slate-50, #f8fafc);
}
.ledger-page--detail .panel-card.retailer-products-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
}
.ledger-page--detail .ledger-detail-table thead th {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ledger-page--detail .ledger-detail-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
}
.ledger-page--detail .ledger-detail-table .online-order-id {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.ledger-page--detail .ledger-detail-table .online-customer-name {
    color: #475569;
    max-width: 280px;
}
.ledger-page--landing .panel-card.retailer-products-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
}
.ledger-page--landing .ledger-day-table thead th {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.ledger-page--landing .ledger-day-table tbody td {
    padding-top: 15px;
    padding-bottom: 15px;
}
.retailer-purchases-page .retailer-purchases-status-wrap {
    position: relative;
    flex: 0 1 220px;
    min-width: 180px;
    height: 34px;
}
.retailer-purchases-page .retailer-purchases-status-select.orders-status-filter,
.retailer-purchases-page .retailer-purchases-status-select.form-select,
.retailer-purchases-page .retailer-purchases-status-select.form-select-sm {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 32px 0 14px !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    box-shadow: none;
}
.retailer-purchases-page .retailer-purchases-status-select:hover {
    border-color: var(--border-strong);
}
.retailer-purchases-page .retailer-purchases-status-select:focus {
    border-color: var(--accent-500);
    background: var(--accent-soft);
    color: var(--accent-600);
    box-shadow: none;
}
.retailer-purchases-page .retailer-purchases-status-wrap .orders-status-filter-chevron {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    font-size: 0.75rem;
    color: var(--slate-400);
    pointer-events: none;
}
.retailer-purchases-page .retailer-purchases-inline-search.retailer-pos-inline-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 320px;
    width: 320px;
    max-width: min(320px, 100%);
    height: 34px;
    min-height: 34px;
    margin: 0 0 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.retailer-purchases-page .retailer-purchases-inline-search .retailer-pos-inline-search-icon {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--slate-400, #94a3b8);
}
.retailer-purchases-page .retailer-purchases-inline-search .retailer-pos-inline-search-input.form-control,
.retailer-purchases-page .retailer-purchases-inline-search .retailer-pos-inline-search-input.form-control-sm,
.retailer-purchases-page .retailer-purchases-inline-search .retailer-pos-inline-search-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--slate-600);
}
.retailer-purchases-page .retailer-purchases-inline-search .retailer-pos-inline-search-input::placeholder {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 1;
}
.retailer-purchases-page .retailer-purchases-inline-search:hover {
    border-color: var(--border-strong);
}
.retailer-purchases-page .retailer-purchases-inline-search:focus-within {
    border-color: var(--accent-500);
    background: var(--accent-soft);
}
.retailer-purchases-page .retailer-purchases-inline-search:focus-within .retailer-pos-inline-search-icon,
.retailer-purchases-page .retailer-purchases-inline-search:focus-within .retailer-pos-inline-search-input {
    color: var(--accent-600);
}
@media (max-width: 768px) {
    .retailer-purchases-page .retailer-purchases-status-wrap,
    .retailer-purchases-page .retailer-purchases-inline-search.retailer-pos-inline-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}

.retailer-pos-products-page.retailer-products-shell > .retailer-products-tabs {
    align-self: flex-start;
    width: auto;
}
.retailer-pos-products-page.retailer-products-shell > .retailer-pos-empty {
    flex: 1 0 auto;
}
.retailer-pos-products-page.retailer-products-shell > .products-card {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.retailer-pos-products-page.retailer-products-shell > .products-card > .online-orders-table-wrap {
    flex: 0 0 auto;
}
.retailer-pos-products-page.retailer-products-shell > .products-card > .panel-pagination {
    margin-top: auto;
    flex-shrink: 0;
}
.retailer-pos-create-page.single-product-page {
    display: flex;
    flex-direction: column;
}
.retailer-pos-create-page .retailer-pos-steps.single-product-steps {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border-bottom: none;
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: auto;
    max-width: 100%;
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 0;
    border-bottom: none;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-500);
    background: transparent;
    line-height: 1.2;
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step.active {
    color: var(--accent-600);
    background: var(--surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
    border-bottom: none;
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step.done {
    color: var(--slate-500);
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step-num {
    width: 20px;
    height: 20px;
    font-size: 11px;
    background: transparent;
    color: inherit;
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step.active .single-product-step-num {
    background: var(--accent-soft, rgba(37, 99, 235, 0.12));
    color: var(--accent-700, #1d4ed8);
}
.retailer-pos-create-page .retailer-pos-steps .single-product-step.done .single-product-step-num {
    background: transparent;
    color: inherit;
}
.main-content:has(.retailer-purchases-page.retailer-products-shell) {
    display: flex;
    flex-direction: column;
}
.retailer-purchases-page.retailer-products-shell {
    /* Grow to fill short viewports; never shrink below content (keeps page scroll). */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.retailer-purchases-page.retailer-products-shell > .retailer-products-tabs,
.retailer-purchases-page.retailer-products-shell > .retailer-products-tabs-row {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
}
.retailer-purchases-page.retailer-products-shell > .retailer-products-search-bar {
    flex: 0 0 auto;
}
.retailer-purchases-page .retailer-products-search-bar.orders-filter-bar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}
.retailer-purchases-page .retailer-products-search-bar .retailer-products-search.orders-list-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 420px;
    width: 420px;
    max-width: min(420px, 100%);
    min-width: 280px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    margin: 0;
    margin-left: auto;
    padding: 0 14px 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50, #f8fafc);
}
.retailer-purchases-page .retailer-products-search-bar .orders-list-search-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--slate-400, #94a3b8);
}
.retailer-purchases-page .retailer-products-search-bar .orders-list-search-input.form-control,
.retailer-purchases-page .retailer-products-search-bar .orders-list-search-input.form-control-sm,
.retailer-purchases-page .retailer-products-search-bar .orders-list-search-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.8125rem;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
}
.retailer-purchases-page.retailer-products-shell > .retailer-products-card {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.retailer-purchases-page.retailer-products-shell .orders-table-panel {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.retailer-purchases-page.retailer-products-shell .online-orders-table-wrap {
    flex: 0 0 auto;
}
.retailer-purchases-page.retailer-products-shell .panel-pagination {
    margin-top: auto;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .retailer-products-tabs {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }
    .retailer-products-tab {
        flex: 0 0 auto;
        justify-content: center;
        padding: 0 12px;
    }
    .retailer-pos-empty {
        padding: 28px 16px 36px;
    }
}
.retailer-purchases-page .retailer-products-title-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-width: 0;
    flex: 1 1 auto;
}
.retailer-purchases-page .retailer-products-title-search h1 {
    margin: 0;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.retailer-purchases-page .retailer-orders-header-actions .order-date-filter {
    margin: 0;
}
.retailer-purchases-page .retailer-orders-header-actions .orders-status-filter-wrap {
    min-width: 168px;
}
.retailer-purchases-page .retailer-products-orders-table .all-orders-payment--split {
    white-space: normal;
    line-height: 1.35;
    max-width: 210px;
}
.retailer-purchases-page .retailer-products-orders-table .retailer-order-actions {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.retailer-orders-table .retailer-col-status {
    min-width: 148px;
    white-space: nowrap;
}
.retailer-orders-table .retailer-col-status .online-status {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.retailer-orders-table .retailer-order-row {
    cursor: pointer;
    transition: background-color .15s ease;
}
.retailer-orders-table .retailer-order-row:hover {
    background: var(--slate-50);
}
.retailer-orders-table tr.retailer-order-row--new td {
    background-color: #e8f4fc;
}
.retailer-orders-table tr.retailer-order-row--new:hover td {
    background-color: #d9eefb;
}
.retailer-orders-table .retailer-order-row:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: -2px;
}
.retailer-purchases-page .online-orders-card {
    overflow: hidden;
}
.retailer-purchases-page .online-manage-products-card {
    overflow: hidden;
}
.retailer-purchases-page .online-manage-products-card .retailer-pricing-table-scroll.online-manage-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}
.retailer-purchases-page .retailer-pricing-table--pos-order thead th {
    position: static;
}
.retailer-purchases-page .online-manage-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}
.retailer-purchases-page .retailer-order-number {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.35;
    word-break: break-all;
}
.retailer-purchases-page .retailer-order-item-count {
    font-size: 11px;
    color: var(--slate-500);
    margin-top: 2px;
}
.retailer-purchases-page .retailer-order-manufacturer {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.retailer-purchases-page .retailer-order-products {
    font-size: 12px;
    color: var(--slate-600);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.panel-icon-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Theme-aware icon action button (replaces btn-outline-secondary black hover for row actions). */
.panel-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--slate-600, #475569);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.panel-action-icon-btn:hover,
.panel-action-icon-btn:focus-visible {
    background: rgba(4, 80, 213, 0.08);
    color: var(--panel-accent, #0450d5);
    border-color: rgba(4, 80, 213, 0.35);
}
.panel-wrapper.admin-panel .panel-action-icon-btn:hover,
.panel-wrapper.admin-panel .panel-action-icon-btn:focus-visible {
    background: var(--admin-purple-soft, rgba(99, 102, 241, 0.12));
    color: var(--admin-purple, #6366f1);
    border-color: var(--admin-purple-border, rgba(99, 102, 241, 0.35));
}
.panel-icon-tooltip {
    pointer-events: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%) scale(0.95);
    opacity: 0;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.panel-icon-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -1px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #111827;
}
.panel-wrapper.admin-panel .panel-icon-tooltip {
    background: #111827;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
}
.panel-wrapper.admin-panel .panel-icon-tooltip-arrow {
    border-top-color: #111827;
}
.panel-icon-tooltip-wrap:hover .panel-icon-tooltip,
.panel-icon-tooltip-wrap:focus-within .panel-icon-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.panel-icon-tooltip--align-end {
    left: auto;
    right: 0;
    transform: translateX(0) scale(0.95);
}
.panel-icon-tooltip-wrap:hover .panel-icon-tooltip--align-end,
.panel-icon-tooltip-wrap:focus-within .panel-icon-tooltip--align-end {
    transform: translateX(0) scale(1);
}
.panel-icon-tooltip--align-end .panel-icon-tooltip-arrow {
    left: auto;
    right: 10px;
    transform: translateX(0);
}
.retailer-purchases-page .retailer-order-action-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.retailer-purchases-page .retailer-order-action-icons--row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.retailer-purchases-page .retailer-order-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    color: var(--slate-600);
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.retailer-purchases-page .retailer-order-icon-btn:hover {
    background: var(--slate-50);
    color: #2563eb;
    border-color: var(--slate-300);
}
.retailer-purchases-page .retailer-order-icon-btn--invoice {
    color: #dc2626;
    border-color: #fecaca;
}
.retailer-purchases-page .retailer-order-icon-btn--invoice:hover {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
}
.retailer-purchases-page .retailer-order-icon-btn--invoice-draft {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}
.retailer-purchases-page .retailer-order-icon-btn--invoice-draft:hover {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}
.retailer-purchases-page .retailer-order-icon-btn--receipt {
    padding: 8px;
    border-radius: 8px;
    background: var(--slate-50);
    border-color: var(--slate-200);
    color: var(--slate-600);
}
.retailer-purchases-page .retailer-order-icon-btn--receipt:hover {
    background: var(--slate-100);
    color: var(--slate-800);
    border-color: var(--slate-200);
}
.retailer-purchases-page .retailer-order-icon-btn--receipt svg {
    width: 17px;
    height: 17px;
}
.retailer-purchases-page .retailer-invoice-download-btn--receipt {
    color: var(--slate-700);
}
.retailer-purchases-page .retailer-invoice-download-btn--receipt .retailer-receipt-download-icon {
    width: 18px;
    height: 18px;
}
.orders-online-coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 28px 24px 32px;
    text-align: center;
    min-height: min(52vh, 480px);
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 58% 48% at 50% 12%, rgba(var(--accent-rgb), 0.1) 0%, transparent 68%),
        radial-gradient(ellipse 40% 36% at 82% 88%, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
.orders-online-coming-soon-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}
.orders-online-coming-soon-art {
    width: min(240px, 58vw);
    margin: 0 auto 22px;
    line-height: 0;
    filter: drop-shadow(0 18px 28px rgba(15, 26, 48, 0.08));
}
.orders-online-coming-soon-art img {
    width: 100%;
    height: auto;
    display: block;
}
.orders-online-coming-soon-eyebrow {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-600);
}
.orders-online-coming-soon-title {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--heading, #0F1A30);
}
.orders-online-coming-soon-text {
    margin: 0 auto 28px;
    max-width: 26rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--slate-500, #64748B);
    font-weight: 500;
}
.orders-online-coming-soon-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 380px;
    width: 100%;
    margin: 0 auto 28px;
    padding: 16px 18px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(255, 255, 255, 0.92) 55%, #fff 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 12px 28px rgba(var(--accent-rgb), 0.08);
    box-sizing: border-box;
}
.orders-online-coming-soon-banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent-700, #2257C0);
    font-size: 1rem;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.12);
}
.orders-online-coming-soon-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--slate-600, #475569);
}
.orders-online-coming-soon-banner-text strong {
    color: var(--accent-700, #2257C0);
    font-weight: 700;
    font-size: 0.9375rem;
}
.orders-online-coming-soon-banner-text span {
    color: var(--slate-500, #64748B);
    font-weight: 500;
}
.orders-online-coming-soon-help {
    margin: 0;
    padding-top: 4px;
    font-size: 0.8125rem;
    color: var(--slate-500, #64748B);
    letter-spacing: 0.01em;
}
.orders-online-coming-soon-help-link {
    color: var(--accent-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.orders-online-coming-soon-help-link:hover {
    color: var(--accent-700);
    border-bottom-color: rgba(var(--accent-rgb), 0.45);
    text-decoration: none;
}
.orders-richer-page .panel-card.retailer-products-card:has(.orders-online-coming-soon) {
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}
.orders-richer-page:has(.orders-online-coming-soon) {
    gap: 14px;
}
.orders-richer-page:has(.orders-online-coming-soon) .retailer-products-tabs-row {
    margin-bottom: 0;
}
@media (max-width: 640px) {
    .orders-online-coming-soon {
        padding: 22px 16px 26px;
        min-height: 0;
    }
    .orders-online-coming-soon-art {
        margin-bottom: 18px;
    }
    .orders-online-coming-soon-text {
        margin-bottom: 22px;
    }
    .orders-online-coming-soon-banner {
        margin-bottom: 22px;
        padding: 14px;
    }
}
.online-manage-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.row-shipment-modal-dialog {
    max-width: 480px;
}
.row-shipment-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.row-shipment-mode-tab {
    display: block;
    margin: 0;
    cursor: pointer;
}
.row-shipment-mode-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.row-shipment-mode-tab span {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--slate-600);
    background: #fff;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.row-shipment-mode-tab input:checked + span {
    border-color: var(--accent-500);
    background: var(--accent-50, #eff6ff);
    color: var(--accent-700);
}
.row-shipment-panel .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
}
.row-shipment-package-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
}
.row-shipment-package-card {
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    padding: 12px;
    background: var(--slate-50, #f8fafc);
}
.row-shipment-package-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-800);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.row-shipment-modal .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.row-shipment-transporter-picker {
    position: relative;
}
.row-shipment-transporter-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.row-shipment-transporter-item,
.row-shipment-transporter-add {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.row-shipment-transporter-item:hover,
.row-shipment-transporter-add:hover {
    border-color: var(--accent-500);
    background: var(--accent-50, #eff6ff);
}
.row-shipment-transporter-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-800);
}
.row-shipment-transporter-add {
    justify-content: center;
    color: var(--accent-600, #2563eb);
    font-size: 12px;
    font-weight: 600;
}
.row-shipment-transporter-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--slate-500);
}
.retailer-purchases-page .retailer-order-icon-btn--label {
    color: #0369a1;
    border-color: #bae6fd;
}
.retailer-purchases-page .retailer-order-icon-btn--label:hover {
    color: #075985;
    background: #f0f9ff;
    border-color: #7dd3fc;
}
.retailer-purchases-page .retailer-order-icon-btn--header {
    width: 36px;
    height: 36px;
    font-size: 17px;
}
.retailer-purchases-page .retailer-order-actions {
    white-space: nowrap;
    overflow: visible;
    position: relative;
}
.retailer-purchases-page .retailer-invoice-link {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
}
.retailer-purchases-page .retailer-invoice-link:hover {
    text-decoration: underline;
}
.retailer-purchases-page .retailer-order-manage-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 0;
}
.retailer-purchases-page .retailer-invoice-download-btn--compact {
    padding: 6px 12px;
    font-size: 13px;
}
.retailer-purchases-page .retailer-invoice-download-btn--compact .retailer-invoice-download-label {
    white-space: nowrap;
}
.retailer-purchases-page .online-manage-products-card .retailer-pricing-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: none;
    border-radius: 0;
    background: var(--surface);
}
.retailer-purchases-page .online-manage-products-card .retailer-pricing-card,
.retailer-purchases-page .online-manage-products-card.retailer-pricing-card {
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
.retailer-purchases-page .retailer-invoice-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-700);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.retailer-purchases-page .retailer-invoice-download-btn:hover {
    background: var(--slate-50);
    color: var(--slate-800);
    border-color: var(--slate-300);
}
.retailer-purchases-page .retailer-invoice-download-btn--draft {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}
.retailer-purchases-page .retailer-invoice-download-btn--draft:hover {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}
.retailer-purchases-page .retailer-invoice-download-icon {
    flex-shrink: 0;
}
.retailer-purchases-page .retailer-manufacturer-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-700);
    background: var(--slate-100);
    border-radius: 999px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.retailer-purchases-page .purchase-action-cell {
    min-width: 120px;
}

/* ===== Purchase order manage — richer detail chrome ===== */
.retailer-purchase-manage-page {
    --rpm-radius: 16px;
    --rpm-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
}
.retailer-purchase-manage-header {
    margin-bottom: 18px;
    padding: 4px 2px 0;
}
.retailer-purchase-manage-page .online-manage-back {
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}
.retailer-purchase-manage-page .online-manage-header-info h1 {
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--heading);
}
.retailer-purchase-manage-page .online-manage-header-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--slate-500);
}
.retailer-purchase-manage-meta-mfr {
    font-weight: 600;
    color: var(--slate-600);
}
.retailer-purchase-manage-meta-sep {
    color: var(--slate-300);
}
.retailer-purchase-manage-page .retailer-invoice-download-btn--compact {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.retailer-purchase-manage-page .retailer-invoice-download-btn--draft {
    background: linear-gradient(180deg, #fffdf7 0%, #fff7e6 100%);
    border-color: #f0d9a0;
    color: #9a6700;
}
.retailer-purchase-manage-page .retailer-invoice-download-btn--draft:hover {
    background: linear-gradient(180deg, #fff9eb 0%, #ffefcc 100%);
    border-color: #e8c878;
    color: #7a5200;
}

.retailer-purchase-manage-card {
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: var(--rpm-radius) !important;
    box-shadow: var(--rpm-shadow) !important;
    overflow: hidden;
    background: var(--surface, #fff);
}
.retailer-purchase-manage-controls {
    background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.retailer-purchase-manage-tabs-wrap {
    padding: 14px 16px 12px;
}
.retailer-purchase-manage-tabs.retailer-products-tabs {
    --rp-control-height: auto;
    --rp-radius-rail: 12px;
    --rp-radius-item: 9px;
    --rp-font: 0.8125rem;
    --rp-lh: 1.2;
    --rp-rail-pad: 4px;
    height: auto;
    min-height: 40px;
    max-height: none;
    flex-wrap: wrap;
    gap: 4px;
    width: auto;
    max-width: 100%;
    padding: var(--rp-rail-pad);
    border-radius: var(--rp-radius-rail);
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--border);
    box-sizing: border-box;
}
.retailer-purchase-manage-tabs .retailer-products-tab {
    height: auto;
    min-height: 32px;
    padding: 6px 12px;
    gap: 8px;
    border-radius: var(--rp-radius-item);
    font-size: var(--rp-font);
    line-height: var(--rp-lh);
}
.retailer-purchase-manage-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.retailer-purchase-manage-tabs .retailer-products-tab.is-active .retailer-purchase-manage-tab-count {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-700, #2257c0);
}

.retailer-purchase-manage-bulk.online-manage-bulk-bar {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, rgba(248, 250, 252, 0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.retailer-purchase-manage-bulk .online-manage-bulk-count {
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
}
.retailer-purchase-manage-bulk .online-manage-bulk-clear {
    font-weight: 600;
    color: var(--accent-600);
}
.retailer-purchase-manage-bulk .online-manage-bulk-clear:hover {
    color: var(--accent-700);
}
.retailer-purchase-manage-bulk .retailer-bulk-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400);
}
.retailer-purchase-manage-bulk .form-control {
    border-radius: 10px;
    border-color: var(--border);
    background: #fff;
    min-height: 34px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}
.retailer-purchase-manage-bulk .btn {
    border-radius: 10px;
    font-weight: 600;
    min-height: 34px;
    box-shadow: none;
}
.retailer-purchase-manage-bulk .btn-primary {
    box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.22);
}

.retailer-purchase-manage-page .online-manage-table-wrap,
.retailer-purchase-manage-page .retailer-pricing-table-scroll.online-manage-table-wrap {
    background:
        linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}
.retailer-purchase-manage-page .online-manage-lines-table thead th {
    padding-top: 14px;
    padding-bottom: 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 10px;
    letter-spacing: 0.07em;
    color: var(--slate-400);
}
.retailer-purchase-manage-page .online-manage-lines-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom-color: rgba(15, 23, 42, 0.045);
    vertical-align: middle;
}
.retailer-purchase-manage-page .online-manage-lines-table tbody tr:hover td {
    background: rgba(79, 142, 247, 0.03);
}
.retailer-purchase-manage-page .retailer-purchase-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.retailer-purchase-manage-page .retailer-product-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--heading);
}
.retailer-purchase-manage-page .retailer-product-path {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--slate-400);
}

@media (max-width: 768px) {
    .retailer-purchase-manage-tabs.retailer-products-tabs {
        width: 100%;
    }
}

/* ===== Orders list — richer Products-style chrome ===== */
.orders-richer-page.retailer-products-shell > .orders-richer-filters-card {
    flex: 0 0 auto;
}
.orders-richer-page .orders-richer-filters-card .retailer-purchases-status-wrap {
    flex: 0 1 220px;
    min-width: 180px;
    height: 34px;
}
.orders-richer-page .orders-richer-filters-card .admin-custom-select--status-filter {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 34px;
}
.orders-richer-page .orders-richer-filters-card .admin-custom-select--status-filter .admin-custom-select-trigger {
    border-radius: 8px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    padding: 0 32px 0 14px;
}
.orders-richer-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.orders-richer-page .retailer-products-tab.is-active .orders-richer-tab-count {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-700, #2257c0);
}
.orders-richer-page .retailer-products-tab {
    border: none;
    background: transparent;
    cursor: pointer;
}
.orders-richer-page .panel-card.retailer-products-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* ===== Orders manage — align Print receipt CTA with Products CTA ===== */
.orders-manage-richer-page .online-manage-header-actions {
    --rp-item-pad-x: 16px;
    --rp-font: 0.875rem;
    --rp-lh: 1.2;
    --rp-icon: 1.05rem;
    --rp-radius-rail: 12px;
}
.orders-manage-richer-page .orders-manage-receipt-cta {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--accent-600);
    background: var(--accent-600);
    color: #fff !important;
}
.orders-manage-richer-page .orders-manage-receipt-cta:hover,
.orders-manage-richer-page .orders-manage-receipt-cta:focus {
    background: var(--accent-700);
    border-color: var(--accent-700);
    color: #fff !important;
}
.orders-manage-richer-page .orders-manage-accepted-subtabs {
    padding: 0 16px 12px;
}
.orders-manage-richer-page .retailer-products-tab {
    border: none;
    cursor: pointer;
}
.orders-manage-richer-page .retailer-products-tab.active,
.orders-manage-richer-page .retailer-products-tab.is-active {
    background: var(--surface, #fff);
    color: var(--accent-600);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.orders-manage-richer-page .retailer-products-tab.active .retailer-purchase-manage-tab-count,
.orders-manage-richer-page .retailer-products-tab.is-active .retailer-purchase-manage-tab-count {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-700, #2257c0);
}

/* Retailer manage-order pricing grid */
.retailer-purchases-page .retailer-pricing-card:not(.online-manage-products-card) {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}
.retailer-purchases-page .retailer-pricing-table-scroll:not(.online-manage-table-wrap) {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid #f1f5f9;
    background: #fff;
}
.retailer-purchases-page .retailer-pricing-table {
    width: 100%;
    min-width: 1320px;
    table-layout: auto;
}
.retailer-purchases-page .retailer-pricing-table--no-pos-pricing {
    min-width: 1040px;
}
.retailer-purchases-page .retailer-pricing-table--pos-order {
    min-width: 1180px;
}
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-discount,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-taxable {
    text-align: right;
}
.retailer-purchases-page .retailer-col-discount,
.retailer-purchases-page .retailer-col-taxable {
    width: 7rem;
    min-width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-col-discount {
    color: #b45309;
}
.retailer-purchases-page .retailer-pricing-table thead th,
.retailer-purchases-page .retailer-pricing-table tbody td {
    padding: 12px 14px;
}
.retailer-purchases-page .retailer-col-thumb {
    width: 72px;
    min-width: 72px;
}
.retailer-purchases-page .retailer-col-product {
    min-width: 260px;
    max-width: 260px;
    vertical-align: middle;
}
.retailer-purchases-page .retailer-product-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.retailer-purchases-page .retailer-product-path {
    display: block;
    max-width: 240px;
    margin-top: 3px;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.retailer-purchases-page .retailer-col-sku {
    width: 7rem;
    min-width: 7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-col-variant {
    width: 6rem;
    min-width: 6rem;
    white-space: nowrap;
    font-size: 12px;
}
.retailer-purchases-page .retailer-col-qty {
    width: 4rem;
    min-width: 4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-qty {
    text-align: center;
}
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-unit-price,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-mrp,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-total,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-tax,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-unit-incl,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-margin,
.retailer-purchases-page .retailer-pricing-table thead th.retailer-col-target {
    text-align: right;
}
.retailer-purchases-page .retailer-col-unit-price,
.retailer-purchases-page .retailer-col-mrp,
.retailer-purchases-page .retailer-col-total,
.retailer-purchases-page .retailer-col-unit-incl {
    width: 7rem;
    min-width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-col-mrp {
    color: #64748b;
    font-weight: 500;
}
.retailer-purchases-page .retailer-col-unit-price {
    font-weight: 500;
}
.retailer-purchases-page .retailer-col-total {
    font-weight: 600;
    color: var(--heading);
}
.retailer-purchases-page .retailer-col-unit-incl {
    font-weight: 500;
    color: var(--slate-700);
}
.retailer-purchases-page .retailer-col-tax {
    width: 7.5rem;
    min-width: 7.5rem;
    text-align: right;
    vertical-align: middle;
}
.retailer-purchases-page .retailer-line-tax-stack,
.agent-platform-sale-detail-page .retailer-line-tax-stack,
.admin-orders-detail-page .retailer-line-tax-stack,
.online-order-manage-page .online-manage-lines-table .retailer-line-tax-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.retailer-purchases-page .retailer-line-tax-amount,
.agent-platform-sale-detail-page .retailer-line-tax-amount,
.admin-orders-detail-page .retailer-line-tax-amount,
.online-order-manage-page .online-manage-lines-table .retailer-line-tax-amount {
    display: block;
    font-size: 12.5px;
    color: var(--slate-700);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-line-tax-empty,
.agent-platform-sale-detail-page .retailer-line-tax-empty,
.admin-orders-detail-page .retailer-line-tax-empty,
.online-order-manage-page .online-manage-lines-table .retailer-line-tax-empty {
    color: var(--slate-400);
    font-size: 12px;
}
.retailer-purchases-page .retailer-line-gst-badge,
.agent-platform-sale-detail-page .retailer-line-gst-badge,
.admin-orders-detail-page .retailer-line-gst-badge,
.online-order-manage-page .online-manage-lines-table .retailer-line-gst-badge {
    display: inline-block;
    margin-top: 0;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.4;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-line-gst-badge--5,
.agent-platform-sale-detail-page .retailer-line-gst-badge--5,
.admin-orders-detail-page .retailer-line-gst-badge--5,
.online-order-manage-page .online-manage-lines-table .retailer-line-gst-badge--5 {
    background: #ecfdf5;
    color: #047857;
}
.retailer-purchases-page .retailer-line-gst-badge--18,
.agent-platform-sale-detail-page .retailer-line-gst-badge--18,
.admin-orders-detail-page .retailer-line-gst-badge--18,
.online-order-manage-page .online-manage-lines-table .retailer-line-gst-badge--18 {
    background: #fffbeb;
    color: #b45309;
}
.retailer-purchases-page .retailer-line-gst-badge--default,
.agent-platform-sale-detail-page .retailer-line-gst-badge--default,
.admin-orders-detail-page .retailer-line-gst-badge--default,
.online-order-manage-page .online-manage-lines-table .retailer-line-gst-badge--default {
    background: var(--slate-100);
    color: var(--slate-600);
}
.retailer-purchases-page .retailer-col-margin {
    width: 6rem;
    min-width: 6rem;
    text-align: right;
    vertical-align: middle;
}
.retailer-purchases-page .retailer-target-save-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.retailer-purchases-page .retailer-action-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 7.5rem;
}
.retailer-purchases-page .retailer-action-stack .btn {
    width: 100%;
    justify-content: center;
}
.retailer-purchases-page .retailer-action-stack .retailer-in-pos-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    font-weight: 600;
}
.retailer-purchases-page .retailer-pricing-save-btn {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-pricing-save-btn:disabled {
    opacity: 0.7;
}
.retailer-purchases-page .retailer-col-target {
    width: 9.5rem;
    min-width: 9.5rem;
    text-align: right;
    vertical-align: middle;
}
/* While bulk pricing is active, lightly soft-focus row margin/target/Show in POS so header controls lead */
#retailer-purchases-table.is-bulk-pricing-active thead th.retailer-col-margin,
#retailer-purchases-table.is-bulk-pricing-active thead th.retailer-col-target,
#retailer-purchases-table.is-bulk-pricing-active thead th.retailer-col-action,
#retailer-purchases-table.is-bulk-pricing-active tbody td.retailer-col-margin,
#retailer-purchases-table.is-bulk-pricing-active tbody td.retailer-col-target,
#retailer-purchases-table.is-bulk-pricing-active tbody td.retailer-col-action {
    filter: blur(0.6px);
    opacity: 0.82;
    pointer-events: none;
    user-select: none;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.retailer-purchases-page .retailer-col-status {
    min-width: 8.5rem;
    white-space: nowrap;
}
.retailer-purchases-page .retailer-col-action {
    min-width: 8rem;
    white-space: nowrap;
    vertical-align: middle;
}
.retailer-purchases-page .retailer-line-total {
    font-weight: 600;
    color: var(--heading);
}
.retailer-purchases-page .retailer-pricing-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    text-align: right;
    color: var(--slate-700);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}
.retailer-purchases-page .retailer-pricing-input::-webkit-outer-spin-button,
.retailer-purchases-page .retailer-pricing-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.retailer-purchases-page .retailer-pricing-input:focus {
    outline: none;
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}
.retailer-purchases-page .retailer-target-price-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.retailer-purchases-page .retailer-target-price-prefix {
    flex-shrink: 0;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1;
}
.retailer-purchases-page .retailer-target-price-input {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 768px) {
    .retailer-purchases-page .retailer-pricing-table-scroll {
        border-radius: 0.5rem;
    }
}
.retailer-purchase-flash {
    margin-bottom: 12px;
}

/* ===== Online Orders — header & storefront ===== */
.online-orders-list-page .online-orders-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}
.online-orders-list-page .online-orders-header-actions .order-date-filter {
    margin: 0;
}
.online-orders-list-table .online-order-row {
    cursor: pointer;
    transition: background-color .15s ease;
}
.online-orders-list-table .online-order-row:hover {
    background: var(--slate-50);
}
.online-orders-list-table .online-order-row:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: -2px;
}
.online-orders-header {
    margin-bottom: 14px;
    flex-shrink: 0;
}
.online-orders-header h1 {
    margin: 0 0 4px;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.online-orders-subtitle {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--slate-500);
}
.online-view-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: var(--slate-100);
    border-radius: 999px;
}
.online-view-tab {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-600);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.online-view-tab:hover {
    color: var(--heading);
    text-decoration: none;
}
.online-view-tab.active {
    background: var(--surface);
    color: var(--heading);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.main-content:has(.online-storefront-page) {
    padding: 16px 24px 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.online-storefront-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.online-storefront-layout {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.online-storefront-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.online-storefront-catalog {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    padding-bottom: 8px;
}
.online-search-wrap {
    position: relative;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.online-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 13px;
}
.online-search-wrap input,
.online-search-wrap .form-control {
    padding: 8px 12px 8px 36px !important;
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.online-moq-products,
.b2b-moq-products {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.b2b-moq-order {
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
    overflow: visible;
    padding-bottom: 0;
}
.b2b-moq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.b2b-moq-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.b2b-moq-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.b2b-moq-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.b2b-moq-thumb i {
    font-size: 1.5rem;
    color: #94a3b8;
}
.b2b-moq-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.3;
}
.b2b-moq-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
}
.b2b-moq-sku {
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f8fafc;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.b2b-moq-price {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
}
.b2b-moq-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    flex-shrink: 0;
}
.b2b-moq-status--locked {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.15);
}
.b2b-moq-status--complete {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.12);
}
.b2b-moq-status-icon {
    font-size: 14px;
}
.b2b-moq-matrix--desktop {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 20px;
}
.b2b-moq-matrix--mobile {
    display: none;
    padding: 12px 16px 4px;
    gap: 8px;
}
.b2b-moq-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fafbfc;
    transition: border-color .15s, background-color .15s, opacity .15s;
}
.b2b-moq-cell:focus-within {
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.b2b-moq-cell--disabled {
    opacity: 0.45;
    background: #f1f5f9;
    pointer-events: none;
}
.b2b-moq-cell--highlight,
.b2b-moq-mobile-row.b2b-moq-cell--highlight {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.b2b-moq-cell-size {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.b2b-moq-stepper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 128px;
    min-width: 0;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
.b2b-moq-stepper--compact {
    max-width: 116px;
    flex-shrink: 0;
}
.b2b-moq-stepper--disabled {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.b2b-moq-stepper-btn {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: auto;
    border: none;
    background: #f8fafc;
    color: #334155;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s, color .12s;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}
.b2b-moq-stepper-btn i {
    display: block;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}
.b2b-moq-stepper-btn .b2b-moq-stepper-glyph {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.b2b-moq-stepper-btn:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
}
.b2b-moq-stepper-btn:active:not(:disabled) {
    background: #cbd5e1;
}
.b2b-moq-qty-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: auto;
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    padding: 0 2px;
    background: #fff;
    -moz-appearance: textfield;
    line-height: 1;
    box-sizing: border-box;
}
.b2b-moq-qty-input::-webkit-outer-spin-button,
.b2b-moq-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.b2b-moq-qty-input:focus {
    outline: none;
    background: #eff6ff;
}
.b2b-moq-cell-stock {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}
.b2b-moq-unavailable-label {
    color: #94a3b8;
    font-weight: 700;
}
.b2b-moq-mobile-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fafbfc;
}
.b2b-moq-mobile-row--disabled {
    opacity: 0.5;
    background: #f1f5f9;
}
.b2b-moq-mobile-size {
    display: block;
    font-weight: 800;
    font-size: 14px;
    color: #0f172a;
}
.b2b-moq-mobile-stock {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.b2b-moq-mobile-oos {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}
.b2b-moq-validation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 20px 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    transition: background-color .2s, border-color .2s, color .2s;
}
.b2b-moq-validation--incomplete {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.b2b-moq-validation--complete {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.b2b-moq-validation i {
    flex-shrink: 0;
    margin-top: 1px;
}
.b2b-moq-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e2e8f0;
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    border-radius: 0 0 12px 12px;
}
.b2b-moq-sticky-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #475569;
}
.b2b-moq-sticky-summary strong {
    color: #0f172a;
    font-weight: 800;
}
.b2b-moq-sticky-action {
    min-width: 220px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, transform .1s, box-shadow .15s, opacity .15s;
}
.b2b-moq-sticky-action:disabled {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}
.b2b-moq-sticky-action:not(:disabled) {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.b2b-moq-sticky-action:not(:disabled):hover {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
}
.b2b-moq-sticky-action:not(:disabled):active {
    transform: translateY(0);
}
.online-storefront-catalog:has(.b2b-moq-order) {
    padding-bottom: 8px;
}
@media (max-width: 767px) {
    .b2b-moq-matrix--desktop { display: none; }
    .b2b-moq-matrix--mobile {
        display: flex;
        flex-direction: column;
    }
    .b2b-moq-header {
        flex-direction: column;
        align-items: stretch;
    }
    .b2b-moq-status {
        justify-content: center;
        width: 100%;
    }
    .b2b-moq-sticky-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .b2b-moq-sticky-action {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 1100px) {
    .b2b-moq-matrix--desktop {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.catalog-flexible-moq-section {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.catalog-flexible-moq-check .form-check-label {
    font-weight: 600;
}
.catalog-moq-quantity-wrap {
    max-width: 220px;
}
.online-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    align-content: start;
}
.online-product-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}
.online-product-card:hover:not(:disabled):not(.out-of-stock) {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: var(--shadow-sm);
}
.online-product-card.in-cart {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2);
}
.online-product-card.is-paused,
.pos-leaf-card.is-paused {
    cursor: not-allowed;
    opacity: 0.72;
}
.online-product-card.is-paused .online-product-img img,
.pos-leaf-card.is-paused .pos-leaf-card-img img {
    filter: blur(4px) grayscale(0.7);
}
.b2b-moq-cell--paused,
.b2b-moq-mobile-row--paused {
    opacity: 0.72;
}
.b2b-moq-cell--paused .b2b-moq-cell-size,
.b2b-moq-mobile-row--paused .b2b-moq-mobile-size {
    filter: blur(2px);
    opacity: 0.85;
}
.b2b-moq-cell--paused .b2b-moq-unavailable-label,
.b2b-moq-mobile-row--paused .b2b-moq-mobile-oos {
    color: #856404;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.online-product-card.out-of-stock {
    opacity: .65;
    cursor: not-allowed;
}
.online-product-img {
    position: relative;
    aspect-ratio: 1;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.online-product-card.out-of-stock .online-product-img {
    background: var(--slate-100);
}
.online-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.online-product-img > i {
    font-size: 2rem;
    color: var(--accent-400);
}
.online-product-card.out-of-stock .online-product-img > i {
    color: var(--slate-400);
}
.online-cart-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #DBEAFE;
    color: var(--accent-700);
    font-size: 11px;
    font-weight: 700;
    min-width: 28px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}
.online-product-info { padding: 10px 12px 12px; }
.online-product-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 6px;
    line-height: 1.25;
}
.online-product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.online-product-price {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-600);
}
.online-product-oos {
    font-size: 11px;
    font-weight: 600;
    color: #DC2626;
    white-space: nowrap;
}

.online-storefront-cart {
    width: 320px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.online-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.online-cart-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    color: var(--heading);
}
.online-cart-header-left i {
    font-size: 1rem;
    color: var(--accent-600);
}
.online-cart-count-label {
    font-size: 12px;
    color: var(--slate-500);
}
.online-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}
.online-cart-empty {
    font-size: 12px;
    margin: 0;
    text-align: center;
    padding: 24px 8px;
    color: var(--slate-500);
}
.online-cart-line {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
}
.online-line-remove {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.online-line-remove:hover { color: var(--danger); }
.online-line-title {
    font-size: 12px;
    font-weight: 600;
    padding-right: 18px;
    margin-bottom: 8px;
    color: var(--heading);
}
.online-line-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.online-qty-stepper {
    display: grid;
    grid-template-columns: 28px minmax(24px, 1fr) 28px;
    grid-template-rows: 28px;
    align-items: stretch;
    width: 84px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    box-sizing: border-box;
}
.online-qty-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f8fafc;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--heading);
    box-sizing: border-box;
}
.online-qty-stepper button .b2b-moq-stepper-glyph {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.online-qty-stepper button:hover { background: var(--slate-100); }
.online-qty-val {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-sizing: border-box;
}
.online-line-price {
    font-weight: 700;
    font-size: 12px;
    color: var(--heading);
}
.online-cart-footer {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}
.online-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
}
.online-cart-total-row span:last-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-600);
}
.online-checkout-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.online-storefront-toast {
    margin-bottom: 10px;
    font-size: 12.5px;
}

.online-place-order-modal .modal-dialog {
    max-width: 420px;
}
.online-place-order-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
}
.online-place-order-modal .modal-header {
    padding: 18px 20px 12px;
    border-bottom: none;
}
.online-place-order-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}
.online-place-order-modal .modal-body {
    padding: 0 20px 8px;
}
.online-place-order-modal .modal-footer {
    padding: 12px 20px 18px;
    border-top: none;
    justify-content: flex-end;
}
.online-place-field {
    margin-bottom: 14px;
}
.online-place-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
}
.online-place-field .form-control {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
}
.online-place-field .form-control.is-invalid {
    border-color: #DC2626;
}
.online-place-summary {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.online-place-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--slate-700);
}
.online-place-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
}
.online-place-summary-total span:last-child {
    color: var(--accent-600);
    font-size: 14px;
}
.online-place-order-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}

@media (max-width: 992px) {
    .main-content:has(.online-storefront-page) {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .online-storefront-layout {
        flex-direction: column;
        overflow: visible;
    }
    .online-storefront-cart {
        width: 100%;
        max-height: 360px;
    }
}

/* ===== Tables & cards ===== */
.panel-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel-card .card-header {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--heading);
    background: var(--surface-2);
    display: flex;
    justify-content: space-between; align-items: center;
}
.panel-card .card-body { padding: 16px; font-size: var(--text-base); }

.table {
    font-size: var(--text-base);
    margin-bottom: 0;
}
.table th {
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--slate-700);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--slate-50); }

.main-content .form-control,
.main-content .form-select {
    font-size: var(--text-sm);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
}
/* Search placeholders — smaller than typed text, all panels */
.panel-wrapper input[type="search"]::placeholder,
.main-content input[type="search"]::placeholder,
.pos-page input[type="search"]::placeholder,
.orders-list-search-input::placeholder,
.retailer-pos-inline-search-input::placeholder,
.catalog-rules-panel-search::placeholder,
.catalog-search-select-query::placeholder,
.admin-finance-ledger-search-input::placeholder,
.panel-wrapper input[id*="earch"]::placeholder,
.panel-wrapper input[class*="earch"]::placeholder,
.main-content input[id*="earch"]::placeholder,
.main-content input[class*="earch"]::placeholder,
.pos-page input[id*="earch"]::placeholder,
.pos-page input[class*="earch"]::placeholder {
    font-size: 10px;
    line-height: 1.2;
    opacity: 1;
}
.main-content .form-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.main-content .btn {
    font-size: var(--text-sm);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.main-content .btn-sm {
    font-size: var(--text-xs);
    padding: 4px 10px;
    gap: 6px;
}
.main-content .alert {
    font-size: var(--text-base);
}
.main-content .panel-flash-alert {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 1rem;
    padding: 12px 3rem 12px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
}
.main-content .panel-flash-alert-text {
    flex: 1;
    line-height: 1.45;
    padding-right: 0.5rem;
}
.main-content .panel-flash-alert .btn-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.65;
}
.main-content .panel-flash-alert .btn-close:hover {
    opacity: 1;
}
.main-content .panel-flash-alert.alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.main-content .panel-flash-alert.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.main-content .badge {
    font-size: var(--text-xs);
    font-weight: 600;
}
.main-content .text-muted,
.main-content .small {
    font-size: var(--text-xs) !important;
}

.badge-manufacturer { background: var(--navy-700); }
.badge-retailer { background: var(--accent-600); }

.rating-stars { color: var(--warning); }

.chart-row {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    margin: 18px 0 20px;
}
.chart-card .card-header {
    padding: 10px 14px;
    font-size: var(--text-base);
}
.chart-card .chart-body {
    padding: 8px 12px 12px;
    height: 248px;
    position: relative;
}
.chart-card .chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}
.recharts-mount {
    width: 100%;
    height: 100%;
    min-height: 200px;
}
.chart-body-tall {
    height: 280px;
}
.chart-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12.5px;
}

.insights-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.dashboard-section-card .card-header {
    padding: 12px 16px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--heading);
}
.dashboard-section-body {
    padding: 0;
}
.dashboard-section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-600);
    text-decoration: none;
}
.dashboard-section-link:hover {
    color: var(--accent-700);
    text-decoration: none;
}
.dashboard-section-link i {
    font-size: 12px;
}
.dashboard-empty-state {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
}
.dashboard-empty-state i {
    display: block;
    font-size: 1.35rem;
    color: var(--slate-400);
    margin-bottom: 8px;
}
.dashboard-empty-state p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.dashboard-orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dashboard-order-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.dashboard-order-item:last-child { border-bottom: none; }
.dashboard-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.dashboard-order-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dashboard-order-head .online-order-id {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--heading);
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-order-head .online-order-id:hover { color: var(--accent-600); }
.dashboard-order-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.dashboard-order-products {
    color: var(--text);
    font-weight: 500;
}
.dashboard-order-customer::before {
    content: "·";
    margin-right: 6px;
    color: var(--slate-400);
}
.dashboard-order-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dashboard-order-foot .online-order-date {
    font-size: var(--text-xs);
    color: var(--slate-500);
}
.dashboard-order-foot .online-order-total {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--heading);
    white-space: nowrap;
}
.dashboard-bottom-row {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px 16px;
}
.dashboard-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--heading);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.dashboard-quick-action:hover {
    border-color: rgba(var(--accent-rgb), .35);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--heading);
    text-decoration: none;
}
.dashboard-quick-action-primary {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #fff;
}
.dashboard-quick-action-primary:hover {
    background: var(--accent-700);
    border-color: var(--accent-700);
    color: #fff;
}
.dashboard-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--accent-soft);
    color: var(--accent-600);
}
.dashboard-quick-action-primary .dashboard-quick-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.dashboard-quick-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
.dashboard-notices-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dashboard-notice-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.dashboard-notice-item:last-child { border-bottom: none; }
.dashboard-notice-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.dashboard-notice-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--danger-soft);
    color: #B91C1C;
}
.dashboard-notice-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.35;
}
.dashboard-notice-excerpt {
    margin: 0 0 6px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}
.dashboard-notice-date {
    font-size: var(--text-xs);
    color: var(--slate-500);
}

.seller-note {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent-500);
    padding: 12px 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--slate-700);
}

@media (max-width: 992px) {
    .panel-notification-dropdown {
        left: 12px;
        width: min(380px, calc(100vw - 24px));
    }
    .chart-row { grid-template-columns: 1fr; }
    .insights-row { grid-template-columns: 1fr; }
    .dashboard-bottom-row { grid-template-columns: 1fr; }
    .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Responsive shell: tablet + mobile drawer ===== */
.panel-mobile-bar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .panel-wrapper,
    .panel-wrapper.admin-panel:not(.sidebar-is-collapsed),
    .panel-wrapper.sidebar-is-collapsed {
        --sidebar-width: min(220px, 72vw);
        grid-template-columns: minmax(0, 1fr);
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
    }

    .panel-wrapper .main-content {
        grid-column: 1;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        padding: 0 14px 20px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .panel-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 150;
        margin: 0 -14px 12px;
        padding: 10px 14px;
        background: rgba(245, 243, 255, 0.96);
        border-bottom: 1px solid rgba(124, 58, 237, 0.12);
    }

    .panel-wrapper:not(.admin-panel) .panel-mobile-bar {
        background: rgba(248, 250, 252, 0.94);
        border-bottom-color: rgba(15, 23, 42, 0.08);
    }

    .panel-mobile-menu-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid rgba(124, 58, 237, 0.22);
        background: #fff;
        color: #5b21b6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .panel-wrapper:not(.admin-panel) .panel-mobile-menu-btn {
        border-color: rgba(15, 23, 42, 0.12);
        color: var(--navy-800, #1e293b);
    }

    .panel-mobile-menu-btn i {
        font-size: 1.35rem;
        line-height: 1;
    }

    .panel-mobile-bar-brand {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.05rem;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    .panel-wrapper.admin-panel .panel-mobile-bar-brand {
        color: #2e1065;
    }

    .panel-mobile-bar-brand span {
        color: #7c3aed;
    }

    .panel-wrapper.seller-panel .panel-mobile-bar-brand span {
        color: #0450d5;
    }

    .panel-mobile-bar-spacer {
        flex: 1;
    }

    .panel-wrapper .sidebar {
        width: var(--sidebar-width);
        max-width: 72vw;
        z-index: 300;
        transform: translateX(-105%);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        box-shadow: none;
        overflow: hidden;
    }

    .panel-wrapper.sidebar-mobile-open .sidebar {
        transform: translateX(0);
        box-shadow: 16px 0 48px rgba(15, 10, 30, 0.28);
        overflow: hidden;
    }

    .panel-wrapper.sidebar-mobile-open .sidebar .sidebar-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .panel-wrapper.admin-panel .sidebar-nav > a.sidebar-nav-item,
    .panel-wrapper.admin-panel .sidebar-nav > .sidebar-nav-item,
    .panel-wrapper.admin-panel .sidebar-nav-group-toggle,
    .panel-wrapper.admin-panel .sidebar-nav-subitem {
        padding: 8px 10px;
        font-size: 12px;
        min-height: 40px;
    }

    .panel-wrapper.admin-panel .sidebar-brand h2 {
        font-size: 1.15rem;
    }

    .panel-wrapper.admin-panel .nav-section--admin {
        padding: 10px 10px 4px;
        font-size: 9.5px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 250;
        background: rgba(15, 10, 30, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .panel-wrapper.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-backdrop[hidden] {
        display: none !important;
    }

    /* Drawer always shows full labels — neutralize desktop icon-rail collapse */
    .panel-wrapper.sidebar-is-collapsed .sidebar-brand-text,
    .panel-wrapper.sidebar-is-collapsed .sidebar-brand-tagline,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav span,
    .panel-wrapper.sidebar-is-collapsed .sidebar-user-meta,
    .panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn span,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-chevron {
        display: initial !important;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav .nav-section {
        display: block !important;
        height: auto;
        margin: 0;
        padding: 12px 12px 6px;
        background: transparent;
        font-size: 10px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-brand {
        justify-content: flex-start;
        padding: 16px 14px;
    }

    /* Mobile drawer is full-width labels — keep notification bell visible */
    .panel-wrapper.sidebar-is-collapsed .panel-notification-bell-wrap--sidebar {
        display: block !important;
        align-self: flex-start;
        margin-top: 1px;
        margin-left: auto;
    }

    .panel-wrapper.admin-panel.sidebar-is-collapsed .sidebar-brand--text-only .sidebar-brand-mark {
        display: none;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav {
        padding: 10px 6px 10px 8px;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav a,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem {
        width: auto !important;
        max-width: none;
        min-width: 0;
        height: auto;
        margin: 0 0 2px !important;
        padding: 10px 12px !important;
        justify-content: flex-start;
        gap: 10px !important;
        border-radius: 10px;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav a > i:first-child,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav .sidebar-nav-item > i:first-child,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group-toggle > i:first-child,
    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem > i:first-child {
        width: 18px !important;
        height: auto;
        font-size: 14px !important;
        margin: 0 !important;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-subitem > span {
        display: inline !important;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-nav-group.is-open .sidebar-nav-submenu {
        align-items: stretch;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-user-block {
        justify-content: flex-start;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn,
    .panel-wrapper.sidebar-is-collapsed .sidebar-logout-btn.w-100 {
        width: 100% !important;
        max-width: none;
        height: auto;
        margin: 8px 0 0 !important;
        padding: 6px 10px !important;
        border-radius: 6px;
    }

    .panel-wrapper.sidebar-is-collapsed .sidebar-footer {
        align-items: stretch;
    }

    /* Collapse control closes the drawer on small screens */
    .panel-wrapper .sidebar-collapse-btn {
        right: 10px;
    }

    .panel-wrapper.sidebar-mobile-open .sidebar-collapse-icon-expanded { display: none; }
    .panel-wrapper.sidebar-mobile-open .sidebar-collapse-icon-collapsed { display: inline; }

    /* Lock page scroll under the drawer without breaking main scroller after close */
    .panel-wrapper.sidebar-mobile-open .main-content {
        overflow: hidden;
        touch-action: none;
    }

    body.sidebar-drawer-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* Touch-friendly nav rows */
    .sidebar-nav a.sidebar-nav-item,
    .sidebar-nav-group-toggle,
    .sidebar-nav-subitem {
        min-height: 40px;
    }
}

@media (max-width: 767.98px) {
    .panel-wrapper,
    .panel-wrapper.admin-panel:not(.sidebar-is-collapsed),
    .panel-wrapper.sidebar-is-collapsed {
        --sidebar-width: min(200px, 78vw);
    }

    .panel-wrapper .sidebar {
        max-width: 78vw;
    }

    .panel-wrapper .main-content {
        padding: 0 12px 18px;
    }

    .panel-mobile-bar {
        margin: 0 -12px 10px;
        padding: 8px 12px;
    }

    .panel-wrapper.admin-panel .admin-page-header,
    .panel-wrapper.admin-panel .admin-finance-header,
    .panel-wrapper.admin-panel .admin-partners-header,
    .panel-wrapper.admin-panel .admin-orders-header,
    .panel-wrapper.admin-panel .page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .panel-wrapper.admin-panel .admin-orders-header-actions,
    .panel-wrapper.admin-panel .admin-finance-header--payouts,
    .panel-wrapper.admin-panel .admin-page-header .btn-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .panel-wrapper.admin-panel .admin-orders-tabs,
    .panel-wrapper.admin-panel .admin-finance-main-tabs,
    .panel-wrapper.admin-panel .admin-partners-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .panel-wrapper.admin-panel .admin-orders-tabs::-webkit-scrollbar,
    .panel-wrapper.admin-panel .admin-finance-main-tabs::-webkit-scrollbar,
    .panel-wrapper.admin-panel .admin-partners-tabs::-webkit-scrollbar {
        display: none;
    }

    .panel-wrapper.admin-panel .table-responsive,
    .panel-wrapper.admin-panel .admin-finance-table-wrap,
    .panel-wrapper.admin-panel .admin-payout-orders-table-wrap {
        margin-left: -4px;
        margin-right: -4px;
        padding-bottom: 4px;
    }

    .panel-wrapper.admin-panel .admin-orders-pagination.panel-pagination,
    .panel-wrapper.admin-panel .admin-finance-pagination.panel-pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .panel-wrapper.admin-panel .admin-orders-table,
    .panel-wrapper.admin-panel .admin-finance-table {
        font-size: 12px;
    }

    .panel-flash-alert {
        font-size: 13px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .panel-wrapper.admin-panel:not(.sidebar-is-collapsed) {
        --sidebar-width: 196px;
    }

    .panel-wrapper.admin-panel .main-content {
        padding: 16px 18px;
    }
}
@media (max-width: 900px) {
    .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .dashboard-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Registration wizard ===== */
.register-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.register-steps .step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--slate-400);
}
.register-steps .step span {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--slate-200); color: var(--slate-500);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
}
.register-steps .step.active { color: var(--accent-600); font-weight: 600; }
.register-steps .step.active span { background: var(--accent-500); color: #fff; }
.register-steps .step-line {
    width: 24px; height: 2px; background: var(--slate-200); margin: 0 4px;
}
.register-steps .step-line.active { background: var(--accent-500); }

@media (max-width: 576px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .referral-code { font-size: 1.25rem; }
    .register-steps .step span { width: 20px; height: 20px; font-size: 10px; }
}

.catalog-field-bracket-hint {
    font-size: 12px;
    line-height: 1.3;
    margin-top: -2px;
}

/* ===== Registration reminder modal ===== */
.registration-reminder-dialog {
    max-width: min(920px, 94vw);
}

.registration-reminder-modal {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    padding: 0.5rem;
}

.registration-reminder-modal .modal-header,
.registration-reminder-modal .modal-body,
.registration-reminder-modal .modal-footer {
    padding: 1.75rem 2rem;
}

.registration-reminder-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    font-size: 2rem;
}

.registration-reminder-modal .modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--slate-900, #0f172a);
}

.registration-reminder-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(14, 165, 233, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.registration-reminder-step {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-600, #2563eb);
}

.registration-reminder-copy {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--slate-700, #334155);
}

#registrationReminderModal .modal-backdrop.show {
    opacity: 0.72;
}

/* ===== Point of Sale ===== */
.main-content:has(.pos-page) {
    padding: 16px 24px 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.pos-page {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}
.pos-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-wholesale-main {
    overflow: hidden;
}
.pos-wholesale {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-explorer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.pos-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
}
.pos-crumb-active { color: var(--accent-600); }
.pos-crumb-current { color: var(--heading); }
.pos-crumb-muted { color: var(--slate-500); }
.pos-crumb-sep { color: var(--slate-300); }
.pos-crumb-scan {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 11px;
}
.pos-scan-flash {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}
.pos-scan-flash i { margin-right: 4px; }
.pos-explorer-zone {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}
/* Matrix view: single card only (no panel-card inside article) */
.pos-explorer-zone:has(#pos-explorer-matrix:not(.d-none)) {
    border: none;
    box-shadow: none;
    background: transparent;
}
#pos-explorer-browser,
#pos-explorer-matrix {
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
#pos-explorer-browser {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 14px 18px;
}
#pos-explorer-matrix:not(.d-none) {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}
#pos-explorer-matrix .pos-wholesale-matrix {
    overflow: visible;
}
#pos-explorer-matrix .pos-matrix-grid {
    align-content: start;
    align-items: start;
}
#pos-explorer-matrix .pos-matrix-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: 0;
}
#pos-explorer-matrix.d-none,
#pos-explorer-browser.d-none {
    display: none !important;
}
.pos-root-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.pos-root-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition: transform .2s ease;
}
.pos-root-card:hover { transform: translateY(-3px); }
.pos-root-card:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 4px;
    border-radius: var(--radius);
}
.pos-root-card-visual {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    background: #faf6f0;
}
.pos-root-card-visual img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.pos-root-card-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading);
    letter-spacing: -0.01em;
}
.pos-root-card-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--slate-500);
    margin-top: -6px;
}
.pos-sub-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pos-sub-card {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    min-width: 160px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pos-sub-card:hover {
    border-color: rgba(var(--accent-rgb), .35);
    background: #f8fbff;
    box-shadow: var(--shadow-md);
}
.pos-sub-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
}
.pos-sub-card-count {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-600);
}
.pos-leaf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.pos-leaf-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pos-leaf-card:hover {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.pos-leaf-card-img {
    aspect-ratio: 4/3;
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px 4px;
    box-sizing: border-box;
}
.pos-leaf-card-img img {
    width: 100%;
    height: 80%;
    object-fit: contain;
    object-position: center center;
}
.pos-leaf-card-body { padding: 10px 12px 12px; }
.pos-leaf-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-leaf-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
}
.pos-leaf-card-price { color: var(--accent-600); }
.pos-leaf-card-stock { color: #047857; }
.pos-leaf-card-stock.is-out { color: #dc2626; }
.pos-explorer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.pos-explorer-empty i {
    font-size: 2.5rem;
    color: var(--slate-300);
    margin-bottom: 12px;
}
.pos-explorer-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 6px;
}
.pos-explorer-empty-hint {
    font-size: 12px;
    color: var(--slate-500);
    max-width: 320px;
    margin: 0;
}
.pos-matrix-override-note {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    font-size: 12px;
    font-weight: 600;
}
.pos-matrix-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 20px 16px;
    border-top: 1px solid #f1f5f9;
    background: rgba(255, 255, 255, 0.98);
    position: sticky;
    bottom: 0;
    z-index: 6;
}
.pos-matrix-actions--table {
    padding-left: 32px;
}
.pos-wholesale-matrix--b2c {
    min-width: 0;
    width: 100%;
}
.pos-b2c-mode .pos-matrix-header-copy {
    min-width: 0;
}
.pos-matrix-header-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.pos-matrix-header-copy {
    min-width: 240px;
    flex: 1;
}
.pos-matrix-title {
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pos-matrix-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}
.pos-matrix-lookup-sku {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.35;
}
.pos-matrix-lookup-tag {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.35;
}
.pos-variant-table__col-tag,
.pos-variant-table__tag {
    white-space: nowrap;
}
.pos-variant-table__tag-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: #475569;
}
.pos-retail-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.b2b-moq-price--retail {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
}
.b2b-moq-price-tax-note {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.pos-b2c-stock-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.pos-matrix-grid.b2b-moq-matrix--desktop {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 12px;
    width: 100%;
    min-width: min(100%, 28rem);
}
.pos-matrix-cell {
    width: 100%;
    min-width: 7rem;
    max-width: 8rem;
    justify-self: center;
}
.pos-matrix-stepper {
    width: 100%;
    max-width: 8rem;
    margin: 0 auto;
}
.pos-leaf-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-gst-line--inclusive .pos-gst-line-label {
    color: #64748b;
    font-size: 11px;
    font-style: italic;
}
.pos-wholesale-matrix {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
}
.pos-wholesale-matrix .b2b-moq-matrix--desktop {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    padding: 12px 20px 8px;
}
.pos-wholesale-matrix--table .pos-variant-table-wrap {
    padding: 0 20px 8px;
    overflow-x: auto;
}
.pos-variant-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.pos-variant-table thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    white-space: nowrap;
}
.pos-variant-table thead th:first-child {
    border-radius: 8px 0 0 0;
}
.pos-variant-table thead th:last-child {
    border-radius: 0 8px 0 0;
}
.pos-variant-table__col-qty {
    text-align: right;
    width: 9rem;
}
.pos-variant-row td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}
.pos-variant-row:last-child td {
    border-bottom: none;
}
.pos-variant-row:focus-within {
    background: #f8fafc;
}
.pos-variant-row--disabled {
    opacity: 0.55;
}
.pos-variant-table__size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    padding: 0 8px;
    border-radius: 6px;
    background: #f1f5f9;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.pos-variant-table__sku {
    min-width: 7rem;
    max-width: 11rem;
}
.pos-variant-table__sku-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
}
.pos-variant-table__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 6.5rem;
}
.pos-variant-table__amount {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
}
.pos-variant-table__tax {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.2;
}
.pos-variant-table__tax-muted {
    font-size: 12px;
    color: #94a3b8;
}
.pos-variant-table__gst {
    white-space: nowrap;
}
.pos-variant-gst-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
.pos-variant-gst-badge--5 {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.pos-variant-gst-badge--18 {
    background: #fdf4ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}
.pos-variant-gst-badge--default {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.pos-variant-stock-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.pos-variant-stock-pill--in {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.pos-variant-stock-pill--out {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.pos-variant-stock-pill--paused {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.pos-variant-table__qty {
    text-align: right;
}
.pos-variant-table__qty .b2b-moq-stepper {
    display: inline-flex;
    max-width: 7.5rem;
    width: 7.5rem;
    height: 34px;
    margin-left: auto;
    border-radius: 8px;
}
.pos-variant-table__qty .b2b-moq-stepper-btn {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    min-width: 1.75rem;
}
.pos-variant-table__qty .b2b-moq-qty-input {
    font-size: 13px;
    font-weight: 600;
}
.pos-wholesale-matrix .b2b-moq-stepper {
    max-width: 100%;
    height: 34px;
}
.pos-wholesale-matrix .b2b-moq-stepper-btn {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
}
.pos-wholesale-matrix .b2b-moq-qty-input {
    font-size: 12px;
}
.pos-matrix-moq-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
}
.pos-matrix-moq-banner.is-met {
    border-color: #6ee7b7;
    background: #ecfdf5;
    color: #047857;
}
.pos-matrix-moq-banner i {
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 767px) {
    .pos-root-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .pos-root-card-label { font-size: 13px; }
    .pos-root-card-count { font-size: 10px; }
    .pos-sub-card { min-width: calc(50% - 6px); flex: 1; }
}
.pos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.pos-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-title i { font-size: 1.15rem; color: var(--accent-600); }
.pos-title h1 {
    margin: 0;
    font-size: var(--heading-page);
    font-weight: 700;
}
.pos-search-wrap {
    position: relative;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.pos-scan-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    flex-shrink: 0;
}
.pos-scan-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pos-scan-result-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pos-scan-meta {
    font-size: 12px;
    color: var(--slate-600);
}
.pos-scan-stock {
    font-size: 12px;
    font-weight: 700;
    color: #047857;
    white-space: nowrap;
}
.pos-scan-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.pos-scan-variant-btn {
    font-size: 11px;
    padding: 2px 8px;
}
.pos-product-card.pos-scanned {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.pos-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-600);
    pointer-events: none;
    font-size: 14px;
}
.pos-search-wrap input,
.pos-search-wrap .form-control {
    padding: 7px 12px 7px 36px !important;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border-color: var(--accent-200);
    background: #f8fbff;
}
.pos-product-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    align-content: start;
    padding-right: 4px;
}
.pos-product-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    overflow: hidden;
}
.pos-product-card:hover:not(:disabled):not(.out-of-stock) {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.pos-product-card.in-cart {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2);
}
.pos-product-card.out-of-stock {
    opacity: .55;
    cursor: not-allowed;
}
.pos-product-img {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface-2);
    overflow: hidden;
}
.pos-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pos-cart-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent-500);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.pos-product-info { padding: 8px 10px 10px; }
.pos-product-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 4px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.pos-product-price { font-weight: 700; color: var(--heading); }
.pos-product-stock { color: var(--text-muted); }

.pos-cart-panel {
    width: 360px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.pos-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.pos-cart-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-cart-header-left > i {
    font-size: 1rem;
    color: var(--accent-600);
}
.pos-cart-title { font-weight: 700; font-size: 13px; }
.pos-cart-config {
    flex-shrink: 0;
    padding: 10px 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.pos-cart-sticky-top {
    flex-shrink: 0;
}
.pos-cart-sticky-bottom {
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.pos-cart-items-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
}
.pos-b2c-mode .pos-cart-items-scroll,
.pos-b2c-mode .pos-fs-cart-items-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Return mode: pin refund footer; only return lines scroll (beats overflow:visible above) */
.pos-b2c-mode .pos-fs-cart-panel.is-return-mode .pos-cart-items-scroll,
.pos-b2c-mode .pos-fs-cart-panel.is-return-mode .pos-fs-cart-items-scroll,
.pos-b2c-mode .pos-fs-cart-panel.is-return-mode #pos-cart-items-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
}
.pos-cart-items {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
}
.pos-cart-empty { font-size: 12px; margin: 0; text-align: center; padding: 16px 8px; }
.pos-cart-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos-cart-product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 10px 8px;
    box-shadow: var(--shadow-sm);
}
.pos-cart-product-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pos-cart-product-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-cart-group-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.pos-cart-group-remove:hover {
    color: var(--danger);
    background: #fef2f2;
}
.pos-cart-group-remove i { font-size: 13px; pointer-events: none; }
.pos-cart-product-sku {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.pos-cart-variant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.pos-cart-variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.pos-cart-variant-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.pos-cart-variant-badge:active { transform: translateY(0); }
.pos-cart-variant-badge-size { font-weight: 700; }
.pos-cart-variant-badge-sep {
    opacity: .55;
    font-weight: 500;
    font-size: 10px;
}
.pos-cart-variant-badge-qty { font-variant-numeric: tabular-nums; }
.pos-cart-variant-badge--gst5 {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.pos-cart-variant-badge--gst5:hover { background: #d1fae5; }
.pos-cart-variant-badge--gst12 {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}
.pos-cart-variant-badge--gst18 {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.pos-cart-variant-badge--gst18:hover { background: #fef3c7; }

/* B2C retail: high-density variant breakdown rows */
.pos-cart-variant-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
}
.pos-cart-variant-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
    color: inherit;
}
.pos-cart-variant-row:hover .pos-cart-variant-row-size {
    color: var(--accent-600);
}
.pos-cart-variant-row-size {
    font-weight: 600;
    color: #334155;
    flex: 0 0 auto;
    min-width: 52px;
}
.pos-cart-variant-row-qty {
    color: #94a3b8;
    flex: 0 0 auto;
    min-width: 28px;
    font-variant-numeric: tabular-nums;
}
.pos-cart-variant-row-unit {
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.pos-cart-variant-row-total {
    margin-left: auto;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-cart-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
}
.pos-cart-product-qty { color: var(--text-muted); font-weight: 500; }
.pos-cart-product-total { font-weight: 700; font-size: 12px; color: var(--heading); }
.pos-cart-line {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.pos-line-remove {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.pos-line-remove:hover { color: var(--danger); }
.pos-line-title {
    font-size: 12px;
    font-weight: 600;
    padding-right: 18px;
    margin-bottom: 6px;
    color: var(--heading);
}
.pos-line-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pos-qty-stepper {
    display: grid;
    grid-template-columns: 26px minmax(22px, 1fr) 26px;
    grid-template-rows: 26px;
    align-items: stretch;
    width: 78px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    box-sizing: border-box;
}
.pos-qty-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f8fafc;
    width: 26px;
    height: 26px;
    min-height: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--heading);
    box-sizing: border-box;
}
.pos-qty-stepper button .b2b-moq-stepper-glyph {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.pos-qty-stepper button:hover { background: var(--slate-100); }
.pos-qty-val {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 26px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-sizing: border-box;
}
.pos-line-price { font-weight: 700; font-size: 12px; }

.pos-checkout {
    flex-shrink: 0;
    padding: 8px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border-top: none;
}
.pos-field { margin-bottom: 0; position: relative; }
.pos-field .form-label {
    margin-bottom: 3px !important;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text-muted);
}
.pos-field-customer > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 1;
    font-size: 13px;
}
.pos-field-customer > i + input,
.pos-field-customer .form-control {
    padding: 7px 10px 7px 32px !important;
}
.pos-field:not(.pos-field-customer) .form-control,
.pos-field .form-select {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
}
.pos-page .form-control::placeholder,
.pos-page .form-select::placeholder {
    color: var(--slate-400);
    opacity: 1;
}
.pos-summary {
    margin: 2px 0;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.pos-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.pos-summary-row:last-child { margin-bottom: 0; }
.pos-gst-breakdown {
    margin: 4px 0 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}
.pos-gst-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.pos-gst-line:last-child { margin-bottom: 0; }
.pos-line-meta { margin-bottom: 4px; font-size: 11px; }
.pos-summary-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-600);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.pos-summary-total span:last-child { color: var(--accent-600); }
.pos-charge-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-sm);
}
.pos-tax-inclusive-disclaimer {
    margin: 0;
    padding: 0 12px 10px;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    color: #94a3b8;
    font-weight: 500;
}
.pos-b2c-mode .pos-gst-breakdown,
.pos-b2c-mode .pos-summary-tax-row {
    display: none !important;
}
.pos-b2c-mode .pos-summary-total {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.pos-b2c-mode .pos-charge-btn {
    margin-bottom: 4px;
}
.pos-charge-btn:disabled { opacity: .55; }
.pos-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
    max-width: min(360px, calc(100vw - 32px));
    margin: 0;
    box-shadow: var(--shadow-md);
}

.pos-history-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 200;
}
.pos-history-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 92vw);
    height: 100vh;
    background: var(--surface);
    z-index: 201;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}
.pos-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.pos-history-header h2 { margin: 0; font-size: 1.1rem; }
.pos-history-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.pos-history-list { list-style: none; margin: 0; padding: 0; }
.pos-history-list li:not(.pos-history-row) {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 992px) {
    .main-content:has(.pos-page) {
        height: auto;
        max-height: none;
        overflow: auto;
    }
    .pos-page {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .pos-main { overflow: visible; }
    .pos-product-grid {
        max-height: 360px;
        flex: none;
    }
    .pos-cart-panel {
        width: 100%;
        height: auto;
        max-height: 70vh;
    }
}

/* User management */
.user-mgmt-page { font-size: var(--text-base); }
.user-mgmt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.user-mgmt-header h1 {
    margin: 0 0 4px;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
/* ===== Products / Inventory ===== */
.products-page {
    max-width: 100%;
}
.products-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.products-header h1 {
    margin: 0 0 4px;
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
}
.products-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
.products-page .catalog-section-label {
    margin-top: 4px;
}

/* Products page — status card */
.products-status-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px 0;
    margin-bottom: 12px;
}
.products-status-card-label {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0;
    text-transform: none;
}
.products-status-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
}
.products-status-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 14px;
    margin-bottom: -1px;
    min-height: 54px;
    text-decoration: none;
    color: var(--slate-500);
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.products-status-tab:hover {
    color: var(--heading);
    text-decoration: none;
    background: var(--slate-50);
}
.products-status-tab.is-active {
    background: var(--accent-soft);
    color: var(--accent-600);
    border-bottom-color: var(--accent-600);
}
.products-status-tab.is-active:hover {
    background: var(--accent-soft);
}
.products-status-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--slate-400);
}
.products-status-tab.is-active .products-status-tab-icon {
    color: var(--accent-600);
}
.products-status-tab-text {
    display: contents;
}
.products-status-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.products-status-tab.is-active .products-status-tab-label {
    color: var(--accent-600);
    font-weight: 700;
}
.products-status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--slate-500);
}
.products-status-tab.is-active .products-status-tab-count {
    border-color: transparent;
    background: var(--accent-500);
    color: #fff;
}

/* Products page — filters card */
.products-filters-card {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.products-filters-card--single {
    max-width: 360px;
    display: inline-flex;
    width: 100%;
}
.products-filters-card--single .products-filters-segment--catalog {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.products-filters-segment {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-right: 1px solid var(--border);
}
.products-filters-segment:last-child {
    border-right: none;
}
.products-filters-segment--catalog {
    flex: 1 1 220px;
    min-width: 200px;
}
.products-filters-segment-label {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
}
.products-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}
.products-filters-card .products-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--slate-600);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.products-filters-card .products-filter-pill:hover {
    color: var(--heading);
    border-color: var(--border-strong);
    text-decoration: none;
}
.products-filters-card .products-filter-pill.is-active {
    background: var(--accent-soft);
    border-color: var(--accent-500);
    color: var(--accent-600);
}
.products-filters-card .products-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--slate-500);
}
.products-filters-card .products-filter-pill.is-active .products-filter-pill-count {
    border-color: var(--accent-500);
    color: var(--accent-600);
    background: #fff;
}

/* Seller products — themed custom catalog select */
.panel-wrapper.seller-panel .admin-custom-select--seller {
    width: 100%;
    min-width: 0;
}
.panel-wrapper.seller-panel .admin-custom-select--seller .admin-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    height: auto;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--heading);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}
.panel-wrapper.seller-panel .admin-custom-select--seller .admin-custom-select-trigger:hover {
    border-color: var(--border-strong);
}
.panel-wrapper.seller-panel .admin-custom-select--seller.is-open .admin-custom-select-trigger,
.panel-wrapper.seller-panel .admin-custom-select--seller .admin-custom-select-trigger:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
    outline: none;
}
.panel-wrapper.seller-panel .admin-custom-select--seller .admin-custom-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.panel-wrapper.seller-panel .admin-custom-select--seller .admin-custom-select-chevron {
    flex: 0 0 auto;
    color: var(--slate-500);
    font-size: 0.75rem;
    opacity: 0.85;
}
.admin-custom-select-menu--seller {
    --admin-purple: var(--accent-500);
    --admin-purple-dark: var(--accent-600);
    --admin-purple-darker: var(--accent-700);
    --admin-purple-soft: var(--accent-soft);
    --admin-purple-bg: var(--accent-soft);
    --admin-purple-bg-alt: rgba(var(--accent-rgb), 0.14);
    --admin-purple-surface: var(--surface);
    --admin-purple-border: rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.12);
}

/* Status / payment filter pills — override rectangular seller catalog select look */
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter {
    width: auto;
    min-width: 148px;
    max-width: 200px;
    flex: 0 0 auto;
}
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter .admin-custom-select-trigger {
    min-height: 34px;
    height: 34px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border-color: var(--border);
    background: var(--slate-50, #f8fafc);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: none;
}
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter .admin-custom-select-trigger:hover {
    border-color: var(--border-strong, #cbd5e1);
    background: #fff;
}
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter.is-open .admin-custom-select-trigger,
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter .admin-custom-select-trigger:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
    background: #fff;
    outline: none;
}
.panel-wrapper.seller-panel .admin-custom-select--seller.admin-custom-select--status-filter .admin-custom-select-chevron {
    font-size: 0.75rem;
}
.admin-custom-select-menu.admin-custom-select-menu--seller.admin-custom-select-menu--sm {
    border-radius: 12px;
    padding: 6px;
}
.products-catalog-filter-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}
.products-catalog-filter-wrap .products-catalog-filter-chevron {
    display: none;
}
@media (max-width: 991px) {
    .products-filters-card {
        flex-direction: column;
    }
    .products-filters-segment {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .products-filters-segment:last-child {
        border-bottom: none;
    }
}
@media (max-width: 767px) {
    .products-status-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .products-status-tab {
        min-height: 48px;
        padding: 10px 12px 12px;
    }
    .products-status-tab-label {
        white-space: normal;
    }
}

.products-stock-filter-block {
    margin-top: 16px;
    margin-bottom: 4px;
}
.products-filter-label {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    line-height: 1.3;
}
.products-stock-filters {
    padding: 0 0 12px;
    gap: 10px;
}
.products-stock-filters .catalog-qc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.products-filter-pill-text {
    color: inherit;
}
.products-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}
.catalog-qc-pill.active .products-filter-pill-count {
    background: rgba(0, 0, 0, 0.08);
}
.products-card {
    margin-top: 4px;
}
.products-catalog-filter-block {
    margin: 0 0 12px;
    max-width: 360px;
}
.products-catalog-filter {
    font-size: 13px;
}
.products-catalog-group-row td {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px !important;
}
.products-catalog-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.products-catalog-group-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}
.products-catalog-group-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.retailer-pos-products-page .retailer-pos-variants-table {
    min-width: 1180px;
}
.retailer-pos-products-page .retailer-pos-variants-table th,
.retailer-pos-products-page .retailer-pos-variants-table td {
    white-space: nowrap;
    font-size: 12px;
}
.retailer-pos-manage-page {
    --rpm-radius: 16px;
    --rpm-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
}
.retailer-pos-manage-header {
    margin-bottom: 18px;
    padding: 4px 2px 0;
}
.retailer-pos-manage-page .online-manage-back {
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}
.retailer-pos-manage-page .online-manage-header-info h1 {
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--heading);
}
.retailer-pos-manage-page .online-manage-header-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--slate-500);
}
.retailer-pos-manage-meta-serial {
    font-weight: 600;
    color: var(--slate-600);
}
.retailer-pos-manage-meta-sep {
    color: var(--slate-300);
}
.retailer-pos-manage-meta-id,
.retailer-pos-manage-meta-counts {
    color: var(--slate-500);
}
.retailer-pos-manage-page .online-manage-header-right {
    gap: 16px;
    align-items: center;
}
.retailer-pos-manage-page .online-manage-header-actions {
    --rp-item-pad-x: 16px;
    --rp-font: 0.875rem;
    --rp-lh: 1.2;
    --rp-icon: 1.05rem;
    --rp-radius-rail: 12px;
}
.retailer-pos-manage-page .online-manage-header-actions .retailer-products-tabs-cta {
    flex-shrink: 0;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 18px;
    gap: 9px;
    border-radius: 12px;
    border: 1px solid var(--accent-600);
    background: var(--accent-600);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: none;
}
.retailer-pos-manage-page .online-manage-header-actions .retailer-products-tabs-cta > .bi {
    font-size: 1.05rem !important;
    color: #fff;
}
.retailer-pos-manage-page .online-manage-header-actions .retailer-products-tabs-cta:hover,
.retailer-pos-manage-page .online-manage-header-actions .retailer-products-tabs-cta:focus {
    background: var(--accent-700, #023491);
    border-color: var(--accent-700, #023491);
    color: #fff !important;
}
.retailer-pos-manage-card {
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: var(--rpm-radius) !important;
    box-shadow: var(--rpm-shadow) !important;
    overflow: hidden;
    background: var(--surface, #fff);
}
.retailer-pos-manage-controls {
    background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.retailer-pos-manage-tabs-wrap {
    padding: 14px 16px 12px;
}
.retailer-pos-manage-tabs.retailer-products-tabs {
    --rp-control-height: auto;
    --rp-radius-rail: 12px;
    --rp-radius-item: 9px;
    --rp-font: 0.8125rem;
    --rp-lh: 1.2;
    --rp-rail-pad: 4px;
    height: auto;
    min-height: 40px;
    max-height: none;
    flex-wrap: wrap;
    gap: 4px;
    width: auto;
    max-width: 100%;
    padding: var(--rp-rail-pad);
    border-radius: var(--rp-radius-rail);
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--border);
    box-sizing: border-box;
}
.retailer-pos-manage-tabs .retailer-products-tab {
    height: auto;
    min-height: 32px;
    padding: 6px 12px;
    gap: 8px;
    border-radius: var(--rp-radius-item);
    font-size: var(--rp-font);
    line-height: var(--rp-lh);
}
.retailer-pos-manage-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.retailer-pos-manage-tabs .retailer-products-tab.is-active .retailer-pos-manage-tab-count {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-700, #2257c0);
}
.retailer-pos-manage-page .online-manage-table-wrap,
.retailer-pos-manage-page .retailer-pricing-table-scroll.online-manage-table-wrap {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}
.retailer-pos-manage-page .online-manage-lines-table thead th {
    padding-top: 14px;
    padding-bottom: 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 10px;
    letter-spacing: 0.07em;
    color: var(--slate-400);
}
.retailer-pos-manage-page .online-manage-lines-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom-color: rgba(15, 23, 42, 0.045);
    vertical-align: middle;
}
.retailer-pos-manage-page .online-manage-lines-table tbody tr:hover td {
    background: rgba(79, 142, 247, 0.03);
}
.retailer-pos-manage-page .retailer-pos-manage-thumb,
.retailer-pos-manage-page .retailer-purchase-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.retailer-pos-manage-page .retailer-product-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--heading);
    max-width: 200px;
}
.retailer-pos-manage-page .retailer-product-path {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--slate-400);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.retailer-pos-manage-page .retailer-pos-manage-table {
    min-width: 1320px;
}
.retailer-pos-manage-page .retailer-pos-manage-table th,
.retailer-pos-manage-page .retailer-pos-manage-table td {
    white-space: nowrap;
    font-size: 12.5px;
    vertical-align: middle;
}
.retailer-pos-manage-page .retailer-col-thumb {
    width: 64px;
    min-width: 64px;
}
.retailer-pos-manage-page .retailer-col-product {
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
}
.retailer-pos-manage-page .retailer-col-tag {
    width: 7rem;
    min-width: 7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #64748b;
}
.retailer-pos-manage-page .retailer-col-stock {
    width: 5.5rem;
    min-width: 5.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.retailer-pos-manage-page .retailer-pricing-table thead th.retailer-col-stock {
    text-align: right;
}
.retailer-pos-manage-page .retailer-col-status {
    min-width: 7.5rem;
    white-space: nowrap;
}
.retailer-pos-manage-page .retailer-col-codes,
.retailer-pos-manage-page .retailer-col-action {
    width: 1%;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}
.retailer-pos-manage-page .retailer-pricing-table thead th.retailer-col-codes,
.retailer-pos-manage-page .retailer-pricing-table thead th.retailer-col-action {
    text-align: left;
}
.retailer-pos-manage-page .retailer-pos-manage-codes,
.retailer-pos-manage-page .retailer-pos-manage-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    min-height: 32px;
    vertical-align: middle;
}
.retailer-pos-manage-page .retailer-pos-manage-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    border-radius: 10px;
    font-weight: 600;
}
@media (max-width: 768px) {
    .retailer-pos-manage-tabs.retailer-products-tabs {
        width: 100%;
    }
}
.retailer-pos-catalog-list-table .online-order-row {
    cursor: pointer;
}
.retailer-pos-catalog-list-table .retailer-pos-col-sno {
    width: 4.5rem;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.retailer-pos-catalog-list-table .retailer-pos-col-id {
    width: 6.5rem;
    min-width: 6.5rem;
    white-space: nowrap;
}
.retailer-pos-catalog-list-table .retailer-pos-col-products,
.retailer-pos-catalog-list-table .retailer-pos-col-variants {
    width: 5.5rem;
    min-width: 5.5rem;
    font-variant-numeric: tabular-nums;
}
.retailer-pos-catalog-list-table .retailer-pos-col-date {
    width: 9.5rem;
    min-width: 9.5rem;
    white-space: nowrap;
}
.retailer-pos-catalog-list-table th.retailer-pos-col-actions,
.retailer-pos-catalog-list-table td.retailer-pos-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.retailer-pos-catalog-list-table .retailer-pos-col-actions .retailer-order-action-icons--row {
    justify-content: flex-end;
}
.products-catalog-group-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--accent-600);
    margin-right: 8px;
}
.products-catalog-group-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
}
.products-catalog-group-count {
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.products-paused-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.products-row-paused td {
    opacity: 0.72;
}
.products-list-cell-paused .products-list-thumb,
.products-row-paused .products-list-thumb,
.products-list-cell-paused .shopit-brand-thumb,
.products-row-paused .shopit-brand-thumb {
    filter: blur(3px) grayscale(0.65);
    opacity: 0.85;
}
.shopit-brand-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
    font-weight: 900;
    font-family: var(--font-display);
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}
.products-list-thumb.shopit-brand-thumb {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    border: 1px solid var(--accent-600);
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
}
.catalog-product-tab-thumb.shopit-brand-thumb {
    font-size: 1.35rem;
    border-color: var(--accent-600);
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
}
.products-paused-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fff3cd;
    color: #856404;
}
.products-offline-badge {
    background: #e2e8f0;
    color: #334155;
}
.products-action-form {
    margin: 0;
}
.products-code-download-cell {
    white-space: nowrap;
    min-width: 120px;
    vertical-align: middle;
}
.products-code-download-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.products-code-download-cell .btn {
    padding: 3px 8px;
    font-size: 11.5px;
    line-height: 1.2;
}
.products-table .online-order-id {
    font-size: 12.5px;
    font-weight: 600;
}
.products-stock-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.products-stock-input {
    width: 88px;
    font-size: 12.5px;
    padding: 4px 8px;
}
.products-list-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.products-list-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--slate-50);
    flex-shrink: 0;
}
.products-list-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.products-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.products-list-sku {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.2;
}
.products-stock-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
}
.products-stock-cell-alert .products-stock-qty {
    color: #b42318;
}
.products-stock-warn {
    color: #f59e0b;
    font-size: 14px;
    line-height: 1;
}

/* Seller Products — expandable product rows */
.products-table--expandable .products-expand-col {
    width: 1.75rem;
    padding-left: 10px !important;
    padding-right: 0 !important;
}
.products-product-row {
    cursor: pointer;
}
.products-product-row:hover {
    background: var(--surface-2, #f8fafc);
}
.products-product-row.is-open {
    background: var(--accent-soft, #eef6ff);
}
.products-product-row:focus-visible {
    outline: 2px solid var(--accent-600, #2563eb);
    outline-offset: -2px;
}
.products-expand-cell {
    width: 1.75rem;
    color: var(--text-muted);
    vertical-align: middle;
}
.products-expand-icon {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 0.85rem;
}
.products-product-row.is-open .products-expand-icon {
    transform: rotate(90deg);
}
.products-muted-cell {
    color: var(--text-muted);
}
.products-detail-row > td {
    padding: 0 !important;
    background: var(--slate-50, #f8fafc);
    border-top: 0 !important;
}
.products-variants-wrap {
    padding: 0.75rem 1rem 1rem 2.5rem;
}
.products-variants-table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border-collapse: collapse;
}
.products-variants-table th,
.products-variants-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: 13px;
}
.products-variants-table th {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 700;
    background: var(--slate-50, #f8fafc);
    text-align: left;
}
.products-variants-table tbody tr:last-child td {
    border-bottom: 0;
}
.products-variants-table .products-list-title {
    max-width: 280px;
}
.products-code-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.products-code-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.products-code-btn:hover,
.products-code-btn:focus-visible {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.28);
    color: var(--primary-dark, #1d4ed8);
    transform: translateY(-1px);
}

/* Seller pagination — unified footer (matches admin layout, seller theme) */
.seller-pagination,
.orders-list-pagination.seller-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--slate-50, #f8fafc);
}
.seller-pagination-info {
    flex-shrink: 0;
}
.seller-pagination-text {
    font-size: 0.75rem;
}
.seller-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    margin-left: auto;
}
.seller-pagination-rows {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
}
.seller-pagination-rows-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.seller-pagination-page-size {
    width: auto;
    min-width: 4rem;
    max-width: 4.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    height: 30px;
    min-height: 30px;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    border-color: var(--border);
    color: var(--heading);
    background-color: #fff;
}
.seller-pagination-page-size:focus {
    border-color: var(--accent-500, var(--primary));
    box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(37, 99, 235, 0.15));
}
.seller-pagination-nav .page-link,
.seller-pagination-page-link {
    min-width: 2rem;
    text-align: center;
    color: var(--slate-600);
}
.seller-pagination-nav .page-item.active .page-link,
.seller-pagination-nav .page-item.active .seller-pagination-page-link {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #fff;
}
.seller-pagination-nav .page-link:hover,
.seller-pagination-page-link:hover {
    color: var(--accent-600);
}
.seller-pagination-ellipsis .page-link {
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}
.products-page .seller-pagination {
    margin-top: 12px;
    border-radius: 0 0 var(--radius-sm, 8px);
}
.wallet-txn-section .seller-pagination {
    margin-top: 0;
}
.seller-finance-page .seller-pagination {
    flex-shrink: 0;
}

/* ===== Unified panel pagination (admin / seller / retailer) ===== */
.panel-pagination,
.seller-pagination,
.orders-list-pagination.panel-pagination,
.admin-orders-pagination.panel-pagination,
.admin-brand-approvals-footer.panel-pagination,
.admin-partners-pagination.panel-pagination,
.admin-finance-pagination.panel-pagination,
.admin-finance-txn-pager.panel-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-height: 2.75rem;
    margin-top: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--slate-50, #f8fafc);
    box-sizing: border-box;
}
.panel-pagination--admin,
.admin-orders-pagination.panel-pagination,
.admin-brand-approvals-footer.panel-pagination,
.admin-partners-pagination.panel-pagination,
.admin-finance-pagination.panel-pagination,
.admin-finance-txn-pager.panel-pagination {
    border-top-color: var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: var(--admin-purple-surface, #faf9ff);
}
.products-page .panel-pagination--seller,
.products-page .panel-pagination--retailer {
    border-radius: 0 0 var(--radius-sm, 8px);
}
.panel-pagination-info {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.75rem;
}
.panel-pagination-text {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.75rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}
.panel-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    flex-wrap: nowrap;
    margin-left: auto;
    min-height: 1.75rem;
}
.panel-pagination-rows {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin: 0;
    min-height: 1.75rem;
}
.panel-pagination-rows-label {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.75rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}
.panel-pagination-page-size {
    width: auto;
    min-width: 3.25rem;
    max-width: 4.25rem;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0 1.5rem 0 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--heading, #0f172a);
    background-color: #fff;
}
.panel-pagination-page-size:focus {
    border-color: var(--accent-500, var(--primary));
    box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(37, 99, 235, 0.15));
    outline: none;
}
.panel-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    min-height: 1.75rem;
}
.panel-pagination-btn {
    box-sizing: border-box;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.35rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    color: var(--heading, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}
.panel-pagination-btn i {
    font-size: 0.7rem;
    line-height: 1;
}
.panel-pagination-btn:hover:not(.is-disabled):not(.active) {
    background: #f8fafc;
    color: var(--heading, #0f172a);
    text-decoration: none;
}
.panel-pagination-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-muted, #94a3b8);
}
.panel-pagination-btn.active {
    cursor: default;
    color: #fff;
}
.panel-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.75rem;
    padding: 0 0.1rem;
    color: var(--text-muted, #94a3b8);
    font-size: 0.8125rem;
    line-height: 1;
}

/* Active page — theme accents */
.panel-pagination--seller .panel-pagination-btn.active,
.panel-pagination--retailer .panel-pagination-btn.active {
    background: var(--accent-600, #0450d5);
    border-color: var(--accent-600, #0450d5);
    color: #fff;
}
.panel-pagination--seller .panel-pagination-page-size:focus,
.panel-pagination--retailer .panel-pagination-page-size:focus {
    border-color: var(--accent-500, #2563eb);
    box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(4, 80, 213, 0.15));
}
.panel-pagination--admin .panel-pagination-btn.active,
.panel-wrapper.admin-panel .panel-pagination--admin .panel-pagination-btn.active {
    background: var(--admin-accent, var(--admin-purple, #7c3aed));
    border-color: var(--admin-accent, var(--admin-purple, #7c3aed));
    color: #fff;
}
.panel-wrapper.admin-panel .panel-pagination--admin .panel-pagination-btn:hover:not(.is-disabled):not(.active) {
    background: var(--admin-purple-bg, #f5f3ff);
    border-color: rgba(var(--admin-purple-rgb, 124, 58, 237), 0.28);
}

/* Custom themed Rows dropdown (replaces native OS list) */
.panel-pagination-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.panel-pagination-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.panel-pagination-select-trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-width: 3.25rem;
    height: 1.75rem;
    padding: 0 0.4rem 0 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    color: var(--heading, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.panel-pagination-select-trigger:hover {
    background: #f8fafc;
}
.panel-pagination-select-label {
    min-width: 1.1rem;
    text-align: left;
}
.panel-pagination-select-chevron {
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    transition: transform 0.15s ease;
}
.panel-pagination-select.is-open .panel-pagination-select-chevron {
    transform: rotate(180deg);
}
.panel-pagination-select-menu {
    box-sizing: border-box;
    padding: 0.25rem;
    margin: 0;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.panel-pagination-select-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1.75rem;
    padding: 0.2rem 0.5rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--heading, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.panel-pagination-select-option:hover,
.panel-pagination-select-option:focus {
    outline: none;
}
.panel-pagination-select-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Seller / retailer accent */
.panel-pagination-select--seller .panel-pagination-select-trigger:focus,
.panel-pagination-select--seller.is-open .panel-pagination-select-trigger,
.panel-pagination-select--retailer .panel-pagination-select-trigger:focus,
.panel-pagination-select--retailer.is-open .panel-pagination-select-trigger {
    border-color: var(--accent-500, #2563eb);
    box-shadow: 0 0 0 0.15rem var(--accent-soft, rgba(4, 80, 213, 0.15));
    outline: none;
}
.panel-pagination-select-menu--seller .panel-pagination-select-option:hover,
.panel-pagination-select-menu--seller .panel-pagination-select-option:focus,
.panel-pagination-select-menu--retailer .panel-pagination-select-option:hover,
.panel-pagination-select-menu--retailer .panel-pagination-select-option:focus {
    background: var(--accent-soft, rgba(4, 80, 213, 0.1));
    color: var(--accent-700, #0340ab);
}
.panel-pagination-select-menu--seller .panel-pagination-select-option.is-selected,
.panel-pagination-select-menu--retailer .panel-pagination-select-option.is-selected {
    background: var(--accent-600, #0450d5);
    color: #fff;
}
.panel-pagination-select-menu--seller .panel-pagination-select-option.is-selected:hover,
.panel-pagination-select-menu--retailer .panel-pagination-select-option.is-selected:hover {
    background: var(--accent-700, #0340ab);
    color: #fff;
}

/* Admin purple accent */
.panel-pagination-select--admin .panel-pagination-select-trigger:focus,
.panel-pagination-select--admin.is-open .panel-pagination-select-trigger {
    border-color: var(--admin-purple, #7c3aed);
    box-shadow: 0 0 0 0.15rem rgba(var(--admin-purple-rgb, 124, 58, 237), 0.14);
    outline: none;
}
.panel-pagination-select-menu--admin {
    border-color: var(--admin-purple-border, rgba(124, 58, 237, 0.18));
    box-shadow: 0 10px 28px rgba(91, 33, 182, 0.14);
}
.panel-pagination-select-menu--admin .panel-pagination-select-option:hover,
.panel-pagination-select-menu--admin .panel-pagination-select-option:focus {
    background: var(--admin-purple-bg-alt, #ede9fe);
    color: var(--admin-purple-darker, #5b21b6);
}
.panel-pagination-select-menu--admin .panel-pagination-select-option.is-selected {
    background: var(--admin-purple, #7c3aed);
    color: #fff;
}
.panel-pagination-select-menu--admin .panel-pagination-select-option.is-selected:hover {
    background: var(--admin-purple-dark, #6d28d9);
    color: #fff;
}

.wallet-txn-section .panel-pagination--seller {
    margin-top: 0;
}
.seller-finance-page .panel-pagination--seller {
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .panel-pagination,
    .admin-orders-pagination.panel-pagination,
    .admin-finance-pagination.panel-pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
        min-height: 0;
    }
    .panel-pagination-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

/* ===== Panel confirm modal ===== */
.panel-confirm-modal-content {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.panel-confirm-modal .modal-header {
    padding: 20px 20px 0;
}
.panel-confirm-modal .modal-body {
    padding: 8px 20px 12px;
}
.panel-confirm-modal .modal-footer {
    padding: 0 20px 20px;
    gap: 8px;
}
.panel-confirm-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.panel-confirm-icon-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
.panel-confirm-icon-warn {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.panel-confirm-icon-success {
    background: var(--success-soft);
    color: var(--success);
}
.panel-message-modal .modal-footer .btn-primary {
    min-width: 88px;
}
.catalog-delete-btn:hover {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}
.panel-confirm-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}
.panel-confirm-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}
.panel-confirm-error {
    margin-top: 10px;
    font-size: 12.5px;
    color: #dc2626;
}

.panel-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.panel-alert-item > .panel-notification-row-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.panel-alert-item-body {
    flex: 1;
    min-width: 0;
}

.panel-alert-item--unread {
    border-left: 4px solid var(--primary);
    background: #f8fbff;
}

.panel-alert-item-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.panel-alert-item-message {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.panel-alert-item-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* ===== Notifications Center + sidebar bell ===== */
.panel-notification-bell-wrap {
    position: relative;
}

.panel-notification-bell-wrap--sidebar {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.panel-notification-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.panel-notification-bell-btn--sidebar {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}

.panel-notification-bell-btn--sidebar:hover,
.panel-notification-bell-btn--sidebar[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.panel-notification-bell-btn--sidebar .bi {
    font-size: 14px;
    line-height: 1;
}

.panel-notification-bell-wrap--sidebar .panel-notification-dot {
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    border-color: var(--navy-800, #1e293b);
}

.panel-notification-dropdown {
    position: fixed;
    top: 14px;
    left: calc(var(--sidebar-width) + 8px);
    width: min(380px, calc(100vw - var(--sidebar-width) - 24px));
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    z-index: 150;
}

.panel-notification-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f97316;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
}

.panel-notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}

.panel-notification-dropdown-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.panel-notification-dropdown-body {
    max-height: 360px;
    overflow-y: auto;
}

.panel-notification-dropdown-loading,
.panel-notification-dropdown-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
}

.panel-notification-dropdown-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.panel-notification-dropdown-item:last-child {
    border-bottom: none;
}

.panel-notification-dropdown-item--unread {
    background: #f8fbff;
}

.panel-notification-dropdown-item-body {
    flex: 1;
    min-width: 0;
}

.panel-notification-dropdown-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.panel-notification-dropdown-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.35;
}

.panel-notification-dropdown-view {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.panel-notification-dropdown-item-time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.panel-notification-dropdown-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border);
    background: #fafbfc;
}

.panel-notification-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.panel-notification-row-icon--success {
    background: #ecfdf5;
    color: #059669;
}

.panel-notification-row-icon--danger {
    background: #fef2f2;
    color: #dc2626;
}

.panel-notification-row-icon--warn {
    background: #fffbeb;
    color: #d97706;
}

.panel-notification-row-icon--info {
    background: #eff6ff;
    color: #2563eb;
}

.panel-notification-row-icon--neutral {
    background: #f1f5f9;
    color: #64748b;
}

.panel-sound-alerts-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.panel-sound-alerts-control--compact {
    gap: 6px;
}

.panel-sound-alerts-control--compact .panel-sound-alerts-label {
    font-size: 10px;
}

.panel-sound-alerts-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.panel-sound-toggle {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: #e2e8f0;
    gap: 2px;
}

.panel-sound-toggle-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.panel-sound-toggle-btn.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.panel-notifications-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.panel-notifications-tab {
    position: relative;
    display: inline-block;
    padding: 0 2px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.panel-notifications-tab:hover {
    color: var(--heading);
}

.panel-notifications-tab.is-active {
    color: var(--primary);
}

.panel-notifications-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
}

.notifications-center-header h1 {
    margin-bottom: 4px;
}

.notifications-center-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--heading);
}

.panel-announcement-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 0.35rem;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.panel-announcement-date {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    margin: 0 0 0.85rem;
}

.panel-announcement-important {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b45309;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}

.panel-announcement-important i {
    font-size: 0.75rem;
}

.panel-announcement-banner-wrap {
    margin: 0 0 1rem;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #f8fafc;
    line-height: 0;
}

.panel-announcement-banner-wrap .panel-announcement-banner-link {
    display: block;
    width: 100%;
    line-height: 0;
}

.panel-announcement-banner-wrap .panel-announcement-banner,
.panel-announcement-banner-wrap .panel-announcement-banner-link .panel-announcement-banner {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
}

.panel-announcement-content {
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.65;
    white-space: pre-line;
    margin: 0;
}

.panel-announcement-link-wrap {
    margin-top: 0.75rem;
}

.panel-announcement-card .card-body {
    padding: 18px 20px;
}

.user-mgmt-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--slate-500);
    line-height: 1.45;
}
.user-mgmt-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.user-mgmt-role-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.user-mgmt-role-title {
    margin: 0 0 3px;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}
.user-mgmt-role-desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--slate-500);
    line-height: 1.45;
}
.user-mgmt-role-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.user-mgmt-role-icon.admin { background: #ede9fe; color: #7c3aed; }
.user-mgmt-role-icon.manager { background: #dbeafe; color: #2563eb; }
.user-mgmt-role-icon.pos { background: #d1fae5; color: #059669; }
.user-mgmt-role-icon.online { background: #e0f2fe; color: #0284c7; }
.user-mgmt-role-icon.catalog { background: #ffedd5; color: #ea580c; }
.user-mgmt-role-icon.payments { background: #fef3c7; color: #d97706; }
.user-mgmt-role-icon.inventory { background: #e0e7ff; color: #4f46e5; }
.user-mgmt-role-icon.store { background: #f3f4f6; color: #4b5563; }

.user-mgmt-card { margin-bottom: 0; }
.user-mgmt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.user-mgmt-row:last-child { border-bottom: none; }
.user-mgmt-row-inactive { opacity: 0.7; }
.user-mgmt-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.user-mgmt-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 700;
    flex-shrink: 0;
}
.user-mgmt-info { min-width: 0; }
.user-mgmt-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.user-mgmt-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--heading);
    line-height: 1.35;
}
.user-mgmt-email {
    font-size: var(--text-sm);
    color: var(--slate-500);
    line-height: 1.4;
}
.user-mgmt-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.35;
}
.user-mgmt-badge-admin,
.role-badge-admin { background: #ede9fe; color: #6d28d9; }
.user-mgmt-badge-manager,
.role-badge-manager { background: #dbeafe; color: #1d4ed8; }
.user-mgmt-badge-pos,
.role-badge-pos { background: #d1fae5; color: #047857; }
.user-mgmt-badge-online,
.role-badge-online { background: #e0f2fe; color: #0369a1; }
.user-mgmt-badge-catalog,
.role-badge-catalog { background: #ffedd5; color: #c2410c; }
.user-mgmt-badge-payments,
.role-badge-payments { background: #fef3c7; color: #b45309; }
.user-mgmt-badge-inventory,
.role-badge-inventory { background: #e0e7ff; color: #4338ca; }
.user-mgmt-badge-inactive,
.role-badge-inactive { background: var(--slate-100); color: var(--slate-500); }
.user-mgmt-badge-staff-admin { background: #f3e8ff; color: #7e22ce; }
.user-mgmt-badge-record,
.role-badge-store { background: #f3f4f6; color: #374151; }
.user-mgmt-meta {
    font-size: var(--text-sm);
    color: var(--slate-500);
    margin-top: 2px;
}
.user-mgmt-pay {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--text-sm);
    color: #059669;
    cursor: pointer;
}
.user-mgmt-pay:hover { color: #047857; }
.user-mgmt-staff-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.staff-form-modal .modal-dialog {
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
}
.staff-form-modal .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.staff-form-modal .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.staff-form-modal .modal-header,
.staff-form-modal .modal-footer {
    flex-shrink: 0;
    background: var(--surface);
}
.staff-form-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    gap: 0.625rem;
    justify-content: flex-end;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
    z-index: 2;
}
.staff-form-modal .staff-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}
.staff-modal-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
}
.staff-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.staff-modal-icon-add {
    background: #ede9fe;
    color: #6d28d9;
}
.staff-modal-icon-edit {
    background: #dbeafe;
    color: #1d4ed8;
}
.staff-form-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0;
    line-height: 1.3;
}
.staff-modal-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--text-sm);
    color: var(--slate-500);
    line-height: 1.4;
}
.staff-form-modal .staff-modal-header .btn-close {
    margin: 0;
    flex-shrink: 0;
}
.staff-form-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--surface-2);
    -webkit-overflow-scrolling: touch;
}
.staff-form-layout .staff-form-card {
    margin-bottom: 0;
}
.staff-form-layout .staff-form-card + .staff-form-card,
.staff-form-layout .staff-aadhar-card {
    margin-top: 12px;
}
.staff-form-layout .form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--heading);
    margin-bottom: 0.35rem;
}
.staff-form-layout .form-text {
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}
.staff-photo-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.staff-photo-preview {
    width: 140px;
    height: 175px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.staff-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.staff-photo-empty,
.staff-aadhar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-sm);
    color: var(--slate-400);
    padding: 0.75rem;
    text-align: center;
}
.staff-photo-empty i,
.staff-aadhar-empty i {
    font-size: 2rem;
    color: var(--slate-300);
}
.staff-photo-actions,
.staff-aadhar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .staff-aadhar-grid { grid-template-columns: 1fr; }
}
.staff-photo-hint {
    margin: 0.75rem 0 0;
    font-size: var(--text-sm);
    color: var(--slate-500);
    line-height: 1.4;
}
.staff-aadhar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.staff-aadhar-side .form-label {
    margin-bottom: 0.5rem;
}
.staff-aadhar-preview {
    width: 100%;
    min-height: 160px;
    max-height: 220px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.staff-aadhar-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.staff-file-input { display: none; }
.staff-login-fields.d-none { display: none !important; }
.staff-password-field {
    position: relative;
    display: flex;
    align-items: stretch;
}
.staff-password-field .staff-password-input {
    padding-right: 2.75rem;
}
.staff-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    border: none;
    background: transparent;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.staff-password-toggle:hover {
    color: var(--heading);
}
.staff-password-toggle.is-visible {
    color: var(--accent-600);
}
.staff-pay-info {
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: var(--text-sm);
    margin-bottom: 1rem;
}
.staff-pay-info dt {
    font-weight: 600;
    color: var(--heading);
    margin-top: 0.35rem;
}
.staff-pay-info dt:first-child { margin-top: 0; }
.staff-pay-info dd {
    margin: 0;
    color: var(--text);
}
.staff-camera-modal .modal-body { text-align: center; }
.staff-camera-video {
    width: 100%;
    max-height: 320px;
    border-radius: 8px;
    background: #000;
}
.user-mgmt-manage-staff-option .form-check-label {
    font-size: var(--text-base);
    color: var(--heading);
}
.user-mgmt-manage-staff-option .form-text {
    font-size: var(--text-sm);
    margin-top: 4px;
}

.user-mgmt-row-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.user-mgmt-owner-label {
    font-size: var(--text-sm);
    color: var(--slate-500);
}
.user-mgmt-role-form { margin: 0; }
.user-mgmt-role-select {
    min-width: 148px;
    font-size: var(--text-sm);
    border-color: var(--border);
    color: var(--text);
}
.user-mgmt-toggle-form { margin: 0; }
.user-mgmt-edit,
.user-mgmt-toggle,
.user-mgmt-delete {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--slate-500);
    cursor: pointer;
    text-decoration: none;
}
.user-mgmt-edit:hover { color: var(--accent-600); }
.user-mgmt-toggle:hover { color: var(--danger); }
.user-mgmt-delete { color: #b91c1c; }
.user-mgmt-delete:hover { color: #7f1d1d; }
.user-mgmt-empty {
    padding: 28px 16px;
    text-align: center;
}
.user-mgmt-empty p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--slate-500);
    max-width: 420px;
    margin-inline: auto;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .user-mgmt-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .user-mgmt-roles { grid-template-columns: 1fr; }
    .user-mgmt-row-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* QR & inventory scan */
.catalog-qr-card {
    margin-top: 1rem;
}
.catalog-qr-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--slate-700);
}
.catalog-qr-panel {
    padding: 0;
}
.catalog-qr-generate-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.catalog-qr-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-qr-actions .btn {
    margin: 0;
}
.catalog-details-aside .catalog-qr-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}
.catalog-details-aside .catalog-qr-preview {
    width: 148px;
    height: 148px;
}
.catalog-qr-preview {
    width: 168px;
    height: 168px;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}
.catalog-codes-bulk {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.catalog-codes-bulk-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.25rem;
}
.catalog-codes-bulk-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.catalog-codes-bulk-actions .btn {
    margin: 0;
    justify-content: center;
}
.catalog-codes-bulk-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.inventory-scan-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.inventory-scan-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}
.inventory-scan-header h1 {
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
}
.inventory-scan-state {
    text-align: center;
    padding: 2.5rem 1rem;
}
.inventory-scan-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.inventory-scan-stock-pill {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    margin-bottom: 0.75rem;
}
.inventory-scan-stock-pill.inventory-scan-stock-low {
    background: #fef3c7;
    color: #92400e;
}
.inventory-scan-stock-pill.inventory-scan-stock-out {
    background: #fee2e2;
    color: #991b1b;
}
.inventory-scan-name {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.inventory-scan-details {
    margin: 0;
}
.inventory-scan-details > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--slate-100);
}
.inventory-scan-details dt {
    margin: 0;
    color: var(--slate-500);
    font-weight: 500;
}
.inventory-scan-details dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}
.inventory-scan-stock-value {
    color: var(--accent-600);
}

.media-upload-error-alert,
.catalog-media-upload-errors .alert,
.single-product-media-errors .alert {
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* ===== Panel brand "S" loader ===== */
body.panel-loader-active {
    overflow: hidden;
}

.panel-loader {
    --panel-loader-accent: var(--accent-500);
    --panel-loader-accent-soft: var(--accent-400, #7aa8fa);
    --panel-loader-accent-deep: var(--accent-600);
    --panel-loader-accent-rgb: var(--accent-rgb, 79, 142, 247);
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

/* Loader is mounted on body, so admin purple tokens must be set here. */
.panel-loader--admin {
    --panel-loader-accent: #7c3aed;
    --panel-loader-accent-soft: #a78bfa;
    --panel-loader-accent-deep: #6d28d9;
    --panel-loader-accent-rgb: 124, 58, 237;
}

.panel-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.panel-loader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
}

.panel-loader__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-width: 180px;
    padding: 28px 32px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(var(--panel-loader-accent-rgb), 0.22);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.panel-loader--admin .panel-loader__card {
    background: #faf9ff;
    border-color: rgba(124, 58, 237, 0.2);
}

.panel-loader--admin .panel-loader__backdrop {
    background: rgba(46, 16, 101, 0.38);
}

.panel-loader__scene {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-loader__orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: var(--panel-loader-accent);
    border-right-color: rgba(var(--panel-loader-accent-rgb), 0.28);
    animation: panelLoaderOrbit 0.95s linear infinite;
}

.panel-loader__orbit--soft {
    inset: 8px;
    border-width: 2px;
    border-top-color: rgba(var(--panel-loader-accent-rgb), 0.35);
    border-right-color: transparent;
    border-bottom-color: rgba(var(--panel-loader-accent-rgb), 0.18);
    animation-duration: 1.45s;
    animation-direction: reverse;
}

.panel-loader__mark {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #0b1224;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    line-height: 1;
    box-shadow:
        0 10px 24px rgba(var(--panel-loader-accent-rgb), 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    animation: panelLoaderMark 1.35s ease-in-out infinite;
    overflow: hidden;
    padding: 8px;
}
.panel-loader__mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.panel-loader__message {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
    letter-spacing: 0.01em;
    text-align: center;
}

.panel-loader--admin .panel-loader__message {
    color: #5b21b6;
}

.panel-loader--reduced-motion .panel-loader__orbit,
.panel-loader--reduced-motion .panel-loader__orbit--soft,
.panel-loader--reduced-motion .panel-loader__mark {
    animation: none;
}

.panel-loader--reduced-motion .panel-loader__orbit {
    border-top-color: var(--panel-loader-accent);
    border-right-color: rgba(var(--panel-loader-accent-rgb), 0.35);
}

.panel-loader--reduced-motion .panel-loader__mark {
    box-shadow: 0 8px 18px rgba(var(--panel-loader-accent-rgb), 0.28);
}

@keyframes panelLoaderOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes panelLoaderMark {
    0%, 100% {
        transform: scale(0.94);
        box-shadow:
            0 8px 18px rgba(var(--panel-loader-accent-rgb), 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.22) inset;
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 14px 30px rgba(var(--panel-loader-accent-rgb), 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.28) inset,
            0 0 22px rgba(var(--panel-loader-accent-rgb), 0.28);
    }
}

@media (max-width: 576px) {
    .panel-loader__card {
        min-width: 0;
        padding: 24px 28px 20px;
    }
}

/* Notification Rules dashboard (admin) */
.notification-dashboard-header {
    margin-bottom: 0;
}

.notification-dashboard-tabs {
    margin-top: 0;
}

.notification-dashboard-pane {
    margin-top: 12px;
}

.notification-dashboard-pane.is-active {
    display: block;
}

.notification-dashboard-col-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notification-rule-form .form-label:first-child {
    margin-top: 0;
}

.notification-rules-master-table .notification-rule-table-wrap {
    border: 0;
    border-radius: 0;
}

.notification-rules-list-pane {
    width: 100%;
}

.notification-missing-tone-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: #f8fafc;
}

.notification-missing-tone-bar .notification-sound-tone-select {
    max-width: 180px;
}

.notification-sound-tone-select {
    max-width: 220px;
}

.notification-rule-table-payload {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #475569;
    display: block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-rules-list-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.notification-rules-list-heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.65rem;
}

.notification-rule-table-wrap {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.notification-rule-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.notification-rule-table thead th {
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.notification-rule-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.notification-rule-table tbody tr.is-active {
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    box-shadow: inset 3px 0 0 var(--primary, #2563eb);
}

.notification-rule-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.notification-rule-table tbody tr:last-child td {
    border-bottom: 0;
}

.notification-rule-table-key {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
}

.notification-rule-table-title {
    color: #475569;
}

.notification-rule-table-tags {
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.notification-untracked-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.notification-untracked-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.notification-untracked-card:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}

.notification-untracked-card.is-active {
    border-color: var(--primary, #2563eb);
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.notification-untracked-card-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
    margin-top: 0.15rem;
}

.notification-untracked-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: start;
}

.notification-untracked-row--stack {
    grid-template-columns: 1fr;
}

.notification-untracked-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.notification-untracked-value {
    font-size: 0.85rem;
    color: #0f172a;
    word-break: break-word;
}

.notification-untracked-payload {
    font-size: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.notification-create-from-log-btn {
    display: none;
}

.notification-payload-guide {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
}

.notification-payload-guide-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 0.5rem;
}

.notification-payload-guide-body {
    font-size: 0.75rem;
    background: #fff;
    border: 1px solid #e0f2fe;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
}

.notification-event-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.notification-event-meta-desc {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    flex: 1 1 220px;
}

.notification-event-meta-wired {
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    border-radius: 999px;
    padding: 2px 8px;
}

.notification-event-meta-planned {
    color: #92400e;
    background: #fef3c7;
}

.notification-token-chips {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
}

.notification-token-chips-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}

.notification-token-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notification-token-chip {
    border: 1px solid rgba(124, 58, 237, 0.28);
    background: #fff;
    color: var(--admin-purple-dark, #6d28d9);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}

.notification-token-chip:hover {
    background: var(--admin-purple-soft, rgba(124, 58, 237, 0.1));
    border-color: var(--admin-purple, #7c3aed);
}

.notification-dashboard-empty {
    padding: 1rem 0.25rem;
}

.panel-announcement-link {
    font-weight: 600;
    text-decoration: none;
}

.panel-announcement-link:hover {
    text-decoration: underline;
}

/* Notice broadcast dashboard (admin Tab 2) */
.notice-broadcast-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    gap: 1rem;
    align-items: stretch;
}

.notice-broadcast-preview-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.notice-banner-dropzone {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    overflow: hidden;
}

.notice-banner-dropzone:hover,
.notice-banner-dropzone.is-dragover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: #f0f7ff;
}

.notice-banner-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.notice-banner-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.25rem;
    text-align: center;
    color: #475569;
    font-size: 0.88rem;
}

.notice-banner-dropzone-empty i {
    font-size: 1.6rem;
    color: #2563eb;
}

.notice-banner-dropzone-preview {
    position: relative;
    width: 100%;
    padding: 0.75rem;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    line-height: 0;
}

.notice-banner-preview-thumb {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border: 0;
    border-radius: 0;
}

.notice-banner-remove-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notice-banner-remove-btn:hover {
    background: rgba(220, 38, 38, 0.92);
}

.notice-mobile-frame {
    width: min(100%, 320px);
    border-radius: 28px;
    border: 8px solid #0f172a;
    background: #0f172a;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.notice-mobile-frame-notch {
    height: 22px;
    background: #0f172a;
}

.notice-mobile-frame-screen {
    background: #f1f5f9;
    padding: 0.85rem;
    min-height: 420px;
}

.notice-mobile-preview-header {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.notice-mobile-preview-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.notice-preview-banner-wrap {
    margin-bottom: 0.75rem;
}

.panel-announcement-banner-link {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.panel-announcement-banner-link:hover {
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .notice-broadcast-dashboard {
        grid-template-columns: 1fr;
    }
}

.notice-admin-list-table .notice-admin-list-title {
    font-weight: 600;
    color: #1e293b;
}

.notice-admin-list-table .notice-admin-list-date {
    font-size: 0.82rem;
    color: #64748b;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .notification-untracked-row {
        grid-template-columns: 1fr;
    }

    .notification-rule-table-wrap {
        overflow-x: auto;
    }
}

/* ===== Wallet page ===== */
.main-content:has(.wallet-page) {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .main-content:has(.wallet-page) {
        overflow: hidden;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Seller Finance — fill viewport; table scrolls inside the card */
.main-content:has(.seller-finance-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .main-content:has(.seller-finance-page) {
        overflow-y: auto;
    }
}

/* Invoices & Taxes — fill remaining viewport; no bottom dead space */
.main-content:has(.seller-invoices-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 900px) {
    .main-content:has(.seller-invoices-page) {
        overflow-y: auto;
    }
}

/* Seller Finance — receive-side payouts (current cycle + past cycles) */
.panel-wrapper.seller-panel .admin-payout-drawer,
.panel-wrapper.seller-panel .admin-payout-drawer-body,
.panel-wrapper.seller-panel .admin-payout-drawer-summary,
.panel-wrapper.seller-panel .admin-payout-settle,
.panel-wrapper.seller-panel .admin-payout-settle-net,
.panel-wrapper.seller-panel .admin-payout-settle-toggle:hover {
    --admin-purple-soft: rgba(4, 80, 213, 0.1);
    --admin-purple-bg: #f0f5ff;
    --admin-purple-border: rgba(4, 80, 213, 0.14);
}

.seller-finance-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.seller-finance-page > .page-header,
.seller-finance-page > .seller-finance-payout-tabs {
    flex-shrink: 0;
}

.seller-finance-page > .seller-finance-upcoming,
.seller-finance-page > .seller-finance-past-cycles {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Let the calendar escape .panel-card overflow:hidden */
.seller-finance-page .panel-card.seller-finance-past-cycles {
    overflow: visible;
}

.seller-finance-page .seller-finance-past-cycles > .card-header,
.seller-finance-page .seller-finance-upcoming > .card-header {
    flex-shrink: 0;
    position: relative;
    z-index: 40;
    overflow: visible;
}

.seller-finance-date-filter {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
}

.seller-finance-date-filter .order-date-dropdown {
    right: 0;
    left: auto;
    z-index: 60;
}

.seller-finance-page .seller-finance-past-cycles > .card-body,
.seller-finance-page .seller-finance-upcoming > .card-body {
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
}

.seller-finance-page .seller-finance-past-cycles .table-responsive,
.seller-finance-page .seller-finance-upcoming .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.seller-finance-page .seller-finance-past-cycles .orders-list-pagination {
    flex-shrink: 0;
}

/* ===== Seller Invoices & Taxes (monthly downloads) ===== */
.seller-invoices-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.seller-invoices-page > .page-header {
    margin-bottom: 4px;
    flex-shrink: 0;
}

.seller-invoices-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
    flex-shrink: 0;
}

.seller-invoices-layout {
    --seller-invoices-gutter: 20px;
    --seller-invoices-surface: #ffffff;
    display: grid;
    grid-template-columns: minmax(400px, 440px) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
    background: #dce6f4;
    border-radius: 16px;
    padding: 12px;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.seller-invoices-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    padding-right: var(--seller-invoices-gutter);
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.seller-invoices-nav-heading {
    margin: 0 0 4px;
    padding-left: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.seller-invoices-nav-heading--spaced {
    margin-top: 28px;
    margin-bottom: 6px;
}

.seller-invoices-nav-tax {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Active TDS/TCS card grows so its bottom aligns with the right panel. */
.seller-invoices-nav-tax .seller-invoices-nav-card.is-active {
    flex: 1 1 auto;
    align-items: flex-start;
    min-height: 0;
}

.seller-invoices-nav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 14px 14px;
    border-radius: 12px;
    border: none;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    max-width: 100%;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.seller-invoices-nav-card:hover {
    background: #fff;
    color: inherit;
    box-shadow: 0 2px 8px rgba(4, 80, 213, 0.08);
}

/* Active category docks into the right panel (connected look). */
.seller-invoices-nav-card.is-active {
    background: var(--seller-invoices-surface);
    border-radius: 12px 0 0 12px;
    margin-right: calc(-1 * var(--seller-invoices-gutter));
    width: auto;
    max-width: none;
    padding-right: 18px;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.seller-invoices-nav-card.is-active:hover {
    box-shadow: none;
}

/* Bridge only the gutter — do not cover panel text. */
.seller-invoices-nav-card.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--seller-invoices-gutter);
    background: var(--seller-invoices-surface);
    pointer-events: none;
}

.seller-invoices-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    color: #fff;
    flex-shrink: 0;
    font-size: 1.45rem;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.seller-invoices-nav-icon--orders {
    background: linear-gradient(145deg, #1b3a6b 0%, #2a4f8f 100%);
}

.seller-invoices-nav-icon--ads {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
}

.seller-invoices-nav-icon--tax {
    background: linear-gradient(145deg, #0342b0 0%, #0450d5 100%);
}

.seller-invoices-nav-icon--tds {
    background: linear-gradient(145deg, #7c2d12 0%, #c2410c 100%);
}

.seller-invoices-nav-icon--tcs {
    background: linear-gradient(145deg, #14532d 0%, #16a34a 100%);
}

.seller-invoices-nav-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.seller-invoices-nav-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
    white-space: nowrap;
}

.seller-invoices-nav-desc {
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-muted);
    white-space: nowrap;
}

.seller-invoices-nav-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 1rem;
    margin-left: 4px;
    padding-right: 2px;
}

.seller-invoices-panel {
    background: var(--seller-invoices-surface);
    border: none;
    /* Square left edge so active tab meets panel with no seam or text overlap. */
    border-radius: 0 14px 14px 0;
    box-shadow: none;
    padding: 18px 20px 20px 24px;
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.seller-invoices-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    min-height: 44px;
    flex-shrink: 0;
}

.seller-invoices-fy-heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    text-align: left;
    white-space: nowrap;
}

.seller-invoices-year-form {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    margin-left: auto;
    padding: 8px 12px 8px 14px;
    background: #f4f7fb;
    border: 1px solid #d5deea;
    border-radius: 10px;
}

.seller-invoices-panel-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}

.seller-invoices-year-label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.seller-invoices-year-select {
    width: auto;
    min-width: 118px;
    padding: 7px 36px 7px 12px;
    border-radius: 8px;
    border-color: #c9d4e4;
    background-color: #fff;
    font-weight: 600;
    line-height: 1.3;
}

.seller-invoices-fy-label {
    display: none;
}

.seller-invoices-month-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.seller-invoices-month-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
}

.seller-invoices-month-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.seller-invoices-month-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.seller-invoices-month-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.seller-invoices-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(4, 80, 213, 0.25);
    background: rgba(4, 80, 213, 0.06);
    color: var(--panel-accent, #0450d5);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.seller-invoices-download-btn:hover {
    background: var(--panel-accent, #0450d5);
    color: #fff;
}

.seller-invoices-download-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #f1f5f9;
    color: #94a3b8;
}

.seller-invoices-month-card.is-pending {
    opacity: 0.85;
}

.seller-invoices-panel-hint {
    margin: 0 0 14px;
    color: var(--muted, #64748b);
    font-size: 0.875rem;
    line-height: 1.45;
    flex-shrink: 0;
}

.seller-invoices-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    text-align: center;
    color: var(--text-muted);
    flex: 1 1 auto;
    min-height: 200px;
}

.seller-invoices-empty i {
    font-size: 1.75rem;
    color: var(--panel-accent, #0450d5);
    opacity: 0.7;
}

.seller-invoices-empty p {
    margin: 0;
    max-width: 360px;
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .seller-invoices-layout {
        grid-template-columns: 1fr;
        padding: 12px;
        flex: 1 1 auto;
        min-height: min(70vh, 640px);
    }

    .seller-invoices-nav {
        padding-right: 0;
        height: auto;
    }

    .seller-invoices-nav-card.is-active {
        margin-right: 0;
        border-radius: 12px;
        flex: 0 0 auto;
        min-height: 0;
    }

    .seller-invoices-nav-tax {
        flex: 0 0 auto;
    }

    .seller-invoices-nav-tax .seller-invoices-nav-card.is-active {
        flex: 0 0 auto;
    }

    .seller-invoices-nav-card.is-active::after {
        display: none;
    }

    .seller-invoices-panel {
        border-radius: 14px;
        padding: 18px 20px 20px;
        min-height: 280px;
        height: auto;
    }

    .seller-invoices-year-form {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .seller-invoices-nav-desc {
        white-space: normal;
    }
}

.seller-finance-current-cycle .card-body {
    padding: 18px 20px 20px;
}

.seller-payouts-page--retailer > .seller-payouts-header-row {
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.seller-payouts-page--retailer > .seller-payouts-back-row {
    flex-shrink: 0;
}

.seller-payouts-page--retailer > .seller-payouts-current-section {
    flex-shrink: 0;
}

/* Fit inside main-content; allow vertical scroll as a safety net so pager is never unreachable.
   Must beat .main-content:has(.seller-finance-page){overflow:hidden} (same specificity, later wins). */
.main-content:has(.seller-payouts-page.seller-finance-page) {
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.seller-payouts-page.retailer-purchases-page.retailer-products-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: visible;
}

.seller-payouts-page--retailer > .seller-payouts-past-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-payouts-section-toolbar {
    position: relative;
    z-index: 70;
    overflow: visible;
    flex-shrink: 0;
}

.seller-payouts-page--retailer .seller-finance-date-filter,
.seller-payouts-page--retailer .seller-finance-date-filter .order-date-filter,
.seller-payouts-page--retailer .seller-finance-date-filter .order-date-filter-form {
    position: relative;
    z-index: 71;
    overflow: visible;
}

.seller-payouts-page .seller-payouts-list-block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.seller-payouts-page .seller-payouts-list-block > .panel-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.seller-payouts-page .seller-payouts-list-block > .seller-payouts-pager {
    flex: 0 0 auto;
    border: 1px solid var(--border, #e2e8f0);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
}

.seller-payouts-page .seller-payouts-list-block > .panel-card:has(+ .seller-payouts-pager) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.seller-payouts-page .seller-payouts-list-block > .seller-payouts-pager .panel-pagination {
    border-top: 0;
    border-radius: 0 0 12px 12px;
    margin: 0;
    background: transparent;
}

.seller-payouts-cod-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    color: var(--heading, #0f172a);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.seller-payouts-cod-chip:hover {
    border-color: rgba(4, 80, 213, 0.28);
    color: var(--panel-accent, #0450d5);
    text-decoration: none;
}

.seller-payouts-cod-chip.is-active {
    border-color: rgba(4, 80, 213, 0.35);
    background: rgba(4, 80, 213, 0.06);
    color: var(--panel-accent, #0450d5);
}

.seller-payouts-cod-chip-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.seller-payouts-cod-chip-label {
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.seller-payouts-cod-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
}

.seller-payouts-cod-chip.is-active .seller-payouts-cod-chip-count {
    background: rgba(4, 80, 213, 0.12);
}

.seller-payouts-cod-chip .bi {
    font-size: 0.8rem;
    opacity: 0.65;
}

.seller-payouts-back-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.seller-payouts-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--panel-accent, #0450d5);
    text-decoration: none;
}

.seller-payouts-back-link:hover {
    text-decoration: underline;
}

.seller-payouts-back-meta {
    font-size: 0.8125rem;
    color: var(--text-muted, #64748b);
}

.seller-payouts-section-title {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--heading, #0f172a);
}

.seller-payouts-current-section {
    flex: 0 0 auto;
    margin-bottom: 18px;
}

.seller-payouts-past-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.seller-payouts-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.seller-payouts-section-toolbar .seller-payouts-section-title {
    margin: 0;
}

.seller-payouts-section-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.seller-payouts-cycle-note {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #64748b);
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-finance-past-cycles {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-finance-past-cycles .orders-table-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-finance-past-cycles .online-orders-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pager lives outside .panel-card so overflow:hidden on the card cannot clip it. */
.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-payouts-pager {
    flex: 0 0 auto;
    margin-top: 0;
    border: 1px solid var(--border, #e2e8f0);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-payouts-pager .panel-pagination {
    border-top: 0;
    border-radius: 0 0 12px 12px;
    margin: 0;
    background: transparent;
}

.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-finance-past-cycles:has(+ .seller-payouts-pager) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.seller-payouts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 220px;
    width: 100%;
    padding: 48px 24px;
    margin: 0;
    text-align: center;
    color: var(--text-muted, #64748b);
}

.seller-payouts-empty i {
    font-size: 2.25rem;
    opacity: 0.5;
    line-height: 1;
}

.seller-payouts-empty p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading, #0f172a);
}

.seller-payouts-page .panel-card:has(> .seller-payouts-empty),
.seller-payouts-page--retailer > .seller-payouts-past-section > .seller-finance-past-cycles:has(> .seller-payouts-empty) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 280px;
}

.seller-finance-cycle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
    align-items: start;
}

.seller-finance-cycle-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
}

.seller-finance-cycle-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

.seller-finance-cycle-value {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--heading, #0f172a);
    font-family: var(--font-display, inherit);
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.seller-finance-cycle-value--date {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text, #334155);
}

.seller-payouts-page--cycle-home .seller-finance-cycle-range,
.seller-payouts-page--cycle-home .seller-finance-table td.seller-finance-cycle-range {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text, #334155);
}

.seller-finance-cycle-value--net {
    color: var(--panel-accent, #0450d5);
}

.panel-wrapper.seller-panel .seller-finance-cycle-value--net {
    color: var(--panel-accent, #0450d5);
}

.seller-finance-cycle-value--link {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    width: fit-content;
    color: var(--panel-accent, #0450d5);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.seller-finance-cycle-value--link:hover {
    color: var(--panel-accent, #0450d5);
    border-bottom-style: solid;
    opacity: 0.85;
}

.seller-finance-table a.seller-finance-cycle-value--link {
    font-weight: 650;
}

.seller-finance-cycle-value--btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px dashed currentColor;
    width: fit-content;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.seller-finance-cycle-value--btn:hover {
    color: var(--panel-accent, #0450d5);
    border-bottom-style: solid;
}

.seller-finance-cycle-value--bold {
    font-weight: 700;
}

.seller-payouts-page--cycle-home .seller-finance-current-cycle {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border-radius: 12px;
}

.seller-payouts-page--cycle-home .seller-payouts-section-title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--heading, #0f172a);
}

.seller-payouts-page--cycle-home .seller-payouts-cycle-note {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.seller-payouts-page--cycle-home .seller-finance-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.seller-payouts-page--cycle-home .seller-finance-table td {
    font-size: 0.9375rem;
    vertical-align: middle;
}

.seller-finance-net-clickable {
    display: inline-block;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
    cursor: pointer;
}

.admin-finance-amount--net .seller-finance-net-clickable,
.admin-finance-amount .seller-finance-net-clickable {
    font-weight: inherit;
}

.seller-finance-cycle-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(4, 80, 213, 0.1);
    color: var(--panel-accent, #0450d5);
}

.seller-finance-past-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.seller-finance-past-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.seller-finance-table thead th {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-subtle, #f8fafc);
    position: sticky;
    top: 0;
    z-index: 1;
}

.seller-finance-table tbody tr.seller-finance-history-row {
    cursor: pointer;
}

.seller-finance-table tbody tr.seller-finance-history-row:hover {
    background: rgba(4, 80, 213, 0.04);
}

.seller-finance-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.seller-finance-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.seller-finance-status--paid {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.seller-finance-status--ready {
    background: rgba(4, 80, 213, 0.12);
    color: var(--panel-accent, #0450d5);
}

.seller-finance-status--pending {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.seller-finance-table tbody tr.seller-finance-upcoming-row {
    cursor: pointer;
}

.seller-finance-table tbody tr.seller-finance-upcoming-row:hover {
    background: rgba(4, 80, 213, 0.04);
}

.seller-finance-table tbody tr.seller-finance-cod-row {
    cursor: pointer;
}

.seller-finance-table tbody tr.seller-finance-cod-row:hover {
    background: rgba(4, 80, 213, 0.04);
}

.seller-payouts-page .retailer-products-tabs-row {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.seller-payouts-page .retailer-products-tabs a.retailer-products-tab,
.admin-finance-payout-tabs-row .retailer-products-tabs a.retailer-products-tab {
    color: var(--slate-500);
    text-decoration: none;
}

.seller-payouts-page .retailer-products-tabs a.retailer-products-tab:hover,
.admin-finance-payout-tabs-row .retailer-products-tabs a.retailer-products-tab:hover {
    color: var(--heading);
    text-decoration: none;
}

.seller-payouts-page .retailer-products-tabs a.retailer-products-tab.is-active,
.admin-finance-payout-tabs-row .retailer-products-tabs a.retailer-products-tab.is-active {
    color: var(--accent-600);
    background: var(--surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.admin-finance-payout-tabs-row {
    margin-bottom: 14px;
}

.admin-finance-payout-tabs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-finance-payout-seller-filter .form-select {
    min-width: 11.5rem;
    width: auto;
}

.admin-finance-payout-tabs-row .orders-richer-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-finance-payout-tabs-row .retailer-products-tab.is-active .orders-richer-tab-count {
    background: var(--accent-soft, rgba(79, 142, 247, 0.14));
    color: var(--accent-700, #2257c0);
}

.seller-payouts-page > .seller-finance-upcoming,
.seller-payouts-page > .seller-finance-past-cycles {
    flex: 1 1 auto;
    min-height: 0;
}

.seller-payouts-page.retailer-purchases-page.retailer-products-shell > .retailer-products-card.seller-finance-upcoming,
.seller-payouts-page.retailer-purchases-page.retailer-products-shell > .retailer-products-card.seller-finance-past-cycles {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
}

.seller-payouts-page > .seller-finance-upcoming .orders-table-panel,
.seller-payouts-page > .seller-finance-past-cycles .orders-table-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Table scrolls; pagination stays pinned under it so the card never looks cut off. */
.seller-payouts-page > .seller-finance-upcoming .online-orders-table-wrap,
.seller-payouts-page > .seller-finance-past-cycles .online-orders-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.seller-payouts-page .seller-finance-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.seller-payouts-page .seller-finance-table thead th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.seller-payouts-page .seller-finance-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    padding: 14px 16px;
}

.seller-payouts-page .seller-finance-table tbody tr:last-child td {
    border-bottom: 0;
}

.seller-payouts-page .seller-finance-table tbody tr.online-order-row:hover {
    background: rgba(79, 142, 247, 0.04);
}

.seller-payouts-date-stack {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.seller-payouts-utr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: #475569;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-payouts-fee-copy {
    margin: 0 0 10px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--slate-600, #475569);
}

.seller-payouts-fee-copy--status {
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--heading, #0f172a);
}

.seller-payouts-page .panel-pagination {
    flex: 0 0 auto;
    margin-top: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
}

.seller-finance-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.seller-payouts-page .seller-finance-table .seller-payouts-actions-col {
    text-align: center;
    vertical-align: middle;
    width: 96px;
    min-width: 96px;
    white-space: nowrap;
}

.seller-payouts-page .seller-finance-table .seller-payouts-actions-col .seller-finance-row-actions {
    width: 100%;
    justify-content: center;
}

.seller-payouts-page .seller-finance-table .seller-payouts-actions-col .retailer-order-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    color: var(--slate-600);
    font-size: 16px;
    text-decoration: none;
}

.seller-payouts-page .seller-finance-table .seller-payouts-actions-col .retailer-order-icon-btn:hover {
    background: var(--slate-50);
    color: #2563eb;
    border-color: var(--slate-300);
}

@media (max-width: 900px) {
    .seller-finance-cycle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .seller-finance-cycle-grid {
        grid-template-columns: 1fr;
    }
}

.wallet-page {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wallet-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.wallet-page-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.wallet-page-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 42rem;
}

.wallet-page-shop-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 14px;
    color: var(--accent-600);
    border: 1px solid var(--accent-400);
    background: #fff;
}
.wallet-page-shop-link:hover,
.wallet-page-shop-link:focus {
    color: #fff;
    background: var(--accent-600);
    border-color: var(--accent-600);
}

.wallet-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.wallet-page-support-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 14px;
    color: var(--heading);
    border: 1px solid var(--border);
    background: #fff;
}

.wallet-page-support-link:hover,
.wallet-page-support-link:focus {
    color: var(--brand-primary, #0f766e);
    border-color: var(--brand-primary, #0f766e);
    background: #fff;
}

.wallet-hub-tabs-row {
    margin: 0;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.wallet-hub-tabs-row.retailer-products-tabs-row {
    margin-bottom: 0;
}

.wallet-hub-tabs-row .retailer-products-tab {
    text-decoration: none;
    color: var(--slate-500);
    cursor: pointer;
}

.wallet-hub-tabs-row .retailer-products-tab:hover {
    color: var(--heading);
    text-decoration: none;
}

.wallet-hub-tabs-row .retailer-products-tab.is-active {
    color: var(--accent-600);
    background: var(--surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.wallet-hub-main > .wallet-hub-tabs-row + .wallet-hub-panel {
    border-top: none;
}

.wallet-page-alert {
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.wallet-page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.wallet-hub-main.wallet-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wallet-hub-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.wallet-hub-panel .wallet-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.wallet-hub-panel .wallet-table-wrap.is-empty {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.wallet-hub-panel .wallet-table-wrap.is-empty > .wallet-hub-table {
    flex-shrink: 0;
}

.wallet-hub-panel .wallet-table-wrap.is-empty > .wallet-hub-table thead th {
    border-bottom: 1px solid var(--border);
}

.wallet-hub-panel .wallet-table-wrap.is-empty .wallet-hub-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 24px 20px;
    border: none;
    box-shadow: none;
    text-align: center;
    color: var(--text-muted);
}

.wallet-hub-panel .panel-pagination {
    flex-shrink: 0;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (min-width: 1100px) {
    .wallet-page-top-row {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 22px;
    }
}

.wallet-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--border);
    overflow: hidden;
}

.wallet-card-head {
    padding: 20px 24px 0;
}

.wallet-card-head--table {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
}

.wallet-card-body {
    padding: 12px 24px 20px;
}

.wallet-card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0;
    letter-spacing: -0.01em;
}

.wallet-card-title--nested {
    font-size: 0.98rem;
}

.wallet-history-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.wallet-hub-kpi-row {
    display: grid;
    gap: 16px;
    flex-shrink: 0;
}

.wallet-hub-kpi-row--retailer {
    grid-template-columns: 1fr;
}

.wallet-hub-kpi-row--manufacturer {
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .wallet-hub-kpi-row--retailer {
        grid-template-columns: 1.1fr 1.1fr 0.9fr;
    }

    .wallet-hub-kpi-row--manufacturer {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.wallet-hub-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wallet-hub-kpi--balance {
    border-color: #D1FAE5;
    background: linear-gradient(180deg, #F0FDF4 0%, #fff 55%);
}

.wallet-hub-kpi--due {
    border-color: #FDE68A;
    background: linear-gradient(180deg, #FFFBEB 0%, #fff 55%);
}

.wallet-hub-kpi-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.wallet-hub-kpi-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}

.wallet-hub-kpi--balance .wallet-hub-kpi-value {
    color: #059669;
}

.wallet-hub-kpi-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.wallet-hub-kpi-sep {
    margin: 0 4px;
    opacity: 0.55;
}

.wallet-hub-due-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #FEF3C7;
    color: #92400E;
}

.wallet-hub-due-badge--clear {
    background: #ECFDF5;
    color: #047857;
}

.wallet-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.wallet-hub-payall-form {
    display: inline;
}

.wallet-hub-main {
    padding: 0;
}

.wallet-hub-tabs {
    display: none; /* legacy; hub uses retailer-products-tabs */
}

.wallet-hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    margin-bottom: -1px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.wallet-hub-tab:hover {
    color: var(--heading);
}

.wallet-hub-tab.is-active {
    color: var(--brand-primary, #0f766e);
    border-bottom-color: var(--brand-primary, #0f766e);
}

.wallet-hub-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--slate-100, #f1f5f9);
    color: var(--text-muted);
}

.wallet-hub-tab.is-active .wallet-hub-tab-count {
    background: rgba(15, 118, 110, 0.12);
    color: var(--brand-primary, #0f766e);
}

.wallet-hub-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 20px 12px;
    flex-wrap: wrap;
}

.wallet-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wallet-hub-table th,
.wallet-hub-table td {
    padding: 12px 14px;
    vertical-align: top;
    text-align: left;
}

.wallet-hub-table thead th {
    border-bottom: 1px solid var(--border);
}

.wallet-hub-table tbody td {
    border-bottom: 1px solid var(--border);
}

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

.wallet-hub-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--slate-50, #f8fafc);
    white-space: nowrap;
}

.wallet-hub-table .text-end {
    text-align: right;
}

.wallet-hub-emphasis {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wallet-hub-order-link {
    font-weight: 600;
    color: var(--heading);
    text-decoration: none;
}

.wallet-hub-order-link:hover {
    color: var(--brand-primary, #0f766e);
    text-decoration: underline;
}

.wallet-hub-channel {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wallet-hub-channel--b2b {
    background: #EFF6FF;
    color: #1D4ED8;
}

.wallet-hub-channel--pos {
    background: #F5F3FF;
    color: #6D28D9;
}

.wallet-hub-date-main {
    display: block;
    font-weight: 600;
}

.wallet-hub-date-sub {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.wallet-hub-ref code {
    font-size: 11px;
    word-break: break-all;
}

.wallet-hub-ref-desc {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.wallet-hub-status-paid {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #ECFDF5;
    color: #047857;
}

.wallet-hub-empty-row td {
    padding: 0 !important;
    border-bottom: none !important;
}

.wallet-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: none;
    text-align: center;
    color: var(--text-muted);
}

.wallet-hub-empty i {
    font-size: 1.5rem;
    color: var(--success, #059669);
}

.wallet-hub-empty p {
    margin: 0;
    font-weight: 600;
    color: var(--heading);
}

.wallet-hub-empty span {
    font-size: 12px;
    max-width: 36rem;
    line-height: 1.45;
}

.wallet-page .wallet-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .wallet-hub-kpi {
        min-height: 0;
    }

    .wallet-hub-tabs {
        padding: 0 4px;
    }

    .wallet-hub-tab {
        padding: 12px 12px;
        font-size: 0.8125rem;
    }
}

/* Balance card */
.wallet-card--balance {
    border-color: #D1FAE5;
}

.wallet-balance-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 12px;
}

.wallet-balance-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ECFDF5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.wallet-balance-content {
    flex: 1;
    min-width: 0;
}

.wallet-balance-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-balance-info-icon {
    font-size: 12px;
    opacity: 0.55;
}

.wallet-balance-amount {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.8vw, 1.75rem);
    font-weight: 800;
    color: #059669;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.wallet-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ECFDF5;
    color: #047857;
    font-size: 11px;
    font-weight: 600;
}

.wallet-ready-badge i {
    font-size: 11px;
}

.wallet-balance-illustration {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 72px;
    display: none;
}

@media (min-width: 768px) {
    .wallet-balance-illustration {
        display: block;
    }
}

.wallet-illus-wallet,
.wallet-illus-card,
.wallet-illus-shield {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.wallet-illus-wallet {
    width: 64px;
    height: 48px;
    left: 8px;
    top: 20px;
    background: linear-gradient(135deg, #4F8EF7, #356FE0);
    color: #fff;
    font-size: 1.25rem;
    transform: rotate(-8deg);
}

.wallet-illus-card {
    width: 52px;
    height: 36px;
    right: 4px;
    top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--accent-600);
    font-size: 1rem;
    transform: rotate(12deg);
}

.wallet-illus-shield {
    width: 36px;
    height: 36px;
    right: 28px;
    bottom: 4px;
    background: #ECFDF5;
    color: #059669;
    font-size: 1.1rem;
    border-radius: 50%;
}

.wallet-balance-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 20px;
    background: #EFF6FF;
    border-top: 1px solid #DBEAFE;
    font-size: 11.5px;
    line-height: 1.4;
    color: #1E40AF;
}

.wallet-balance-footnote i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 14px;
}

/* Top-up */
.wallet-topup-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.wallet-topup-field {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 320px;
}

.wallet-topup-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
}

.wallet-topup-input {
    font-size: 13px;
    padding: 8px 12px;
}

.wallet-topup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 16px;
}

.wallet-topup-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-topup-note i {
    color: var(--warning);
    font-size: 12px;
}

.wallet-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Transaction table */
.wallet-card--history {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wallet-table-wrap {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.wallet-txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.wallet-txn-table thead th {
    padding: 9px 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500);
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.wallet-txn-table thead th:nth-child(1) { width: 22%; }
.wallet-txn-table thead th:nth-child(2) { width: 30%; }
.wallet-txn-table thead th:nth-child(3) { width: 14%; }
.wallet-txn-table thead th:nth-child(4),
.wallet-txn-table thead th:nth-child(5) { width: 17%; }

.wallet-txn-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s ease;
}

.wallet-txn-table tbody tr:last-child {
    border-bottom: none;
}

.wallet-txn-table tbody tr:hover:not(.wallet-txn-empty-row) {
    background: var(--slate-50);
}

.wallet-txn-table td {
    padding: 11px 20px;
    vertical-align: middle;
    color: var(--text);
    line-height: 1.35;
}

.wallet-txn-col-amount {
    text-align: right;
    white-space: nowrap;
}

.wallet-txn-date-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wallet-txn-date-icon-wrap {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #EFF6FF;
    color: var(--accent-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.wallet-txn-date-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wallet-txn-date-day {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
}

.wallet-txn-date-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.wallet-txn-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-txn-balance {
    font-weight: 600;
    color: var(--heading);
}

.wallet-txn-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wallet-txn-amount--credit {
    color: var(--success);
}

.wallet-txn-amount--debit {
    color: var(--danger);
}

.wallet-txn-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.wallet-txn-badge--credit {
    background: #ECFDF5;
    color: #047857;
}

.wallet-txn-badge--topup,
.wallet-txn-badge--payment {
    background: #EFF6FF;
    color: #1D4ED8;
}

.wallet-txn-badge--refund {
    background: rgba(139, 92, 246, 0.12);
    color: #6D28D9;
}

.wallet-txn-badge--neutral {
    background: var(--slate-100);
    color: var(--slate-600);
}

.wallet-txn-empty-row td {
    padding: 0 !important;
    border: none !important;
}

.wallet-txn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}

.wallet-txn-empty i {
    font-size: 1.5rem;
    opacity: 0.4;
    margin-bottom: 8px;
}

.wallet-txn-empty p {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--heading);
    font-size: 13px;
}

.wallet-txn-empty span {
    font-size: 12px;
}

.wallet-txn-pagination {
    margin-top: 0;
    flex-shrink: 0;
}

.wallet-txn-pagination.orders-list-pagination .page-item.active .page-link {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #fff;
}

.wallet-txn-pagination.orders-list-pagination .page-link {
    color: var(--slate-600);
}

.wallet-txn-pagination.orders-list-pagination .page-link:hover {
    color: var(--accent-600);
}

/* Support banner */
.wallet-support-banner {
    flex-shrink: 0;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: var(--radius);
}

.wallet-support-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    flex-wrap: wrap;
}

.wallet-support-icon {
    color: var(--accent-600);
    font-size: 1rem;
    flex-shrink: 0;
}

.wallet-support-text {
    margin: 0;
    flex: 1;
    min-width: 180px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.wallet-support-text strong {
    color: var(--heading);
    font-weight: 600;
}

.wallet-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-left: auto;
    color: var(--accent-600);
    border: 1px solid var(--accent-400);
    background: #fff;
}

.wallet-support-btn:hover,
.wallet-support-btn:focus {
    color: #fff;
    background: var(--accent-600);
    border-color: var(--accent-600);
}

@media (max-width: 767.98px) {
    .wallet-page-header {
        margin-bottom: 20px;
    }

    .wallet-page-stack {
        gap: 20px;
    }

    .wallet-balance-main {
        flex-wrap: wrap;
        padding: 20px;
    }

    .wallet-balance-footnote {
        padding: 12px 20px;
    }

    .wallet-card-head,
    .wallet-card-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wallet-card-head--table {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .wallet-txn-table {
        table-layout: auto;
    }

    .wallet-txn-table thead th,
    .wallet-txn-table td {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wallet-txn-table thead th:nth-child(2),
    .wallet-txn-table td:nth-child(2) {
        display: none;
    }

    .wallet-topup-field {
        max-width: none;
        flex: 1 1 100%;
    }

    .wallet-topup-form {
        flex-direction: column;
        align-items: stretch;
    }

    .wallet-topup-btn,
    .wallet-download-btn {
        width: 100%;
        justify-content: center;
    }

    .wallet-support-inner {
        padding: 14px 20px;
    }

    .wallet-support-btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

/* ===== Admin Finance Overview ===== */
.main-content:has(.admin-finance-tab-panel--ledger) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-finance-page {
    max-width: 1280px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    --admin-purple: #7c3aed;
    --admin-purple-dark: #6d28d9;
    --admin-purple-darker: #5b21b6;
    --admin-purple-soft: rgba(124, 58, 237, 0.1);
    --admin-purple-border: rgba(124, 58, 237, 0.28);
}

.admin-finance-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.admin-finance-header h1 {
    font-family: var(--font-display);
    font-size: var(--heading-page);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--heading);
}

.admin-finance-subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 36rem;
}

.admin-finance-main-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--slate-100);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.admin-finance-main-tab {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.admin-finance-main-tab:hover {
    color: var(--heading);
}

.admin-finance-main-tab.active {
    background: var(--surface);
    color: var(--admin-purple-dark);
    box-shadow: var(--shadow-sm);
}

button.admin-finance-main-tab {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
}

.admin-finance-tab-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-finance-tab-panel--ledger {
    gap: 10px;
}

.admin-finance-period-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-finance-period-tab {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.admin-finance-period-tab:hover {
    color: var(--admin-purple-dark);
    border-color: var(--admin-purple-border);
    background: var(--admin-purple-soft);
}

.admin-finance-period-tab.active {
    background: var(--admin-purple);
    border-color: var(--admin-purple);
    color: #fff;
}

.admin-finance-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-muted);
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.admin-finance-notice--compact {
    padding: 8px 12px;
    margin-bottom: 0;
}

.admin-finance-notice i {
    color: var(--admin-purple);
    margin-top: 1px;
    flex-shrink: 0;
}

.admin-finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    flex-shrink: 0;
}

.admin-finance-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.admin-finance-kpi-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 1rem;
    margin-top: 2px;
}

.admin-finance-kpi-icon--green {
    background: #DCFCE7;
    color: #16A34A;
}

.admin-finance-kpi-icon--blue {
    background: #DBEAFE;
    color: #2563EB;
}

.admin-finance-kpi-icon--amber {
    background: #FFEDD5;
    color: #EA580C;
}

.admin-finance-kpi-icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.admin-finance-kpi-body {
    flex: 1;
    min-width: 0;
}

.admin-finance-kpi-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.35;
    margin-bottom: 2px;
}

.admin-finance-kpi-date {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 8px;
}

.admin-finance-kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    margin-bottom: 6px;
}

.admin-finance-kpi-value--green { color: #16A34A; }
.admin-finance-kpi-value--amber { color: #EA580C; }
.admin-finance-kpi-value--purple { color: #7C3AED; }

.admin-finance-kpi-meta {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.45;
    word-break: break-word;
}

.admin-finance-integrity-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    flex-shrink: 0;
}

.admin-finance-integrity-banner--ok {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
}

.admin-finance-integrity-banner--ok i {
    font-size: 1rem;
}

.admin-finance-integrity-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FCD34D;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

.admin-finance-integrity-alert-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.admin-finance-integrity-alert-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #FDE68A;
    color: #D97706;
    font-size: 1.25rem;
}

.admin-finance-integrity-alert-text {
    flex: 1;
    min-width: 0;
}

.admin-finance-integrity-alert-text strong {
    display: block;
    color: var(--heading);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.admin-finance-integrity-alert-text span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.admin-finance-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--admin-purple);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.admin-finance-review-btn:hover {
    background: var(--admin-purple-dark);
    color: #fff;
}

.admin-finance-review-btn--compact {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--admin-purple-soft);
    color: var(--admin-purple-darker);
    border: 1px solid var(--admin-purple-border);
}

.admin-finance-review-btn--compact:hover {
    background: rgba(124, 58, 237, 0.16);
    color: var(--admin-purple-darker);
}

.admin-finance-legacy-note {
    margin: -4px 0 0;
    font-size: 11.5px;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.admin-finance-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Date calendar must escape the card; table wrap keeps rounded corners */
.admin-finance-panel:has(.order-date-filter) {
    overflow: visible;
}

.admin-finance-panel:has(.order-date-filter) .admin-finance-table-wrap {
    border-radius: 0 0 var(--radius) var(--radius);
    /* Keep vertical clip for rounded corners; allow horizontal pan when extra columns show */
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-finance-panel--ledger {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-finance-panel--ledger > .panel-pagination {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
}

.admin-finance-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.admin-finance-panel-head--compact {
    padding: 12px 16px 10px;
}

.admin-finance-panel-head h2 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-panel-head h2 .admin-finance-filter-hint {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.admin-finance-panel-desc {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

.admin-finance-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-finance-alltime {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-finance-alltime strong {
    color: var(--heading);
    font-weight: 700;
}

.admin-finance-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.admin-finance-icon-btn:hover {
    color: var(--admin-purple);
    border-color: var(--admin-purple-border);
    background: var(--admin-purple-soft);
}

.admin-finance-table--panel thead th {
    background: var(--slate-50);
}

.admin-finance-table--panel th:first-child,
.admin-finance-table--panel td:first-child {
    padding-left: 18px;
}

.admin-finance-table--panel th:last-child,
.admin-finance-table--panel td:last-child {
    padding-right: 18px;
}

.admin-finance-table--ledger th:first-child,
.admin-finance-table--ledger td:first-child {
    padding-left: 18px;
}

.admin-finance-table--ledger th:last-child,
.admin-finance-table--ledger td:last-child {
    padding-right: 18px;
}

.admin-finance-mfg-name {
    font-weight: 600;
    color: var(--heading);
}

.admin-finance-pagination.orders-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    margin-top: auto;
    padding: 0.75rem 18px;
    border-top: 1px solid var(--slate-200, #e2e8f0);
    background: var(--slate-50, #f8fafc);
    flex-shrink: 0;
    box-sizing: border-box;
    gap: 0.75rem;
}

.admin-finance-pagination .orders-list-page-info {
    flex: 0 1 auto;
    min-width: 0;
}

.admin-finance-pagination nav {
    flex-shrink: 0;
    margin-left: auto;
}

.admin-finance-pagination .pagination .page-link {
    min-width: 2rem;
    text-align: center;
    color: var(--slate-600, #475569);
}

.admin-finance-pagination .page-link:hover {
    color: var(--admin-purple);
    border-color: var(--admin-purple-border);
    background: var(--admin-purple-soft);
}

.admin-finance-pagination .page-item.active .page-link {
    background: var(--admin-purple);
    border-color: var(--admin-purple);
    color: #fff;
}

.admin-finance-pagination .page-item.active .page-link:hover {
    background: var(--admin-purple-dark);
    border-color: var(--admin-purple-dark);
    color: #fff;
}

.admin-finance-ledger-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    position: relative;
    z-index: 60;
}

.admin-finance-ledger-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    position: relative;
    z-index: 70;
    overflow: visible;
}

.admin-finance-ledger-date-filter {
    position: relative;
    z-index: 70;
    overflow: visible;
}

/* Header filter sits on the right — open calendar left into the content area */
.admin-finance-ledger-date-filter .order-date-dropdown {
    left: auto;
    right: 0;
}

.admin-finance-ledger-head-form {
    margin: 0;
    flex-shrink: 0;
}

.admin-finance-panel-head--ledger {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.admin-finance-panel-head--ledger h2 {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-finance-ledger-head-search {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 340px;
}

.admin-finance-ledger-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-finance-ledger-search-wrap:focus-within {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-finance-ledger-search-icon {
    flex-shrink: 0;
    color: var(--slate-400);
    font-size: 0.85rem;
    line-height: 1;
    pointer-events: none;
}

.admin-finance-ledger-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12.5px;
}

.admin-finance-ledger-search-input:focus {
    background: transparent;
    box-shadow: none;
}

.admin-finance-ledger-head-type {
    flex: 0 0 auto;
    margin-left: auto;
}

.admin-finance-ledger-select {
    min-width: 148px;
    max-width: 180px;
    font-size: 12.5px;
    border-color: var(--slate-200);
    border-radius: 8px;
    height: 34px;
}

.admin-finance-settlements-compact {
    flex-shrink: 0;
}

.admin-finance-inline-stat {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-finance-card {
    overflow: hidden;
}

.admin-finance-ledger-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-finance-ledger-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.admin-finance-card-head--compact {
    padding: 12px 16px;
}

.admin-finance-card-head--compact .admin-finance-card-desc {
    margin-top: 2px;
}

.admin-finance-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-finance-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.admin-finance-card-head h2 {
    margin: 0 0 2px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-card-desc {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

.admin-finance-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-finance-health-badge--ok {
    background: var(--success-soft);
    color: #047857;
}

.admin-finance-health-badge--warn {
    background: var(--warning-soft);
    color: #B45309;
}

.admin-finance-inline-alert {
    margin: 0;
    padding: 10px 18px;
    font-size: 11.5px;
    color: #92400E;
    background: #FFFBEB;
    border-bottom: 1px solid #FDE68A;
}

.admin-finance-table-wrap {
    overflow-x: auto;
}

.admin-finance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-finance-table th {
    padding: 10px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.admin-finance-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text);
}

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

.admin-finance-table tbody tr:hover {
    background: var(--slate-50);
}

.admin-finance-row--warn {
    background: #FFFBEB;
}

.admin-finance-empty {
    text-align: center;
    padding: 28px 16px !important;
    color: var(--text-muted);
}

.admin-finance-empty i {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 6px;
    color: var(--success);
}

.admin-finance-order-id {
    display: block;
    font-weight: 600;
    color: var(--heading);
    font-size: 12px;
}

.admin-finance-table--panel tr.admin-finance-row-clickable {
    cursor: pointer;
}

.admin-finance-table--panel tr.admin-finance-row-clickable:hover {
    background: rgba(124, 58, 237, 0.04);
}

.admin-finance-table--panel tr.admin-finance-row-clickable:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.35);
    outline-offset: -2px;
}

.admin-finance-order-date,
.admin-finance-date {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-finance-ledger-mini,
.admin-finance-issue-detail {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-finance-issue-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-finance-issue-badge--no_ledger {
    background: var(--slate-100);
    color: var(--slate-600);
}

.admin-finance-issue-badge--mismatch {
    background: var(--danger-soft);
    color: #B91C1C;
}

.admin-finance-integrity-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.admin-finance-integrity-badge--ok {
    background: #ECFDF5;
    color: #047857;
}

.admin-finance-integrity-badge--info {
    background: #EFF6FF;
    color: #1D4ED8;
}

.admin-finance-integrity-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-transform: uppercase;
}

.admin-finance-integrity-btn:hover,
.admin-finance-integrity-btn:focus {
    background: #FEE2E2;
    outline: none;
}

.admin-finance-integrity-btn::after {
    content: "ⓘ";
    font-style: normal;
    font-weight: 600;
    opacity: 0.75;
}

.admin-finance-integrity-popover {
    max-width: 420px;
    width: min(420px, calc(100vw - 24px));
}

.admin-finance-integrity-explain {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
}

.admin-finance-integrity-facts {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--border);
}

.admin-finance-integrity-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.admin-finance-integrity-facts dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.admin-finance-integrity-facts dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.admin-finance-integrity-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
}

.admin-finance-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.admin-finance-breakdown {
    min-width: 160px;
    line-height: 1.4;
}

.admin-finance-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.admin-finance-status-badge--paid {
    background: var(--success-soft);
    color: #047857;
}

.admin-finance-status-badge--pending-cod {
    background: var(--warning-soft);
    color: #B45309;
}

.admin-finance-status-badge--no-ledger,
.admin-finance-status-badge--failed {
    background: var(--danger-soft);
    color: #B91C1C;
}

.admin-finance-status-badge--refunded {
    background: var(--slate-100);
    color: var(--slate-600);
}

.admin-finance-status-badge--info-only {
    background: var(--slate-100);
    color: var(--slate-600);
}

.admin-finance-row--info {
    background: rgba(248, 250, 252, 0.85);
}

.admin-finance-channel-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-finance-channel-badge--b2b {
    background: #eff6ff;
    color: #1d4ed8;
}

.admin-finance-channel-badge--pos {
    background: #f5f3ff;
    color: #6d28d9;
}

.admin-finance-channel-badge--b2c {
    background: #ecfdf5;
    color: #047857;
}

.admin-finance-scope-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-finance-scope-badge--platform {
    background: #ecfdf5;
    color: #047857;
}

.admin-finance-scope-badge--info {
    background: var(--slate-100);
    color: var(--slate-600);
}

.admin-finance-ref-col {
    min-width: 9rem;
    max-width: 11rem;
    vertical-align: middle;
}

.admin-finance-ref-id {
    display: inline-block;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    color: var(--slate-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.admin-finance-ref-empty {
    color: var(--slate-400);
}

.admin-finance-txn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    background: #fff;
    color: var(--slate-700);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-finance-txn-badge:hover,
.admin-finance-txn-badge:focus-visible {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    outline: none;
}

.admin-finance-txn-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.admin-finance-txn-popover {
    position: fixed;
    z-index: 1050;
    width: min(420px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.admin-finance-txn-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--slate-100);
}

.admin-finance-txn-popover-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.admin-finance-txn-popover-head strong {
    font-size: 13px;
    color: var(--slate-800);
    word-break: break-all;
}

.admin-finance-txn-popover-parent {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    line-height: 1.4;
}

.admin-finance-txn-popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--slate-500);
    cursor: pointer;
}

.admin-finance-txn-popover-close:hover {
    background: var(--slate-100);
    color: var(--slate-800);
}

.admin-finance-txn-popover-body {
    padding: 0 0 4px;
    max-height: 280px;
    overflow: auto;
}

.admin-finance-txn-popover-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-finance-txn-popover-table th {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--slate-100);
}

.admin-finance-txn-popover-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--slate-50);
    vertical-align: top;
}

.admin-finance-txn-leg-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: var(--slate-700);
    word-break: break-all;
    max-width: 180px;
}

.admin-finance-txn-leg-info,
.admin-finance-txn-leg-status {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--text-muted);
}

.admin-finance-footnote {
    margin: 0;
    padding: 10px 18px 14px;
    font-size: 11.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.admin-finance-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 200;
}

.admin-finance-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(560px, 94vw);
    height: 100vh;
    background: var(--surface);
    z-index: 201;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

body.admin-finance-drawer-open {
    overflow: hidden;
}

.admin-finance-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.admin-finance-drawer-header h2 {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-drawer-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.admin-finance-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--admin-purple-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--admin-purple-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-finance-drawer-close:hover {
    background: var(--admin-purple-soft);
    border-color: var(--admin-purple);
    color: var(--admin-purple-darker);
}

.admin-finance-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}

.admin-finance-table--drawer thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
}

.admin-finance-drawer-footnote {
    margin: 0;
    padding: 10px 16px 16px;
    font-size: 11.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

@media (max-width: 1199.98px) {
    .admin-finance-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .main-content:has(.admin-finance-tab-panel--ledger) {
        overflow: auto;
    }

    .admin-finance-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-finance-main-tabs {
        align-self: flex-start;
    }

    .admin-finance-grid {
        grid-template-columns: 1fr;
    }

    .admin-finance-integrity-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-finance-review-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .admin-finance-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-finance-kpi-value {
        font-size: 1.05rem;
    }
}

.admin-finance-flash {
    margin-bottom: 12px;
}

.admin-finance-amount--net {
    color: var(--emerald-700, #047857);
    font-weight: 700;
}

.admin-finance-payout-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 13px;
}

.admin-finance-payout-banner--today {
    border-color: #86efac;
    background: #f0fdf4;
}

.admin-finance-payout-banner strong {
    display: block;
    color: var(--heading);
}

.admin-finance-payout-banner span {
    color: var(--text-muted);
}

.admin-finance-payout-banner-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-finance-bank-cell {
    font-size: 12px;
}

.admin-finance-header--payouts {
    margin-bottom: 12px;
}

.admin-finance-payout-settings-shell {
    margin-bottom: 12px;
}

.admin-finance-payout-head-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.admin-finance-payout-head-row h1 {
    margin: 0;
    flex: 0 0 auto;
}

.admin-finance-payout-days-fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    border: none;
    padding: 0;
}

.admin-finance-payout-days-legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--slate-700);
    white-space: nowrap;
}

.admin-finance-weekday-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-finance-payout-settings-btn {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.panel-wrapper.admin-panel .admin-finance-payout-settings-btn.btn-outline-secondary {
    color: var(--admin-purple-dark);
    border-color: var(--admin-purple);
    background: #fff;
}

.panel-wrapper.admin-panel .admin-finance-payout-settings-btn.btn-outline-secondary:hover,
.panel-wrapper.admin-panel .admin-finance-payout-settings-btn.btn-outline-secondary:focus {
    background: var(--admin-purple);
    border-color: var(--admin-purple);
    color: #fff;
}

.admin-finance-panel--settings {
    max-width: none;
}

.admin-finance-settings-form {
    padding: 16px 18px 18px;
}

.admin-finance-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}

.admin-finance-settings-field--wide {
    grid-column: 1 / -1;
}

.admin-finance-settings-field .form-label {
    margin-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--slate-700);
}

.admin-finance-settings-field .form-control {
    min-height: 36px;
}

.admin-finance-weekday-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.admin-finance-weekday-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--admin-purple-border);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.admin-finance-weekday-chip:has(input:checked) {
    border-color: var(--admin-purple);
    background: var(--admin-purple-soft);
    color: var(--admin-purple-dark);
}

.admin-finance-weekday-chip input {
    margin: 0;
}

.admin-finance-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.admin-finance-settings-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-finance-settings-footer .admin-finance-settings-schedule {
    margin-top: 0;
    flex: 1 1 320px;
    max-width: 100%;
}

.admin-finance-settings-footer .admin-finance-settings-actions {
    margin-top: 0;
    flex: 0 0 auto;
}

.admin-finance-rate-log {
    padding: 16px 18px 18px;
}

.admin-finance-panel--rate-log {
    overflow: visible;
}

.admin-finance-rate-log-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-finance-rate-log-title {
    margin: 0;
    font-size: var(--heading-section);
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-rate-log-empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.admin-payout-settings-tabs {
    flex-shrink: 0;
}

.admin-finance-rate-log-table th {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.admin-finance-rate-log-table td {
    font-size: var(--text-sm);
    vertical-align: middle;
}

.admin-finance-rate-log-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--admin-purple-soft);
    color: var(--admin-purple-dark);
}

.admin-finance-settings-active-rates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--admin-purple-soft);
    border: 1px solid rgba(124, 58, 237, 0.12);
    font-size: var(--text-sm);
}

.admin-finance-settings-active-label {
    font-weight: 700;
    color: var(--heading);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}

.admin-finance-settings-active-values {
    color: var(--slate-700);
    font-size: var(--text-xs);
}

.admin-panel-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--heading-section);
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-settings-schedule-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 8px;
}

.admin-finance-settings-pending {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(124, 58, 237, 0.2);
    background: var(--admin-purple-soft);
    font-size: var(--text-sm);
    color: var(--slate-700);
}

.admin-finance-settings-pending i {
    color: var(--admin-purple-dark);
    margin-top: 2px;
}

.admin-finance-settings-pending strong {
    display: block;
    margin-bottom: 2px;
    color: var(--heading);
}

.admin-finance-settings-schedule {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.admin-finance-settings-schedule-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-finance-settings-schedule-inputs .form-control {
    max-width: 180px;
}

.admin-finance-settings-schedule-hint {
    margin: 8px 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

@media (max-width: 1100px) {
    .admin-finance-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-finance-payout-head-row {
        align-items: flex-start;
    }

    .admin-finance-payout-settings-btn {
        margin-left: 0;
    }

    .admin-finance-settings-footer {
        align-items: stretch;
    }

    .admin-finance-settings-footer .admin-finance-settings-actions {
        justify-content: stretch;
    }

    .admin-finance-settings-footer .admin-finance-settings-actions .btn {
        flex: 1 1 auto;
    }

    .admin-payout-settings-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-payout-settings-tabs {
        width: 100%;
    }

    .admin-finance-settings-grid {
        grid-template-columns: 1fr;
    }
}

.admin-finance-bank-meta {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

.wallet-card--credit-payable {
    flex-shrink: 0;
}

.wallet-credit-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

.wallet-credit-summary-meta {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.wallet-credit-toggle {
    flex-shrink: 0;
}

.wallet-credit-panel {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-bottom: 8px;
}

.wallet-credit-view-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 24px 0;
}

.wallet-credit-view-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    background: var(--slate-50, #f8fafc);
    border: 1px solid transparent;
}

.wallet-credit-view-tab:hover {
    color: var(--text-primary, #111827);
}

.wallet-credit-view-tab.is-active {
    color: var(--brand-primary, #0f766e);
    background: #fff;
    border-color: var(--brand-primary, #0f766e);
}

.wallet-credit-tabs {
    display: flex;
    gap: 0;
    padding: 16px 24px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.wallet-credit-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: -1px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.wallet-credit-tab:hover {
    color: var(--text-primary, #111827);
}

.wallet-credit-tab.is-active {
    color: var(--brand-primary, #0f766e);
    border-bottom-color: var(--brand-primary, #0f766e);
}

.wallet-b2b-credit-limits {
    margin-top: 4px;
    line-height: 1.4;
}

.wallet-credit-order {
    display: block;
    font-weight: 600;
}

.wallet-credit-status-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
}

.wallet-credit-overdue {
    display: block;
    font-size: 11px;
    color: #b91c1c;
    font-weight: 600;
}

.wallet-credit-due-soon {
    display: block;
    font-size: 11px;
    color: #b45309;
}

.wallet-credit-row--overdue td {
    background: rgba(185, 28, 28, 0.04);
}

.wallet-credit-payable-table--b2b th,
.wallet-credit-payable-table--b2b td {
    white-space: nowrap;
}

.wallet-credit-payable-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
}

.wallet-credit-payable-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: #b45309;
}

.wallet-credit-payable-head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.wallet-credit-payable-empty {
    margin: 0;
    padding: 4px 18px 16px;
    line-height: 1.45;
}

.wallet-credit-payable-hint {
    margin: 0 18px 10px;
}

.wallet-section-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.wallet-credit-payable-table-wrap {
    padding: 0 18px 16px;
    overflow-x: auto;
}

.wallet-credit-payable-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wallet-credit-payable-table th,
.wallet-credit-payable-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

.wallet-credit-payable-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.admin-finance-header--dashboard {
    align-items: flex-end;
    gap: 16px;
}

.admin-finance-header-sub {
    margin: 4px 0 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.admin-finance-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--slate-200);
    font-size: 11px;
    font-weight: 700;
    color: var(--slate-700);
}

.admin-finance-main-tab.active .admin-finance-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.admin-finance-dash-payout {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.admin-finance-dash-payout-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-finance-dash-payout-head h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}

.admin-finance-dash-payout-head p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.admin-finance-dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.admin-finance-dash-stat {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.admin-finance-dash-stat--highlight {
    border-color: #86efac;
    background: #f0fdf4;
}

.admin-finance-dash-stat--warn {
    border-color: #fcd34d;
    background: #fffbeb;
}

.admin-finance-dash-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.admin-finance-dash-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-link-btn {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.admin-finance-panel--compact .admin-finance-panel-head {
    padding-bottom: 8px;
}

.admin-finance-payout-toolbar {
    display: flex;
    align-items: stretch;
    margin-bottom: 12px;
}

.admin-finance-payout-toolbar .admin-finance-payout-banner {
    flex: 1;
    margin-bottom: 0;
}

/* ===== Finance Dashboard (mockup layout) ===== */
.admin-finance-page:has(#finance-tab-dashboard) {
    max-width: 1280px;
}

.admin-finance-header--dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.admin-finance-header--dash .admin-page-title {
    margin: 0;
    font-size: 1.25rem;
}

.admin-finance-tab-panel--dash {
    gap: 10px;
}

.admin-finance-hero {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.3fr) auto;
    align-items: center;
    gap: 12px 18px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #bbf7d0;
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(167, 243, 208, .45), transparent 55%),
        linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #f8fafc 100%);
    overflow: hidden;
}

.admin-finance-hero:not(.admin-finance-hero--today) {
    border-color: var(--admin-purple-border, #ddd6fe);
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(221, 214, 254, .45), transparent 55%),
        linear-gradient(135deg, #f5f3ff 0%, #faf5ff 45%, #f8fafc 100%);
}

.admin-finance-hero-day {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-finance-hero-day-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #16a34a;
    font-size: 1.1rem;
}

.admin-finance-hero:not(.admin-finance-hero--today) .admin-finance-hero-day-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.admin-finance-hero-kicker {
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
    letter-spacing: .02em;
}

.admin-finance-hero:not(.admin-finance-hero--today) .admin-finance-hero-kicker {
    color: #6d28d9;
}

.admin-finance-hero-date {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--heading);
    line-height: 1.15;
    margin: 1px 0 2px;
}

.admin-finance-hero-schedule {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.admin-finance-hero-summary-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 4px;
}

.admin-finance-hero-summary-line {
    font-size: 13px;
    color: var(--slate-700, #334155);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
}

.admin-finance-hero-summary-line strong {
    color: var(--heading);
    font-weight: 800;
}

.admin-finance-hero-art {
    justify-self: end;
}

.admin-finance-hero-wallet {
    width: 96px;
    height: auto;
    display: block;
}

.admin-finance-kpi-grid--dash {
    gap: 10px;
}

.admin-finance-kpi-card--dash {
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 10px;
    border-radius: 12px;
}

.admin-finance-kpi-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.admin-finance-kpi-card--dash .admin-finance-kpi-icon {
    margin-top: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: .95rem;
}

.admin-finance-kpi-card--dash .admin-finance-kpi-title {
    margin-bottom: 0;
    font-size: 12px;
}

.admin-finance-kpi-card--dash .admin-finance-kpi-value {
    font-size: 1.15rem;
    margin: 2px 0 0;
}

.admin-finance-kpi-card--dash .admin-finance-kpi-meta {
    font-size: 10px;
}

.admin-finance-kpi-meta--amber { color: #ea580c; font-weight: 600; }
.admin-finance-kpi-meta--purple { color: #7c3aed; font-weight: 600; }

.admin-finance-dash-payout--v2 {
    padding: 12px 14px 10px;
    border-radius: 14px;
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
}

.admin-finance-dash-payout--v2 .admin-finance-dash-payout-head {
    margin-bottom: 10px;
}

.admin-finance-dash-payout--v2 .admin-finance-dash-payout-head h2 {
    font-size: .95rem;
    margin-bottom: 2px;
}

.admin-finance-dash-payout--v2 .admin-finance-dash-payout-head p {
    font-size: 11px;
}

.admin-finance-manage-payouts-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-finance-dash-stat-grid--v2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.admin-finance-dash-stat--card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--border);
}

.admin-finance-dash-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .85rem;
    margin-bottom: 2px;
}

.admin-finance-dash-stat-icon--purple { background: #ede9fe; color: #7c3aed; }
.admin-finance-dash-stat-icon--blue { background: #dbeafe; color: #2563eb; }
.admin-finance-dash-stat-icon--amber { background: #ffedd5; color: #ea580c; }
.admin-finance-dash-stat-icon--green { background: #dcfce7; color: #16a34a; }

.admin-finance-dash-stat--card .admin-finance-dash-stat-label {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 600;
}

.admin-finance-dash-stat--card .admin-finance-dash-stat-value {
    font-size: 1.05rem;
}

.admin-finance-dash-stat-hint {
    font-size: 10px;
    color: var(--text-muted);
}

.admin-finance-dash-stat--highlight.admin-finance-dash-stat--card {
    border-color: #86efac;
    background: #f0fdf4;
}

.admin-finance-timeline {
    list-style: none;
    margin: 0;
    padding: 8px 4px 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    position: relative;
}

.admin-finance-timeline::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #a78bfa, #86efac);
    z-index: 0;
}

.admin-finance-timeline-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.admin-finance-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #7c3aed;
    color: #fff;
    font-size: .8rem;
    box-shadow: 0 0 0 3px #fff;
}

.admin-finance-timeline-step.is-current .admin-finance-timeline-dot {
    background: #16a34a;
}

.admin-finance-timeline-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.admin-finance-timeline-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--heading);
}

.admin-finance-timeline-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.admin-finance-integrity-banner--dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 11px;
}

.admin-finance-integrity-banner-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.admin-finance-integrity-banner-main strong {
    display: block;
    font-size: 12px;
    color: var(--heading);
}

.admin-finance-integrity-banner-main span {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-finance-recon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.admin-finance-tab-panel--dash .admin-finance-panel--compact {
    margin-top: 0;
}

.admin-finance-tab-panel--dash .admin-finance-panel--compact .admin-finance-panel-head {
    padding: 10px 14px 6px;
}

.admin-finance-tab-panel--dash .admin-finance-table-wrap {
    max-height: 140px;
    overflow: auto;
}

@media (max-width: 1100px) {
    .admin-finance-hero {
        grid-template-columns: 1fr 1fr;
    }
    .admin-finance-hero-art {
        display: none;
    }
    .admin-finance-dash-stat-grid--v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-finance-hero {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .admin-finance-kpi-grid--dash {
        grid-template-columns: 1fr 1fr;
    }
    .admin-finance-dash-stat-grid--v2 {
        grid-template-columns: 1fr;
    }
    .admin-finance-timeline {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 4px;
    }
    .admin-finance-timeline::before {
        left: 17px;
        right: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, #a78bfa, #86efac);
    }
    .admin-finance-timeline-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
        padding-left: 4px;
    }
    .admin-finance-timeline-copy {
        align-items: flex-start;
        text-align: left;
        flex: 1;
    }
}

.admin-finance-payout-subtabs {
    margin-bottom: 12px;
}

.panel-wrapper.seller-panel .seller-finance-payout-tabs {
    margin-bottom: 16px;
}

.panel-wrapper.seller-panel .seller-finance-payout-tabs .admin-finance-period-tab:hover {
    color: var(--panel-accent, #0450d5);
    border-color: rgba(4, 80, 213, 0.35);
    background: rgba(4, 80, 213, 0.08);
}

.panel-wrapper.seller-panel .seller-finance-payout-tabs .admin-finance-period-tab.active {
    color: #fff;
    border-color: var(--panel-accent, #0450d5);
    background: var(--panel-accent, #0450d5);
}

.admin-finance-payout-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-finance-payout-date-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-finance-payout-date-tabs .admin-finance-period-tab {
    border: none;
    background: transparent;
    cursor: pointer;
}

.admin-finance-payout-custom-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-finance-payout-custom-range input[type="date"] {
    width: 9.5rem;
}

.admin-support-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-finance-settings-collapse {
    margin-bottom: 12px;
}

.admin-finance-panel-head--toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    overflow: visible;
}

.admin-finance-panel-head--toolbar .admin-finance-payout-date-filter {
    flex: 0 0 auto;
    position: relative;
    z-index: 50;
}

/* Trigger sits near the left; open calendar to the right so it isn't clipped */
.admin-finance-payout-date-filter .order-date-dropdown {
    left: 0;
    right: auto;
}

.admin-finance-panel-head--toolbar .admin-finance-payout-search-form {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 360px;
    margin-left: auto;
}

.admin-finance-payout-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.admin-finance-payout-search-wrap i {
    color: var(--text-muted);
    font-size: 14px;
}

.admin-finance-payout-search-wrap input {
    border: 0;
    box-shadow: none;
    padding-left: 0;
}

.admin-finance-mfg-id {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.admin-finance-payout-preview strong {
    color: var(--heading);
}

@media (max-width: 767.98px) {
    .admin-finance-panel-head--toolbar .admin-finance-payout-search-form {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}

/* ===== Admin Payout Settings page (mockup layout) ===== */
.admin-payout-settings-page {
    max-width: 1120px;
}

.admin-payout-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-payout-page-header-main {
    flex: 1 1 320px;
    min-width: 0;
}

.admin-payout-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.admin-payout-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.admin-payout-breadcrumb a:hover {
    color: var(--admin-purple-dark);
}

.admin-payout-page-title-row .admin-page-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-payout-page-subtitle {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 36rem;
}

.admin-payout-settings-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.admin-payout-settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.admin-payout-settings-tab i {
    font-size: 13px;
}

.admin-payout-settings-tab:hover {
    border-color: var(--admin-purple-border);
    color: var(--admin-purple-dark);
}

.admin-payout-settings-tab.active {
    border-color: var(--admin-purple);
    color: var(--admin-purple-dark);
    background: #fff;
    box-shadow: none;
}

.admin-payout-settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-payout-pending-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(124, 58, 237, 0.2);
    background: var(--admin-purple-soft);
    font-size: var(--text-sm);
    color: var(--slate-700);
}

.admin-payout-pending-banner i {
    color: var(--admin-purple-dark);
    margin-top: 2px;
}

.admin-payout-pending-banner strong {
    display: block;
    margin-bottom: 2px;
    color: var(--heading);
}

.admin-payout-active-rates-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
}

.admin-payout-active-rates-bar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-payout-active-rates-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.14);
    color: var(--admin-purple-dark);
    flex-shrink: 0;
}

.admin-payout-active-rates-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-payout-active-rates-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--admin-purple-dark);
}

.admin-payout-active-rates-values {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
}

.admin-payout-active-rates-sep {
    margin: 0 4px;
    color: var(--text-muted);
    font-weight: 400;
}

.admin-payout-settings-card {
    background: #fff;
    border: 1px solid var(--admin-purple-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 18px 20px;
}

.admin-payout-settings-card--history {
    padding: 18px 20px 20px;
}

.admin-payout-settings-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-payout-settings-card-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-payout-settings-card-title-row .admin-payout-settings-card-title {
    margin-bottom: 0;
}

.admin-payout-days-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.admin-payout-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-payout-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    min-width: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.admin-payout-day-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-payout-day-chip-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    color: transparent;
    font-size: 11px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.admin-payout-day-chip-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
}

.admin-payout-day-chip:has(input:checked) {
    border-color: var(--admin-purple);
    background: rgba(124, 58, 237, 0.06);
}

.admin-payout-day-chip:has(input:checked) .admin-payout-day-chip-box {
    border-color: var(--admin-purple);
    background: var(--admin-purple);
    color: #fff;
}

.admin-payout-day-chip:has(input:checked) .admin-payout-day-chip-label {
    color: var(--admin-purple-dark);
}

.admin-payout-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-payout-settings-field--wide {
    grid-column: 1 / -1;
}

.admin-payout-settings-field .form-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--slate-700);
}

.admin-payout-settings-field .form-control {
    min-height: 40px;
    border-radius: 8px;
    border-color: var(--border);
}

.admin-payout-settings-field .form-control:focus {
    border-color: var(--admin-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.admin-payout-schedule-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-payout-schedule-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 1 1 280px;
}

.admin-payout-schedule-fields .admin-payout-settings-field {
    flex: 1 1 180px;
    max-width: 220px;
}

.admin-payout-input-icon-wrap {
    position: relative;
}

.admin-payout-input-icon-wrap .form-control {
    padding-right: 36px;
}

.admin-payout-input-icon-wrap > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
}

.admin-payout-next-run {
    flex: 0 1 240px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: var(--admin-purple-soft);
}

.admin-payout-next-run-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--admin-purple-dark);
    margin-bottom: 4px;
}

.admin-payout-next-run strong {
    display: block;
    font-size: 1.05rem;
    color: var(--heading);
    margin-bottom: 2px;
}

.admin-payout-next-run-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-payout-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.07) 0%, rgba(124, 58, 237, 0.03) 100%);
}

.admin-payout-form-footer-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--slate-700);
}

.admin-payout-form-footer-note i {
    color: var(--admin-purple-dark);
}

.admin-payout-form-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.admin-payout-history-panel .admin-finance-rate-log-table th {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.admin-payout-history-panel .admin-finance-rate-log-table td {
    font-size: var(--text-sm);
    vertical-align: middle;
}

.admin-payout-history-empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .admin-payout-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-payout-page-header {
        flex-direction: column;
    }

    .admin-payout-settings-tabs {
        width: 100%;
    }

    .admin-payout-settings-tab {
        flex: 1 1 auto;
        justify-content: center;
    }

    .admin-payout-settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-payout-schedule-fields .admin-payout-settings-field {
        max-width: none;
    }

    .admin-payout-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-payout-form-footer-actions {
        margin-left: 0;
        width: 100%;
    }

    .admin-payout-form-footer-actions .btn {
        flex: 1 1 auto;
    }
}

/* ===== Admin Orders ===== */
.admin-orders-page {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 1280px;
}

.admin-orders-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

.admin-orders-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--slate-200, #e2e8f0);
    background: #fff;
    color: var(--slate-700, #334155);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-orders-tab:hover {
    border-color: #7c3aed;
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.06);
    text-decoration: none;
}

.panel-wrapper.admin-panel .admin-orders-tab.active,
.admin-orders-tab.active {
    background: #4c1d95;
    border-color: #4c1d95;
    color: #fff !important;
    text-decoration: none;
}

.admin-orders-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0.02rem 0.32rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
}

.panel-wrapper.admin-panel .admin-orders-tab.active .admin-orders-tab-count,
.admin-orders-tab.active .admin-orders-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.admin-orders-party {
    font-weight: 600;
    color: var(--heading);
}

.admin-orders-products--inline {
    max-width: 260px;
}

.admin-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.admin-orders-header-title {
    flex: 0 0 auto;
}

.admin-orders-header .admin-orders-tabs {
    order: 0;
}

.admin-orders-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.admin-orders-subtitle {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.admin-orders-header-actions .order-date-filter {
    margin: 0;
}

.admin-orders-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-orders-seller-filter {
    flex: 0 0 auto;
}

.admin-orders-seller-filter .form-select {
    min-width: 11.5rem;
    border-color: var(--admin-purple-border);
}

.admin-orders-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 480px;
    padding: 0 10px;
    border: 1px solid var(--admin-purple-border);
    border-radius: 8px;
    background: #fff;
}

.admin-orders-search-wrap i {
    color: var(--text-muted);
}

.admin-orders-search-wrap .form-control {
    border: 0;
    box-shadow: none;
    padding-left: 0;
}

.admin-orders-panel {
    padding: 0;
    overflow: hidden;
}

.admin-orders-table {
    margin: 0;
}

.admin-orders-table th {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--admin-purple-surface);
    border-bottom-color: var(--admin-purple-border);
    white-space: nowrap;
}

.admin-orders-row {
    cursor: pointer;
    transition: background-color .15s ease;
}

.admin-orders-row:hover {
    background: var(--admin-purple-soft);
}

.admin-orders-row:focus-visible {
    outline: 2px solid var(--admin-purple);
    outline-offset: -2px;
}

.admin-orders-order-number {
    display: block;
    font-weight: 600;
    color: var(--heading);
}

.admin-orders-channel {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.admin-orders-type-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.admin-orders-shopit-customer {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.18);
    white-space: nowrap;
}

.admin-orders-channel--b2b,
.admin-orders-channel--b2b-online {
    background: #eef2ff;
    color: #3730a3;
}

.admin-orders-channel--b2b-agent {
    background: #f5f3ff;
    color: #6d28d9;
}

.admin-orders-channel--b2b-outside,
.admin-orders-channel--pos-info {
    background: #fff7ed;
    color: #c2410c;
}

.admin-orders-channel--b2c-pos,
.admin-orders-channel--pos {
    background: #ecfdf5;
    color: #047857;
}

.admin-orders-channel--b2c-online {
    background: #ecfeff;
    color: #0e7490;
}

.admin-orders-channel--unknown {
    background: #f1f5f9;
    color: #475569;
}

.admin-orders-item-count {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

a.admin-finance-kpi-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

a.admin-finance-kpi-card--link:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.admin-finance-txn-filters {
    padding: 0 16px 14px;
}

.admin-finance-txn-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.admin-finance-txn-search {
    grid-column: span 2;
    min-width: 200px;
}

.admin-finance-txn-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 2px;
}

.admin-finance-txn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-finance-txn-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 60;
}

.admin-finance-panel--txn {
    padding-top: 0;
    overflow: visible;
}

.admin-finance-txn-toolbar {
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 30;
}

.admin-finance-txn-toolbar-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    /* 18px matches .admin-finance-table--panel first-column padding — aligns with DATE */
    padding: 12px 18px;
    background: var(--admin-purple-surface, #faf9ff);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-finance-txn-toolbar-filters {
    display: contents;
}

.admin-finance-txn-toolbar-field {
    min-width: 120px;
}

.admin-finance-txn-toolbar-date {
    min-width: 160px;
    position: relative;
    z-index: 50;
}

.admin-finance-txn-date-filter {
    position: relative;
    z-index: 50;
}

.admin-finance-txn-date-filter .order-date-trigger {
    width: 100%;
    min-width: 160px;
}

/* Period sits on the left — open calendar right into the content area (default is right:0) */
.admin-finance-txn-date-filter .order-date-dropdown {
    left: 0;
    right: auto;
}

.admin-finance-txn-toolbar-search {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
}

.admin-finance-txn-search-wrap {
    position: relative;
}

.admin-finance-txn-search-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    pointer-events: none;
}

.admin-finance-txn-search-wrap .form-control {
    padding-left: 30px;
}

.admin-finance-txn-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-bottom: 1px;
    padding-left: 8px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-finance-txn-clear {
    text-decoration: none;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.admin-finance-txn-clear:hover {
    color: var(--heading, #0f172a);
}

.admin-finance-txn-underline-tabs {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-finance-txn-underline-tab {
    position: relative;
    padding: 10px 2px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: none;
}

.admin-finance-txn-underline-tab:hover {
    color: var(--heading, #0f172a);
}

.admin-finance-txn-underline-tab.active {
    color: var(--admin-purple, #7c3aed);
}

.admin-finance-txn-underline-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--admin-purple, #7c3aed);
    border-radius: 2px 2px 0 0;
}

.admin-finance-txn-flow-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 28px;
    margin: 0;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-finance-txn-flow-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.admin-finance-txn-flow-stat--net {
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-finance-txn-flow-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.admin-finance-txn-flow-stat-value {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.admin-finance-txn-flow-stat-value.admin-finance-amount--in {
    color: #15803d;
}

.admin-finance-txn-flow-stat-value.admin-finance-amount--out {
    color: #b91c1c;
}

.admin-finance-table-wrap--txn {
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.admin-finance-table-wrap--txn.is-h-dragging {
    cursor: grabbing;
    user-select: none;
}

.admin-finance-table-wrap--txn::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.admin-finance-table-wrap--txn .admin-finance-table--statement {
    width: max-content;
    min-width: 100%;
}

.admin-finance-table--statement th {
    padding: 8px 12px;
}

.admin-finance-table--statement td {
    padding: 7px 12px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.admin-finance-table--statement th:first-child,
.admin-finance-table--statement td:first-child {
    padding-left: 18px;
}

.admin-finance-table--statement th:last-child,
.admin-finance-table--statement td:last-child {
    padding-right: 18px;
}

.admin-finance-table--statement th[data-txn-col="amount"],
.admin-finance-table--statement td[data-txn-col="amount"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 7.5rem;
}

.admin-finance-table td.admin-finance-amount--in,
.admin-finance-table--statement td.admin-finance-amount--in,
.admin-finance-table td.admin-finance-amount--in .admin-finance-amount-value {
    color: #15803d;
    font-weight: 700;
}

.admin-finance-table td.admin-finance-amount--out,
.admin-finance-table--statement td.admin-finance-amount--out,
.admin-finance-table td.admin-finance-amount--out .admin-finance-amount-value {
    color: #b91c1c;
    font-weight: 700;
}

.admin-finance-table td.admin-finance-amount--ar,
.admin-finance-table--statement td.admin-finance-amount--ar,
.admin-finance-table td.admin-finance-amount--ar .admin-finance-amount-value {
    color: #64748b;
    font-weight: 700;
}

.admin-finance-txn-row--ar {
    background: rgba(148, 163, 184, 0.06);
}

.admin-finance-txn-row--ar:hover {
    background: rgba(148, 163, 184, 0.1);
}

.admin-finance-txn-link {
    text-decoration: none;
}

.admin-finance-txn-link:hover {
    text-decoration: underline;
}

.admin-finance-txn-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    min-width: 6.5rem;
    line-height: 1.25;
}

.admin-finance-txn-type-main {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--heading, #0f172a);
    white-space: nowrap;
}

.admin-finance-txn-related {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
}

.admin-finance-txn-related:hover {
    color: #64748b;
    text-decoration: underline;
}

.admin-finance-table--statement td[data-txn-col="type"] {
    vertical-align: middle;
}

.admin-finance-txn-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-finance-txn-date i {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
}

.admin-finance-txn-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-finance-txn-pager-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.admin-finance-txn-pagesize-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-finance-txn-pagesize-form .form-select {
    width: auto;
    min-width: 4.5rem;
}

.admin-finance-kpi-grid--statement {
    margin-top: 4px;
}

.admin-finance-credit-due-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    position: relative;
    z-index: 60;
}

.admin-finance-credit-due-date-filter {
    position: relative;
    z-index: 70;
    overflow: visible;
}

.admin-finance-credit-due-date-filter .order-date-dropdown {
    left: auto;
    right: 0;
}

.admin-finance-credit-due-tabs {
    margin: 0 0 12px;
}

.admin-finance-cod-header {
    margin-bottom: 4px;
}

.admin-finance-cod-tabs-row {
    margin: 0 0 14px;
    --rp-control-height: 40px;
}

.admin-finance-tab-panel--cod-due .retailer-products-tab.is-active {
    color: var(--admin-purple, #7c3aed);
}

.admin-finance-tab-panel--cod-due .retailer-products-tab.is-active .retailer-purchase-manage-tab-count {
    background: rgba(124, 58, 237, 0.12);
    color: var(--admin-purple, #7c3aed);
}

.admin-finance-panel--credit-due {
    padding-top: 0;
}

.admin-finance-credit-due-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-finance-credit-due-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    min-width: 0;
}

.admin-finance-credit-due-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading, #0f172a);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.admin-finance-credit-due-meta {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.admin-finance-credit-due-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 420px;
    margin-left: auto;
}

.admin-finance-credit-due-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
}

.admin-finance-credit-due-search-field i {
    color: var(--text-muted, #94a3b8);
    font-size: 14px;
    flex: 0 0 auto;
}

.admin-finance-credit-due-search-field input {
    border: 0;
    box-shadow: none;
    padding-left: 0;
    min-width: 0;
}

.admin-finance-credit-due-search-field input:focus {
    box-shadow: none;
}

.admin-finance-credit-due-search .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-finance-credit-due-clear {
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--text-muted, #64748b);
    padding-left: 0;
}

@media (max-width: 640px) {
    .admin-finance-credit-due-search {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}

.admin-finance-txn-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-finance-cashflow-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.admin-finance-cashflow-toggle input {
    margin: 0;
}

.admin-finance-col-selector {
    position: relative;
    z-index: 61;
}

.admin-finance-col-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 70;
    min-width: 180px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-finance-col-menu[hidden] {
    display: none !important;
}

.admin-finance-col-menu-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    margin-bottom: 2px;
}

.admin-finance-col-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 0;
    cursor: pointer;
}

.admin-finance-table--statement [data-txn-col].is-col-hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .admin-finance-txn-search {
        grid-column: span 1;
    }

    .admin-finance-txn-toolbar-actions {
        margin-left: 0;
        border-left: 0;
        padding-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

.admin-orders-manufacturer {
    font-weight: 600;
    color: var(--heading);
    font-size: var(--text-sm);
}

.admin-orders-products {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-orders-date,
.admin-orders-total {
    font-size: var(--text-sm);
    white-space: nowrap;
}

.admin-orders-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 28px 16px !important;
}

.admin-orders-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--admin-purple-border);
    background: var(--admin-purple-surface);
}

.admin-orders-detail-header {
    margin-bottom: 16px;
}

.admin-orders-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: var(--text-sm);
    color: var(--admin-purple-dark);
    text-decoration: none;
}

.admin-orders-back:hover {
    color: var(--admin-purple);
}

.admin-orders-detail-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-orders-detail-total {
    text-align: right;
}

.admin-orders-detail-total-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-orders-detail-total strong {
    font-size: 1.25rem;
    color: var(--heading);
}

.admin-orders-detail-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--admin-purple-border);
}

.admin-orders-lines-table th {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--admin-purple-surface);
}

.admin-orders-line-thumb img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.admin-orders-line-title {
    font-weight: 600;
    color: var(--heading);
    font-size: var(--text-sm);
}

.admin-orders-line-path {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== Admin payout details drawer ===== */
.admin-finance-payout-row {
    cursor: pointer;
    transition: background-color .15s ease;
}

.admin-finance-payout-row:hover {
    background: var(--admin-purple-soft);
}

.admin-finance-payout-row:focus-visible {
    outline: 2px solid var(--admin-purple);
    outline-offset: -2px;
}

body.admin-payout-drawer-open {
    overflow: hidden;
}

.admin-payout-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.42);
}

.admin-payout-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--admin-purple-border);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.12);
}

.admin-payout-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.admin-payout-drawer-heading-wrap {
    position: relative;
    min-width: 0;
    flex: 1;
}

.admin-payout-drawer-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-payout-drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--heading, #0f172a);
}

.admin-payout-drawer-info {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.admin-payout-drawer-info.is-open {
    color: var(--primary-dark, #1d4ed8);
    background: rgba(37, 99, 235, 0.16);
}

.admin-payout-drawer-info-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 6;
    width: min(340px, calc(100vw - 72px));
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--panel-accent, #0450d5);
    color: #fff;
    box-shadow: 0 10px 28px rgba(4, 80, 213, 0.28);
}

.admin-payout-drawer-info-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
}

.admin-payout-drawer-info-pop p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
}

.admin-payout-drawer-info-pop p + p {
    margin-top: 8px;
    font-weight: 600;
}

.admin-payout-drawer-subtitle {
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--slate-500, #64748b);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-payout-drawer-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--slate-600);
}

.admin-payout-drawer-close:hover {
    background: var(--slate-100);
    color: var(--heading);
}

.admin-payout-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 24px;
    background: var(--admin-purple-bg);
}

.admin-payout-drawer-loading {
    padding: 24px 8px;
    text-align: center;
}

.admin-payout-drawer-summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--admin-purple-border);
}

.admin-payout-drawer-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.admin-payout-drawer-summary-amount {
    font-size: 1.35rem;
    color: var(--heading);
}

.admin-payout-drawer-summary-meta {
    text-align: right;
}

.admin-payout-settle {
    background: #fff;
    border: 1px solid var(--admin-purple-border);
    border-radius: 12px;
    overflow: hidden;
}

.admin-payout-settle-heading {
    margin: 0;
    padding: 14px 16px 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-payout-settle-item {
    border-top: 1px solid var(--border);
}

.admin-payout-settle-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.admin-payout-settle-toggle:hover {
    background: var(--admin-purple-soft);
}

.admin-payout-settle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
}

.admin-payout-settle-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform .15s ease;
}

.admin-payout-settle-item.is-open .admin-payout-settle-chevron {
    transform: rotate(180deg);
}

.admin-payout-settle-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
}

.admin-payout-settle-details {
    padding: 0 16px 12px 40px;
}

.admin-payout-settle-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed var(--border);
    font-size: 12px;
}

.admin-payout-settle-detail-row:first-child {
    border-top: 0;
}

.admin-payout-settle-detail-label {
    color: var(--slate-600);
}

.admin-payout-settle-detail-value {
    color: var(--heading);
    font-weight: 600;
    white-space: nowrap;
}

.admin-payout-settle-net {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--admin-purple-border);
    background: var(--admin-purple-soft);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--heading);
}

.admin-payout-amount--net {
    color: #16a34a !important;
}

.admin-payout-txn {
    margin-top: 16px;
}

.admin-payout-txn-heading {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-payout-txn-card {
    background: #fff;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
    border-radius: 12px;
    padding: 4px 16px;
}

.admin-payout-txn-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.admin-payout-txn-row:first-child {
    border-top: 0;
}

.admin-payout-txn-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding-top: 2px;
}

.admin-payout-txn-value-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.admin-payout-txn-value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--heading);
    word-break: break-all;
}

.admin-payout-txn-sub {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .admin-payout-drawer {
        width: 100vw;
    }
}

.admin-finance-action-cell {
    white-space: nowrap;
}

.admin-finance-action-btns {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-finance-action-btns .admin-finance-icon-btn {
    flex: 0 0 auto;
}

.admin-finance-check-col {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}

.admin-finance-check-col input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.admin-finance-auto-schedule-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(4, 80, 213, 0.06);
    border: 1px solid rgba(4, 80, 213, 0.12);
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.45;
}

.admin-finance-auto-schedule-note i {
    color: var(--panel-accent, #0450d5);
    margin-top: 2px;
    flex: 0 0 auto;
}

.admin-finance-auto-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
}

.admin-payout-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.admin-payout-orders-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    width: 32px;
    height: 32px;
    color: var(--admin-purple-dark);
    text-decoration: none;
    flex: 0 0 auto;
}

.admin-payout-orders-back:hover {
    color: var(--admin-purple);
}

.admin-payout-orders-heading {
    min-width: 0;
    text-align: left;
    margin-right: auto;
}

.admin-payout-orders-title {
    margin: 0;
    text-align: left;
}

.admin-payout-orders-page-subtitle {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: left;
}

.admin-payout-orders-page .admin-orders-back {
    margin-bottom: 0;
}

.admin-payout-orders-table-wrap--page {
    max-height: none;
    overflow: auto;
}

.admin-payout-orders-footer--page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.admin-payout-orders-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-payout-orders-eligible-summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
}

.admin-payout-orders-eligible-summary strong {
    color: #15803d;
}

.admin-payout-orders-eligible-sep {
    margin: 0 8px;
    color: var(--text-muted);
    font-weight: 500;
}

.admin-payout-orders-partial {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.admin-payout-orders-table-wrap {
    max-height: min(70vh, 640px);
    overflow: auto;
}

.admin-payout-orders-loading {
    padding: 28px 20px;
    text-align: center;
}

.admin-payout-orders-table {
    margin: 0;
    width: 100%;
}

.admin-payout-orders-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--slate-50);
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-600);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-payout-orders-table td {
    font-size: 13px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-payout-order-status--delivered {
    color: #15803d;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-payout-order-status {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--heading);
}

.admin-payout-order-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.admin-payout-order-badge--settled,
.admin-payout-order-badge--ready {
    color: #15803d;
    background: #dcfce7;
}

.admin-payout-order-badge--unsettled,
.admin-payout-order-badge--pending {
    color: #b45309;
    background: #fef3c7;
}

.admin-payout-order-badge--locked {
    color: #64748b;
    background: #f1f5f9;
}
/* ========== Account Settings (Meesho-inspired, ShopIt theme) ========== */
.sa-account-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content:has(#sellerAccountPage) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.account-settings-header-sticky,
.sa-account-chrome {
    position: relative;
    top: auto;
    flex-shrink: 0;
    z-index: 2;
    padding-bottom: 1rem;
    margin-bottom: 0;
    background: var(--bg);
}

.sa-account-chrome::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.12), transparent);
    pointer-events: none;
}

.sa-account-scroll-body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 2.5rem;
    -webkit-overflow-scrolling: touch;
}

.sa-account-top {
    margin-bottom: 1rem;
}

.sa-account-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: var(--heading-page);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.02em;
}

.sa-account-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-600);
    text-decoration: none;
}

.sa-account-back:hover {
    color: var(--accent-700);
    text-decoration: underline;
}

.sa-account-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: var(--heading);
    font-size: var(--text-base);
    line-height: 1.45;
}

.sa-account-alert i {
    color: var(--warning);
    font-size: 1.05rem;
    margin-top: 0.1rem;
}

.sa-account-alert strong {
    display: block;
    margin-bottom: 0.15rem;
}

.sa-account-alert span {
    color: var(--text-muted);
}

.sa-account-profile-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.02) 48%, #fff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.sa-account-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--accent-500), var(--accent-600));
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.28);
}

.sa-account-profile-meta {
    flex: 1 1 200px;
    min-width: 0;
}

.sa-account-profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}

.sa-account-profile-line {
    margin-top: 0.15rem;
    font-size: var(--text-sm);
    color: var(--text);
}

.sa-account-profile-line--muted {
    color: var(--text-muted);
}

.sa-account-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sa-account-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sa-account-chip.is-ok {
    color: #047857;
    background: var(--success-soft);
}

.sa-account-chip.is-warn {
    color: #b45309;
    background: var(--warning-soft);
}

.sa-account-chip.is-bad {
    color: #b91c1c;
    background: var(--danger-soft);
}

.sa-account-chip i {
    margin-right: 0.3rem;
    font-size: 0.85em;
}

.sa-pickup-tab-body {
    padding: 0 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.sa-pickup-tab-body .sa-account-edit-grid {
    width: 100%;
}

.sa-pickup-tab-body .form-control[readonly] {
    background: var(--slate-50);
    color: var(--heading);
    cursor: default;
}

.sa-pickup-tab-place {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.sa-pickup-tab-place[hidden] {
    display: none !important;
}

.sa-pickup-inline {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sa-pickup-inline[hidden] {
    display: none !important;
}

#sa-pickup-inline-map {
    display: block;
    box-sizing: border-box;
    height: 300px !important;
    width: 100% !important;
    max-width: 100%;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0.85rem;
}

body.sa-pickup-modal-open {
    overflow: hidden;
}

.sa-pickup-modal[hidden] {
    display: none !important;
}

.sa-pickup-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 0.75rem 0.75rem;
}

.sa-pickup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.sa-pickup-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(92vh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.25rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.1rem 1.1rem 0.85rem 0.85rem;
    box-shadow: var(--shadow-lg);
}

.sa-pickup-panel.is-map {
    padding: 0;
    gap: 0;
}

.sa-pickup-step {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.sa-pickup-step[hidden] {
    display: none !important;
}

.sa-pickup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sa-pickup-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-pickup-close {
    appearance: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--heading);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.sa-pickup-detect-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.sa-pickup-or {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.sa-pickup-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--slate-50);
}

.sa-pickup-search:focus-within {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
}

.sa-pickup-search .bi-search {
    color: var(--text-muted);
}

.sa-pickup-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--heading);
}

.sa-pickup-results {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sa-pickup-result {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--slate-100);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.sa-pickup-result:last-child {
    border-bottom: 0;
}

.sa-pickup-result:hover {
    background: var(--accent-soft);
}

.sa-pickup-result > .bi {
    color: var(--accent-600);
    margin-top: 0.15rem;
}

.sa-pickup-result strong {
    display: block;
    color: var(--heading);
    font-size: var(--text-base);
}

.sa-pickup-result small {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.sa-pickup-empty,
.sa-pickup-error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.sa-pickup-error {
    color: var(--danger);
}

.sa-pickup-map-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
}

.sa-pickup-map-head strong {
    font-size: 0.95rem;
    color: var(--heading);
}

.sa-pickup-back {
    appearance: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--heading);
    cursor: pointer;
}

.sa-pickup-map-wrap {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.sa-pickup-map,
.sa-pickup-map.gm-style,
#sa-pickup-map {
    display: block;
    box-sizing: border-box;
    height: 300px !important;
    width: 100% !important;
    max-width: 100%;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #eef4ff 0%, #e8edf5 100%);
    z-index: 1;
    font-family: inherit;
}

.sa-pickup-map img,
#sa-pickup-map img {
    max-width: none !important;
    max-height: none !important;
}

.pac-container {
    display: none !important;
}

.sa-pickup-locate-me {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--accent-700);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.95rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
    cursor: pointer;
}

.sa-pickup-confirm {
    padding: 1rem 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
}

.sa-pickup-kicker {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sa-pickup-place {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.sa-pickup-place > .bi {
    color: var(--accent-600);
    margin-top: 0.15rem;
}

.sa-pickup-place strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--heading);
}

.sa-pickup-place small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (min-width: 720px) {
    .sa-pickup-modal {
        align-items: center;
        padding: 1.5rem;
    }

    .sa-pickup-panel {
        border-radius: 1.1rem;
    }
}

.sa-account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem;
    margin-bottom: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.sa-account-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.9rem;
    border: 0;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sa-account-tab:hover {
    background: var(--accent-soft);
    color: var(--accent-700);
    text-decoration: none;
}

.sa-account-tab.is-active {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.28);
}

.sa-account-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sa-account-card[hidden] {
    display: none !important;
}

.sa-account-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sa-account-card--narrow {
    max-width: 520px;
}

.sa-account-card.is-editing {
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}

.sa-account-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.05rem 1.2rem 0.7rem;
}

.sa-account-card-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-account-card-desc {
    margin: 0.28rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-account-card-body {
    padding: 0 1.2rem 1.2rem;
}

.sa-account-card-foot {
    padding: 0.8rem 1.2rem 1.05rem;
    border-top: 1px solid var(--slate-100);
}

.sa-account-rows {
    display: flex;
    flex-direction: column;
}

.sa-account-row {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) auto;
    gap: 0.65rem 1rem;
    align-items: start;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--slate-100);
}

.sa-account-row:first-child {
    border-top: 0;
}

.sa-account-row--section {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
}

.sa-account-row-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.sa-account-row-value {
    font-size: var(--text-base);
    color: var(--heading);
    line-height: 1.45;
    word-break: break-word;
}

.sa-account-edit-btn,
.sa-account-edit-link,
.sa-account-link {
    appearance: none;
    border: 0;
    background: var(--accent-soft);
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-700);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}

.sa-account-edit-link,
.sa-account-link {
    background: transparent;
    padding: 0;
}

.sa-account-edit-btn:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent-700);
}

.sa-account-edit-link:hover,
.sa-account-link:hover {
    color: var(--accent-700);
    text-decoration: underline;
}

.sa-account-code {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-700);
    letter-spacing: 0.04em;
}

.sa-account-edit-panel {
    padding: 0.55rem 1.2rem 1.2rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.02));
}

/* ========== Login tab (Settings) ========== */
.sa-login-tab-card {
    overflow: visible;
}

.sa-login-tab-shell {
    padding: 1.75rem 2rem 2rem;
}

.sa-login-tab-head {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.sa-login-tab-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-login-tab-desc {
    margin: 0.35rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-login-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sa-login-status-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.sa-login-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-600);
    font-size: 1.1rem;
}

.sa-login-status-icon--pin {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.sa-login-status-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--heading);
}

.sa-login-status-value {
    margin: 0.2rem 0 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--heading);
}

.sa-login-status-value.is-muted {
    font-family: inherit;
    letter-spacing: normal;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.sa-login-status-hint {
    margin: 0.15rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-login-mask-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.sa-login-mask-row .sa-login-status-value {
    margin: 0;
}

.sa-login-view-eye {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sa-login-view-eye:hover {
    color: var(--accent-700);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: var(--accent-soft);
}

.sa-login-status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin-top: auto;
}

.sa-login-forgot-link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-600);
    text-decoration: none;
}

.sa-login-forgot-link:hover {
    color: var(--accent-700);
    text-decoration: underline;
}

.sa-login-form-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    font-size: var(--text-xs);
    color: #334155;
    line-height: 1.45;
}

.sa-login-form-note i {
    color: #2563eb;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.sa-login-form-note a {
    color: var(--accent-700);
    font-weight: 600;
    text-decoration: underline;
}

.sa-login-action-btn {
    align-self: flex-start;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-700);
    background: var(--accent-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sa-login-action-btn:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent-700);
}

.sa-login-action-btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
}

.sa-login-action-btn--ghost:hover {
    background: #f8fafc;
    color: var(--heading);
    border-color: #cbd5e1;
}

.sa-login-contact-block {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.sa-login-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #eef2f7;
}

.sa-login-contact-row:first-child {
    border-top: 0;
}

.sa-login-contact-label {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.sa-login-contact-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    text-align: right;
    word-break: break-word;
}

.sa-login-edit-panel {
    padding-top: 0.25rem;
}

.sa-login-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sa-login-form-card {
    padding: 1.35rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.sa-login-form-card.is-focused {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.sa-login-form-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.sa-login-form-card-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-600);
    font-size: 1.15rem;
}

.sa-login-form-card-icon--pin {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.sa-login-form-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-login-form-card-desc {
    margin: 0.2rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.sa-login-form {
    max-width: 480px;
}

.sa-login-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sa-login-field {
    min-width: 0;
}

.sa-login-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.sa-pwd-input-group {
    max-width: 480px;
}

.sa-pwd-input-group .form-control {
    min-height: 44px;
    border-color: #e2e8f0;
    border-radius: 8px 0 0 8px;
    font-size: var(--text-base);
}

.sa-pwd-input-group .form-control:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px var(--accent-soft);
    z-index: 2;
}

.sa-pwd-input-group .btn-toggle-pwd {
    min-height: 44px;
    min-width: 44px;
    border-color: #e2e8f0;
    border-radius: 0 8px 8px 0;
    color: #64748b;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sa-pwd-input-group .btn-toggle-pwd:hover {
    color: var(--accent-700);
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Hide browser-native password reveal — keep single .btn-toggle-pwd eye */
.sa-pwd-input-group input[type="password"]::-ms-reveal,
.sa-pwd-input-group input[type="password"]::-ms-clear {
    display: none;
}

.sa-pwd-input-group input[type="password"]::-webkit-credentials-auto-fill-button,
.sa-pwd-input-group input[type="password"]::-webkit-textfield-decoration-container {
    visibility: hidden;
    pointer-events: none;
}

.sa-login-form-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.sa-login-submit {
    min-height: 44px;
    padding-inline: 1.35rem;
    font-weight: 600;
    border-radius: 8px;
}

.sa-login-remove-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.sa-login-remove-card .form-check-input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.sa-login-remove-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sa-login-remove-copy strong {
    font-size: var(--text-sm);
    color: var(--heading);
}

.sa-login-remove-copy small {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

.sa-login-edit-footer {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

@media (max-width: 768px) {
    .sa-login-tab-shell {
        padding: 1.25rem 1rem 1.5rem;
    }

    .sa-login-status-grid {
        grid-template-columns: 1fr;
    }

    .sa-login-form,
    .sa-pwd-input-group {
        max-width: 100%;
    }

    .sa-login-contact-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .sa-login-contact-value {
        text-align: left;
    }
}

/* In-app password reset modal */
.sa-pwd-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sa-pwd-reset-modal[hidden] {
    display: none !important;
}

body.sa-pwd-reset-open {
    overflow: hidden;
}

.sa-pwd-reset-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.sa-pwd-reset-panel {
    position: relative;
    width: min(100%, 440px);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
    padding: 1.35rem 1.5rem 1.5rem;
}

.sa-pwd-reset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sa-pwd-reset-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-pwd-reset-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.sa-pwd-reset-lead {
    margin: 0 0 1rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-pwd-reset-contact-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #f8fafc;
}

.sa-pwd-reset-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid #eef2f7;
}

.sa-pwd-reset-contact-row:first-child {
    border-top: 0;
}

.sa-pwd-reset-contact-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.sa-pwd-reset-contact-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
}

.sa-pwd-reset-otp-input {
    min-height: 44px;
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
}

.sa-pwd-reset-resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sa-pwd-reset-link {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-600);
    cursor: pointer;
}

.sa-pwd-reset-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.sa-pwd-reset-timer {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.sa-pwd-reset-error {
    margin: 0 0 0.85rem;
    font-size: var(--text-sm);
    color: #b91c1c;
}

.sa-pwd-reset-error[hidden] {
    display: none !important;
}

.sa-pwd-reset-primary {
    min-height: 44px;
    font-weight: 600;
}

.sa-pwd-reset-strength {
    margin: -0.35rem 0 0.85rem;
}

.sa-pwd-reset-strength-bar {
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.sa-pwd-reset-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.2s ease, background 0.2s ease;
}

.sa-pwd-reset-strength-bar span.is-weak { background: #ef4444; }
.sa-pwd-reset-strength-bar span.is-fair { background: #f59e0b; }
.sa-pwd-reset-strength-bar span.is-strong { background: #22c55e; }

.sa-pwd-reset-strength-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.sa-pwd-reset-step--success {
    text-align: center;
}

.sa-pwd-reset-success-icon {
    font-size: 2.5rem;
    color: #22c55e;
    margin-bottom: 0.5rem;
}

.sa-pwd-reset-success-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.sa-pwd-reset-toast {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-bottom: 1rem;
}

.sa-account-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.sa-account-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.sa-account-field .form-control,
.sa-account-field .form-select,
.sa-account-field .input-group-text {
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
}

.sa-account-field .form-control:focus,
.sa-account-field .form-select:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.sa-account-field--full {
    grid-column: 1 / -1;
}

.sa-store-policy-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.sa-store-policy-wrap[hidden] {
    display: none !important;
}

.sa-store-policy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.05rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.sa-store-policy-wrap.is-editing .sa-store-policy-head {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}

.sa-store-policy-stack,
.sa-store-policy-edit-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.sa-store-subcard {
    overflow: hidden;
}

.sa-store-subcard-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.05rem 1.2rem 0.85rem;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.015) 42%, #fff 100%);
    border-bottom: 1px solid var(--slate-100);
}

.sa-store-subcard-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--accent-500), var(--accent-600));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.28);
}

.sa-store-subcard-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.01em;
}

.sa-store-subcard-desc {
    margin: 0.2rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-store-subcard-body {
    padding: 1.1rem 1.2rem 1.2rem;
}

.sa-store-subcard .sa-account-row:first-child {
    border-top: 0;
}

.sa-store-muted {
    margin-top: 0.28rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.sa-store-terms-preview {
    white-space: pre-wrap;
}

.sa-store-terms-input {
    min-height: 128px;
    resize: vertical;
}

.sa-store-field-hint {
    margin-top: 0.35rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.sa-store-coord-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: var(--slate-50);
    border: 1px solid var(--border);
    color: var(--heading);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    word-break: break-all;
}

.sa-store-policy-edit {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.sa-store-policy-edit[hidden] {
    display: none !important;
}

.sa-store-policy-wrap:not(.is-editing) .sa-store-policy-edit {
    display: none !important;
}

.sa-store-policy-wrap.is-editing .sa-store-policy-stack,
.sa-store-policy-wrap.is-editing [data-seller-view="storepolicy"] {
    display: none !important;
}

.sa-shop-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--accent-500, #0050ff);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28);
}

.sa-shop-map-pin i {
    transform: rotate(45deg);
    font-size: 1rem;
    line-height: 1;
}

.sa-store-policy-edit-footer {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.15rem;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
}

.sa-account-subsection-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.sa-account-field-hint--spaced {
    margin-bottom: 0.85rem;
}

.sa-account-edit-actions--tail {
    margin-top: 0.5rem;
}

.sa-account-field-hint {
    margin-top: 0.3rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.admin-b2b-banner-preview {
    width: min(100%, 560px);
    aspect-ratio: 16 / 5;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--slate-100);
}

.admin-b2b-banner-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sa-account-check {
    margin: 0.25rem 0 0.75rem;
    font-size: var(--text-base);
}

.sa-account-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.sa-account-btn-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.15rem;
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.28);
}

.sa-account-btn-primary:hover {
    filter: brightness(1.03);
}

.sa-account-btn-ghost {
    appearance: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 1rem;
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sa-account-btn-ghost:hover {
    background: var(--slate-50);
    color: var(--heading);
    text-decoration: none;
}

.sa-account-validation {
    margin-bottom: 0.85rem;
    font-size: var(--text-sm);
}

@media (max-width: 720px) {
    .sa-account-tabs {
        border-radius: var(--radius);
    }

    .sa-account-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .sa-account-edit-grid {
        grid-template-columns: 1fr;
    }

    .sa-account-edit-btn,
    .sa-account-edit-link {
        justify-self: start;
    }

    .sa-store-policy-head,
    .sa-store-subcard-head {
        flex-direction: column;
    }

    .sa-store-policy-edit-footer {
        position: static;
        justify-content: stretch;
    }

    .sa-store-policy-edit-footer .sa-account-btn-ghost,
    .sa-store-policy-edit-footer .sa-account-btn-primary {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}
/* ========== Admin Products list ========== */
.admin-products-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 180px;
}

.admin-products-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--slate-50);
    flex-shrink: 0;
}

.admin-products-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.admin-products-badge--ok {
    color: #047857;
    background: var(--success-soft);
}

.admin-products-badge--warn {
    color: #b45309;
    background: var(--warning-soft);
}

.admin-products-badge--bad {
    color: #b91c1c;
    background: var(--danger-soft);
}

.admin-products-badge--muted {
    color: var(--slate-600);
    background: var(--slate-100);
}

.admin-products-row {
    cursor: pointer;
}

.admin-products-row:hover {
    background: var(--admin-purple-surface, #faf9ff);
}

.admin-products-row.is-open {
    background: var(--admin-purple-bg-alt, #ede9fe);
}

.admin-products-expand-cell {
    width: 1.75rem;
    color: var(--text-muted);
}

.admin-products-expand-icon {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 0.85rem;
}

.admin-products-row.is-open .admin-products-expand-icon {
    transform: rotate(90deg);
}

.admin-products-detail-row > td {
    padding: 0 !important;
    background: #f8fafc;
    border-top: 0 !important;
}

.admin-products-variants-wrap {
    padding: 0.75rem 1rem 1rem 2.5rem;
}

.admin-products-variants-table {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.admin-products-variants-table th {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 700;
    background: var(--slate-50, #f8fafc);
}

.admin-products-variants-loading,
.admin-products-variants-empty {
    padding: 0.85rem 1rem 1rem 2.5rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ========== Admin Catalog QC Review ========== */
.admin-catalog-qc-review {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* Beat .admin-orders-header / inline title rules — stack back → title → name → meta */
.panel-wrapper.admin-panel .admin-catalog-qc-header,
.admin-catalog-qc-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.panel-wrapper.admin-panel .admin-catalog-qc-back,
.admin-catalog-qc-back {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0.75rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-600);
    text-decoration: none;
    line-height: 1.3;
}

.admin-catalog-qc-back:hover {
    color: var(--accent-700);
    text-decoration: underline;
}

.admin-catalog-qc-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
}

.panel-wrapper.admin-panel .admin-catalog-qc-page-title,
.admin-catalog-qc-page-title {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    margin: 0 !important;
    width: 100%;
}

.admin-catalog-qc-catalog-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.35;
    max-width: 100%;
}

.admin-catalog-qc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.3rem;
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.45;
    max-width: 100%;
}

.admin-catalog-qc-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.admin-catalog-qc-meta > span:not(:last-child)::after {
    content: "·";
    color: var(--slate-400);
    font-weight: 600;
    line-height: 1;
}

.admin-catalog-qc-meta-path {
    flex: 1 1 100%;
    margin-top: 0.1rem;
    color: var(--slate-500);
}

.admin-catalog-qc-meta-path::after {
    content: none !important;
}

.admin-catalog-qc-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    grid-template-areas: "side main";
    gap: 1.15rem;
    align-items: start;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.admin-catalog-qc-side,
.admin-catalog-qc-main {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.admin-catalog-qc-side {
    grid-area: side;
}

.admin-catalog-qc-side-inner {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 1rem;
}

.admin-catalog-qc-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Same top edge / card chrome as Seller so both columns line up */
.admin-catalog-qc-feed-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.admin-catalog-qc-feed-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}

.admin-catalog-qc-feed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-700);
    font-size: var(--text-xs);
    font-weight: 700;
}

.admin-catalog-qc-product-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.admin-catalog-qc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}

.admin-catalog-qc-product-card {
    padding-bottom: 1.15rem;
}

.admin-catalog-qc-card--notes {
    border-color: rgba(239, 68, 68, 0.28);
    background: #fff7f7;
}

.admin-catalog-qc-card--block {
    border-color: rgba(245, 158, 11, 0.35);
    background: #fffbeb;
}

.admin-catalog-qc-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-catalog-qc-side .admin-catalog-qc-card-title {
    margin-bottom: 0.65rem;
}

.admin-catalog-qc-decision-hint {
    margin: -0.25rem 0 0.75rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.admin-catalog-qc-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-catalog-qc-dl > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0.4rem;
    font-size: var(--text-sm);
}

.admin-catalog-qc-dl dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
}

.admin-catalog-qc-dl dd {
    margin: 0;
    color: var(--heading);
    word-break: break-word;
}

.admin-catalog-qc-notes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    color: #991b1b;
    line-height: 1.45;
}

.admin-catalog-qc-action-form .form-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.admin-catalog-qc-product-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.admin-catalog-qc-product-index {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--slate-100);
    color: var(--slate-700);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.admin-catalog-qc-product-meta {
    margin: 0.2rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.admin-catalog-qc-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.85rem;
}

.admin-catalog-qc-image {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--slate-50);
    min-width: 0;
}

.admin-catalog-qc-image-frame {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--slate-100);
}

.admin-catalog-qc-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.admin-catalog-qc-image figcaption {
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    background: #fff;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .admin-catalog-qc-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "main";
    }

    .admin-catalog-qc-side-inner {
        position: static;
    }

    .admin-catalog-qc-header {
        margin-bottom: 0.25rem;
    }

    .admin-catalog-qc-feed-header {
        padding: 0.85rem 1rem;
    }
}

/* ===== Admin Finance Settlements (redesign) ===== */
.admin-finance-settlements-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-settlements-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-settlements-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-settlements-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 42rem;
}

.admin-settlements-settings-btn {
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-finance-kpi-grid--settlements {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0;
}

.admin-settlements-kpi {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.05rem 0.9rem;
    box-shadow: var(--shadow-sm);
}

.admin-settlements-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}

.admin-settlements-kpi-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.admin-settlements-kpi--purple .admin-settlements-kpi-icon { background: #ede9fe; color: #7c3aed; }
.admin-settlements-kpi--green .admin-settlements-kpi-icon { background: #dcfce7; color: #16a34a; }
.admin-settlements-kpi--amber .admin-settlements-kpi-icon { background: #ffedd5; color: #ea580c; }
.admin-settlements-kpi--blue .admin-settlements-kpi-icon { background: #dbeafe; color: #2563eb; }

.admin-settlements-kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.25;
}

.admin-settlements-kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.admin-settlements-kpi-value--green { color: #16a34a; }
.admin-settlements-kpi-value--amber { color: #ea580c; }
.admin-settlements-kpi-value--blue { color: #2563eb; }

.admin-settlements-kpi-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.admin-settlements-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}

.admin-settlements-filters {
    overflow: visible;
}

.admin-settlements-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1fr) minmax(160px, 0.7fr) minmax(148px, 0.55fr);
    gap: 1rem;
    align-items: end;
}

.admin-settlements-filter-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}

.admin-settlements-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.admin-settlements-search-wrap i {
    color: var(--text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.admin-settlements-search-wrap .form-control {
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 40px;
    background: transparent;
}

.admin-settlements-search-wrap .form-control:focus {
    box-shadow: none;
}

.admin-finance-settlements-page .form-control,
.admin-finance-settlements-page .form-select,
.admin-finance-settlements-page .admin-settlements-export-btn {
    min-height: 42px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.admin-finance-settlements-page .admin-finance-payout-date-filter,
.admin-finance-settlements-page .admin-finance-payout-date-filter .order-date-filter,
.admin-finance-settlements-page .admin-finance-payout-date-filter .order-date-filter-form {
    width: 100%;
}

.admin-finance-settlements-page .admin-finance-payout-date-filter .order-date-trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
}

.admin-finance-settlements-page .admin-finance-payout-date-filter .order-date-trigger-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-settlements-export-btn {
    width: 100%;
    font-weight: 600;
    white-space: nowrap;
}

.admin-settlements-workbench {
    padding: 0;
    overflow: hidden;
}

.admin-settlements-workbench-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid var(--border);
}

.admin-settlements-workbench-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-settlements-workbench-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: var(--accent-soft, var(--primary-light));
    color: var(--accent-500, var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.admin-settlements-workbench-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-settlements-workbench-desc {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.admin-settlements-refresh-btn {
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-settlements-tabs {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    position: relative;
    z-index: 2;
    background: #fff;
}

.admin-settlements-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.85rem 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.admin-settlements-tab:hover {
    color: var(--heading);
}

.admin-settlements-tab.active {
    color: var(--admin-purple, #7c3aed);
    border-bottom-color: var(--admin-purple, #7c3aed);
}

.admin-settlements-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.admin-settlements-tab.active .admin-settlements-tab-badge {
    background: #ede9fe;
    color: var(--admin-purple, #7c3aed);
}

.admin-settlements-tab-content {
    padding: 0.85rem 1.1rem 1rem;
}

.admin-settlements-tab-content > .tab-pane:not(.show) {
    display: none;
}

.admin-settlements-tab-content > .tab-pane.show {
    display: block;
}

.admin-settlements-pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.admin-settlements-pane-kicker {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.admin-settlements-pane-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-settlements-pane-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-settlements-table-wrap {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: auto;
}

.admin-settlements-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.admin-settlements-table thead th {
    background: #f8fafc;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-settlements-table tbody td {
    padding: 0.8rem 0.85rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    color: var(--heading);
}

.admin-settlements-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-settlements-table tbody tr:hover td {
    background: #fafbff;
}

.admin-settlements-col-expand {
    width: 2.5rem;
}

.admin-settlements-table-placeholder,
.admin-settlements-table-state-cell {
    padding: 0 !important;
    border-bottom: 0 !important;
}

.admin-settlements-table-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    padding: 2rem 1.5rem;
}

.admin-settlements-table-state-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: #ede9fe;
    color: var(--admin-purple, #7c3aed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.85rem;
}

.admin-settlements-table-state-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.25rem;
}

.admin-settlements-table-state-message {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 24rem;
}

.admin-settlements-table-state--loading .admin-settlements-table-state-icon {
    background: #f3f4f6;
    color: var(--text-muted);
}

.admin-settlements-expand {
    padding: 0;
    color: var(--text-muted);
    line-height: 1;
}

.admin-settlements-detail td {
    background: #f8fafc;
    padding: 0.75rem 1rem !important;
}

.admin-settlements-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0 0;
    margin-top: 0.65rem;
    min-height: 0;
    flex-wrap: nowrap;
}

.admin-settlements-footer-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-settlements-footer-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.admin-settlements-rows-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.admin-settlements-rows-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-settlements-page-size {
    width: auto;
    min-width: 4.25rem;
    max-width: 5rem;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0 1.75rem 0 0.5rem;
    border: 1px solid var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--heading, #0f172a);
    background-color: #fff;
    flex-shrink: 0;
}
.admin-settlements-page-size:focus {
    border-color: var(--admin-purple, #7c3aed);
    box-shadow: 0 0 0 0.15rem rgba(var(--admin-purple-rgb, 124, 58, 237), 0.14);
    outline: none;
}
/* Compact rows dropdown — keep purple theme, leave room for chevron */
.admin-settlements-rows-wrap .admin-custom-select,
.admin-settlements-rows-wrap .admin-custom-select--compact {
    display: inline-flex;
    width: auto;
    min-width: 4.25rem;
    max-width: 5rem;
    flex: 0 0 auto;
    vertical-align: middle;
}
.admin-settlements-rows-wrap .admin-custom-select--sm .admin-custom-select-trigger,
.admin-settlements-rows-wrap .admin-custom-select--compact .admin-custom-select-trigger {
    box-sizing: border-box;
    min-width: 4.25rem;
    width: 4.5rem;
    max-width: 5rem;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0 0.35rem 0 0.55rem;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-color: var(--admin-purple-border, rgba(124, 58, 237, 0.14));
    background: #fff;
}
.admin-settlements-rows-wrap .admin-custom-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-settlements-rows-wrap .admin-custom-select-chevron {
    flex: 0 0 auto;
    margin-left: 0.15rem;
    font-size: 0.65rem;
    color: var(--admin-purple-dark, #6d28d9);
}
.admin-custom-select-menu--compact {
    min-width: 4.25rem !important;
}
.admin-custom-select-menu--compact .admin-custom-select-option {
    justify-content: center;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-settlements-pagination {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.admin-settlements-page-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--heading);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.admin-settlements-page-btn:hover:not(:disabled):not(.active) {
    background: #f9fafb;
}

.admin-settlements-page-btn.active {
    background: var(--accent-500, var(--primary));
    border-color: var(--accent-500, var(--primary));
    color: #fff;
}

.admin-settlements-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-settlements-page-ellipsis {
    padding: 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 1199.98px) {
    .admin-finance-kpi-grid--settlements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-settlements-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-finance-settlements-page .admin-finance-payout-date-filter .order-date-dropdown {
    left: 0;
    right: auto;
    z-index: 50;
}

.admin-finance-page:has(#finance-tab-form16a) {
    max-width: none;
    width: 100%;
}

.admin-form16a-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.admin-form16a-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-form16a-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-form16a-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.admin-form16a-upload-card {
    padding: 0.85rem 1rem 0.8rem;
    transition: box-shadow 0.2s ease;
}

.admin-form16a-upload-card--highlight {
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

.admin-form16a-upload-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.admin-form16a-upload-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--accent-soft, var(--primary-light));
    color: var(--accent-500, var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.admin-form16a-upload-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-form16a-upload-form {
    margin-bottom: 0.65rem;
}

.admin-form16a-upload-grid {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(180px, 1.4fr) auto;
    gap: 0.65rem;
    align-items: end;
}

.admin-form16a-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}

.admin-form16a-upload-form .form-select {
    min-height: 34px;
    font-size: 0.8125rem;
}

.admin-form16a-file-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 34px;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.admin-form16a-file-btn {
    margin: 0;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--heading);
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-form16a-file-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-form16a-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-form16a-upload-btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    height: 34px;
    min-height: 34px;
    padding-inline: 0.85rem;
    background: var(--accent-500, var(--primary));
    border-color: var(--accent-500, var(--primary));
}

.admin-form16a-upload-btn:hover {
    background: var(--accent-600, var(--primary-dark));
    border-color: var(--accent-600, var(--primary-dark));
}

.admin-form16a-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--accent-soft, var(--primary-light));
    color: var(--heading);
    font-size: 0.75rem;
    line-height: 1.4;
}

.admin-form16a-tip i {
    color: var(--accent-500, var(--primary));
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.admin-form16a-tip code {
    font-size: 0.8em;
    color: var(--accent-600, var(--primary-dark));
}

.admin-form16a-upload-status {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-form16a-matrix-card {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.admin-form16a-matrix-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.admin-form16a-matrix-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--heading);
}

.admin-form16a-matrix-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.admin-form16a-action-btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.25rem 0.65rem;
}

.admin-form16a-matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.admin-form16a-quarter-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-form16a-quarter-tab {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--heading);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-form16a-quarter-tab:hover {
    background: #f9fafb;
}

.admin-form16a-quarter-tab.active {
    background: var(--accent-500, var(--primary));
    border-color: var(--accent-500, var(--primary));
    color: #fff;
}

.admin-form16a-matrix-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
    min-width: 200px;
    max-width: 360px;
}

.admin-form16a-search-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: none;
}

.admin-form16a-search-wrap i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.admin-form16a-search-wrap .form-control {
    padding-left: 2rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    height: 34px;
    min-height: 34px;
}

.admin-form16a-table-wrap {
    overflow: auto;
    flex: 1;
    min-height: 220px;
}

.admin-form16a-table {
    width: 100%;
    min-width: 960px;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.admin-form16a-table thead th {
    background: #f9fafb;
    color: var(--heading);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}

.admin-form16a-table thead .admin-form16a-subhead th {
    background: #fff;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.6875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.45rem;
    text-align: center;
}

.admin-form16a-table thead .admin-form16a-subhead th:first-child,
.admin-form16a-table thead .admin-form16a-tds-group {
    text-align: left;
}

.admin-form16a-tds-group {
    text-align: center !important;
}

.admin-form16a-sortable {
    cursor: pointer;
    user-select: none;
}

.admin-form16a-sortable i.bi-chevron-expand {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.15rem;
}

.admin-form16a-info-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.15rem;
}

.admin-form16a-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--heading);
    font-size: 0.8125rem;
}

.admin-form16a-table tbody tr:hover {
    background: #fafafa;
}

.admin-form16a-seller-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-form16a-seller-name {
    font-weight: 600;
    font-size: 0.8125rem;
}

.admin-form16a-seller-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-form16a-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-form16a-badge--active {
    background: #dcfce7;
    color: #16a34a;
}

.admin-form16a-badge--pending {
    background: #ffedd5;
    color: #ea580c;
}

.admin-form16a-total-cell {
    font-weight: 700;
}

.admin-form16a-actions-cell {
    white-space: nowrap;
    text-align: center;
}

.admin-form16a-view-btn,
.admin-form16a-more-btn {
    color: var(--text-muted);
    padding: 0.15rem 0.35rem;
}

.admin-form16a-view-btn:hover,
.admin-form16a-more-btn:hover {
    color: var(--accent-500, var(--primary));
}

.admin-form16a-table-state {
    text-align: center;
    padding: 1rem 0.75rem !important;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.admin-form16a-table-state--error {
    color: #dc2626;
}

.admin-form16a-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 1rem;
    min-height: 0;
    border-top: 1px solid var(--border);
    flex-wrap: nowrap;
}

.admin-form16a-footer-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-form16a-footer-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.admin-form16a-rows-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.admin-form16a-rows-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-form16a-page-size {
    width: auto;
    min-width: 4rem;
    max-width: 4.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    height: 30px;
    min-height: 30px;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.admin-form16a-pagination {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.admin-form16a-page-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--heading);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.admin-form16a-page-btn:hover:not(:disabled):not(.active) {
    background: #f9fafb;
}

.admin-form16a-page-btn.active {
    background: var(--accent-500, var(--primary));
    border-color: var(--accent-500, var(--primary));
    color: #fff;
}

.admin-form16a-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-form16a-page-ellipsis {
    padding: 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 991.98px) {
    .admin-form16a-upload-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-form16a-field--submit {
        grid-column: 1 / -1;
    }

    .admin-form16a-upload-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .admin-form16a-upload-grid {
        grid-template-columns: 1fr;
    }

    .admin-form16a-matrix-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-form16a-matrix-search-row {
        max-width: none;
        justify-content: stretch;
    }

    .admin-form16a-search-wrap {
        max-width: none;
    }

    .admin-form16a-footer,
    .admin-settlements-footer {
        flex-wrap: wrap;
    }

    .admin-form16a-footer-controls,
    .admin-settlements-footer-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .admin-finance-kpi-grid--settlements,
    .admin-settlements-filter-grid {
        grid-template-columns: 1fr;
    }

    .admin-settlements-tabs {
        gap: 0.85rem;
    }
}

/* Seller authorized signature uploader (Settings → Signature + signup) */
.seller-sig-uploader { margin-top: 0; }
.seller-sig-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.seller-sig-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    align-items: stretch;
}
.seller-sig-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.seller-sig-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0; }
.seller-sig-tab {
    border: 1px solid var(--border, #d8dee8);
    background: #fff;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}
.seller-sig-tab.is-active {
    background: var(--primary, #0450d5);
    border-color: var(--primary, #0450d5);
    color: #fff;
}
.seller-sig-status-chip { flex-shrink: 0; }
.seller-sig-status-chip.is-ok { color: #15803d; background: #dcfce7; }
.seller-sig-status-chip.is-warn { color: #b45309; background: #ffedd5; }
.seller-sig-hint { margin: 0 0 0.45rem; font-size: 0.75rem; color: var(--text-muted, #64748b); }
.seller-sig-canvas-wrap {
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}
.seller-sig-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 140px;
    touch-action: none;
    cursor: crosshair;
}
.seller-sig-uploader:not(.seller-sig-uploader--compact) .seller-sig-canvas-wrap canvas { height: 180px; }
.seller-sig-actions,
.seller-sig-upload-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.seller-sig-upload-row .form-control { flex: 1; min-width: 0; }
.seller-sig-type-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.5rem;
}
.seller-sig-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.2rem;
}
.seller-sig-typed-preview {
    margin-top: 0.5rem;
    min-height: 56px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.65rem;
    font-size: 1.5rem;
    color: #0b1f66;
    background: #fff;
}
.seller-sig-status {
    min-height: 1.1rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #64748b;
}
.seller-sig-status.is-error { color: #dc2626; }
.seller-sig-status.is-ok { color: #15803d; }
.seller-sig-preview-card {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
}
.seller-sig-preview-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 0.55rem;
    text-align: center;
}
.seller-sig-preview-block { width: 100%; text-align: center; }
.seller-sig-preview-for { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.25rem; }
.seller-sig-preview-slot { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.seller-sig-preview-img { max-width: 160px; max-height: 48px; object-fit: contain; }
.seller-sig-preview-placeholder {
    width: 150px;
    height: 44px;
    border: 1px dashed #9aa4b2;
    color: #6b7280;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seller-sig-preview-auth { margin-top: 0.2rem; font-size: 0.7rem; }
.seller-sig-complete-form { margin-top: 0.75rem; }
.sa-account-card--signature { padding: 1rem 1.15rem 1.1rem; }
.sa-account-card-head--compact { margin-bottom: 0.65rem; }
.sa-account-card-head--compact .sa-account-card-desc { margin-top: 0.15rem; }
@media (max-width: 767.98px) {
    .seller-sig-layout { grid-template-columns: 1fr; }
    .seller-sig-type-grid { grid-template-columns: 1fr; }
    .seller-sig-preview-card { min-height: 0; }
}

/* Brand & Approvals hub — premium portfolio layout */
#section-brands {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.sa-account-card--brands .sa-brand-hub-head {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sa-brand-hub-kicker-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sa-brand-hub-kicker {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-600, #2563eb);
}

.sa-brand-hub-kicker-row .panel-info-tip {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.seller-brand-hub {
    width: 100%;
    padding: 0.85rem 1.15rem 0;
}

.seller-brand-hub-loading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.4rem 0.25rem 1.5rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.seller-brand-hub-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(37, 99, 235, 0.18);
    border-top-color: var(--accent-600, #2563eb);
    border-radius: 50%;
    animation: seller-brand-spin 0.7s linear infinite;
}

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

.seller-brand-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
    padding-bottom: 0.25rem;
}

.seller-brand-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 15rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #f8fafc 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    overflow: hidden;
}

.seller-brand-panel-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.seller-brand-panel-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.seller-brand-panel--approved .seller-brand-panel-icon {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.seller-brand-panel--pending .seller-brand-panel-icon {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.seller-brand-panel--rejected .seller-brand-panel-icon {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

.seller-brand-panel-copy {
    min-width: 0;
    flex: 1;
}

.seller-brand-panel-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.01em;
}

.seller-brand-panel-sub {
    margin: 0.1rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.seller-brand-panel-count {
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.06);
    color: var(--heading);
}

.seller-brand-panel--approved .seller-brand-panel-count {
    background: rgba(22, 163, 74, 0.14);
    color: #166534;
}

.seller-brand-panel--pending .seller-brand-panel-count {
    background: rgba(217, 119, 6, 0.14);
    color: #9a3412;
}

.seller-brand-panel--rejected .seller-brand-panel-count {
    background: rgba(220, 38, 38, 0.12);
    color: #991b1b;
}

.seller-brand-panel-body {
    padding: 0.7rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.seller-brand-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.seller-brand-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 4.85rem;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.35);
}

.seller-brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.seller-brand-item--approved .seller-brand-mark {
    background: linear-gradient(145deg, #22c55e, #15803d);
}

.seller-brand-item--pending .seller-brand-mark {
    background: linear-gradient(145deg, #f59e0b, #b45309);
}

.seller-brand-item--rejected .seller-brand-mark {
    background: linear-gradient(145deg, #f87171, #b91c1c);
}

.seller-brand-item--neutral .seller-brand-mark {
    background: linear-gradient(145deg, #64748b, #334155);
}

.seller-brand-item-main {
    min-width: 0;
    flex: 1;
}

.seller-brand-item-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}

.seller-brand-item-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.seller-brand-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.seller-brand-chip--approved {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

.seller-brand-chip--pending {
    background: rgba(217, 119, 6, 0.12);
    color: #9a3412;
}

.seller-brand-chip--rejected {
    background: rgba(220, 38, 38, 0.1);
    color: #991b1b;
}

.seller-brand-item-meta {
    margin: 0.28rem 0 0;
    min-height: 1.05rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.seller-brand-empty {
    margin: 0;
    min-height: 4.85rem;
    padding: 0.85rem;
    border-radius: 12px;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    background: rgba(248, 250, 252, 0.8);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.seller-brand-hub-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.95rem;
    padding: 0.95rem 0 1.1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.seller-brand-hub-foot-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.seller-brand-hub-foot-copy strong {
    font-size: 0.88rem;
    color: var(--heading);
}

.seller-brand-hub-foot-copy span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.seller-brand-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .seller-brand-hub-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .seller-brand-hub {
        padding-left: 0.95rem;
        padding-right: 0.95rem;
    }

    .seller-brand-hub-foot {
        align-items: stretch;
    }

    .seller-brand-hub-actions {
        width: 100%;
    }

    .seller-brand-hub-actions .sa-account-btn-primary,
    .seller-brand-hub-actions .sa-account-btn-ghost {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.catalog-brand-selector-mount { margin-bottom: 0.25rem; }

.catalog-brand-selector-mount .catalog-product-search-select {
    width: 100%;
}

/* Admin Brand Approvals — fill viewport; footer pinned to bottom (Form16A pattern) */
.main-content:has(.admin-brand-approvals-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-brand-approvals-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
}

.admin-brand-approvals-page > .admin-orders-header,
.admin-brand-approvals-page > .admin-orders-search-form,
.admin-brand-approvals-page > .alert {
    flex-shrink: 0;
}

.admin-brand-approvals-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.admin-brand-approvals-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.admin-brand-approvals-table td {
    vertical-align: middle;
}

.admin-brand-approvals-col-actions {
    width: 104px;
    min-width: 96px;
    text-align: center;
    vertical-align: middle !important;
}

.admin-brand-approvals-proof-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: var(--text-sm);
}

.admin-brand-approvals-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.admin-brand-approvals-approve-form {
    display: inline-flex;
    margin: 0;
}

.admin-brand-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.admin-brand-action-btn--approve {
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.22);
}

.admin-brand-action-btn--approve:hover {
    color: #fff;
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.28);
}

.admin-brand-action-btn--reject {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.22);
}

.admin-brand-action-btn--reject:hover {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.28);
}

.admin-brand-reject-summary {
    margin: 0;
}

.admin-brand-approvals-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.admin-brand-approvals-footer-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-brand-approvals-footer-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-left: auto;
}

.admin-brand-approvals-rows-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin: 0;
}

.admin-brand-approvals-rows-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-brand-approvals-page-size {
    width: auto;
    min-width: 4rem;
    max-width: 4.5rem;
}

.admin-brand-approvals-pagination .page-link {
    min-width: 2rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .main-content:has(.admin-brand-approvals-page) {
        overflow: auto;
        display: block;
    }

    .admin-brand-approvals-page {
        min-height: 0;
        flex: none;
    }

    .admin-brand-approvals-footer,
    .admin-brand-approvals-footer-controls {
        flex-wrap: wrap;
    }

    .admin-brand-approvals-footer-controls {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .admin-brand-approvals-col-actions {
        width: auto;
        min-width: 88px;
    }
}

/* ===== Manufacturer Issue Credit Note modal ===== */
#mfg-credit-note-modal .mfg-cn-modal-content {
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 18px;
    box-shadow:
        0 28px 56px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    overflow: hidden;
    background: #fff;
}
#mfg-credit-note-modal .mfg-cn-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
#mfg-credit-note-modal .mfg-cn-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
#mfg-credit-note-modal .mfg-cn-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--accent-600, #0450d5);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
#mfg-credit-note-modal .mfg-cn-header-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-600, #0450d5);
    margin-bottom: 2px;
}
#mfg-credit-note-modal .mfg-cn-modal-header .modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--heading, #0f172a);
    line-height: 1.2;
}
#mfg-credit-note-modal .mfg-cn-modal-body {
    padding: 16px 22px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}
#mfg-credit-note-modal .mfg-cn-intro {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(248, 250, 252, 0.9);
}
#mfg-credit-note-modal .mfg-cn-intro-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--slate-600, #475569);
}
#mfg-credit-note-modal .mfg-cn-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
}
#mfg-credit-note-modal .mfg-cn-loading-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: var(--accent-600, #0450d5);
    animation: mfg-cn-spin 0.7s linear infinite;
}
@keyframes mfg-cn-spin {
    to { transform: rotate(360deg); }
}
#mfg-credit-note-modal .mfg-cn-error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: rgba(254, 226, 226, 0.55);
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 600;
}
#mfg-credit-note-modal .mfg-cn-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
#mfg-credit-note-modal .mfg-cn-meta-item {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
#mfg-credit-note-modal .mfg-cn-meta-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
}
#mfg-credit-note-modal .mfg-cn-meta-value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--heading, #0f172a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mfg-credit-note-modal .mfg-cn-meta-pill {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-700, #0342b0);
    font-size: 0.75rem;
    white-space: nowrap;
}
#mfg-credit-note-modal .mfg-cn-table-wrap {
    margin-bottom: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}
#mfg-credit-note-modal .mfg-cn-table {
    margin: 0;
    width: 100%;
    table-layout: fixed;
    --bs-table-bg: transparent;
}
#mfg-credit-note-modal .mfg-cn-col-product {
    width: auto;
}
#mfg-credit-note-modal .mfg-cn-col-qty {
    width: 72px;
}
#mfg-credit-note-modal .mfg-cn-col-reason {
    width: 150px;
}
#mfg-credit-note-modal .mfg-cn-col-condition {
    width: 132px;
}
#mfg-credit-note-modal .mfg-cn-col-credit {
    width: 88px;
}
#mfg-credit-note-modal .mfg-cn-table thead th {
    padding: 11px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    white-space: nowrap;
}
#mfg-credit-note-modal .mfg-cn-table tbody td {
    padding: 12px;
    border-bottom-color: rgba(15, 23, 42, 0.06);
    vertical-align: top;
}
#mfg-credit-note-modal .mfg-cn-table tbody tr:last-child td {
    border-bottom: 0;
}
#mfg-credit-note-modal .mfg-cn-line:hover td {
    background: rgba(var(--accent-rgb), 0.025);
}
#mfg-credit-note-modal .mfg-cn-product-cell {
    min-width: 0;
}
#mfg-credit-note-modal .mfg-cn-product {
    min-width: 0;
    max-width: 100%;
}
#mfg-credit-note-modal .mfg-cn-product-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--heading, #0f172a);
    line-height: 1.35;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
#mfg-credit-note-modal .mfg-cn-product-variant {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
    margin-bottom: 8px;
}
#mfg-credit-note-modal .mfg-cn-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
#mfg-credit-note-modal .mfg-cn-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-600, #475569);
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.05);
    white-space: nowrap;
}
#mfg-credit-note-modal .mfg-cn-chip--accent {
    color: var(--accent-700, #0342b0);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.14);
}
#mfg-credit-note-modal .mfg-cn-qty-cell,
#mfg-credit-note-modal .mfg-cn-reason-cell,
#mfg-credit-note-modal .mfg-cn-condition-cell,
#mfg-credit-note-modal .mfg-cn-line-credit {
    vertical-align: middle;
}
#mfg-credit-note-modal .mfg-cn-qty,
#mfg-credit-note-modal .mfg-cn-notes-input {
    min-height: 40px;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--heading, #0f172a);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
#mfg-credit-note-modal .mfg-cn-qty {
    width: 100%;
    max-width: 64px;
    padding-left: 8px;
    padding-right: 4px;
    text-align: center;
}
#mfg-credit-note-modal .mfg-cn-qty:hover,
#mfg-credit-note-modal .mfg-cn-notes-input:hover {
    border-color: var(--border-strong, #cbd5e1);
}
#mfg-credit-note-modal .mfg-cn-qty:focus,
#mfg-credit-note-modal .mfg-cn-notes-input:focus {
    border-color: var(--accent-500, #0450d5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
    outline: none;
}
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller .admin-custom-select-trigger {
    min-height: 40px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--heading, #0f172a);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller .admin-custom-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller .admin-custom-select-trigger:hover {
    border-color: var(--border-strong, #cbd5e1);
}
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller.is-open .admin-custom-select-trigger,
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select--seller .admin-custom-select-trigger:focus {
    border-color: var(--accent-500, #0450d5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
    outline: none;
}
.admin-custom-select-menu--seller.mfg-cn-select-menu,
.panel-wrapper.seller-panel #mfg-credit-note-modal .admin-custom-select-menu--seller {
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
}
#mfg-credit-note-modal .mfg-cn-line-credit {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 20px;
}
#mfg-credit-note-modal .mfg-cn-notes {
    margin-bottom: 14px;
}
#mfg-credit-note-modal .mfg-cn-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
}
#mfg-credit-note-modal .mfg-cn-label-optional {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--slate-400, #94a3b8);
}
#mfg-credit-note-modal .mfg-cn-notes-input {
    height: 42px;
}
#mfg-credit-note-modal .mfg-cn-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, #ffffff 58%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
#mfg-credit-note-modal .mfg-cn-total-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#mfg-credit-note-modal .mfg-cn-total-label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--accent-700, #0342b0);
}
#mfg-credit-note-modal .mfg-cn-total-hint {
    font-size: 0.75rem;
    color: var(--slate-500, #64748b);
}
#mfg-credit-note-modal .mfg-cn-total-amount {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--heading, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#mfg-credit-note-modal .mfg-cn-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
}
#mfg-credit-note-modal .mfg-cn-btn-cancel {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
}
#mfg-credit-note-modal .mfg-cn-btn-submit {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.22);
}
#mfg-credit-note-modal .mfg-cn-btn-submit:disabled {
    box-shadow: none;
    opacity: 0.55;
}
@media (max-width: 767.98px) {
    #mfg-credit-note-modal .mfg-cn-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #mfg-credit-note-modal .mfg-cn-modal-header,
    #mfg-credit-note-modal .mfg-cn-modal-body,
    #mfg-credit-note-modal .mfg-cn-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    #mfg-credit-note-modal .mfg-cn-total {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Outside Platform dues (manufacturer credit AR / return payables) ===== */
.outside-dues-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.outside-dues-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.outside-dues-card--collect {
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, #fff 55%);
    border-color: rgba(var(--accent-rgb), 0.16);
}
.outside-dues-card--return {
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, #fff 55%);
    border-color: rgba(245, 158, 11, 0.22);
}
.outside-dues-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.outside-dues-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate-500, #64748b);
}
.outside-dues-card--collect .outside-dues-eyebrow {
    color: var(--accent-600, #0450d5);
}
.outside-dues-card--return .outside-dues-eyebrow {
    color: #b45309;
}
.outside-dues-title {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading, #0f172a);
}
.outside-dues-total {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--heading, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.outside-dues-hint {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--slate-500, #64748b);
    margin-bottom: 12px !important;
}
.outside-dues-empty {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--slate-500, #64748b);
}
.outside-dues-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.outside-dues-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.outside-dues-party {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.outside-dues-party-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--heading, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.outside-dues-party-meta {
    font-size: 0.6875rem;
    color: var(--slate-500, #64748b);
}
.outside-dues-amount {
    font-size: 0.875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--heading, #0f172a);
    white-space: nowrap;
}
.outside-dues-more {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
}
.outside-pay-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-600, #475569);
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.outside-pay-pill--credit {
    color: var(--accent-700, #0342b0);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.16);
}
.outside-pay-pill--split {
    color: #1e3a8a;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(16, 185, 129, 0.12), rgba(245, 158, 11, 0.14));
    border-color: rgba(37, 99, 235, 0.35);
    cursor: help;
}
@media (max-width: 767.98px) {
    .outside-dues-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Manufacturer Finance Credit + Outside Platform (Orders-richer shell) ===== */
.outside-platform-page > .retailer-products-tabs-row {
    position: relative;
    z-index: 30;
    overflow: visible;
    align-items: flex-start;
}
.outside-platform-page .outside-platform-tabs-actions,
.mfg-credit-page .outside-platform-tabs-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: auto;
    min-height: var(--rp-control-height, 40px);
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 31;
    overflow: visible;
}
.outside-platform-page .outside-platform-tabs-actions .order-date-filter,
.outside-platform-page .outside-platform-tabs-actions .order-date-filter-form,
.mfg-credit-page .outside-platform-tabs-actions .order-date-filter,
.mfg-credit-page .outside-platform-tabs-actions .order-date-filter-form {
    overflow: visible;
    height: auto;
    flex: 0 0 auto;
    align-self: center;
}
.outside-platform-page .order-date-dropdown,
.outside-platform-page .order-date-dropdown--calendar,
.mfg-credit-page .order-date-dropdown,
.mfg-credit-page .order-date-dropdown--calendar {
    z-index: 80;
}
.outside-platform-page > .panel-card.retailer-products-card,
.mfg-credit-page > .panel-card.retailer-products-card {
    position: relative;
    z-index: 1;
}
.outside-platform-page .outside-platform-tabs-search.retailer-purchases-inline-search,
.mfg-credit-page .outside-platform-tabs-search.retailer-purchases-inline-search {
    width: 220px;
    flex: 0 1 220px;
    min-width: 160px;
    max-width: 260px;
    height: var(--rp-control-height, 40px);
    min-height: var(--rp-control-height, 40px);
    max-height: var(--rp-control-height, 40px);
    margin: 0;
    padding: 0 14px;
    border-radius: var(--rp-radius-rail, 12px);
    box-sizing: border-box;
}
.outside-platform-page .outside-platform-tabs-search .retailer-pos-inline-search-input.form-control,
.outside-platform-page .outside-platform-tabs-search .retailer-pos-inline-search-input.form-control-sm,
.outside-platform-page .outside-platform-tabs-search .retailer-pos-inline-search-input,
.mfg-credit-page .outside-platform-tabs-search .retailer-pos-inline-search-input.form-control,
.mfg-credit-page .outside-platform-tabs-search .retailer-pos-inline-search-input.form-control-sm,
.mfg-credit-page .outside-platform-tabs-search .retailer-pos-inline-search-input {
    font-size: var(--rp-font, 0.8125rem);
    line-height: var(--rp-lh, 1.2);
}
.outside-platform-page .outside-platform-tabs-search .retailer-pos-inline-search-input::placeholder,
.mfg-credit-page .outside-platform-tabs-search .retailer-pos-inline-search-input::placeholder {
    font-size: 0.75rem;
}
@media (max-width: 991.98px) {
    .outside-platform-page .outside-platform-tabs-actions,
    .mfg-credit-page .outside-platform-tabs-actions {
        flex-wrap: wrap;
        width: 100%;
    }
    .outside-platform-page .outside-platform-tabs-search.retailer-purchases-inline-search,
    .mfg-credit-page .outside-platform-tabs-search.retailer-purchases-inline-search {
        flex: 1 1 180px;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 767.98px) {
    .outside-platform-page .outside-platform-tabs-actions,
    .mfg-credit-page .outside-platform-tabs-actions {
        width: 100%;
    }
    .outside-platform-page .outside-platform-tabs-search.retailer-purchases-inline-search,
    .mfg-credit-page .outside-platform-tabs-search.retailer-purchases-inline-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
}
.outside-dues-card.is-active {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.28), 0 10px 28px rgba(15, 23, 42, 0.06);
}
a.outside-dues-card.is-active:hover {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.28), 0 8px 24px rgba(15, 23, 42, 0.08);
}
a.outside-dues-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.outside-dues-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.outside-platform-page .retailer-products-tab {
    text-decoration: none;
    color: inherit;
}
.outside-platform-detail-page .outside-detail-returned {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}
.outside-platform-detail-page .outside-settle-breakdown {
    display: grid;
    gap: 2px;
}
.outside-platform-detail-page .outside-settle-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
}
.mfg-credit-table .mfg-credit-col-action {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.mfg-credit-table td {
    vertical-align: middle;
}
.mfg-credit-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mfg-credit-type-pill--collect {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
}
.mfg-credit-type-pill--return {
    color: #c2410c;
    background: rgba(249, 115, 22, 0.14);
}
.mfg-credit-type-pill--received {
    color: #15803d;
    background: rgba(34, 197, 94, 0.14);
}
.mfg-credit-type-pill--paid {
    color: #7e22ce;
    background: rgba(168, 85, 247, 0.14);
}
.mfg-credit-history-meta {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.mfg-credit-history-when {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700, #334155);
}
.mfg-credit-history-sep {
    color: var(--slate-400, #94a3b8);
    font-weight: 600;
}
.mfg-credit-history-method {
    font-size: 11px;
    font-weight: 700;
    color: var(--slate-500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mfg-credit-settle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 280px;
}
.mfg-credit-settle-row .mfg-credit-amount {
    flex: 0 0 96px;
    width: 96px;
    min-width: 96px;
}
.mfg-credit-settle-row .mfg-credit-method,
.mfg-credit-settle-row .admin-custom-select {
    flex: 0 0 108px;
    width: 108px;
    min-width: 108px;
    max-width: 108px;
}
.mfg-credit-settle-row .mfg-credit-settle-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.mfg-credit-row--link {
    cursor: pointer;
}
.mfg-credit-row--link:hover > td {
    background: var(--slate-50, #f8fafc);
}
.mfg-credit-invoice {
    font-weight: 600;
    color: var(--panel-accent, #0450d5);
}
@media (max-width: 767.98px) {
    .products-status-tabs--single,
    .products-status-tabs--two {
        grid-template-columns: 1fr;
    }
}

/* Fee & deduction rules — modal + table tags */
.admin-fee-rule-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.admin-fee-rule-system-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.admin-fee-rule-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
}

.admin-fee-rule-status.is-active {
    color: #166534;
    background: #dcfce7;
}

body.admin-fee-rule-modal-open {
    overflow: hidden;
}

.admin-fee-rule-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.admin-fee-rule-modal.is-open {
    display: flex !important;
}

.admin-fee-rule-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.admin-fee-rule-modal-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(90vh, 900px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    padding: 1.25rem 1.35rem 1.35rem;
}

.admin-fee-section-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #475569;
}

.admin-fee-section-legend-label {
    font-weight: 600;
    color: #334155;
    margin-right: 0.15rem;
}

.admin-fee-section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.admin-fee-section-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-size: 0.7rem;
}

.admin-fee-section-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 0.4rem;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}