/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   MAIN LAYOUT - PROFESSIONAL DESIGN
   ============================================ */

.page[b-57ex51rpe3] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ds-app-bg, #F5F6F8);
}

/* Main Content Area */
.main-content[b-57ex51rpe3] {
    flex: 1;
    margin-top: 44px;
    min-height: calc(100vh - 44px);
    background: var(--ds-app-bg, #F5F6F8);
}

.content-wrapper[b-57ex51rpe3] {
    width: 100%;
    min-height: calc(100vh - 44px);
    padding: 0;
}

/* Error UI */
#blazor-error-ui[b-57ex51rpe3] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 2000;
    display: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #ef4444;
}

.error-content[b-57ex51rpe3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    color: #991b1b;
    font-weight: 600;
}

.error-content i[b-57ex51rpe3] {
    font-size: 20px;
    color: #ef4444;
}

.error-content .reload[b-57ex51rpe3] {
    margin-left: auto;
    padding: 6px 16px;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.error-content .reload:hover[b-57ex51rpe3] {
    background: #dc2626;
    transform: translateY(-1px);
}

.error-content .dismiss[b-57ex51rpe3] {
    cursor: pointer;
    font-size: 20px;
    padding: 4px 8px;
    color: #991b1b;
    transition: all 0.2s ease;
    user-select: none;
}

.error-content .dismiss:hover[b-57ex51rpe3] {
    color: #7f1d1d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-content[b-57ex51rpe3] {
        margin-top: 44px;
    }
}

@media print {
    #blazor-error-ui[b-57ex51rpe3] {
        display: none;
    }

    .main-content[b-57ex51rpe3] {
        margin-top: 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================
   MODERN SLIM TOP NAVIGATION BAR
   Space-saving horizontal menu with dropdowns
   ============================================ */

/* ===== Reset link styles inside nav ===== */
.topnav a[b-g1mye8dkls],
.topnav a:link[b-g1mye8dkls],
.topnav a:visited[b-g1mye8dkls],
.topnav a:hover[b-g1mye8dkls],
.topnav a:active[b-g1mye8dkls],
.topnav a:focus[b-g1mye8dkls] {
    text-decoration: none !important;
    outline: none !important;
}

/* ===== Top Bar Container ===== */
.topnav[b-g1mye8dkls] {
    /* Chirpy spring easing — slight overshoot for a bouncy, lively feel */
    --nav-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 10px;
    background: #ffffff;
    border-bottom: 1px solid #e5e8ef;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    font-family: var(--ds-font-sans, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

/* ===== Brand ===== */
.topnav-brand[b-g1mye8dkls] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 4px;
    margin-right: 4px;
    border-right: 1px solid #eef0f5;
    flex-shrink: 0;
}

.brand-mark[b-g1mye8dkls] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ds-primary, #1D4ED8);
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.3s var(--nav-spring);
}

.topnav-brand:hover .brand-mark[b-g1mye8dkls] {
    transform: rotate(-8deg) scale(1.12);
}

.brand-name[b-g1mye8dkls] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand-suffix[b-g1mye8dkls] {
    color: var(--ds-primary, #1D4ED8);
    margin-left: 3px;
}

/* ===== Horizontal Menu ===== */
.topnav-menu[b-g1mye8dkls] {
    display: flex;
    align-items: stretch;
    gap: 1px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
}


/* ===== Menu Group + Tab ===== */
.nav-group[b-g1mye8dkls] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-tab[b-g1mye8dkls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 11px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 7px;
    margin: 5px 0;
    transition: background 0.18s var(--nav-spring), color 0.18s var(--nav-spring), transform 0.18s var(--nav-spring);
}

.nav-tab i[b-g1mye8dkls] {
    font-size: 15px;
    opacity: 0.85;
    transition: transform 0.22s var(--nav-spring), color 0.18s ease;
}

.nav-caret[b-g1mye8dkls] {
    font-size: 10px !important;
    opacity: 0.6;
    transition: transform 0.28s var(--nav-spring);
}

.nav-tab:hover[b-g1mye8dkls] {
    background: var(--ds-primary-soft, #EFF4FF);
    color: var(--ds-primary, #1D4ED8);
    transform: translateY(-1px);
}

.nav-tab:hover i[b-g1mye8dkls] {
    transform: scale(1.18) rotate(-4deg);
}

.nav-tab:active[b-g1mye8dkls] {
    transform: translateY(0) scale(0.96);
}

/* Active group / current route */
.nav-group.active > .nav-tab[b-g1mye8dkls] {
    color: var(--ds-primary, #1D4ED8);
    background: var(--ds-primary-soft, #EFF4FF);
}

.nav-group.open > .nav-tab[b-g1mye8dkls] {
    background: var(--ds-primary-soft, #EFF4FF);
    color: var(--ds-primary, #1D4ED8);
}

.nav-group.open .nav-caret[b-g1mye8dkls] {
    transform: rotate(180deg) scale(1.1);
}

/* Solo tab (NavLink with no dropdown) — match group tabs exactly
   NOTE: NavLink is a child component, so ::deep is required for CSS isolation */
.nav-group[b-g1mye8dkls]  .nav-tab-solo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 11px;
    margin: 5px 0;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    border-radius: 7px;
    white-space: nowrap;
    text-decoration: none !important;
    border: none;
    background: transparent;
    transition: background 0.18s var(--nav-spring), color 0.18s var(--nav-spring), transform 0.18s var(--nav-spring);
}

.nav-group[b-g1mye8dkls]  .nav-tab-solo i {
    font-size: 15px;
    opacity: 0.85;
    transition: transform 0.22s var(--nav-spring), color 0.18s ease;
}

.nav-group[b-g1mye8dkls]  .nav-tab-solo:hover {
    background: var(--ds-primary-soft, #EFF4FF);
    color: var(--ds-primary, #1D4ED8);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.nav-group[b-g1mye8dkls]  .nav-tab-solo:hover i {
    transform: scale(1.18) rotate(-4deg);
}

.nav-group[b-g1mye8dkls]  .nav-tab-solo:active {
    transform: translateY(0) scale(0.96);
}

/* Active state for solo tabs (when route matches) */
.nav-group.active[b-g1mye8dkls]  .nav-tab-solo,
.nav-group[b-g1mye8dkls]  .nav-tab-solo.active {
    color: var(--ds-primary, #1D4ED8);
    background: var(--ds-primary-soft, #EFF4FF);
    font-weight: 600;
    text-decoration: none !important;
}

/* ===== Dropdown ===== */
.nav-dropdown[b-g1mye8dkls] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--ds-border, #e5e8ef);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.26s var(--nav-spring), visibility 0.26s var(--nav-spring);
    z-index: 1040;
    font-family: var(--ds-font-sans, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

.nav-group.open .nav-dropdown[b-g1mye8dkls] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* One menu item per row — full-width list.
   Matches the parent .nav-tab typography & style (font, weight, gap, icon).

   NOTE: <NavLink> is a child component, so Blazor CSS isolation does NOT
   add this component's scope id to the <a> it renders. The ::deep combinator
   is required so these scoped rules reach the dropdown links. */
.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--ds-text-muted, #475569) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.16s var(--nav-spring), color 0.16s ease, transform 0.16s var(--nav-spring);
}

/* Thin separator between rows for a clean list rhythm */
.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item + .nav-dropdown-item {
    border-top: 1px solid var(--ds-grid-line, #edf0f4);
}

.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    opacity: 0.85;
    flex-shrink: 0;
    transition: color 0.16s ease, opacity 0.16s ease, transform 0.22s var(--nav-spring);
}

.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item:hover {
    background: var(--ds-primary-soft, #EFF4FF);
    color: var(--ds-primary, #1D4ED8) !important;
    transform: translateX(3px);
}

.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item:hover i {
    color: var(--ds-primary, #1D4ED8);
    transform: scale(1.2) rotate(-5deg);
}

.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item.active {
    background: var(--ds-primary-soft, #EFF4FF);
    color: var(--ds-primary, #1D4ED8) !important;
    font-weight: 600;
}

.nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item.active i {
    color: var(--ds-primary, #1D4ED8);
}

/* Keep last dropdowns from overflowing right edge */
.nav-group:nth-last-child(-n+2) .nav-dropdown[b-g1mye8dkls] {
    left: auto;
    right: 0;
}

/* ===== Right Actions ===== */
.topnav-actions[b-g1mye8dkls] {
    display: flex;
    align-items: center;
    padding-left: 8px;
    margin-left: 4px;
    border-left: 1px solid #eef0f5;
    flex-shrink: 0;
}

.new-invoice-btn[b-g1mye8dkls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    background: var(--ds-forest, #16A34A);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.new-invoice-btn:hover[b-g1mye8dkls] {
    background: var(--ds-forest-dark, #15803D);
}

/* ===== Backdrop (click-away) ===== */
.nav-backdrop[b-g1mye8dkls] {
    position: fixed;
    inset: 44px 0 0 0;
    background: transparent;
    z-index: 1025;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .nav-tab-label[b-g1mye8dkls] {
        display: none;
    }

    .nav-tab[b-g1mye8dkls] {
        padding: 0 9px;
    }
    
    .nav-group[b-g1mye8dkls]  .nav-tab-solo {
        padding: 0 9px;
    }
}

@media (max-width: 768px) {
    .brand-name[b-g1mye8dkls] {
        display: none;
    }

    .new-invoice-label[b-g1mye8dkls] {
        display: none;
    }

    .new-invoice-btn[b-g1mye8dkls] {
        padding: 0 10px;
    }
}

/* ===== Accessibility: respect reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .topnav[b-g1mye8dkls],
    .topnav *[b-g1mye8dkls] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .nav-tab:hover[b-g1mye8dkls],
    .nav-group[b-g1mye8dkls]  .nav-tab-solo:hover,
    .nav-tab:hover i[b-g1mye8dkls],
    .nav-group[b-g1mye8dkls]  .nav-tab-solo:hover i,
    .nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item:hover,
    .nav-dropdown[b-g1mye8dkls]  .nav-dropdown-item:hover i,
    .topnav-brand:hover .brand-mark[b-g1mye8dkls] {
        transform: none !important;
    }
}

/* /Components/Pages/Admin/ErrorLogs.razor.rz.scp.css */
.error-trace-row td[b-ab3p6fj738] {
    background: #0f172a;
    padding: 0 !important;
}

.error-trace[b-ab3p6fj738] {
    margin: 0;
    padding: 12px 16px;
    max-height: 320px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 6px;
}

.badge.bg-danger-subtle[b-ab3p6fj738] {
    background: #fee2e2;
    font-weight: 600;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ============================================
   ENHANCED TEXTILE ERP POS DASHBOARD
   Modern, Professional, Feature-Rich Design
   ============================================ */

/* ===== CONTAINER ===== */
.dashboard-container[b-tqjdqeybjf] {
    padding: 20px 24px;
    background: #f8fafc;
    min-height: 100vh;
    max-width: 1800px;
    margin: 0 auto;
}

/* ===== LOADING & ERROR STATES ===== */
.dashboard-loading[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f8fafc;
}

.loading-content[b-tqjdqeybjf] {
    text-align: center;
    color: #64748b;
}

.loading-content p[b-tqjdqeybjf] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 16px;
}

.dashboard-error[b-tqjdqeybjf] {
    padding: 24px;
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== PAGE HEADER ===== */
.dashboard-header[b-tqjdqeybjf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-tqjdqeybjf] {
    flex: 1;
    min-width: 280px;
}

.page-title[b-tqjdqeybjf] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title i[b-tqjdqeybjf] {
    color: #2563eb;
}

.page-subtitle[b-tqjdqeybjf] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.header-right[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-box[b-tqjdqeybjf] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i[b-tqjdqeybjf] {
    position: absolute;
    left: 12px;
    color: #64748b;
    font-size: 14px;
}

.search-box input[b-tqjdqeybjf] {
    padding: 8px 12px 8px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    width: 260px;
    transition: all 0.25s ease;
}

.search-box input:focus[b-tqjdqeybjf] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ===== QUICK ACTIONS BAR ===== */
.quick-actions-bar[b-tqjdqeybjf] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-x: auto;
    scrollbar-width: thin;
    border: 1px solid #e2e8f0;
}

.quick-action-btn[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.quick-action-btn:hover[b-tqjdqeybjf] {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.quick-action-btn:hover .action-icon[b-tqjdqeybjf] {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
}

.action-icon[b-tqjdqeybjf] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.action-icon.bg-blue[b-tqjdqeybjf] { background: #2563eb; }
.action-icon.bg-cyan[b-tqjdqeybjf] { background: #06b6d4; }
.action-icon.bg-green[b-tqjdqeybjf] { background: #10b981; }
.action-icon.bg-orange[b-tqjdqeybjf] { background: #f59e0b; }
.action-icon.bg-purple[b-tqjdqeybjf] { background: #8b5cf6; }
.action-icon.bg-red[b-tqjdqeybjf] { background: #ef4444; }
.action-icon.bg-teal[b-tqjdqeybjf] { background: #14b8a6; }
.action-icon.bg-indigo[b-tqjdqeybjf] { background: #6366f1; }

.quick-action-btn span[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.quick-action-btn:hover span[b-tqjdqeybjf] {
    color: white;
}

/* ===== KPI CARDS GRID ===== */
.kpi-grid[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card[b-tqjdqeybjf] {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card[b-tqjdqeybjf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-card:hover[b-tqjdqeybjf] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.kpi-card.kpi-orange[b-tqjdqeybjf]::before { background: #f59e0b; }
.kpi-card.kpi-red[b-tqjdqeybjf]::before { background: #ef4444; }
.kpi-card.kpi-green[b-tqjdqeybjf]::before { background: #10b981; }
.kpi-card.kpi-blue[b-tqjdqeybjf]::before { background: #2563eb; }
.kpi-card.kpi-cyan[b-tqjdqeybjf]::before { background: #06b6d4; }
.kpi-card.kpi-purple[b-tqjdqeybjf]::before { background: #8b5cf6; }
.kpi-card.kpi-teal[b-tqjdqeybjf]::before { background: #14b8a6; }

.kpi-card.kpi-orange .kpi-icon[b-tqjdqeybjf] { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.kpi-card.kpi-red .kpi-icon[b-tqjdqeybjf] { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.kpi-card.kpi-green .kpi-icon[b-tqjdqeybjf] { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.kpi-card.kpi-blue .kpi-icon[b-tqjdqeybjf] { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.kpi-card.kpi-cyan .kpi-icon[b-tqjdqeybjf] { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.kpi-card.kpi-purple .kpi-icon[b-tqjdqeybjf] { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.kpi-card.kpi-teal .kpi-icon[b-tqjdqeybjf] { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }

.kpi-icon[b-tqjdqeybjf] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.kpi-content[b-tqjdqeybjf] {
    flex: 1;
    min-width: 0;
}

.kpi-value[b-tqjdqeybjf] {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.kpi-label[b-tqjdqeybjf] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.kpi-trend[b-tqjdqeybjf] {
    font-size: 11px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-trend.positive[b-tqjdqeybjf] { color: #10b981; }
.kpi-trend.negative[b-tqjdqeybjf] { color: #ef4444; }

.kpi-subtext[b-tqjdqeybjf] {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

/* ===== FILTER BAR ===== */
.filter-bar[b-tqjdqeybjf] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
    /* Removed sticky positioning */
}

.filter-group[b-tqjdqeybjf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label[b-tqjdqeybjf] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-group input[b-tqjdqeybjf],
.filter-group select[b-tqjdqeybjf] {
    min-width: 140px;
    font-size: 13px;
}

/* ===== CATEGORY PANELS ===== */
.category-panels[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.category-card[b-tqjdqeybjf] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.category-header[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.category-header h5[b-tqjdqeybjf] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.category-icon[b-tqjdqeybjf] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.category-icon.bg-green[b-tqjdqeybjf] { background: #10b981; }
.category-icon.bg-blue[b-tqjdqeybjf] { background: #2563eb; }
.category-icon.bg-purple[b-tqjdqeybjf] { background: #8b5cf6; }
.category-icon.bg-orange[b-tqjdqeybjf] { background: #f59e0b; }
.category-icon.bg-teal[b-tqjdqeybjf] { background: #14b8a6; }
.category-icon.bg-cyan[b-tqjdqeybjf] { background: #06b6d4; }

.category-links[b-tqjdqeybjf] {
    padding: 8px;
}

.category-links a[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #1e293b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.category-links a:hover[b-tqjdqeybjf] {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.category-links a i[b-tqjdqeybjf] {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #64748b;
}

.category-links a:hover i[b-tqjdqeybjf] {
    color: #2563eb;
}

/* ===== MAIN CONTENT GRID ===== */
.main-content-grid[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* ===== SECTION CARDS ===== */
.section-card[b-tqjdqeybjf] {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
}

.section-header[b-tqjdqeybjf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.section-title[b-tqjdqeybjf] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i[b-tqjdqeybjf] {
    color: #2563eb;
}

.section-title.text-warning i[b-tqjdqeybjf] {
    color: #f59e0b;
}

.btn-link[b-tqjdqeybjf] {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.btn-link:hover[b-tqjdqeybjf] {
    text-decoration: underline;
}

/* ===== SALES STATS GRID ===== */
.sales-stats-grid[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sales-stat-card[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.sales-stat-card .stat-icon[b-tqjdqeybjf] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.sales-stat-card.stat-primary .stat-icon[b-tqjdqeybjf] { background: #2563eb; }
.sales-stat-card.stat-warning .stat-icon[b-tqjdqeybjf] { background: #f59e0b; }
.sales-stat-card.stat-danger .stat-icon[b-tqjdqeybjf] { background: #ef4444; }
.sales-stat-card.stat-success .stat-icon[b-tqjdqeybjf] { background: #10b981; }

.sales-stat-card .stat-info[b-tqjdqeybjf] {
    flex: 1;
}

.sales-stat-card .stat-value[b-tqjdqeybjf] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.sales-stat-card .stat-label[b-tqjdqeybjf] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

/* ===== BAR CHART ===== */
.bar-chart[b-tqjdqeybjf] {
    height: 220px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.chart-bars[b-tqjdqeybjf] {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 20px;
}

.bar-group[b-tqjdqeybjf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    max-width: 80px;
}

.bar[b-tqjdqeybjf] {
    width: 100%;
    background: currentColor;
    border-radius: 6px 6px 0 0;
    position: relative;
    min-height: 20px;
    transition: all 0.25s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
}

.bar:hover[b-tqjdqeybjf] {
    filter: brightness(1.1);
    transform: scaleY(1.02);
}

.bar-primary[b-tqjdqeybjf] { color: #2563eb; }
.bar-warning[b-tqjdqeybjf] { color: #f59e0b; }
.bar-danger[b-tqjdqeybjf] { color: #ef4444; }
.bar-success[b-tqjdqeybjf] { color: #10b981; }

.bar-label[b-tqjdqeybjf] {
    font-size: 10px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.bar-title[b-tqjdqeybjf] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

/* ===== ACTIVITIES ===== */
.activities-tabs[b-tqjdqeybjf] {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.activities-tabs button[b-tqjdqeybjf] {
    padding: 10px 16px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.activities-tabs button:hover[b-tqjdqeybjf] {
    color: #2563eb;
}

.activities-tabs button.active[b-tqjdqeybjf] {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.activities-tabs button i[b-tqjdqeybjf] {
    font-size: 14px;
}

.activities-list[b-tqjdqeybjf] {
    max-height: 380px;
    overflow-y: auto;
}

.activity-item[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.activity-item:hover[b-tqjdqeybjf] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.activity-icon[b-tqjdqeybjf] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.activity-icon.bg-primary[b-tqjdqeybjf] { background: #2563eb; }
.activity-icon.bg-success[b-tqjdqeybjf] { background: #10b981; }
.activity-icon.bg-info[b-tqjdqeybjf] { background: #06b6d4; }
.activity-icon.bg-purple[b-tqjdqeybjf] { background: #8b5cf6; }

.activity-details[b-tqjdqeybjf] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.activity-meta[b-tqjdqeybjf] {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-amount[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}

.activity-time[b-tqjdqeybjf] {
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}

.activity-badge[b-tqjdqeybjf] {
    flex-shrink: 0;
}

.no-data[b-tqjdqeybjf] {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.no-data i[b-tqjdqeybjf] {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
    display: block;
}

.no-data p[b-tqjdqeybjf] {
    margin: 0;
    font-size: 14px;
}

/* ===== ANALYTICS ROW ===== */
.analytics-row[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card[b-tqjdqeybjf] {
    min-height: 280px;
}

/* Trend Chart */
.trend-chart[b-tqjdqeybjf] {
    padding: 16px 0;
}

.trend-bars[b-tqjdqeybjf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
    gap: 8px;
}

.trend-bar-group[b-tqjdqeybjf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bar[b-tqjdqeybjf] {
    width: 100%;
    max-width: 50px;
    background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.25s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
}

.trend-bar:hover[b-tqjdqeybjf] {
    filter: brightness(1.1);
}

.trend-value[b-tqjdqeybjf] {
    font-size: 9px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.trend-label[b-tqjdqeybjf] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 8px;
}

/* Category Distribution */
.category-distribution[b-tqjdqeybjf] {
    padding: 8px 0;
}

.category-row[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.category-row:last-child[b-tqjdqeybjf] {
    border-bottom: none;
}

.category-color[b-tqjdqeybjf] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.category-name[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    width: 100px;
    flex-shrink: 0;
}

.category-bar-wrapper[b-tqjdqeybjf] {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.category-bar[b-tqjdqeybjf] {
    height: 100%;
    border-radius: 4px;
    transition: all 0.25s ease;
}

.category-value[b-tqjdqeybjf] {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    width: 40px;
    text-align: right;
}

/* Top Suppliers */
.top-suppliers-list[b-tqjdqeybjf] {
    padding: 4px 0;
}

.supplier-row[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.25s ease;
}

.supplier-row:hover[b-tqjdqeybjf] {
    background: #f8fafc;
}

.supplier-row:last-child[b-tqjdqeybjf] {
    border-bottom: none;
}

.supplier-rank[b-tqjdqeybjf] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.supplier-info[b-tqjdqeybjf] {
    flex: 1;
}

.supplier-name[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.supplier-orders[b-tqjdqeybjf] {
    font-size: 11px;
    color: #64748b;
}

.supplier-amount[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
}

/* ===== LOW STOCK ALERTS ===== */
.alerts-card[b-tqjdqeybjf] {
    margin-bottom: 24px;
}

.low-stock-grid[b-tqjdqeybjf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.low-stock-item[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.low-stock-item.out-of-stock[b-tqjdqeybjf] {
    background: #fef2f2;
    border-color: #fca5a5;
}

.low-stock-item .item-icon[b-tqjdqeybjf] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fef3c7;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.low-stock-item.out-of-stock .item-icon[b-tqjdqeybjf] {
    background: #fee2e2;
    color: #ef4444;
}

.low-stock-item .item-details[b-tqjdqeybjf] {
    flex: 1;
    min-width: 0;
}

.low-stock-item .item-name[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.low-stock-item .item-variant[b-tqjdqeybjf] {
    font-size: 11px;
    color: #64748b;
}

.low-stock-item .item-stock[b-tqjdqeybjf] {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.low-stock-item .item-stock.low[b-tqjdqeybjf] {
    background: #fef3c7;
    color: #b45309;
}

.low-stock-item .item-stock.zero[b-tqjdqeybjf] {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== DASHBOARD FOOTER ===== */
.dashboard-footer[b-tqjdqeybjf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-info[b-tqjdqeybjf] {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #64748b;
}

.footer-info span[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-stats[b-tqjdqeybjf] {
    display: flex;
    gap: 12px;
}

.stat-pill[b-tqjdqeybjf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
}

.stat-pill i[b-tqjdqeybjf] {
    color: #2563eb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
    .main-content-grid[b-tqjdqeybjf] {
        grid-template-columns: 1fr;
    }
    
    .analytics-row[b-tqjdqeybjf] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1200px) {
    .sales-stats-grid[b-tqjdqeybjf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .analytics-row[b-tqjdqeybjf] {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid[b-tqjdqeybjf] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-tqjdqeybjf] {
        padding: 12px;
    }
    
    .dashboard-header[b-tqjdqeybjf] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-right[b-tqjdqeybjf] {
        justify-content: flex-start;
    }
    
    .search-box input[b-tqjdqeybjf] {
        width: 100%;
    }
    
    .quick-actions-bar[b-tqjdqeybjf] {
        padding: 12px;
    }
    
    .filter-bar[b-tqjdqeybjf] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-tqjdqeybjf] {
        width: 100%;
    }
    
    .filter-group input[b-tqjdqeybjf],
    .filter-group select[b-tqjdqeybjf] {
        width: 100%;
    }
    
    .category-panels[b-tqjdqeybjf] {
        grid-template-columns: 1fr;
    }
    
    .sales-stats-grid[b-tqjdqeybjf] {
        grid-template-columns: 1fr;
    }
    
    .footer-info[b-tqjdqeybjf],
    .footer-stats[b-tqjdqeybjf] {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== PRINT ===== */
@media print {
    .dashboard-container[b-tqjdqeybjf] {
        padding: 0;
        background: white;
    }
    
    .quick-actions-bar[b-tqjdqeybjf],
    .filter-bar[b-tqjdqeybjf],
    .header-right[b-tqjdqeybjf],
    .activities-tabs[b-tqjdqeybjf],
    .dashboard-footer[b-tqjdqeybjf] {
        display: none;
    }
    
    .section-card[b-tqjdqeybjf],
    .kpi-card[b-tqjdqeybjf],
    .category-card[b-tqjdqeybjf] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Inventory/GoodsReceiptNote.razor.rz.scp.css */
/* GoodsReceiptNote.razor.css - Compact Modern Layout */

/* ============================================
   CONTAINER & HEADER
   ============================================ */
.form-container[b-xz8vx9rxee] {
    padding: 16px 20px;
    background: #f8fafc;
    min-height: 100vh;
}

.form-header[b-xz8vx9rxee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.form-title[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-title i[b-xz8vx9rxee] {
    font-size: 22px;
    color: #2563eb;
}

.form-title h3[b-xz8vx9rxee] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.form-actions[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grn-search[b-xz8vx9rxee] {
    position: relative;
    display: flex;
    align-items: center;
}

.grn-search i[b-xz8vx9rxee] {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    font-size: 14px;
}

.grn-search input[b-xz8vx9rxee] {
    padding-left: 32px;
    width: 240px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
}

.grn-search input:focus[b-xz8vx9rxee] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    outline: none;
}

/* ============================================
   FORM CARD
   ============================================ */
.form-card[b-xz8vx9rxee] {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.form-card-header[b-xz8vx9rxee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.form-card-title[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
}

.form-card-title i[b-xz8vx9rxee] {
    color: #2563eb;
}

.grn-summary-chips[b-xz8vx9rxee] {
    display: flex;
    gap: 8px;
}

.chip[b-xz8vx9rxee] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chip.qty[b-xz8vx9rxee] {
    background: #dbeafe;
    color: #1d4ed8;
}

.chip.value[b-xz8vx9rxee] {
    background: #dcfce7;
    color: #166534;
}

.chip.status[b-xz8vx9rxee] {
    background: #fef3c7;
    color: #92400e;
}

.chip.status.pending[b-xz8vx9rxee] { background: #fef3c7; color: #92400e; }
.chip.status.approved[b-xz8vx9rxee] { background: #dcfce7; color: #166534; }
.chip.status.posted[b-xz8vx9rxee] { background: #dbeafe; color: #1d4ed8; }
.chip.status.cancelled[b-xz8vx9rxee] { background: #fee2e2; color: #dc2626; }

.form-card-body[b-xz8vx9rxee] {
    padding: 16px;
}

/* ============================================
   GRN FORM GRID
   ============================================ */
.grn-form[b-xz8vx9rxee] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grn-grid[b-xz8vx9rxee] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: end;
}

.grn-cell[b-xz8vx9rxee] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grn-cell.span-2[b-xz8vx9rxee] { grid-column: span 2; }
.grn-cell.span-3[b-xz8vx9rxee] { grid-column: span 3; }
.grn-cell.span-4[b-xz8vx9rxee] { grid-column: span 4; }
.grn-cell.span-6[b-xz8vx9rxee] { grid-column: span 6; }

.grn-cell .form-label[b-xz8vx9rxee] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0;
}

.grn-cell .form-label.required[b-xz8vx9rxee]::after {
    content: " *";
    color: #ef4444;
}

.grn-cell .form-control[b-xz8vx9rxee],
.grn-cell .form-select[b-xz8vx9rxee] {
    height: 36px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.grn-cell .form-control:focus[b-xz8vx9rxee],
.grn-cell .form-select:focus[b-xz8vx9rxee] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ============================================
   ITEMS PANEL
   ============================================ */
.grn-items-panel[b-xz8vx9rxee] {
    margin-top: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.grn-items-head[b-xz8vx9rxee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.grn-items-title[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}

.grn-count[b-xz8vx9rxee] {
    background: #2563eb;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* ============================================
   TABLE STYLES
   ============================================ */
.grn-table[b-xz8vx9rxee] {
    margin: 0;
    font-size: 13px;
}

.grn-table thead th[b-xz8vx9rxee] {
    background: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.grn-table tbody td[b-xz8vx9rxee] {
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
    border-color: #f1f5f9;
    line-height: 1.5;
}

.grn-table tbody tr:hover[b-xz8vx9rxee] {
    background: #f8fafc;
}

.grn-table .form-control-sm[b-xz8vx9rxee] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    height: calc(1.5em + 0.3rem + 2px);
    min-height: calc(1.5em + 0.3rem + 2px);
    line-height: 1.5;
    margin: 0;
    box-sizing: border-box;
}

/* Pierce child components (DecimalInput) whose inner <input> carries its own isolation
   scope, so their controls match the native inputs' compact height and rows stay uniform. */
.grn-table[b-xz8vx9rxee]  .form-control,
.grn-table[b-xz8vx9rxee]  .form-control-sm {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    height: calc(1.5em + 0.3rem + 2px);
    min-height: calc(1.5em + 0.3rem + 2px);
    line-height: 1.5;
    margin: 0;
    box-sizing: border-box;
}

.grn-product-name[b-xz8vx9rxee] {
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.grn-variant-chip[b-xz8vx9rxee] {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.grn-empty[b-xz8vx9rxee] {
    text-align: center;
    padding: 40px 20px !important;
    color: #94a3b8;
}

.grn-empty i[b-xz8vx9rxee] {
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.grn-totals-row[b-xz8vx9rxee] {
    background: #f8fafc !important;
}

.grn-totals-row td[b-xz8vx9rxee] {
    border-top: 2px solid #e2e8f0 !important;
}

/* ============================================
   FORM FOOTER
   ============================================ */
.form-card-footer[b-xz8vx9rxee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-left[b-xz8vx9rxee],
.footer-right[b-xz8vx9rxee] {
    display: flex;
    gap: 8px;
}

/* ============================================
   LIST VIEW
   ============================================ */
.grn-list-head[b-xz8vx9rxee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.grn-list-title[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.grn-list-filters[b-xz8vx9rxee] {
    display: flex;
    gap: 8px;
}

.grn-list-filters .form-select-sm[b-xz8vx9rxee] {
    width: 140px;
    font-size: 12px;
    height: 32px;
}

.grn-code-chip[b-xz8vx9rxee] {
    display: inline-block;
    background: #f1f5f9;
    color: #1e293b;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Consolas', monospace;
}

.grn-vendor[b-xz8vx9rxee] {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   STATS BAR
   ============================================ */
.grn-stats-bar[b-xz8vx9rxee] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.grn-stats-bar .stat[b-xz8vx9rxee] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.grn-stats-bar .stat.pending[b-xz8vx9rxee] { background: #fef3c7; color: #92400e; }
.grn-stats-bar .stat.approved[b-xz8vx9rxee] { background: #dcfce7; color: #166534; }
.grn-stats-bar .stat.posted[b-xz8vx9rxee] { background: #dbeafe; color: #1d4ed8; }
.grn-stats-bar .stat.qty[b-xz8vx9rxee] { background: #e0e7ff; color: #4338ca; }
.grn-stats-bar .stat.value[b-xz8vx9rxee] { background: #fce7f3; color: #be185d; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .grn-grid[b-xz8vx9rxee] {
        grid-template-columns: repeat(6, 1fr);
    }
    .grn-cell.span-2[b-xz8vx9rxee] { grid-column: span 3; }
    .grn-cell.span-3[b-xz8vx9rxee] { grid-column: span 3; }
}

@media (max-width: 768px) {
    .form-container[b-xz8vx9rxee] {
        padding: 12px;
    }
    
    .form-header[b-xz8vx9rxee] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .grn-search input[b-xz8vx9rxee] {
        width: 100%;
    }
    
    .grn-grid[b-xz8vx9rxee] {
        grid-template-columns: 1fr;
    }
    
    .grn-cell.span-2[b-xz8vx9rxee],
    .grn-cell.span-3[b-xz8vx9rxee],
    .grn-cell.span-4[b-xz8vx9rxee],
    .grn-cell.span-6[b-xz8vx9rxee] {
        grid-column: span 1;
    }
    
    .grn-summary-chips[b-xz8vx9rxee] {
        flex-wrap: wrap;
    }
    
    .grn-stats-bar[b-xz8vx9rxee] {
        justify-content: center;
    }
}

/* ===== MODAL STYLING ===== */
.modal-content[b-xz8vx9rxee] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.modal-header[b-xz8vx9rxee] {
    border-radius: 12px 12px 0 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .summary-cards[b-xz8vx9rxee] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grn-container[b-xz8vx9rxee] {
        padding: 12px;
    }

    .grn-header[b-xz8vx9rxee] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-cards[b-xz8vx9rxee] {
        grid-template-columns: 1fr;
    }

    .grn-cards-grid[b-xz8vx9rxee] {
        grid-template-columns: 1fr;
    }

    .form-actions-bar[b-xz8vx9rxee] {
        flex-direction: column;
        gap: 12px;
    }

    .action-group[b-xz8vx9rxee] {
        width: 100%;
        flex-direction: column;
    }

    .list-filters[b-xz8vx9rxee] {
        flex-direction: column;
        align-items: stretch;
    }

    .workflow-progress[b-xz8vx9rxee] {
        justify-content: flex-start;
        padding: 16px;
    }

    .progress-connector[b-xz8vx9rxee] {
        width: 30px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .grn-container[b-xz8vx9rxee] {
        padding: 0;
        background: white;
    }

    .header-actions[b-xz8vx9rxee],
    .list-filters[b-xz8vx9rxee],
    .form-actions-bar[b-xz8vx9rxee],
    .grn-card-footer[b-xz8vx9rxee] {
        display: none;
    }
}
/* /Components/Pages/Inventory/OpeningStock.razor.rz.scp.css */
/* ============================================================
   OPENING STOCK - Items grid polish
   Mirrors the Purchase Order (purchase-order-new) line-item UX
   so inventory entry feels consistent across the app.
   ============================================================ */

/* ===== Items header (title + Matrix/Add actions) ===== */
.os-items-header[b-ly76ht6ktg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 6px;
    border-bottom: 2px solid #e2e8f0;
}

.os-items-header h5[b-ly76ht6ktg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.os-items-header h5 i[b-ly76ht6ktg] {
    color: #1e40af;
}

.os-item-badge[b-ly76ht6ktg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #1e40af;
    border-radius: 11px;
}

.os-items-actions[b-ly76ht6ktg] {
    display: flex;
    gap: 8px;
}

/* ===== Items table ===== */
.os-items-table-wrap[b-ly76ht6ktg] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: visible;
}

.os-items-table[b-ly76ht6ktg] {
    margin-bottom: 0;
}

.os-items-table thead th[b-ly76ht6ktg] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #475569;
    vertical-align: middle;
}

.os-items-table tbody td[b-ly76ht6ktg] {
    vertical-align: middle;
}

/* Highlight rows that still need a variant chosen */
.os-items-table tbody tr.row-pending[b-ly76ht6ktg] {
    background: #fffbeb;
}

.os-items-table tbody tr.row-pending td[b-ly76ht6ktg] {
    border-color: #fde68a;
}

/* ===== Read-only Rate / Amount cell labels ===== */
.os-cell-label[b-ly76ht6ktg] {
    display: inline-block;
    padding: 0.25rem 0.1rem;
    font-size: 0.85rem;
    color: #1e293b;
}

/* ===== Footer total ===== */
.os-items-table tfoot td[b-ly76ht6ktg] {
    font-size: 13px;
    background: #f8fafc;
}

/* Numeric inputs: keep the spinner but right-align for readability */
.os-items-table input[type="number"][b-ly76ht6ktg] {
    text-align: right;
}
/* /Components/Pages/Inventory/PrintGrn.razor.rz.scp.css */
/* GRN Detail Report print page — mirrors the supplier "Detail Report" GRN layout (grayscale bands). */

.grn-print-toolbar[b-3pm73i60so] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

/* ===== Sheet ===== */
.grn-sheet[b-3pm73i60so] {
    width: 210mm;
    max-width: 100%;
    margin: 12px auto;
    padding: 10px 14px 16px;
    background: #fff;
    color: #1a1a1a;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}

/* Each copy (except the last) starts on a new printed page. */
.grn-page-break[b-3pm73i60so] {
    break-after: page;
    page-break-after: always;
}


/* ===== Copy caption ===== */
.grn-copy-caption[b-3pm73i60so] {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #333;
    margin-bottom: 2px;
}

/* ===== Title band ===== */
.grn-title-band[b-3pm73i60so] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 8px;
    margin-bottom: 6px;
}

.grn-report-title[b-3pm73i60so] {
    font-size: 20px;
    font-weight: 700;
}

.grn-report-sub[b-3pm73i60so] {
    font-size: 11px;
    color: #555;
}

.grn-title-right[b-3pm73i60so] {
    text-align: right;
}

.grn-company-name[b-3pm73i60so] {
    font-size: 18px;
    font-weight: 700;
}

/* ===== Section header band (grey) ===== */
.grn-band-head[b-3pm73i60so] {
    display: flex;
    background: #8a8a8a;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.grn-band-head-left[b-3pm73i60so] {
    flex: 0 0 42%;
    padding: 5px 10px;
}

.grn-band-head-right[b-3pm73i60so] {
    flex: 1;
    padding: 5px 10px;
    border-left: 2px solid #fff;
}

/* ===== Supplier + document grid ===== */
.grn-info-grid[b-3pm73i60so] {
    display: flex;
    border: 1px solid #d0d0d0;
    border-top: none;
}

.grn-supplier[b-3pm73i60so] {
    flex: 0 0 42%;
    padding: 8px 10px;
    border-right: 1px solid #d0d0d0;
}

.grn-supplier-name[b-3pm73i60so] {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
}

.grn-supplier-line[b-3pm73i60so] {
    font-size: 11px;
    color: #444;
}

.grn-doc-grid[b-3pm73i60so] {
    flex: 1;
    padding: 8px 10px;
}

.grn-doc-row[b-3pm73i60so] {
    display: grid;
    grid-template-columns: auto 12px 1fr auto 12px 1fr;
    column-gap: 6px;
    align-items: center;
    padding: 2px 0;
    font-size: 12px;
}

.grn-doc-label[b-3pm73i60so] {
    font-weight: 600;
    color: #333;
}

.grn-doc-colon[b-3pm73i60so] {
    text-align: center;
}

.grn-doc-value[b-3pm73i60so] {
    color: #111;
}

/* ===== Items table ===== */
.grn-items[b-3pm73i60so] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 11.5px;
}

.grn-items thead th[b-3pm73i60so] {
    background: #8a8a8a;
    color: #fff;
    font-weight: 600;
    padding: 6px 6px;
    text-align: right;
    border: 1px solid #7a7a7a;
    vertical-align: middle;
}

.grn-items thead th.c-num[b-3pm73i60so],
.grn-items thead th.c-desc[b-3pm73i60so] {
    text-align: left;
}

.grn-items tbody td[b-3pm73i60so] {
    padding: 6px 6px;
    border: 1px solid #d8d8d8;
    text-align: right;
    vertical-align: top;
}

.grn-items tbody td.c-num[b-3pm73i60so],
.grn-items tbody td.c-desc[b-3pm73i60so] {
    text-align: left;
}

.grn-items tbody tr:nth-child(even)[b-3pm73i60so] {
    background: #f4f4f4;
}

.c-num[b-3pm73i60so] { width: 42px; }
.c-desc[b-3pm73i60so] { min-width: 180px; }
.c-qty[b-3pm73i60so] { width: 60px; }
.c-rate[b-3pm73i60so] { width: 70px; }
.c-gst[b-3pm73i60so] { width: 62px; white-space: nowrap; }
.c-amt[b-3pm73i60so] { width: 92px; white-space: nowrap; }

.grn-item-name[b-3pm73i60so] {
    font-weight: 600;
}

.grn-item-hsn[b-3pm73i60so] {
    font-size: 10px;
    color: #666;
}

/* ===== Totals band ===== */
.grn-totals-band[b-3pm73i60so] {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 2px;
}

.grn-total-qty[b-3pm73i60so] {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 14px;
    background: #8a8a8a;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.grn-total-amounts[b-3pm73i60so] {
    flex: 1;
    background: #8a8a8a;
    color: #fff;
    border-left: 2px solid #fff;
    padding: 4px 10px;
}

.grn-total-row[b-3pm73i60so] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 12px;
}

.grn-total-grand[b-3pm73i60so] {
    font-weight: 700;
    font-size: 14px;
    border-top: 1px solid #fff;
    margin-top: 2px;
    padding-top: 4px;
}

/* ===== GST summary ===== */
.grn-gst[b-3pm73i60so] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 11.5px;
}

.grn-gst .grn-gst-title[b-3pm73i60so] {
    background: #8a8a8a;
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 5px;
    border: 1px solid #7a7a7a;
}

.grn-gst thead th[b-3pm73i60so] {
    background: #9a9a9a;
    color: #fff;
    font-weight: 600;
    padding: 6px;
    text-align: right;
    border: 1px solid #8a8a8a;
}

.grn-gst thead th.c-num[b-3pm73i60so],
.grn-gst thead th:nth-child(2)[b-3pm73i60so] {
    text-align: left;
    white-space: nowrap;
}

.grn-gst tbody td[b-3pm73i60so] {
    padding: 6px;
    border: 1px solid #d8d8d8;
    text-align: right;
}

.grn-gst tbody td.c-num[b-3pm73i60so] {
    text-align: left;
}

/* ===== Print rules ===== */
@media print {
    .no-print[b-3pm73i60so] { display: none !important; }

    .grn-sheet[b-3pm73i60so] {
        width: auto;
        margin: 0;
        box-shadow: none;
    }

    .grn-items thead th[b-3pm73i60so],
    .grn-band-head[b-3pm73i60so],
    .grn-band-head-right[b-3pm73i60so],
    .grn-total-qty[b-3pm73i60so],
    .grn-total-amounts[b-3pm73i60so],
    .grn-gst .grn-gst-title[b-3pm73i60so],
    .grn-gst thead th[b-3pm73i60so] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Inventory/PrintQrCodes.razor.rz.scp.css */
/* QR print page — label grid + print-only rules */

.qr-print-toolbar[b-2amtq229n8] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.qr-toolbar-left[b-2amtq229n8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.qr-toolbar-right[b-2amtq229n8] {
    display: flex;
    align-items: center;
}

/* A4 grid: auto-fit columns of ~150px labels */
.qr-sheet[b-2amtq229n8] {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.qr-sheet-a4[b-2amtq229n8] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Label-roll mode: single column of small labels */
.qr-sheet-label[b-2amtq229n8] {
    grid-template-columns: repeat(auto-fill, 220px);
}

.qr-label[b-2amtq229n8] {
    border: 1px solid #111;
    border-radius: 2px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    background: #fff;
    min-height: 96px;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Top: product + size, single bold line like the sample */
.qr-title[b-2amtq229n8] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Middle: QR on the (bottom) left, price to its right */
.qr-mid[b-2amtq229n8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
    min-width: 0;
}

.qr-canvas[b-2amtq229n8] {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hard-constrain whatever qrcodejs renders (img / canvas / table) into the 56px box. */
.qr-canvas img[b-2amtq229n8],
.qr-canvas canvas[b-2amtq229n8],
.qr-canvas table[b-2amtq229n8] {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px;
    max-height: 56px;
    display: block;
}

.qr-price[b-2amtq229n8] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Bottom: SKU (left) + size (right), bold like the sample */
.qr-foot[b-2amtq229n8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.qr-sku[b-2amtq229n8] {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.qr-seq[b-2amtq229n8] {
    font-size: 0.6rem;
}

.qr-source-badge[b-2amtq229n8] {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
}

.src-new[b-2amtq229n8] {
    background: #16a34a;
}

.src-opening[b-2amtq229n8] {
    background: #0ea5e9;
}

/* ===== Print rules ===== */
@media print {
    .no-print[b-2amtq229n8] {
        display: none !important;
    }

    .qr-label[b-2amtq229n8] {
        border: 1px solid #e5e7eb;
    }

    .qr-sheet[b-2amtq229n8] {
        padding: 0;
    }

    /* Force the sample layout: exactly 3 labels per row on the A4 sheet.
       (auto-fill can collapse to a single column in the print context.) */
    .qr-sheet-a4[b-2amtq229n8] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Single-column roll mode keeps one label across. */
    .qr-sheet-label[b-2amtq229n8] {
        grid-template-columns: 1fr !important;
    }

    @page {
        margin: 8mm;
    }
}
/* /Components/Pages/Inventory/ReprintQrLabels.razor.rz.scp.css */
/* Reprint QR labels — selection UI + 25×25mm label layout (A4 5×10 / thermal roll) */

.rq-toolbar[b-tlc9u87l8b] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.rq-toolbar-left[b-tlc9u87l8b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rq-select[b-tlc9u87l8b] {
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.rq-select-row[b-tlc9u87l8b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rq-label-strong[b-tlc9u87l8b] {
    font-weight: 600;
    margin: 0;
}

.rq-seq-input[b-tlc9u87l8b] {
    width: 220px;
}

.rq-hint[b-tlc9u87l8b] {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.35rem;
}

.rq-error[b-tlc9u87l8b] {
    color: #b91c1c;
    font-size: 0.82rem;
    margin-top: 0.35rem;
}

.rq-actions[b-tlc9u87l8b] {
    margin-top: 0.6rem;
    display: flex;
    gap: 0.5rem;
}

/* ===== Label sheet ===== */
.rq-sheet[b-tlc9u87l8b] {
    display: grid;
    padding: 12px;
    background: #fff;
}

/* A4: 5 columns × auto rows. Each cell is one 25mm label with 5mm padding. */
.rq-sheet-a4[b-tlc9u87l8b] {
    grid-template-columns: repeat(5, 35mm);
    gap: 5mm;
    justify-content: center;
}

/* Thermal roll: a single continuous column of labels. */
.rq-sheet-thermal[b-tlc9u87l8b] {
    grid-template-columns: 35mm;
    gap: 3mm;
    justify-content: center;
}

.rq-label[b-tlc9u87l8b] {
    width: 35mm;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 2mm; /* quiet zone */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* QR target: 25mm × 25mm */
.rq-qr[b-tlc9u87l8b] {
    width: 25mm;
    height: 25mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rq-qr img[b-tlc9u87l8b],
.rq-qr canvas[b-tlc9u87l8b] {
    width: 25mm !important;
    height: 25mm !important;
}

.rq-meta[b-tlc9u87l8b] {
    margin-top: 1mm;
    width: 100%;
    font-size: 0.6rem;
    line-height: 1.25;
}

.rq-line[b-tlc9u87l8b] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rq-line span[b-tlc9u87l8b] {
    font-weight: 700;
}

.rq-variant[b-tlc9u87l8b] {
    color: #64748b;
}

/* ===== Print rules ===== */
@media print {
    .no-print[b-tlc9u87l8b] {
        display: none !important;
    }

    .rq-label[b-tlc9u87l8b] {
        border: none;
    }

    .rq-sheet[b-tlc9u87l8b] {
        padding: 0;
    }

    @page {
        size: A4 portrait;
        margin: 8mm;
    }
}
/* /Components/Pages/Masters/HsnMaster.razor.rz.scp.css */
/* ============================================================
   HSN Master - Space-Saving / High-Density Layout
   Uses global design-system tokens (design-system.css)
   ============================================================ */

/* Tighten page chrome for density */
.form-container[b-92p50p254l] { padding: 16px; }
.form-card-body[b-92p50p254l] { padding: 16px; }
.form-card-header[b-92p50p254l] { padding: 12px 16px; }
.form-card-footer[b-92p50p254l] { padding: 12px 16px; }

/* ===== Compact form ===== */
.hsn-form[b-92p50p254l] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hsn-grid[b-92p50p254l] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
}

.hsn-cell[b-92p50p254l] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hsn-cell.span-2[b-92p50p254l] { grid-column: span 2; }
.hsn-cell.span-3[b-92p50p254l] { grid-column: span 3; }
.hsn-cell.span-5[b-92p50p254l] { grid-column: span 5; }
.hsn-cell.span-7[b-92p50p254l] { grid-column: span 7; }

.hsn-cell .form-label[b-92p50p254l] { margin-bottom: 0.2rem; }

/* ===== Default GST rates panel ===== */
.hsn-rate-panel[b-92p50p254l] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    overflow: hidden;
    background: var(--ds-surface, #fff);
}

.hsn-rate-head[b-92p50p254l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-text, #1e293b);
}

.hsn-rate-head i[b-92p50p254l] { color: var(--ds-primary, #1d4ed8); }

.hsn-rate-head small[b-92p50p254l] {
    flex-basis: 100%;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--ds-text-muted, #64748b);
}

.hsn-rate-body[b-92p50p254l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.hsn-rate-field[b-92p50p254l] {
    display: flex;
    flex-direction: column;
    min-width: 92px;
}

.hsn-rate-field label[b-92p50p254l] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hsn-rate-body[b-92p50p254l]  .form-control {
    font-variant-numeric: tabular-nums;
}

.hsn-rate-op[b-92p50p254l] {
    font-weight: 700;
    color: var(--ds-text-muted, #64748b);
    padding-bottom: 0.4rem;
}

.hsn-rate-sep[b-92p50p254l] {
    align-self: stretch;
    width: 1px;
    background: var(--ds-border, #e2e8f0);
    margin: 0 0.2rem;
}

/* ===== Search box (header) ===== */
.hsn-search[b-92p50p254l] {
    position: relative;
    display: flex;
    align-items: center;
}

.hsn-search i[b-92p50p254l] {
    position: absolute;
    left: 0.6rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.hsn-search input[b-92p50p254l] {
    padding-left: 1.9rem;
    min-width: 250px;
}

/* ===== List header ===== */
.hsn-list-head[b-92p50p254l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.hsn-list-title[b-92p50p254l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.hsn-list-title i[b-92p50p254l] { color: var(--ds-primary, #1d4ed8); }

.hsn-count[b-92p50p254l] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 0.72rem;
    text-align: center;
}

/* ===== Dense table ===== */
.hsn-table[b-92p50p254l] {
    margin: 0;
    font-size: 0.83rem;
}

.hsn-table thead th[b-92p50p254l] {
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--ds-primary, #1d4ed8);
}

.hsn-table tbody td[b-92p50p254l] {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
}

.hsn-code-chip[b-92p50p254l] {
    font-weight: 700;
    color: var(--ds-primary-dark, #1e40af);
}

.hsn-desc[b-92p50p254l] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-text-muted, #64748b);
}

.hsn-gst-cell[b-92p50p254l] {
    font-variant-numeric: tabular-nums;
    color: var(--ds-text, #1e293b);
}

.hsn-gst-cess[b-92p50p254l] {
    margin-left: 0.3rem;
    color: var(--ds-amber, #d97706);
    font-size: 0.72rem;
    white-space: nowrap;
}

.hsn-empty[b-92p50p254l] {
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    padding: 2rem 1rem !important;
}

.hsn-empty i[b-92p50p254l] {
    font-size: 1.4rem;
    color: var(--ds-text-subtle, #94a3b8);
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .hsn-cell.span-2[b-92p50p254l],
    .hsn-cell.span-3[b-92p50p254l],
    .hsn-cell.span-5[b-92p50p254l],
    .hsn-cell.span-7[b-92p50p254l] { grid-column: span 6; }

    .hsn-rate-sep[b-92p50p254l] { display: none; }
}

@media (max-width: 576px) {
    .hsn-cell.span-2[b-92p50p254l],
    .hsn-cell.span-3[b-92p50p254l],
    .hsn-cell.span-5[b-92p50p254l],
    .hsn-cell.span-7[b-92p50p254l] { grid-column: span 12; }
}
/* /Components/Pages/Masters/OfferMaster.razor.rz.scp.css */
/* Offer Master — product picker trigger button in the mapping grid */

.ppk-trigger[b-kdczs6w3rv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 31px;
    overflow: hidden;
    white-space: nowrap;
}

.ppk-trigger-code[b-kdczs6w3rv] {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4f46e5;
    background: #eef2ff;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ppk-trigger-name[b-kdczs6w3rv] {
    font-size: 0.82rem;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/Masters/ProductMaster.razor.rz.scp.css */
/* ============================================================
   PRODUCT MASTER — scoped, space-efficient ERP layout
   Built on the global design tokens in css/design-system.css.
   High density, zero wasted space, flat modern aesthetic.
   ============================================================ */

/* ---------- Page shell ---------- */
.pm-page[b-8prl2jjbhv] {
    padding: 0.75rem 1rem 1.25rem;
}

/* Repeat price-batch rows under a variant (Color/Size/SKU shown once on the first row) */
.pm-batch-subrow > td[b-8prl2jjbhv] {
    background-color: var(--bs-light, #f8f9fa);
}

/* ---------- View Variants modal: compact, low-scroll grid ---------- */
.pm-variants-grid[b-8prl2jjbhv] {
    font-size: 0.78rem;
}

.pm-variants-grid th[b-8prl2jjbhv],
.pm-variants-grid td[b-8prl2jjbhv] {
    padding: 0.2rem 0.4rem;
    vertical-align: middle;
    white-space: nowrap;
}

.pm-variants-grid .badge[b-8prl2jjbhv] {
    font-size: 0.68rem;
    padding: 0.2em 0.45em;
}

.pm-variants-grid small[b-8prl2jjbhv] {
    font-size: 0.68rem;
    line-height: 1.1;
}

.pm-variants-grid .pm-thumb-sm[b-8prl2jjbhv] {
    width: 26px;
    height: 26px;
}


/* ---------- Sticky compact toolbar ---------- */
.pm-toolbar[b-8prl2jjbhv] {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.25rem 0.6rem;
    margin-bottom: 0.85rem;
    background: var(--ds-app-bg, #f5f6f8);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

/* Enhanced sticky toolbar when in form/edit mode */
.pm-toolbar-sticky[b-8prl2jjbhv] {
    position: fixed;
    top: 44px; /* Account for main navigation bar height */
    left: 0;
    right: 0;
    z-index: 1020; /* Lower than nav (1030) and dropdown (1040) */
    background: #fff;
    padding: 0.75rem 1.5rem;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 2px solid #e9ecef;
}

/* Add padding to page content when toolbar is fixed */
.pm-page:has(.pm-toolbar-sticky)[b-8prl2jjbhv] {
    padding-top: 5rem;
}

.pm-toolbar-title[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.pm-toolbar-ico[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-md, 8px);
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.pm-toolbar-text[b-8prl2jjbhv] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.pm-toolbar-text h1[b-8prl2jjbhv] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text, #1e293b);
}

.pm-toolbar-text span[b-8prl2jjbhv] {
    font-size: 0.74rem;
    color: var(--ds-text-muted, #64748b);
}

.pm-toolbar-actions[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Search ---------- */
.pm-search[b-8prl2jjbhv] {
    position: relative;
    display: flex;
    align-items: center;
}

.pm-search > i[b-8prl2jjbhv] {
    position: absolute;
    left: 0.65rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.pm-search .form-control[b-8prl2jjbhv] {
    width: 280px;
    max-width: 46vw;
    height: 34px;
    padding: 0.25rem 1.8rem 0.25rem 2rem;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.82rem;
}

.pm-search-clear[b-8prl2jjbhv] {
    position: absolute;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--ds-surface-muted, #f1f3f6);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.65rem;
    cursor: pointer;
}

.pm-search-clear:hover[b-8prl2jjbhv] {
    background: var(--ds-crimson-soft, #fef2f2);
    color: var(--ds-crimson, #dc2626);
}

.pm-toolbar-actions .btn[b-8prl2jjbhv] {
    height: 34px;
    padding: 0 0.85rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* ---------- Editor card ---------- */
.form-card[b-8prl2jjbhv] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
}

.form-card-header[b-8prl2jjbhv] {
    padding: 0.6rem 1rem;
    background: var(--ds-primary-dark, #1e40af);
}

.form-card-title[b-8prl2jjbhv] {
    font-size: 0.92rem;
}

.form-card-body[b-8prl2jjbhv] {
    padding: 0.9rem 1.05rem 0.5rem;
}

/* ---------- Compact section header ---------- */
.pm-sec[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.65rem 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ds-grid-line, #edf0f4);
}

.pm-sec:first-child[b-8prl2jjbhv] {
    margin-top: 0.15rem;
}

.pm-sec > i[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ds-radius-sm, 4px);
    background: var(--ds-primary-soft, #eff4ff);
    color: var(--ds-primary, #1d4ed8);
    font-size: 0.8rem;
}

.pm-sec > span[b-8prl2jjbhv] {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text, #1e293b);
}

.pm-sec-count[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 0.35rem;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.pm-sec-actions[b-8prl2jjbhv] {
    margin-left: auto;
    display: inline-flex;
    gap: 0.4rem;
}

.pm-sec-actions .btn[b-8prl2jjbhv] {
    height: 28px;
    padding: 0 0.6rem;
    font-size: 0.76rem;
}

/* ---------- Dense field grid ---------- */
.form-card-body .row[b-8prl2jjbhv] {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0;
}

.form-card-body .mb-3[b-8prl2jjbhv] {
    margin-bottom: 0.55rem !important;
}

.form-card-body .form-label[b-8prl2jjbhv] {
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--ds-text-muted, #64748b);
}

.form-card-body .form-control:not(.form-control-sm)[b-8prl2jjbhv],
.form-card-body .form-select:not(.form-select-sm)[b-8prl2jjbhv] {
    min-height: 34px;
    padding: 0.3rem 0.55rem;
    font-size: 0.84rem;
    border-radius: var(--ds-radius, 6px);
}

.form-card-body textarea.form-control[b-8prl2jjbhv] {
    min-height: 0;
    line-height: 1.35;
}

.form-card-body .input-group .btn[b-8prl2jjbhv] {
    padding: 0.2rem 0.5rem;
}

.form-card-body .form-label small[b-8prl2jjbhv],
.form-card-body small.text-muted[b-8prl2jjbhv],
.form-card-body small.text-info[b-8prl2jjbhv] {
    font-size: 0.68rem;
}

/* Inline marketing-flag checkboxes on a single tidy row */
.form-card-body .form-check-inline[b-8prl2jjbhv] {
    margin-right: 0.85rem;
}

.form-card-body .form-check-label[b-8prl2jjbhv] {
    font-size: 0.8rem;
    text-transform: none;
    color: var(--ds-text, #1e293b);
}

/* ---------- Compact hint strip (replaces bulky info alerts) ---------- */
.pm-hint[b-8prl2jjbhv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    margin: 0.1rem 0 0.6rem;
    border: 1px solid var(--ds-primary-softer, #dce7ff);
    border-left: 3px solid var(--ds-primary, #1d4ed8);
    border-radius: var(--ds-radius, 6px);
    background: var(--ds-primary-soft, #eff4ff);
    font-size: 0.76rem;
    color: var(--ds-text, #1e293b);
    line-height: 1.4;
}

.pm-hint > i[b-8prl2jjbhv] {
    color: var(--ds-primary, #1d4ed8);
    margin-top: 0.1rem;
}

.pm-hint code[b-8prl2jjbhv] {
    padding: 0.05rem 0.3rem;
    border-radius: var(--ds-radius-sm, 4px);
    background: #fff;
    border: 1px solid var(--ds-primary-softer, #dce7ff);
    color: var(--ds-primary-dark, #1e40af);
    font-size: 0.72rem;
}

.pm-hint-muted[b-8prl2jjbhv] {
    border-color: var(--ds-border, #e2e8f0);
    border-left-color: var(--ds-text-subtle, #94a3b8);
    background: var(--ds-surface-alt, #fafbfc);
    color: var(--ds-text-muted, #64748b);
}

.pm-hint-muted > i[b-8prl2jjbhv] {
    color: var(--ds-text-subtle, #94a3b8);
}

/* ---------- Empty state ---------- */
.pm-empty[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-md, 8px);
    background: var(--ds-surface-alt, #fafbfc);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.82rem;
}

.pm-empty > i[b-8prl2jjbhv] {
    font-size: 1.05rem;
    color: var(--ds-text-subtle, #94a3b8);
}

/* ---------- Variant editor table density ---------- */
.form-card-body .table > :not(caption) > * > *[b-8prl2jjbhv] {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
}

.form-card-body .table .form-control-sm[b-8prl2jjbhv],
.form-card-body .table .form-select-sm[b-8prl2jjbhv] {
    min-height: 30px;
    font-size: 0.78rem;
    padding: 0.15rem 0.35rem;
}

/* ---------- Sticky form footer ---------- */
.pm-form-footer[b-8prl2jjbhv] {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.6rem 1.05rem;
    background: var(--ds-surface, #fff);
    border-top: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 0 0 var(--ds-radius-md, 8px) var(--ds-radius-md, 8px);
}

.pm-form-footer .btn[b-8prl2jjbhv] {
    height: 36px;
    padding: 0 1.1rem;
    font-size: 0.85rem;
}

/* ---------- Product list ---------- */
.pm-list[b-8prl2jjbhv] {
    overflow: hidden;
}

.pm-list-head[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.pm-list-title[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ds-text, #1e293b);
}

.pm-list-title i[b-8prl2jjbhv] {
    color: var(--ds-primary, #1d4ed8);
}

.pm-list-count[b-8prl2jjbhv] {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-primary-soft, #eff4ff);
    color: var(--ds-primary-dark, #1e40af);
    font-size: 0.72rem;
    font-weight: 700;
}

.pm-list-body[b-8prl2jjbhv] {
    padding: 0;
}

.pm-list-body .table[b-8prl2jjbhv] {
    font-size: 0.82rem;
}

.pm-list-body .table > thead th[b-8prl2jjbhv] {
    padding: 0.45rem 0.6rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pm-list-body .table > tbody > tr > td[b-8prl2jjbhv] {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
}

.pm-list-body .btn-group .btn[b-8prl2jjbhv] {
    padding: 0.2rem 0.45rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .pm-toolbar[b-8prl2jjbhv] {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-toolbar-actions[b-8prl2jjbhv] {
        justify-content: space-between;
    }

    .pm-search .form-control[b-8prl2jjbhv] {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
}

/* ---------- Pricing Engine panel (Markup / Markdown) ---------- */
.pricing-panel[b-8prl2jjbhv] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 8px;
    background: var(--ds-surface, #fff);
    overflow: hidden;
}

.pricing-panel-head[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(0deg, rgba(13, 110, 253, 0.04), rgba(13, 110, 253, 0.08));
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    font-weight: 600;
}

.pricing-panel-head i[b-8prl2jjbhv] {
    color: var(--bs-primary, #0d6efd);
}

.pricing-panel-head small[b-8prl2jjbhv] {
    font-weight: 400;
    color: var(--ds-text-muted, #64748b);
    margin-left: auto;
}

.pricing-panel-body[b-8prl2jjbhv] {
    padding: 0.75rem;
}

.pricing-result[b-8prl2jjbhv] {
    color: var(--bs-success, #198754);
}

.pricing-actions[b-8prl2jjbhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.pricing-chip[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--ds-app-bg, #f1f5f9);
    color: var(--ds-text, #334155);
    font-size: 0.8rem;
    margin-right: auto;
}

.pricing-ledger[b-8prl2jjbhv] {
    font-size: 0.82rem;
}

/* ---------- Pricing Engine rows: keep labels, inputs, toggle & helper text aligned ---------- */
/* Each column is a flex column so the label / control / hint stack predictably. */
.pricing-row > [class*="col-"][b-8prl2jjbhv] {
    display: flex;
    flex-direction: column;
}

/* Uniform label band: two lines tall, text pinned to the bottom so single-line and
   wrapping labels (e.g. "Applied On (MRP)") all share one baseline above the inputs. */
.pricing-row .form-label[b-8prl2jjbhv] {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    min-height: 2.4em;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    font-size: 0.8rem;
    font-weight: 600;
}

/* All controls share the same height and sit on one line. */
.pricing-row .form-control[b-8prl2jjbhv],
.pricing-row .input-group[b-8prl2jjbhv] {
    height: calc(1.5em + 0.75rem + 2px);
}

.pricing-row .input-group .form-control[b-8prl2jjbhv] {
    height: auto;
}

/* The Markup / Markdown toggle matches the input height exactly. */
.pricing-row .btn-group[b-8prl2jjbhv] {
    height: calc(1.5em + 0.75rem + 2px);
}

.pricing-row .btn-group .btn[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

/* Reserve a consistent helper-text band so rows with/without hints stay aligned. */
.pricing-row > [class*="col-"] > small[b-8prl2jjbhv] {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.1;
}

/* Numeric controls read right-aligned in the engine. */
.pricing-row .form-control[type="text"][b-8prl2jjbhv],
.pricing-row .form-control[type="number"][b-8prl2jjbhv] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Product / Variant images ---------- */
/* Small thumbnails used in the product list and variants modal. */
.pm-thumb[b-8prl2jjbhv] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: #f8fafc;
    flex: 0 0 auto;
}

.pm-thumb-sm[b-8prl2jjbhv] {
    width: 34px;
    height: 34px;
}

.pm-thumb-empty[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.1rem;
}

/* Product-level upload zone + gallery. */
.pm-images[b-8prl2jjbhv] {
    margin-bottom: 1rem;
}

.pm-upload[b-8prl2jjbhv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem;
    border: 2px dashed var(--ds-border, #cbd5e1);
    border-radius: 10px;
    background: var(--ds-app-bg, #f8fafc);
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0.75rem;
}

.pm-upload:hover[b-8prl2jjbhv] {
    border-color: var(--bs-primary, #0d6efd);
    background: #eff6ff;
}

.pm-upload.disabled[b-8prl2jjbhv] {
    opacity: 0.6;
    pointer-events: none;
}

.pm-upload i[b-8prl2jjbhv] {
    font-size: 1.4rem;
    color: var(--bs-primary, #0d6efd);
}

.pm-upload small[b-8prl2jjbhv] {
    font-size: 0.7rem;
}

/* Hide the raw file input; the styled label is the click target. */
.pm-upload[b-8prl2jjbhv]  input[type="file"] {
    display: none;
}

.pm-gallery[b-8prl2jjbhv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pm-gallery-item[b-8prl2jjbhv] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: #f8fafc;
}

.pm-gallery-item.is-default[b-8prl2jjbhv] {
    border-color: var(--bs-warning, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.pm-gallery-item img[b-8prl2jjbhv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-gallery-badge[b-8prl2jjbhv] {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bs-warning, #f59e0b);
    color: #fff;
}

.pm-gallery-actions[b-8prl2jjbhv] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}

.pm-gallery-item:hover .pm-gallery-actions[b-8prl2jjbhv] {
    opacity: 1;
}

.pm-gallery-actions .btn[b-8prl2jjbhv] {
    padding: 0.1rem 0.35rem;
    line-height: 1;
}

/* Inline per-variant image strip in the variants grid. */
.pm-variant-images[b-8prl2jjbhv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.pm-variant-thumb[b-8prl2jjbhv] {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
}

.pm-variant-thumb img[b-8prl2jjbhv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-variant-thumb-del[b-8prl2jjbhv] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    line-height: 13px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.6rem;
    padding: 0;
    cursor: pointer;
}

.pm-variant-upload[b-8prl2jjbhv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px dashed var(--ds-border, #cbd5e1);
    color: var(--bs-primary, #0d6efd);
    cursor: pointer;
    background: #f8fafc;
}

.pm-variant-upload:hover[b-8prl2jjbhv] {
    border-color: var(--bs-primary, #0d6efd);
    background: #eff6ff;
}

.pm-variant-upload.disabled[b-8prl2jjbhv] {
    opacity: 0.6;
    pointer-events: none;
}

.pm-variant-upload[b-8prl2jjbhv]  input[type="file"] {
    display: none;
}

/* ============================================================
   Category (Menu) tree picker + autocomplete
   Styles now live globally in wwwroot/css/forms-global.css (.cat-picker)
   so Product Master and Menu Management share one source of truth.
   ============================================================ */





/* /Components/Pages/Masters/RackMaster.razor.rz.scp.css */
/* Search box: icon overlaid on the left of the input, aligned in a single row. */
.qc-search[b-v1f5p2b6kp] {
    position: relative;
    display: flex;
    align-items: center;
}

.qc-search i[b-v1f5p2b6kp] {
    position: absolute;
    left: 0.6rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.qc-search input[b-v1f5p2b6kp] {
    padding-left: 1.9rem;
    min-width: 250px;
}
/* /Components/Pages/Masters/TariffMaster.razor.rz.scp.css */
/* ============================================================
Tariff Master - GST Rate Panel
============================================================ */

.gst-panel[b-a0q28kn31r] {
    border: 1px solid var(--ds-primary, #1d4ed8);
    border-radius: var(--ds-radius-lg, 12px);
    overflow: hidden;
    background: var(--ds-surface, #ffffff);
}

.gst-panel-head[b-a0q28kn31r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gst-panel-head i[b-a0q28kn31r] {
    font-size: 1rem;
}

.gst-panel-head small[b-a0q28kn31r] {
    flex-basis: 100%;
    font-weight: 400;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
}

.gst-panel-body[b-a0q28kn31r] {
    padding: 0.9rem;
}

/* ------------------------------------------------------------
   Single full-width, bottom-aligned rate row:
   [ Total ] = [ CGST ] + [ SGST ] | [ IGST ] | [ Cess ]
   Cells grow to fill the row (no wasted space on the right),
   each input carries a single one-line label, and the % suffix
   sits clear of the (hidden) number spinners.
   ------------------------------------------------------------ */
.gst-rate-strip[b-a0q28kn31r] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: var(--ds-head-bg, #f4f6f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
}

/* Each rate field grows to share the full row width evenly. */
.gst-cell[b-a0q28kn31r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
}

.gst-cell-cap[b-a0q28kn31r] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gst-cell--total[b-a0q28kn31r] {
    flex: 0 0 130px;
}

/* Input + % suffix as one unit. */
.gst-input[b-a0q28kn31r] {
    position: relative;
    display: flex;
    align-items: center;
}

.gst-input .form-control[b-a0q28kn31r] {
    width: 100%;
    text-align: right;
    padding-right: 1.55rem;
    font-variant-numeric: tabular-nums;
}

/* Hide the native number spinners so they never overlap the % suffix. */
.gst-input .form-control[type=number][b-a0q28kn31r] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.gst-input .form-control[type=number][b-a0q28kn31r]::-webkit-outer-spin-button,
.gst-input .form-control[type=number][b-a0q28kn31r]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gst-unit[b-a0q28kn31r] {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-text-muted, #94a3b8);
    pointer-events: none;
}

/* The headline Total cell stands out slightly. */
.gst-cell--total .form-control[b-a0q28kn31r] {
    font-weight: 700;
    font-size: 1.05rem;
    border-color: var(--ds-primary, #1d4ed8);
}

.gst-cell--total .gst-cell-cap[b-a0q28kn31r] {
    color: var(--ds-primary-dark, #1e40af);
    font-weight: 700;
}

/* Operators (= , +) sit on the input baseline between cells. */
.gst-op[b-a0q28kn31r] {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--ds-text-muted, #64748b);
    line-height: 1;
    padding-bottom: 0.5rem;
}

.gst-op--eq[b-a0q28kn31r] {
    font-size: 1.1rem;
    color: var(--ds-primary, #1d4ed8);
}

/* Vertical separators between Intra / Inter / Additional sections. */
.gst-vsep[b-a0q28kn31r] {
    flex: 0 0 1px;
    align-self: stretch;
    width: 1px;
    background: var(--ds-border, #e2e8f0);
    margin: 0.1rem 0;
}

.gst-hint[b-a0q28kn31r] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--ds-text-muted, #64748b);
}

.gst-hint i[b-a0q28kn31r] {
    color: #f59e0b;
}

/* Live summary chips */
.gst-summary[b-a0q28kn31r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gst-summary-chip[b-a0q28kn31r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.75rem;
}

.gst-summary-chip strong[b-a0q28kn31r] {
    font-variant-numeric: tabular-nums;
}

.gst-summary-chip.gst-cess[b-a0q28kn31r] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

/* Tablet / mobile: allow wrapping and drop the inline structure cues. */
@media (max-width: 768px) {
    .gst-rate-strip[b-a0q28kn31r] {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .gst-cell[b-a0q28kn31r] {
        flex: 1 1 30%;
    }

    .gst-cell--total[b-a0q28kn31r] {
        flex: 1 1 100%;
    }

    .gst-vsep[b-a0q28kn31r],
    .gst-op--eq[b-a0q28kn31r] {
        display: none;
    }
}


/* /Components/Pages/Reports/AnalyticsDashboard.razor.rz.scp.css */
.analytics-dashboard[b-e1d5bwqei6] {
    padding: 1rem 1.25rem;
}

.analytics-header[b-e1d5bwqei6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.analytics-title[b-e1d5bwqei6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.analytics-title > i[b-e1d5bwqei6] {
    font-size: 2rem;
    color: #0d6efd;
}

.analytics-title h3[b-e1d5bwqei6] {
    margin: 0;
    font-weight: 600;
}

.analytics-subtitle[b-e1d5bwqei6] {
    margin: 0;
    color: #6c757d;
    font-size: 0.85rem;
}

.analytics-actions[b-e1d5bwqei6] {
    display: flex;
    gap: 0.5rem;
}

.kpi-grid[b-e1d5bwqei6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.kpi-card[b-e1d5bwqei6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #0d6efd;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover[b-e1d5bwqei6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.kpi-icon[b-e1d5bwqei6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.kpi-body[b-e1d5bwqei6] {
    display: flex;
    flex-direction: column;
}

.kpi-label[b-e1d5bwqei6] {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kpi-value[b-e1d5bwqei6] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #212529;
}

.kpi-primary[b-e1d5bwqei6] { border-left-color: #0d6efd; }
.kpi-primary .kpi-icon[b-e1d5bwqei6] { background: rgba(13,110,253,.1); color:#0d6efd; }

.kpi-success[b-e1d5bwqei6] { border-left-color: #198754; }
.kpi-success .kpi-icon[b-e1d5bwqei6] { background: rgba(25,135,84,.1); color:#198754; }

.kpi-info[b-e1d5bwqei6] { border-left-color: #0dcaf0; }
.kpi-info .kpi-icon[b-e1d5bwqei6] { background: rgba(13,202,240,.12); color:#0aa2c0; }

.kpi-warning[b-e1d5bwqei6] { border-left-color: #ffc107; }
.kpi-warning .kpi-icon[b-e1d5bwqei6] { background: rgba(255,193,7,.15); color:#cc9a06; }

.kpi-danger[b-e1d5bwqei6] { border-left-color: #dc3545; }
.kpi-danger .kpi-icon[b-e1d5bwqei6] { background: rgba(220,53,69,.1); color:#dc3545; }

.kpi-secondary[b-e1d5bwqei6] { border-left-color: #6c757d; }
.kpi-secondary .kpi-icon[b-e1d5bwqei6] { background: rgba(108,117,125,.1); color:#6c757d; }

.kpi-dark[b-e1d5bwqei6] { border-left-color: #343a40; }
.kpi-dark .kpi-icon[b-e1d5bwqei6] { background: rgba(52,58,64,.1); color:#343a40; }

.analytics-hint[b-e1d5bwqei6] {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
}
/* /Components/Pages/Reports/ReportsDashboard.razor.rz.scp.css */
/* ==================== REPORTS DASHBOARD STYLES ==================== */

.reports-dashboard[b-pbnhjs8f4n] {
    padding: 0;
    background: #f8fafc;
    min-height: calc(100vh - 60px);
}

/* ==================== HEADER SECTION ==================== */
.dashboard-header[b-pbnhjs8f4n] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    padding: 24px 32px;
    margin-bottom: 0;
}

.header-content[b-pbnhjs8f4n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}

.header-title[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.header-title i[b-pbnhjs8f4n] {
    font-size: 2.5rem;
    opacity: 0.9;
}

.header-title h1[b-pbnhjs8f4n] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.header-subtitle[b-pbnhjs8f4n] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.header-actions[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search Box */
.search-box[b-pbnhjs8f4n] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i.bi-search[b-pbnhjs8f4n] {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 1rem;
}

.search-box input[b-pbnhjs8f4n] {
    width: 320px;
    padding: 10px 40px 10px 42px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
}

.search-box input:focus[b-pbnhjs8f4n] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    width: 380px;
}

.search-box input[b-pbnhjs8f4n]::placeholder {
    color: #94a3b8;
}

.clear-search[b-pbnhjs8f4n] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
}

.clear-search:hover[b-pbnhjs8f4n] {
    color: #1e293b;
}

/* View Toggle */
.view-toggle[b-pbnhjs8f4n] {
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px;
}

.view-toggle button[b-pbnhjs8f4n] {
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle button:hover[b-pbnhjs8f4n] {
    color: white;
}

.view-toggle button.active[b-pbnhjs8f4n] {
    background: white;
    color: #2563eb;
}

/* ==================== QUICK STATS BAR ==================== */
.quick-stats-bar[b-pbnhjs8f4n] {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px 32px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.stat-item[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}

.stat-item i[b-pbnhjs8f4n] {
    font-size: 1.25rem;
    color: #64748b;
}

.stat-value[b-pbnhjs8f4n] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-pbnhjs8f4n] {
    font-size: 0.8rem;
    color: #64748b;
}

/* ==================== REPORTS GRID (CARD VIEW) ==================== */
.reports-grid[b-pbnhjs8f4n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Category Card */
.category-card[b-pbnhjs8f4n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.category-card:hover[b-pbnhjs8f4n] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.category-header[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

.category-icon[b-pbnhjs8f4n] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.category-title[b-pbnhjs8f4n] {
    flex: 1;
    margin-left: 14px;
}

.category-title h3[b-pbnhjs8f4n] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.report-count[b-pbnhjs8f4n] {
    font-size: 0.75rem;
    color: #64748b;
}

.expand-btn[b-pbnhjs8f4n] {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expand-btn:hover[b-pbnhjs8f4n] {
    background: #f1f5f9;
}

.expand-btn i[b-pbnhjs8f4n] {
    transition: transform 0.3s ease;
}

.expand-btn.expanded i[b-pbnhjs8f4n] {
    transform: rotate(180deg);
}

/* Category Body */
.category-body[b-pbnhjs8f4n] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.category-body.expanded[b-pbnhjs8f4n] {
    max-height: 500px;
}

.report-list[b-pbnhjs8f4n] {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.report-item[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}

.report-item:hover[b-pbnhjs8f4n] {
    background: #f8fafc;
}

.report-link[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    color: #334155;
    text-decoration: none;
    font-size: 0.875rem;
    flex: 1;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.report-link:hover[b-pbnhjs8f4n] {
    color: #2563eb;
}

.report-link i[b-pbnhjs8f4n] {
    font-size: 1rem;
    color: #64748b;
    width: 20px;
    text-align: center;
}

.report-link:hover i[b-pbnhjs8f4n] {
    color: #2563eb;
}

.badge-new[b-pbnhjs8f4n] {
    background: #22c55e;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.report-actions[b-pbnhjs8f4n] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.report-item:hover .report-actions[b-pbnhjs8f4n] {
    opacity: 1;
}

.action-btn[b-pbnhjs8f4n] {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover[b-pbnhjs8f4n] {
    background: #f1f5f9;
    color: #475569;
}

.action-btn.favorited[b-pbnhjs8f4n] {
    color: #f59e0b;
}

/* Category Color Classes */
.category-stock .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.category-inventory .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.category-summary .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #14b8a6, #10b981); }
.category-sales .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.category-sales-detail .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #ef4444, #f43f5e); }
.category-purchase .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.category-transfer .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #ec4899, #f472b6); }
.category-accounts .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #22c55e, #84cc16); }
.category-payroll .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #f97316, #fb923c); }
.category-booking .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #6366f1, #818cf8); }
.category-audit .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #64748b, #94a3b8); }
.category-analytics .category-icon[b-pbnhjs8f4n] { background: linear-gradient(135deg, #0891b2, #22d3ee); }

/* ==================== TABLE VIEW ==================== */
.reports-table-container[b-pbnhjs8f4n] {
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
}

.reports-table[b-pbnhjs8f4n] {
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.reports-table thead[b-pbnhjs8f4n] {
    background: #f8fafc;
}

.reports-table th[b-pbnhjs8f4n] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

.reports-table tbody tr[b-pbnhjs8f4n] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.reports-table tbody tr:hover[b-pbnhjs8f4n] {
    background: #f8fafc;
}

.reports-table tbody tr:last-child[b-pbnhjs8f4n] {
    border-bottom: none;
}

.reports-table td[b-pbnhjs8f4n] {
    padding: 14px 16px;
    vertical-align: middle;
}

.category-badge[b-pbnhjs8f4n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
}

.category-badge.category-stock[b-pbnhjs8f4n] { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.category-badge.category-inventory[b-pbnhjs8f4n] { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.category-badge.category-summary[b-pbnhjs8f4n] { background: linear-gradient(135deg, #14b8a6, #10b981); }
.category-badge.category-sales[b-pbnhjs8f4n] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.category-badge.category-sales-detail[b-pbnhjs8f4n] { background: linear-gradient(135deg, #ef4444, #f43f5e); }
.category-badge.category-purchase[b-pbnhjs8f4n] { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.category-badge.category-transfer[b-pbnhjs8f4n] { background: linear-gradient(135deg, #ec4899, #f472b6); }
.category-badge.category-accounts[b-pbnhjs8f4n] { background: linear-gradient(135deg, #22c55e, #84cc16); }
.category-badge.category-payroll[b-pbnhjs8f4n] { background: linear-gradient(135deg, #f97316, #fb923c); }
.category-badge.category-booking[b-pbnhjs8f4n] { background: linear-gradient(135deg, #6366f1, #818cf8); }
.category-badge.category-audit[b-pbnhjs8f4n] { background: linear-gradient(135deg, #64748b, #94a3b8); }
.category-badge.category-analytics[b-pbnhjs8f4n] { background: linear-gradient(135deg, #0891b2, #22d3ee); }

.report-link-table[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1e293b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.report-link-table:hover[b-pbnhjs8f4n] {
    color: #2563eb;
}

.report-link-table i[b-pbnhjs8f4n] {
    color: #64748b;
}

.filter-tag[b-pbnhjs8f4n] {
    display: inline-block;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #475569;
    margin: 2px 4px 2px 0;
}

.filter-tag.more[b-pbnhjs8f4n] {
    background: #e2e8f0;
    color: #64748b;
}

.td-actions[b-pbnhjs8f4n] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-go[b-pbnhjs8f4n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-go:hover[b-pbnhjs8f4n] {
    background: #1d4ed8;
    color: white;
}

.btn-star[b-pbnhjs8f4n] {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-star:hover[b-pbnhjs8f4n] {
    background: #fef3c7;
    color: #f59e0b;
}

.btn-star.active[b-pbnhjs8f4n] {
    color: #f59e0b;
}

/* ==================== RECENT & FAVORITES SECTIONS ==================== */
.recent-section[b-pbnhjs8f4n],
.favorites-section[b-pbnhjs8f4n] {
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
}

.recent-section h4[b-pbnhjs8f4n],
.favorites-section h4[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.recent-reports[b-pbnhjs8f4n],
.favorite-reports[b-pbnhjs8f4n] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.recent-card[b-pbnhjs8f4n],
.favorite-card[b-pbnhjs8f4n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.recent-card:hover[b-pbnhjs8f4n],
.favorite-card:hover[b-pbnhjs8f4n] {
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.recent-card i[b-pbnhjs8f4n],
.favorite-card i[b-pbnhjs8f4n] {
    color: #64748b;
}

.favorite-card[b-pbnhjs8f4n] {
    position: relative;
    padding-right: 36px;
}

.remove-favorite[b-pbnhjs8f4n] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.favorite-card:hover .remove-favorite[b-pbnhjs8f4n] {
    opacity: 1;
}

.remove-favorite:hover[b-pbnhjs8f4n] {
    background: #fee2e2;
    color: #ef4444;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .reports-grid[b-pbnhjs8f4n] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        padding: 16px;
    }
    
    .search-box input[b-pbnhjs8f4n] {
        width: 240px;
    }
    
    .search-box input:focus[b-pbnhjs8f4n] {
        width: 280px;
    }
    
    .quick-stats-bar[b-pbnhjs8f4n] {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-pbnhjs8f4n] {
        padding: 16px;
    }
    
    .header-content[b-pbnhjs8f4n] {
        flex-direction: column;
        gap: 16px;
    }
    
    .header-actions[b-pbnhjs8f4n] {
        width: 100%;
        justify-content: space-between;
    }
    
    .search-box[b-pbnhjs8f4n] {
        flex: 1;
    }
    
    .search-box input[b-pbnhjs8f4n] {
        width: 100%;
    }
    
    .reports-grid[b-pbnhjs8f4n] {
        grid-template-columns: 1fr;
    }
    
    .quick-stats-bar[b-pbnhjs8f4n] {
        justify-content: flex-start;
    }
    
    .reports-table-container[b-pbnhjs8f4n] {
        padding: 16px;
        overflow-x: auto;
    }
    
    .reports-table[b-pbnhjs8f4n] {
        min-width: 700px;
    }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn-b-pbnhjs8f4n {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.category-card[b-pbnhjs8f4n] {
    animation: fadeIn-b-pbnhjs8f4n 0.3s ease forwards;
}

.category-card:nth-child(1)[b-pbnhjs8f4n] { animation-delay: 0.05s; }
.category-card:nth-child(2)[b-pbnhjs8f4n] { animation-delay: 0.1s; }
.category-card:nth-child(3)[b-pbnhjs8f4n] { animation-delay: 0.15s; }
.category-card:nth-child(4)[b-pbnhjs8f4n] { animation-delay: 0.2s; }
.category-card:nth-child(5)[b-pbnhjs8f4n] { animation-delay: 0.25s; }
.category-card:nth-child(6)[b-pbnhjs8f4n] { animation-delay: 0.3s; }
.category-card:nth-child(7)[b-pbnhjs8f4n] { animation-delay: 0.35s; }
.category-card:nth-child(8)[b-pbnhjs8f4n] { animation-delay: 0.4s; }
.category-card:nth-child(9)[b-pbnhjs8f4n] { animation-delay: 0.45s; }
.category-card:nth-child(10)[b-pbnhjs8f4n] { animation-delay: 0.5s; }
.category-card:nth-child(11)[b-pbnhjs8f4n] { animation-delay: 0.55s; }
.category-card:nth-child(12)[b-pbnhjs8f4n] { animation-delay: 0.6s; }

/* ==================== SCROLLBAR STYLING ==================== */
.category-body[b-pbnhjs8f4n]::-webkit-scrollbar {
    width: 6px;
}

.category-body[b-pbnhjs8f4n]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.category-body[b-pbnhjs8f4n]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.category-body[b-pbnhjs8f4n]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* /Components/Pages/Sales/PrintInvoice.razor.rz.scp.css */
/* Sales invoice print page — thermal POS (80mm) receipt, mirrors billing.jpeg. A4 = wider variant. */

.inv-toolbar[b-wv9idsruk7] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.inv-toolbar-right[b-wv9idsruk7] {
    display: flex;
    align-items: center;
}

/* ===== Sheet ===== */
.inv-sheet[b-wv9idsruk7] {
    background: #fff;
    color: #000;
    margin: 12px auto;
    font-family: 'Consolas', 'Courier New', monospace;
}

.inv-pos[b-wv9idsruk7] {
    width: 80mm;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.35;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}

.inv-a4[b-wv9idsruk7] {
    width: 148mm;
    padding: 18px 24px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}

/* Dashed rule separators like the printed bill */
.inv-rule[b-wv9idsruk7] {
    border-top: 1px dashed #000;
    margin: 5px 0;
}

/* ===== Header (centered) ===== */
.inv-header[b-wv9idsruk7] {
    text-align: center;
}

.inv-company-name[b-wv9idsruk7] {
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-a4 .inv-company-name[b-wv9idsruk7] {
    font-size: 20px;
}

.inv-company-line[b-wv9idsruk7] {
    font-size: 10px;
}

.inv-a4 .inv-company-line[b-wv9idsruk7] {
    font-size: 12px;
}

/* ===== Bill meta ===== */
.inv-meta[b-wv9idsruk7] {
    font-size: 10px;
}

.inv-a4 .inv-meta[b-wv9idsruk7] {
    font-size: 12px;
}

.inv-meta > div[b-wv9idsruk7] {
    display: flex;
    justify-content: space-between;
}

.inv-meta span[b-wv9idsruk7] {
    color: #000;
    font-weight: 600;
}

/* ===== Items ===== */
.inv-items[b-wv9idsruk7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.inv-a4 .inv-items[b-wv9idsruk7] {
    font-size: 12px;
}

.inv-items thead th[b-wv9idsruk7] {
    border-bottom: 1px solid #000;
    padding: 2px 3px;
    text-align: right;
    font-weight: 700;
    color: #000;
    background: transparent !important;
}

.inv-items thead th.inv-c-desc[b-wv9idsruk7] {
    text-align: left;
}

.inv-items tbody td[b-wv9idsruk7] {
    padding: 3px 3px;
    vertical-align: top;
    text-align: right;
}

.inv-items tbody td.inv-c-desc[b-wv9idsruk7] {
    text-align: left;
}

/* HSN & GST moved into the variant sub-line, freeing width for the item value. */
.inv-c-desc[b-wv9idsruk7] { width: auto; }
.inv-c-rate[b-wv9idsruk7] { width: 60px; }
.inv-c-qty[b-wv9idsruk7] { width: 36px; }
.inv-c-amt[b-wv9idsruk7] { width: 70px; }

.inv-item-name[b-wv9idsruk7] {
    font-weight: 700;
}

.inv-item-sub[b-wv9idsruk7] {
    font-size: 9px;
    color: #333;
}

.inv-a4 .inv-item-sub[b-wv9idsruk7] {
    font-size: 10px;
}

.inv-offer[b-wv9idsruk7] {
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
}

.inv-a4 .inv-offer[b-wv9idsruk7] {
    font-size: 10px;
}

/* Offer merged inline with the item name (e.g. "Kurthi (1+1 Offer)") — keeps the line compact. */
.inv-offer-inline[b-wv9idsruk7] {
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    margin-left: 3px;
}

/* ===== Summary totals ===== */
.inv-totals[b-wv9idsruk7] {
    font-size: 11px;
}

.inv-a4 .inv-totals[b-wv9idsruk7] {
    font-size: 13px;
}

.inv-total-row[b-wv9idsruk7] {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.inv-grand[b-wv9idsruk7] {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: 800;
    font-size: 13px;
    margin-top: 3px;
    padding: 3px 0;
}

.inv-a4 .inv-grand[b-wv9idsruk7] {
    font-size: 16px;
}

/* ===== GST breakdown ===== */
.inv-gst-table[b-wv9idsruk7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 7px;
    color: #000;
}

.inv-a4 .inv-gst-table[b-wv9idsruk7] {
    font-size: 9px;
}

.inv-gst-table th[b-wv9idsruk7],
.inv-gst-table td[b-wv9idsruk7] {
    border-bottom: 1px dotted #999;
    padding: 2px 3px;
    text-align: left;
    color: #000;
}

.inv-gst-table th[b-wv9idsruk7] {
    font-weight: 700;
    border-bottom: 1px solid #000;
    color: #000;
    background: transparent !important;
}

.inv-gst-table .num[b-wv9idsruk7] {
    text-align: right;
}

/* ===== Payment ===== */
.inv-payment[b-wv9idsruk7] {
    font-size: 11px;
}

.inv-a4 .inv-payment[b-wv9idsruk7] {
    font-size: 13px;
}

.inv-payment > div[b-wv9idsruk7] {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.inv-payment span[b-wv9idsruk7] {
    font-weight: 600;
}

/* ===== Footer notes ===== */
.inv-notes[b-wv9idsruk7] {
    text-align: center;
    margin-top: 8px;
    border-top: 1px dashed #000;
    padding-top: 6px;
}

.inv-qr[b-wv9idsruk7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
}

.inv-qr .qr-canvas[b-wv9idsruk7] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-qr .qr-canvas img[b-wv9idsruk7],
.inv-qr .qr-canvas canvas[b-wv9idsruk7] {
    width: 72px;
    height: 72px;
}

.inv-qr-caption[b-wv9idsruk7] {
    font-size: 8px;
    letter-spacing: 0.3px;
    color: #333;
}



.inv-note-policy[b-wv9idsruk7] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.inv-a4 .inv-note-policy[b-wv9idsruk7] {
    font-size: 11px;
}

.inv-note-thanks[b-wv9idsruk7] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 5px;
}

.inv-a4 .inv-note-thanks[b-wv9idsruk7] {
    font-size: 14px;
}

/* ===== Print rules ===== */
@media print {
    .no-print[b-wv9idsruk7] {
        display: none !important;
    }

    .inv-sheet[b-wv9idsruk7] {
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Lock the receipt to the physical 80mm thermal roll width. */
    .inv-pos[b-wv9idsruk7] {
        width: 80mm !important;
        max-width: 80mm !important;
        padding: 0 3mm !important;
    }

    /* A4 variant prints on a normal page. */
    .inv-a4[b-wv9idsruk7] {
        width: auto !important;
    }
}

/* Thermal roll page: 80mm wide, continuous height, no printer margins. */
@page {
    size: 80mm auto;
    margin: 0;
}
/* /Components/Pages/Sales/SalesInvoiceNew.razor.rz.scp.css */
/* ============================================================
   SALES INVOICE - MODERN POS DESIGN
   Consistent with PurchaseOrder_NEW styling
   ============================================================ */

/* ===== PAGE CONTAINER ===== */
.pos-container[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    background: #f1f5f9;
    font-size: 13px;
    overflow: hidden;
}

/* ===== OFFER SAVINGS BANNER ===== */
.offer-savings-banner[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #dcfce7, #bbf7d0);
    color: #166534;
    font-size: 13px;
    border: 1px solid #86efac;
}

.offer-savings-banner i[b-xt45sxd2xk] {
    font-size: 15px;
}

.offer-stock-warning[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 12.5px;
    border: 1px solid #fcd34d;
}

.offer-stock-warning i[b-xt45sxd2xk] {
    font-size: 15px;
}



/* ===== COMPACT HEADER BAR ===== */
.pos-header[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    color: #fff;
    flex-shrink: 0;
}

.header-left[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.id-block[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    padding: 4px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    min-width: 80px;
}

.id-label[b-xt45sxd2xk] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.id-value[b-xt45sxd2xk] {
    font-size: 15px;
    font-weight: 700;
}

.field-inline[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-inline label[b-xt45sxd2xk] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 0.3px;
}

.field-inline .form-control[b-xt45sxd2xk],
.field-inline .form-select[b-xt45sxd2xk] {
    height: 28px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 100px;
}

/* Type Pills */
.type-pills[b-xt45sxd2xk] {
    display: flex;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.type-pills .pill[b-xt45sxd2xk] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.type-pills .pill.active[b-xt45sxd2xk] {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.type-pills .pill:hover:not(.active)[b-xt45sxd2xk] {
    background: rgba(255,255,255,0.1);
}

/* Customer Search */
.header-center[b-xt45sxd2xk] {
    flex: 1;
    position: relative;
    max-width: 340px;
}

.customer-search-box[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.95);
    padding: 4px 10px;
    border-radius: 5px;
}

.customer-search-box i[b-xt45sxd2xk] {
    color: #64748b;
    font-size: 14px;
}

.customer-input[b-xt45sxd2xk] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    padding: 4px 0;
    min-width: 140px;
    color: #1e293b;
}

.customer-input:focus[b-xt45sxd2xk] {
    outline: none;
}

.customer-input[b-xt45sxd2xk]::placeholder {
    color: #94a3b8;
}

.customer-badge[b-xt45sxd2xk] {
    background: #10b981;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clear-btn[b-xt45sxd2xk], .add-btn[b-xt45sxd2xk] {
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.clear-btn:hover[b-xt45sxd2xk] { color: #dc2626; }
.add-btn:hover[b-xt45sxd2xk] { color: #1d4ed8; }

.customer-dropdown[b-xt45sxd2xk] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    margin-top: 4px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.customer-dropdown .dropdown-item[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.customer-dropdown .dropdown-item:hover[b-xt45sxd2xk] {
    background: #f8fafc;
}

.customer-dropdown .name[b-xt45sxd2xk] {
    font-weight: 600;
    color: #1e293b;
}

.customer-dropdown .phone[b-xt45sxd2xk] {
    color: #64748b;
    font-size: 11px;
}

/* Total Display - Compact & Clear */
.header-total[b-xt45sxd2xk] {
    margin-left: auto;
}

.total-block[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 20px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
}

.total-label[b-xt45sxd2xk] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.total-value[b-xt45sxd2xk] {
    font-size: 20px;
    font-weight: 800;
    color: #a7f3d0;
}

/* Header Actions - Button Style like PO */
.header-actions[b-xt45sxd2xk] {
    display: flex;
    gap: 6px;
    margin-left: 16px;
}

.header-actions .btn[b-xt45sxd2xk] {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-actions .btn-outline-light[b-xt45sxd2xk] {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.header-actions .btn-outline-light:hover[b-xt45sxd2xk] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

.held-badge[b-xt45sxd2xk] {
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 8px;
    margin-left: 4px;
}

/* ===== QUICK ENTRY BAR ===== */
.quick-entry-bar[b-xt45sxd2xk] {
    padding: 6px 16px;
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
    flex-shrink: 0;
}

.quick-entry-box[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 600px;
}

.quick-entry-box i[b-xt45sxd2xk] {
    color: #92400e;
    font-size: 16px;
}

.quick-input[b-xt45sxd2xk] {
    flex: 1;
    height: 32px;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
}

.quick-input:focus[b-xt45sxd2xk] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.quick-entry-box kbd[b-xt45sxd2xk] {
    background: #92400e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

/* ===== ALERTS ===== */
.pos-alert[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
}

.pos-alert.error[b-xt45sxd2xk] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.pos-alert.success[b-xt45sxd2xk] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.pos-alert .close-btn[b-xt45sxd2xk] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    padding: 4px;
}

/* ===== MAIN BODY ===== */
.pos-body[b-xt45sxd2xk] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    flex: 1;
    overflow: hidden;
}

/* ===== ITEMS PANEL - Matches PO Style ===== */
.items-panel[b-xt45sxd2xk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.items-header[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.items-title[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
}

.items-title i[b-xt45sxd2xk] {
    color: #3b82f6;
}

.item-badge[b-xt45sxd2xk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #3b82f6;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.items-actions[b-xt45sxd2xk] {
    display: flex;
    gap: 6px;
}

.items-actions .btn[b-xt45sxd2xk] {
    padding: 4px 10px;
    font-size: 11px;
}

/* ===== ITEMS TABLE - Consistent with PO ===== */
.items-table-wrap[b-xt45sxd2xk] {
    flex: 1;
    overflow: auto;
}

.items-table[b-xt45sxd2xk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.items-table thead[b-xt45sxd2xk] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.items-table thead th[b-xt45sxd2xk] {
    background: #1e40af;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 6px;
    text-align: left;
    white-space: nowrap;
}

.items-table tbody td[b-xt45sxd2xk] {
    padding: 6px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.items-table tbody tr:hover[b-xt45sxd2xk] {
    background: #f8fafc;
}

.items-table tbody tr.row-pending[b-xt45sxd2xk] {
    background: #fffbeb;
}

/* Column widths - Consistent sizing */
.th-idx[b-xt45sxd2xk], .td-idx[b-xt45sxd2xk] { width: 20px; text-align: left; color: #94a3b8; padding-left: 8px !important; }
.th-code[b-xt45sxd2xk], .td-code[b-xt45sxd2xk] { width: 150px; }
.th-product[b-xt45sxd2xk], .td-product[b-xt45sxd2xk] { min-width: 180px; }
.th-variant[b-xt45sxd2xk], .td-variant[b-xt45sxd2xk] { width: 90px; }
.th-qty[b-xt45sxd2xk], .td-qty[b-xt45sxd2xk] { width: 70px; text-align: right; }
.th-rate[b-xt45sxd2xk], .td-rate[b-xt45sxd2xk] { width: 75px; text-align: right; }
.th-disc[b-xt45sxd2xk], .td-disc[b-xt45sxd2xk] { width: 70px; text-align: right; }
.th-amount[b-xt45sxd2xk], .td-amount[b-xt45sxd2xk] { width: 90px; text-align: right; }
.th-act[b-xt45sxd2xk], .td-act[b-xt45sxd2xk] { width: 36px; text-align: center; }

/* Table inputs */
.items-table .form-control[b-xt45sxd2xk] {
    height: 26px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.items-table .form-control:focus[b-xt45sxd2xk] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.code-input[b-xt45sxd2xk] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 11px !important;
}

.qty-input[b-xt45sxd2xk] {
    text-align: center;
    font-weight: 700;
    color: #0891b2;
    width: 60px;
}

.disc-input[b-xt45sxd2xk] {
    text-align: center;
    color: #dc2626;
    width: 60px;
}

/* Product display in grid */
.product-display[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-name[b-xt45sxd2xk] {
    flex: 1;
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clear-product[b-xt45sxd2xk] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
}

.clear-product:hover[b-xt45sxd2xk] {
    color: #dc2626;
}

/* Variant tags - consistent with PO */
.variant-tags[b-xt45sxd2xk] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag-attr[b-xt45sxd2xk] {
    display: inline-block;
    padding: 2px 6px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.line-rate[b-xt45sxd2xk] {
    font-weight: 600;
    color: #475569;
    font-size: 11px;
}

.line-total[b-xt45sxd2xk] {
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

/* Delete button */
.btn-delete[b-xt45sxd2xk] {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete:hover[b-xt45sxd2xk] {
    background: #fee2e2;
    color: #dc2626;
}

/* Empty state */
.empty-row td[b-xt45sxd2xk] {
    padding: 40px 20px !important;
}

.empty-hint[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
}

.empty-hint i[b-xt45sxd2xk] {
    font-size: 32px;
    opacity: 0.5;
}

/* Table footer */
.items-table tfoot td[b-xt45sxd2xk] {
    padding: 10px 6px;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    font-weight: 600;
    font-size: 11px;
}

.foot-summary[b-xt45sxd2xk] {
    display: flex;
    gap: 16px;
    padding-left: 8px;
}

.summary-stat[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
}

.foot-idx[b-xt45sxd2xk] { width: 20px; text-align: left; padding-left: 8px !important; }
.foot-code[b-xt45sxd2xk] { width: 150px; }
.foot-product[b-xt45sxd2xk] { min-width: 180px; }
.foot-variant[b-xt45sxd2xk] { width: 90px; }
.foot-qty[b-xt45sxd2xk] { width: 70px; text-align: center; }
.foot-rate[b-xt45sxd2xk] { width: 75px; }
.foot-disc[b-xt45sxd2xk] { width: 70px; text-align: right; color: #dc2626; }
.foot-total[b-xt45sxd2xk] { width: 90px; text-align: right; color: #059669; font-size: 13px; }
.foot-act[b-xt45sxd2xk] { width: 36px; }

/* ===== SUMMARY PANEL ===== */
.summary-panel[b-xt45sxd2xk] {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* Customer Card */
.customer-card[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    border-radius: 8px;
    color: #fff;
}

.card-icon[b-xt45sxd2xk] {
    font-size: 28px;
    opacity: 0.9;
}

.card-info[b-xt45sxd2xk] {
    flex: 1;
    min-width: 0;
}

.card-name[b-xt45sxd2xk] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.card-phone[b-xt45sxd2xk] {
    font-size: 11px;
    opacity: 0.9;
}

.card-gst[b-xt45sxd2xk] {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Summary Section */
.summary-section[b-xt45sxd2xk] {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.summary-row[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
}

.summary-row.bold[b-xt45sxd2xk] {
    font-weight: 700;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed #e2e8f0;
}

.summary-row.tax[b-xt45sxd2xk] {
    color: #64748b;
    font-size: 11px;
    padding-left: 8px;
}

.summary-row.sub[b-xt45sxd2xk] {
    font-size: 11px;
    color: #94a3b8;
}

.summary-row.editable[b-xt45sxd2xk] {
    align-items: center;
}

.edit-group[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.summary-input[b-xt45sxd2xk] {
    width: 50px;
    height: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
}

.summary-input:focus[b-xt45sxd2xk] {
    outline: none;
    border-color: #3b82f6;
}

.suffix[b-xt45sxd2xk] {
    font-weight: 600;
    color: #64748b;
    font-size: 11px;
}

.summary-divider[b-xt45sxd2xk] {
    border-top: 1px solid #f1f5f9;
    margin: 6px 0;
}

/* Charges Grid */
.charges-grid[b-xt45sxd2xk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
}

.charge-item[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.charge-item label[b-xt45sxd2xk] {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
}

.charge-item input[b-xt45sxd2xk] {
    height: 26px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 11px;
    text-align: right;
}

.charge-item input:focus[b-xt45sxd2xk] {
    outline: none;
    border-color: #3b82f6;
}

/* Grand Total Card */
.grand-total-card[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 8px;
}

.grand-total-card .label[b-xt45sxd2xk] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #15803d;
}

.grand-total-card .value[b-xt45sxd2xk] {
    font-size: 20px;
    font-weight: 800;
    color: #15803d;
}

/* Return Credit & Net Payable */
.return-credit[b-xt45sxd2xk], .net-payable[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f0fdf4;
    border-radius: 6px;
    font-size: 12px;
}

.net-payable[b-xt45sxd2xk] {
    font-weight: 700;
}

/* Payment Section */
.payment-section[b-xt45sxd2xk] {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.payment-row[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.payment-row label[b-xt45sxd2xk] {
    font-weight: 600;
    color: #475569;
}

.paid-input[b-xt45sxd2xk] {
    width: 100px;
    height: 32px;
    border: 2px solid #10b981;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: #15803d;
}

.paid-input:focus[b-xt45sxd2xk] {
    outline: none;
    background: #dcfce7;
}

.balance-row[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #dcfce7;
    border-radius: 6px;
}

.balance-row.has-balance[b-xt45sxd2xk] {
    background: #fee2e2;
}

.balance-row span:first-child[b-xt45sxd2xk] {
    font-weight: 600;
}

.balance-value[b-xt45sxd2xk] {
    font-size: 16px;
    font-weight: 800;
    color: #15803d;
}

.balance-row.has-balance .balance-value[b-xt45sxd2xk] {
    color: #dc2626;
}

/* Quick Actions */
.quick-actions[b-xt45sxd2xk] {
    display: flex;
    gap: 8px;
}

.qa-btn[b-xt45sxd2xk] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.qa-btn:hover[b-xt45sxd2xk] {
    border-color: #3b82f6;
    color: #3b82f6;
}

.qa-btn:disabled[b-xt45sxd2xk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== FOOTER RIBBON ===== */
.pos-footer[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: #1e293b;
    color: #fff;
    flex-shrink: 0;
}

.shortcuts-ribbon[b-xt45sxd2xk] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.shortcut[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.shortcut:hover[b-xt45sxd2xk] {
    background: rgba(255,255,255,0.1);
}

.shortcut.highlight[b-xt45sxd2xk] {
    background: rgba(245, 158, 11, 0.2);
}

.shortcut kbd[b-xt45sxd2xk] {
    background: #475569;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.shortcut span[b-xt45sxd2xk] {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
}

.footer-info[b-xt45sxd2xk] {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.user-info[b-xt45sxd2xk], .time-info[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== MODALS ===== */
.customer-selection-list[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-selection-item[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.customer-selection-item:hover[b-xt45sxd2xk] {
    border-color: #1d4ed8;
    background: #f9fafb;
}

.customer-selection-avatar[b-xt45sxd2xk] {
    font-size: 2rem;
    color: #9ca3af;
}

.customer-selection-details[b-xt45sxd2xk] {
    flex: 1;
}

.customer-selection-name[b-xt45sxd2xk] {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.customer-selection-info[b-xt45sxd2xk] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.info-item[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.customer-selection-action[b-xt45sxd2xk] {
    color: #10b981;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.customer-selection-item:hover .customer-selection-action[b-xt45sxd2xk] {
    opacity: 1;
}

/* Held Invoices Panel */
.held-invoices-overlay[b-xt45sxd2xk] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}

.held-invoices-panel[b-xt45sxd2xk] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.held-invoices-header[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
}

.header-title[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title h5[b-xt45sxd2xk] {
    margin: 0;
    font-size: 16px;
}

.held-invoices-body[b-xt45sxd2xk] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.held-invoices-list[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.held-invoice-card[b-xt45sxd2xk] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}

.held-invoice-card.warning[b-xt45sxd2xk] {
    border-color: #fca5a5;
    background: #fef2f2;
}

.held-invoice-card.caution[b-xt45sxd2xk] {
    border-color: #fde68a;
    background: #fffbeb;
}

.held-invoice-header[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hold-reference[b-xt45sxd2xk] {
    font-weight: 700;
    color: #1e293b;
}

.time-elapsed[b-xt45sxd2xk] {
    font-size: 11px;
}

.held-invoice-body[b-xt45sxd2xk] {
    font-size: 12px;
}

.customer-info[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.customer-name[b-xt45sxd2xk] {
    font-weight: 600;
}

.customer-mobile[b-xt45sxd2xk] {
    color: #64748b;
}

.invoice-stats[b-xt45sxd2xk] {
    display: flex;
    gap: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.invoice-amount[b-xt45sxd2xk] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.amount-value[b-xt45sxd2xk] {
    color: #059669;
}

.hold-reason[b-xt45sxd2xk] {
    margin-top: 8px;
    padding: 6px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 11px;
    color: #64748b;
}

.held-invoice-actions[b-xt45sxd2xk] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.held-invoices-footer[b-xt45sxd2xk] {
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

/* Loading & Empty States */
.loading-state[b-xt45sxd2xk], .empty-state[b-xt45sxd2xk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #94a3b8;
}

.loading-state i[b-xt45sxd2xk], .empty-state i[b-xt45sxd2xk] {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Product Chooser Modal */
.product-chooser[b-xt45sxd2xk] {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.product-chooser .modal-header[b-xt45sxd2xk] {
    background: #1e40af;
    color: #fff;
    border-bottom: none;
}

.product-chooser .modal-header .btn-close[b-xt45sxd2xk] {
    filter: brightness(0) invert(1);
}

.product-chooser .modal-header h6[b-xt45sxd2xk] {
    color: #fff;
}

.product-chooser .modal-header small[b-xt45sxd2xk] {
    color: rgba(255,255,255,0.8);
}

.product-chooser .modal-footer[b-xt45sxd2xk] {
    background: #1e293b;
    color: #fff;
    border-top: none;
}

.product-chooser .modal-footer small[b-xt45sxd2xk] {
    color: rgba(255,255,255,0.9);
}

.product-chooser .modal-footer kbd[b-xt45sxd2xk] {
    background: #475569;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
}

.product-chooser-list[b-xt45sxd2xk] {
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
}

.product-chooser-row[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s;
    background: #fff;
}

.product-chooser-row:hover[b-xt45sxd2xk] {
    background: #f8fafc;
}

.product-chooser-row.active[b-xt45sxd2xk] {
    background: #dbeafe;
    border-left: 3px solid #2563eb;
}

.pc-thumb[b-xt45sxd2xk] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pc-thumb img[b-xt45sxd2xk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-thumb-fallback[b-xt45sxd2xk] {
    color: #94a3b8;
    font-size: 24px;
}

.pc-left[b-xt45sxd2xk] {
    flex: 1;
    min-width: 0;
}

.pc-name[b-xt45sxd2xk] {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.pc-sub[b-xt45sxd2xk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
}

.pc-variant[b-xt45sxd2xk] {
    background: #e0e7ff;
    color: #4338ca;
    padding: 1px 6px;
    border-radius: 4px;
}

.pc-right[b-xt45sxd2xk] {
    text-align: right;
    flex-shrink: 0;
}

.pc-stock[b-xt45sxd2xk] {
    font-size: 11px;
    margin-bottom: 4px;
}

.pc-stock.in[b-xt45sxd2xk] { color: #15803d; }
.pc-stock.out[b-xt45sxd2xk] { color: #dc2626; }

.pc-price[b-xt45sxd2xk] {
    font-weight: 700;
    color: #059669;
    font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .pos-body[b-xt45sxd2xk] {
        flex-direction: column;
    }
    
    .summary-panel[b-xt45sxd2xk] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .summary-section[b-xt45sxd2xk],
    .payment-section[b-xt45sxd2xk],
    .grand-total-card[b-xt45sxd2xk] {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .pos-header[b-xt45sxd2xk] {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-center[b-xt45sxd2xk] {
        order: 10;
        width: 100%;
        max-width: none;
    }
    
    .shortcuts-ribbon[b-xt45sxd2xk] {
        display: none;
    }
}

/* ===== STOCK VALIDATION STYLES ===== */

/* Row with stock error - highlight entire row */
.row-stock-error[b-xt45sxd2xk] {
    background-color: #fef2f2 !important;
    animation: stockErrorPulse-b-xt45sxd2xk 2s ease-in-out;
}

.row-stock-error:hover[b-xt45sxd2xk] {
    background-color: #fee2e2 !important;
}

/* Auto-generated free-item line from a "buy X get Y" offer (zero-rate, no GST). */
.items-table tbody tr.row-free[b-xt45sxd2xk] {
    background-color: #ecfdf5 !important;
}

.items-table tbody tr.row-free:hover[b-xt45sxd2xk] {
    background-color: #d1fae5 !important;
}

.items-table tbody tr.row-free .line-total[b-xt45sxd2xk],
.items-table tbody tr.row-free .line-rate[b-xt45sxd2xk] {
    color: #059669;
    font-weight: 600;
}

@keyframes stockErrorPulse-b-xt45sxd2xk {
    0% { background-color: #fecaca; }
    50% { background-color: #fef2f2; }
    100% { background-color: #fef2f2; }
}

/* Stock badge in product display */
.stock-badge[b-xt45sxd2xk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
}

.stock-badge.stock-ok[b-xt45sxd2xk] {
    background: #dcfce7;
    color: #15803d;
}

.stock-badge.stock-low[b-xt45sxd2xk] {
    background: #fee2e2;
    color: #dc2626;
    animation: stockBadgePulse-b-xt45sxd2xk 1.5s ease-in-out infinite;
}

@keyframes stockBadgePulse-b-xt45sxd2xk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Stock error hint message below product name */
.stock-error-hint[b-xt45sxd2xk] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #dc2626;
    font-size: 11px;
    margin-top: 4px;
    padding: 3px 6px;
    background: #fee2e2;
    border-radius: 4px;
    animation: errorSlideIn-b-xt45sxd2xk 0.3s ease-out;
}

.offer-input[b-xt45sxd2xk] {
    margin-top: 4px;
    font-size: 11px;
    height: 24px;
    padding: 2px 6px;
    border: 1px dashed #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.offer-input[b-xt45sxd2xk]::placeholder {
    color: #d1a054;
    font-style: italic;
}

.offer-badge[b-xt45sxd2xk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #059669;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
}

/* Engine-applied offer banner on the buy line — read-only label, not an input. */
.offer-badge.applied[b-xt45sxd2xk] {
    margin-left: 0;
    margin-top: 4px;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #c4b5fd;
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Flexible free-line variant picker — cashier selects the exact colour/size taken. */
.offer-variant-pick[b-xt45sxd2xk] {
    margin-top: 5px;
    padding: 6px 8px;
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    border-radius: 6px;
}

.offer-variant-hint[b-xt45sxd2xk] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
    margin-bottom: 4px;
}

@keyframes errorSlideIn-b-xt45sxd2xk {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quantity input with error */
.qty-input.input-error[b-xt45sxd2xk] {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

.qty-input.input-error:focus[b-xt45sxd2xk] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}
/* /Components/Pages/Transactions/LrDetails.razor.rz.scp.css */
/* ============================================================
   LR Details - Space-Saving / High-Density Layout
   Uses global design-system tokens (design-system.css)
   Matches HsnMaster design pattern
   ============================================================ */

/* Tighten page chrome for density — full width, minimal gutters (POS-style) */
.form-container[b-u9pkweoa0t] { padding: 10px 14px; }
.form-card-body[b-u9pkweoa0t] { padding: 12px; }
.form-card-header[b-u9pkweoa0t] { padding: 8px 14px; }
.form-card-footer[b-u9pkweoa0t] { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.footer-left[b-u9pkweoa0t] { display: flex; gap: 8px; }
.footer-right[b-u9pkweoa0t] { display: flex; gap: 8px; }

.form-card[b-u9pkweoa0t] { margin-bottom: 0.75rem; }

/* ===== Compact form grid (12-column like HSN) ===== */
.lr-form[b-u9pkweoa0t] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lr-grid[b-u9pkweoa0t] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem 0.6rem;
}

.lr-cell[b-u9pkweoa0t] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lr-cell.span-2[b-u9pkweoa0t] { grid-column: span 2; }
.lr-cell.span-3[b-u9pkweoa0t] { grid-column: span 3; }
.lr-cell.span-4[b-u9pkweoa0t] { grid-column: span 4; }
.lr-cell.span-6[b-u9pkweoa0t] { grid-column: span 6; }
.lr-cell.span-12[b-u9pkweoa0t] { grid-column: span 12; }

/* Compact labels & inputs for a dense, professional POS feel */
.lr-cell .form-label[b-u9pkweoa0t] {
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
}

.lr-form .form-control[b-u9pkweoa0t],
.lr-form .form-select[b-u9pkweoa0t] {
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    min-height: 0;
    height: calc(1.5em + 0.6rem + 2px);
}

.lr-form textarea.form-control[b-u9pkweoa0t] { height: auto; }

/* Responsive: collapse the 12-col grid gracefully on narrow screens without h-scroll */
@media (max-width: 992px) {
    .lr-cell.span-2[b-u9pkweoa0t],
    .lr-cell.span-3[b-u9pkweoa0t] { grid-column: span 4; }
    .lr-cell.span-4[b-u9pkweoa0t],
    .lr-cell.span-6[b-u9pkweoa0t] { grid-column: span 6; }
    .lr-cell.span-12[b-u9pkweoa0t] { grid-column: span 12; }
}

/* ===== Search box (header) ===== */
.lr-search[b-u9pkweoa0t] {
    position: relative;
    display: flex;
    align-items: center;
}

.lr-search i[b-u9pkweoa0t] {
    position: absolute;
    left: 0.6rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.lr-search input[b-u9pkweoa0t] {
    padding-left: 1.9rem;
    min-width: 250px;
}

/* ===== Summary chips in card header ===== */
.lr-summary-chips[b-u9pkweoa0t] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lr-summary-chips .chip[b-u9pkweoa0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.lr-summary-chips .chip.bundles[b-u9pkweoa0t] {
    background: #e0e7ff;
    color: #4338ca;
}

.lr-summary-chips .chip.verified[b-u9pkweoa0t] {
    background: #dcfce7;
    color: #15803d;
}

.lr-summary-chips .chip.status[b-u9pkweoa0t] {
    background: #f1f5f9;
    color: #475569;
}

.lr-summary-chips .chip.chip-dispatched[b-u9pkweoa0t] { background: #f3e8ff; color: #7c3aed; }
.lr-summary-chips .chip.chip-intransit[b-u9pkweoa0t] { background: #fef3c7; color: #92400e; }
.lr-summary-chips .chip.chip-received[b-u9pkweoa0t] { background: #cffafe; color: #0891b2; }
.lr-summary-chips .chip.chip-qc[b-u9pkweoa0t] { background: #dbeafe; color: #1d4ed8; }
.lr-summary-chips .chip.chip-closed[b-u9pkweoa0t] { background: #dcfce7; color: #15803d; }

/* ===== List header ===== */
.lr-list-head[b-u9pkweoa0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.lr-list-title[b-u9pkweoa0t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.lr-list-title i[b-u9pkweoa0t] { color: var(--ds-primary, #1d4ed8); }

.lr-list-filters[b-u9pkweoa0t] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lr-list-filters select[b-u9pkweoa0t] {
    min-width: 120px;
}

.lr-count[b-u9pkweoa0t] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 0.72rem;
    text-align: center;
}

/* ===== Dense table ===== */
.lr-table[b-u9pkweoa0t] {
    margin: 0;
    font-size: 0.82rem;
    width: 100%;
}

.lr-table thead th[b-u9pkweoa0t] {
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--ds-primary, #1d4ed8);
}

.lr-table tbody td[b-u9pkweoa0t] {
    padding: 0.25rem 0.6rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ds-grid-line, #edf0f4);
}

.lr-table tbody tr:nth-child(even) > td[b-u9pkweoa0t] { background-color: var(--ds-surface-alt, #fafbfc); }
.lr-table tbody tr:hover > td[b-u9pkweoa0t] { background-color: var(--ds-primary-soft, #eff4ff); }

.lr-code-chip[b-u9pkweoa0t] {
    font-weight: 700;
    color: var(--ds-primary-dark, #1e40af);
}

.lr-vendor[b-u9pkweoa0t] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-text-muted, #64748b);
}

.lr-empty[b-u9pkweoa0t] {
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    padding: 2rem 1rem !important;
}

.lr-empty i[b-u9pkweoa0t] {
    font-size: 1.4rem;
    color: var(--ds-text-subtle, #94a3b8);
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* ===== Read-only PO Items panel (loads under the form when a PO is selected) ===== */
.lr-items-panel[b-u9pkweoa0t] {
    margin-top: 0.6rem;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    overflow: hidden;
    background: var(--ds-surface, #fff);
}

.lr-items-head[b-u9pkweoa0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.lr-items-title[b-u9pkweoa0t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ds-text, #1e293b);
}

.lr-items-title i[b-u9pkweoa0t] { color: var(--ds-primary, #1d4ed8); }

.lr-items-loading[b-u9pkweoa0t] {
    font-size: 0.78rem;
    color: var(--ds-text-muted, #64748b);
    display: inline-flex;
    align-items: center;
}

.lr-items-table[b-u9pkweoa0t] { table-layout: fixed; }
.lr-items-table .th-idx[b-u9pkweoa0t] { width: 44px; text-align: left; }

.lr-product-name[b-u9pkweoa0t] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.lr-variant-chip[b-u9pkweoa0t] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.lr-totals-row > td[b-u9pkweoa0t] {
    background: var(--ds-head-bg, #f4f6f9) !important;
    border-top: 2px solid var(--ds-border, #e2e8f0);
}

/* ===== Stats bar ===== */
.lr-stats-bar[b-u9pkweoa0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-top: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.78rem;
}

.lr-stats-bar .stat[b-u9pkweoa0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 500;
}

.lr-stats-bar .stat.dispatched[b-u9pkweoa0t] { background: #f3e8ff; color: #7c3aed; }
.lr-stats-bar .stat.intransit[b-u9pkweoa0t] { background: #fef3c7; color: #92400e; }
.lr-stats-bar .stat.received[b-u9pkweoa0t] { background: #cffafe; color: #0891b2; }
.lr-stats-bar .stat.qc[b-u9pkweoa0t] { background: #dbeafe; color: #1d4ed8; }
.lr-stats-bar .stat.closed[b-u9pkweoa0t] { background: #dcfce7; color: #15803d; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .lr-cell.span-2[b-u9pkweoa0t],
    .lr-cell.span-3[b-u9pkweoa0t],
    .lr-cell.span-4[b-u9pkweoa0t],
    .lr-cell.span-6[b-u9pkweoa0t] { grid-column: span 6; }
}

@media (max-width: 576px) {
    .lr-cell.span-2[b-u9pkweoa0t],
    .lr-cell.span-3[b-u9pkweoa0t],
    .lr-cell.span-4[b-u9pkweoa0t],
    .lr-cell.span-6[b-u9pkweoa0t],
    .lr-cell.span-12[b-u9pkweoa0t] { grid-column: span 12; }
    
    .lr-summary-chips[b-u9pkweoa0t] { flex-wrap: wrap; }
}

.stat-icon[b-u9pkweoa0t] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.stat-icon.dispatched[b-u9pkweoa0t] { background: #8b5cf6; }
.stat-icon.intransit[b-u9pkweoa0t] { background: #f59e0b; }
.stat-icon.received[b-u9pkweoa0t] { background: #06b6d4; }
.stat-icon.qc[b-u9pkweoa0t] { background: #2563eb; }
.stat-icon.closed[b-u9pkweoa0t] { background: #10b981; }

.stat-info[b-u9pkweoa0t] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-u9pkweoa0t] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-u9pkweoa0t] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

/* ===== MODAL STYLING ===== */
.modal-backdrop.show[b-u9pkweoa0t] {
    opacity: 0.5;
}

.modal-content[b-u9pkweoa0t] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.modal-header[b-u9pkweoa0t] {
    border-radius: 12px 12px 0 0;
}

/* ===== ALERT STYLES ===== */
.alert[b-u9pkweoa0t] {
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success[b-u9pkweoa0t] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #047857;
}

.alert-danger[b-u9pkweoa0t] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #dc2626;
}

.alert-warning[b-u9pkweoa0t] {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #b45309;
}

/* ===== VALIDATION MESSAGES ===== */
.validation-message[b-u9pkweoa0t] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .workflow-progress[b-u9pkweoa0t] {
        justify-content: flex-start;
        padding: 16px;
    }
    
    .progress-connector[b-u9pkweoa0t] {
        width: 30px;
    }
}

@media (max-width: 768px) {
    .lr-container[b-u9pkweoa0t] {
        padding: 12px;
    }
    
    .lr-header[b-u9pkweoa0t] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions[b-u9pkweoa0t] {
        width: 100%;
    }
    
    .lr-cards-grid[b-u9pkweoa0t] {
        grid-template-columns: 1fr;
    }
    
    .form-actions-bar[b-u9pkweoa0t] {
        flex-direction: column;
        gap: 12px;
    }
    
    .action-group[b-u9pkweoa0t] {
        width: 100%;
        flex-direction: column;
    }
    
    .summary-stats[b-u9pkweoa0t] {
        flex-wrap: wrap;
    }
    
    .stat-card[b-u9pkweoa0t] {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
    }
    
    .list-filters[b-u9pkweoa0t] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-u9pkweoa0t] {
        width: 100%;
    }
    
    .filter-group input[b-u9pkweoa0t],
    .filter-group select[b-u9pkweoa0t] {
        width: 100%;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .lr-container[b-u9pkweoa0t] {
        padding: 0;
        background: white;
    }
    
    .header-actions[b-u9pkweoa0t],
    .list-filters[b-u9pkweoa0t],
    .form-actions-bar[b-u9pkweoa0t],
    .lr-card-footer[b-u9pkweoa0t] {
        display: none;
    }
    
    .form-section[b-u9pkweoa0t],
    .lr-card[b-u9pkweoa0t] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Transactions/MaterialInward.razor.rz.scp.css */
/* ============================================================
   Material Inward - Space-Saving / High-Density Layout
   Uses global design-system tokens (design-system.css)
   Matches HsnMaster design pattern
   ============================================================ */

/* Tighten page chrome for density */
.form-container[b-hzn0p4ihh6] { padding: 16px; }
.form-card-body[b-hzn0p4ihh6] { padding: 16px; }
.form-card-header[b-hzn0p4ihh6] { padding: 12px 16px; }
.form-card-footer[b-hzn0p4ihh6] { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.footer-left[b-hzn0p4ihh6] { display: flex; gap: 8px; }
.footer-right[b-hzn0p4ihh6] { display: flex; gap: 8px; }

/* ===== Compact form grid (12-column like HSN) ===== */
.mi-form[b-hzn0p4ihh6] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mi-grid[b-hzn0p4ihh6] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
}

.mi-cell[b-hzn0p4ihh6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mi-cell.span-2[b-hzn0p4ihh6] { grid-column: span 2; }
.mi-cell.span-3[b-hzn0p4ihh6] { grid-column: span 3; }
.mi-cell.span-4[b-hzn0p4ihh6] { grid-column: span 4; }
.mi-cell.span-6[b-hzn0p4ihh6] { grid-column: span 6; }

.mi-cell .form-label[b-hzn0p4ihh6] { margin-bottom: 0.2rem; }

/* ===== Search box (header) ===== */
.mi-search[b-hzn0p4ihh6] {
    position: relative;
    display: flex;
    align-items: center;
}

.mi-search i[b-hzn0p4ihh6] {
    position: absolute;
    left: 0.6rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.mi-search input[b-hzn0p4ihh6] {
    padding-left: 1.9rem;
    min-width: 250px;
}

/* ===== Summary chips in card header ===== */
.mi-summary-chips[b-hzn0p4ihh6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mi-summary-chips .chip[b-hzn0p4ihh6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mi-summary-chips .chip.accepted[b-hzn0p4ihh6] {
    background: #dcfce7;
    color: #15803d;
}

.mi-summary-chips .chip.rejected[b-hzn0p4ihh6] {
    background: #fee2e2;
    color: #b91c1c;
}

.mi-summary-chips .chip.amount[b-hzn0p4ihh6] {
    background: #e0f2fe;
    color: #0369a1;
}

.mi-summary-chips .chip.status[b-hzn0p4ihh6] {
    background: #f1f5f9;
    color: #475569;
}

.mi-summary-chips .chip.chip-received[b-hzn0p4ihh6] { background: #cffafe; color: #0891b2; }
.mi-summary-chips .chip.chip-pending[b-hzn0p4ihh6] { background: #fef3c7; color: #92400e; }
.mi-summary-chips .chip.chip-passed[b-hzn0p4ihh6] { background: #dcfce7; color: #15803d; }
.mi-summary-chips .chip.chip-failed[b-hzn0p4ihh6] { background: #fee2e2; color: #b91c1c; }
.mi-summary-chips .chip.chip-grn[b-hzn0p4ihh6] { background: #e0e7ff; color: #4338ca; }

/* ===== Items Panel ===== */
.mi-items-panel[b-hzn0p4ihh6] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    overflow: hidden;
    background: var(--ds-surface, #fff);
    margin-top: 0.75rem;
}

.mi-items-head[b-hzn0p4ihh6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.mi-items-title[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.mi-items-title i[b-hzn0p4ihh6] { color: var(--ds-primary, #1d4ed8); }

.mi-items-actions[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


.mi-count[b-hzn0p4ihh6] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 0.72rem;
    text-align: center;
}

/* ===== List header ===== */
.mi-list-head[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.mi-list-title[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.mi-list-title i[b-hzn0p4ihh6] { color: var(--ds-primary, #1d4ed8); }

.mi-list-filters[b-hzn0p4ihh6] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mi-list-filters select[b-hzn0p4ihh6] {
    min-width: 120px;
}

/* ===== Dense table ===== */
.mi-table[b-hzn0p4ihh6] {
    margin: 0;
    font-size: 0.83rem;
}

.mi-table thead th[b-hzn0p4ihh6] {
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--ds-primary, #1d4ed8);
}

/* Inward line-items grid: fixed layout so the column widths below are actually honoured
   (auto layout lets the inner inputs stretch the cells and ignore min-width). */
.mi-items-panel .mi-table[b-hzn0p4ihh6] {
    table-layout: fixed;
    width: 100%;
}

/* Make every control fill its (now fixed-width) cell instead of forcing the cell wider.
   ::deep pierces the child components (DecimalInput, VariantSelector) whose inputs carry
   their own isolation scope. */
.mi-items-panel .mi-table[b-hzn0p4ihh6]  .form-control,
.mi-items-panel .mi-table[b-hzn0p4ihh6]  .form-select {
    width: 100%;
    min-width: 0;
}

/* Inward line-items column widths (moved out of inline styles) */
.mi-col-idx[b-hzn0p4ihh6] { width: 40px; }
.mi-col-product[b-hzn0p4ihh6] { width: 26%; }
.mi-col-variant[b-hzn0p4ihh6] { width: 16%; }
.mi-col-unit[b-hzn0p4ihh6] { width: 80px; }
.mi-col-qty[b-hzn0p4ihh6] { width: 90px; }
.mi-col-rate[b-hzn0p4ihh6] { width: 100px; }
.mi-col-disc[b-hzn0p4ihh6] { width: 80px; }
.mi-col-amount[b-hzn0p4ihh6] { width: 120px; }
.mi-col-action[b-hzn0p4ihh6] { width: 44px; }

.mi-table tbody td[b-hzn0p4ihh6] {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
}

.mi-code-chip[b-hzn0p4ihh6] {
    font-weight: 700;
    color: var(--ds-primary-dark, #1e40af);
}

.mi-product-name[b-hzn0p4ihh6] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.mi-vendor[b-hzn0p4ihh6] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-text-muted, #64748b);
}

.mi-variant-chip[b-hzn0p4ihh6] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Read-only Unit label in the items grid (Unit is display-only, driven by the PO/UOM). */
.mi-unit-label[b-hzn0p4ihh6] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--ds-head-bg, #f1f5f9);
    color: var(--ds-text, #334155);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Read-only Status field in the header (system-managed; stays "Received" until QC). */
.mi-readonly-field[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.mi-status-pill[b-hzn0p4ihh6] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--ds-head-bg, #f1f5f9);
    color: var(--ds-text, #334155);
    white-space: nowrap;
}

.mi-accepted-input:focus[b-hzn0p4ihh6] { background: #dcfce7; border-color: #22c55e; }
.mi-rejected-input:focus[b-hzn0p4ihh6] { background: #fee2e2; border-color: #ef4444; }
.mi-received-input:focus[b-hzn0p4ihh6] { background: #dcfce7; border-color: #22c55e; }

.mi-line-amount[b-hzn0p4ihh6] {
    font-weight: 600;
    color: var(--ds-text, #1e293b);
}

/* Totals row */
.mi-totals-row[b-hzn0p4ihh6] {
    background: var(--ds-head-bg, #f4f6f9);
    border-top: 2px solid var(--ds-border, #e2e8f0);
}

.mi-empty[b-hzn0p4ihh6] {
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    padding: 2rem 1rem !important;
}

.mi-empty i[b-hzn0p4ihh6] {
    font-size: 1.4rem;
    color: var(--ds-text-subtle, #94a3b8);
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* ===== Stats bar ===== */
.mi-stats-bar[b-hzn0p4ihh6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-top: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.78rem;
}

.mi-stats-bar .stat[b-hzn0p4ihh6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 500;
}

.mi-stats-bar .stat.received[b-hzn0p4ihh6] { background: #cffafe; color: #0891b2; }
.mi-stats-bar .stat.pending[b-hzn0p4ihh6] { background: #fef3c7; color: #92400e; }
.mi-stats-bar .stat.passed[b-hzn0p4ihh6] { background: #dcfce7; color: #15803d; }
.mi-stats-bar .stat.failed[b-hzn0p4ihh6] { background: #fee2e2; color: #b91c1c; }
.mi-stats-bar .stat.grn[b-hzn0p4ihh6] { background: #e0e7ff; color: #4338ca; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .mi-cell.span-2[b-hzn0p4ihh6],
    .mi-cell.span-3[b-hzn0p4ihh6],
    .mi-cell.span-4[b-hzn0p4ihh6],
    .mi-cell.span-6[b-hzn0p4ihh6] { grid-column: span 6; }
}

@media (max-width: 576px) {
    .mi-cell.span-2[b-hzn0p4ihh6],
    .mi-cell.span-3[b-hzn0p4ihh6],
    .mi-cell.span-4[b-hzn0p4ihh6],
    .mi-cell.span-6[b-hzn0p4ihh6] { grid-column: span 12; }
    
    .mi-summary-chips[b-hzn0p4ihh6] { flex-wrap: wrap; }
}

.qc-partial[b-hzn0p4ihh6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.qc-pending[b-hzn0p4ihh6] {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

.mi-card-footer[b-hzn0p4ihh6] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* ===== STATUS BADGES ===== */
.status-badge[b-hzn0p4ihh6] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.badge-received[b-hzn0p4ihh6] {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

.badge-pending[b-hzn0p4ihh6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.badge-passed[b-hzn0p4ihh6] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.badge-failed[b-hzn0p4ihh6] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.badge-grn[b-hzn0p4ihh6] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

/* Card status borders */
.card-received[b-hzn0p4ihh6] { border-left: 4px solid #06b6d4; }
.card-pending[b-hzn0p4ihh6] { border-left: 4px solid #f59e0b; }
.card-passed[b-hzn0p4ihh6] { border-left: 4px solid #10b981; }
.card-failed[b-hzn0p4ihh6] { border-left: 4px solid #ef4444; }
.card-grn[b-hzn0p4ihh6] { border-left: 4px solid #2563eb; }

/* ===== SUMMARY STATS ===== */
.summary-stats[b-hzn0p4ihh6] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    overflow-x: auto;
}

.stat-card[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #f8fafc;
    border-radius: 8px;
    min-width: 140px;
}

.stat-icon[b-hzn0p4ihh6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.stat-icon.received[b-hzn0p4ihh6] { background: #06b6d4; }
.stat-icon.pending[b-hzn0p4ihh6] { background: #f59e0b; }
.stat-icon.passed[b-hzn0p4ihh6] { background: #10b981; }
.stat-icon.failed[b-hzn0p4ihh6] { background: #ef4444; }
.stat-icon.grn[b-hzn0p4ihh6] { background: #2563eb; }

.stat-info[b-hzn0p4ihh6] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-hzn0p4ihh6] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-hzn0p4ihh6] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

/* ===== MODAL STYLING ===== */
.modal-content[b-hzn0p4ihh6] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.modal-header[b-hzn0p4ihh6] {
    border-radius: 12px 12px 0 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .summary-cards[b-hzn0p4ihh6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mi-container[b-hzn0p4ihh6] {
        padding: 12px;
    }

    .mi-header[b-hzn0p4ihh6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-cards[b-hzn0p4ihh6] {
        grid-template-columns: 1fr;
    }

    .mi-cards-grid[b-hzn0p4ihh6] {
        grid-template-columns: 1fr;
    }

    .form-actions-bar[b-hzn0p4ihh6] {
        flex-direction: column;
        gap: 12px;
    }

    .action-group[b-hzn0p4ihh6] {
        width: 100%;
        flex-direction: column;
    }

    .list-filters[b-hzn0p4ihh6] {
        flex-direction: column;
        align-items: stretch;
    }

    .workflow-progress[b-hzn0p4ihh6] {
        justify-content: flex-start;
        padding: 16px;
    }

    .progress-connector[b-hzn0p4ihh6] {
        width: 30px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mi-container[b-hzn0p4ihh6] {
        padding: 0;
        background: white;
    }

    .header-actions[b-hzn0p4ihh6],
    .list-filters[b-hzn0p4ihh6],
    .form-actions-bar[b-hzn0p4ihh6],
    .mi-card-footer[b-hzn0p4ihh6] {
        display: none;
    }
}

/* ===== INWARD VALUATION SUMMARY (mirrors the Purchase Order summary) ===== */
.mi-summary-panel[b-hzn0p4ihh6] {
    margin-top: 0.75rem;
    margin-left: auto;
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 10px;
    background: var(--ds-surface, #fff);
    overflow: hidden;
}

.mi-summary-title[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ds-text, #1e293b);
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.mi-summary-title i[b-hzn0p4ihh6] { color: var(--ds-primary, #1d4ed8); }

.mi-summary-body[b-hzn0p4ihh6] {
    padding: 0.6rem 0.85rem;
}

.mi-summary-row[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 0.2rem 0;
    color: var(--ds-text, #334155);
}

.mi-summary-row.mi-summary-sub[b-hzn0p4ihh6] {
    color: var(--ds-text-muted, #64748b);
}

.mi-summary-row.mi-summary-bold[b-hzn0p4ihh6] {
    font-weight: 600;
}

.mi-summary-divider[b-hzn0p4ihh6] {
    height: 1px;
    background: var(--ds-border, #e2e8f0);
    margin: 0.45rem 0;
}

.mi-summary-grand[b-hzn0p4ihh6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ds-primary-dark, #1e40af);
    padding-top: 0.15rem;
}

@media (max-width: 640px) {
    .mi-summary-panel[b-hzn0p4ihh6] {
        max-width: 100%;
    }
}

/* /Components/Pages/Transactions/PurchaseOrder_NEW.razor.rz.scp.css */
/* ============================================================
   PURCHASE ORDER - COMPACT POS STYLE
   Textile ERP - Full Width, No Scroll Design
   ============================================================ */

/* ===== PAGE CONTAINER ===== */
.po-page[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    background: #f1f5f9;
    font-size: 13px;
    overflow: hidden;
}

/* ===== COMPACT HEADER BAR ===== */
.po-header[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
    color: #fff;
    flex-shrink: 0;
}

.po-header-left[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.po-id-block[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    padding: 4px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    min-width: 80px;
}

.po-id-label[b-rbqe5iibb5] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.po-id-value[b-rbqe5iibb5] {
    font-size: 15px;
    font-weight: 700;
}

.po-field-inline[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-field-inline label[b-rbqe5iibb5] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    letter-spacing: 0.3px;
}

.po-field-inline .form-control[b-rbqe5iibb5],
.po-field-inline .form-select[b-rbqe5iibb5] {
    height: 28px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 100px;
}

.po-header-center[b-rbqe5iibb5] {
    margin-left: auto;
}

.po-grand-display[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 20px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
}

.grand-label[b-rbqe5iibb5] {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.grand-value[b-rbqe5iibb5] {
    font-size: 20px;
    font-weight: 800;
    color: #a7f3d0;
}

.po-header-right[b-rbqe5iibb5] {
    display: flex;
    gap: 6px;
    margin-left: 16px;
}

.po-header-right .btn[b-rbqe5iibb5] {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
}

/* Status Select Styling */
.select-draft[b-rbqe5iibb5] { background: #f1f5f9; color: #64748b; }
.select-approved[b-rbqe5iibb5] { background: #dcfce7; color: #15803d; border-color: #86efac; }
.select-completed[b-rbqe5iibb5] { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.select-cancelled[b-rbqe5iibb5] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.select-pending[b-rbqe5iibb5] { background: #fef9c3; color: #a16207; border-color: #fde047; }
.select-rejected[b-rbqe5iibb5] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* ===== ALERT MESSAGES ===== */
.po-alert[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
}

.po-alert-error[b-rbqe5iibb5] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.po-alert-success[b-rbqe5iibb5] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

/* ===== MAIN BODY LAYOUT ===== */
.po-body[b-rbqe5iibb5] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    flex: 1;
    overflow: hidden;
}

.po-main[b-rbqe5iibb5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

/* ===== COMPACT ORDER INFO BAR ===== */
.po-info-bar[b-rbqe5iibb5] {
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.po-info-row[b-rbqe5iibb5] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.po-info-field[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.po-info-field.flex-2[b-rbqe5iibb5] {
    flex: 2;
}

.po-info-field label[b-rbqe5iibb5] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.po-info-field .form-control[b-rbqe5iibb5],
.po-info-field .form-select[b-rbqe5iibb5] {
    height: 30px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.po-info-field .form-control:focus[b-rbqe5iibb5],
.po-info-field .form-select:focus[b-rbqe5iibb5] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ===== LINE ITEMS SECTION ===== */
.po-items-section[b-rbqe5iibb5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.po-items-header[b-rbqe5iibb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.po-items-title[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
}

.po-items-title i[b-rbqe5iibb5] {
    color: #3b82f6;
}

.item-badge[b-rbqe5iibb5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #3b82f6;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.po-items-actions[b-rbqe5iibb5] {
    display: flex;
    gap: 6px;
}

.po-items-actions .btn[b-rbqe5iibb5] {
    padding: 4px 10px;
    font-size: 11px;
}

/* ===== ITEMS TABLE ===== */
.po-items-table-wrap[b-rbqe5iibb5] {
    flex: 1;
    overflow: auto;
}

.po-items-table[b-rbqe5iibb5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.po-items-table thead[b-rbqe5iibb5] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.po-items-table thead th[b-rbqe5iibb5] {
    background: #1e40af;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 6px;
    text-align: left;
    white-space: nowrap;
}

.po-items-table tbody td[b-rbqe5iibb5] {
    padding: 6px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.po-items-table tbody tr:hover[b-rbqe5iibb5] {
    background: #f8fafc;
}

.po-items-table tbody tr.row-pending[b-rbqe5iibb5] {
    background: #fffbeb;
}

/* Column widths */
.th-idx[b-rbqe5iibb5], .td-idx[b-rbqe5iibb5] { width: 32px; text-align: center; color: #94a3b8; }
.th-product[b-rbqe5iibb5], .td-product[b-rbqe5iibb5] { min-width: 200px; }
.th-uom[b-rbqe5iibb5], .td-uom[b-rbqe5iibb5] { width: 100px; }
.th-qty[b-rbqe5iibb5], .td-qty[b-rbqe5iibb5] { width: 100px; }
.th-rate[b-rbqe5iibb5], .td-rate[b-rbqe5iibb5] { width: 120px; }
.th-disc[b-rbqe5iibb5], .td-disc[b-rbqe5iibb5] { width: 100px; }
.th-total[b-rbqe5iibb5], .td-total[b-rbqe5iibb5] { width: 100px; text-align: right; }
.th-act[b-rbqe5iibb5], .td-act[b-rbqe5iibb5] { width: 36px; text-align: center; }

.th-qty[b-rbqe5iibb5], .th-rate[b-rbqe5iibb5], .th-disc[b-rbqe5iibb5], .th-total[b-rbqe5iibb5] { text-align: right; }

/* Table inputs */
.po-items-table .form-control[b-rbqe5iibb5],
.po-items-table .form-select[b-rbqe5iibb5] {
    height: 26px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.td-qty .form-control[b-rbqe5iibb5],
.td-rate .form-control[b-rbqe5iibb5],
.td-disc .form-control[b-rbqe5iibb5] {
    text-align: right;
}

.line-total[b-rbqe5iibb5] {
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

/* Variant tags */
.variant-tags[b-rbqe5iibb5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tag-sku[b-rbqe5iibb5] {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 11px;
}

.tag-attr[b-rbqe5iibb5] {
    padding: 1px 6px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Delete button */
.btn-icon-del[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.btn-icon-del:hover[b-rbqe5iibb5] {
    background: #fee2e2;
    color: #dc2626;
}

/* Empty state */
.empty-row td[b-rbqe5iibb5] {
    padding: 24px !important;
}

.empty-hint[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
}

.empty-hint i[b-rbqe5iibb5] {
    font-size: 28px;
    opacity: 0.5;
}

/* Table footer */
.po-items-table tfoot td[b-rbqe5iibb5] {
    padding: 8px 6px;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    font-weight: 600;
}

.foot-label[b-rbqe5iibb5] { text-align: right; color: #64748b; }
.foot-val[b-rbqe5iibb5] { text-align: right; }
.foot-grand[b-rbqe5iibb5] { color: #15803d; font-size: 13px; }

/* ===== RIGHT SIDEBAR: FINANCIAL SUMMARY ===== */
.po-summary[b-rbqe5iibb5] {
    width: 280px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    flex-shrink: 0;
    overflow: hidden;
}

.summary-title[b-rbqe5iibb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.summary-body[b-rbqe5iibb5] {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

.summary-row[b-rbqe5iibb5] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.summary-row.summary-sub[b-rbqe5iibb5] {
    color: #64748b;
    padding-left: 8px;
    font-size: 11px;
}

.summary-row.summary-bold[b-rbqe5iibb5] {
    font-weight: 700;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed #e2e8f0;
}

.summary-divider[b-rbqe5iibb5] {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
}

/* Charges grid */
.charges-grid[b-rbqe5iibb5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.charge-field[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.charge-field label[b-rbqe5iibb5] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.charge-field .form-control[b-rbqe5iibb5] {
    height: 28px;
    font-size: 12px;
    padding: 2px 6px;
    text-align: right;
}

/* Grand total box */
.grand-total-box[b-rbqe5iibb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    margin-bottom: 10px;
}

.grand-total-box > span:first-child[b-rbqe5iibb5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #15803d;
}

.grand-total-box > span:last-child[b-rbqe5iibb5] {
    font-size: 18px;
    font-weight: 800;
    color: #15803d;
}

/* Payment row */
.payment-row[b-rbqe5iibb5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pay-field[b-rbqe5iibb5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pay-field label[b-rbqe5iibb5] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.pay-field .form-control[b-rbqe5iibb5],
.pay-field .form-select[b-rbqe5iibb5] {
    height: 28px;
    font-size: 12px;
    padding: 2px 6px;
}

/* Payment status colors */
.payment-paid[b-rbqe5iibb5] {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
    font-weight: 700;
}

.payment-partial[b-rbqe5iibb5] {
    background: #fef9c3;
    color: #a16207;
    border-color: #fde047;
    font-weight: 700;
}

.payment-unpaid[b-rbqe5iibb5] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
    font-weight: 700;
}

/* Summary footer */
.summary-footer[b-rbqe5iibb5] {
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.btn-save-main[b-rbqe5iibb5] {
    width: 100%;
    padding: 10px;
    font-weight: 700;
    font-size: 13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .po-body[b-rbqe5iibb5] {
        flex-direction: column;
    }
    
    .po-summary[b-rbqe5iibb5] {
        width: 100%;
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .po-header[b-rbqe5iibb5] {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .po-header-center[b-rbqe5iibb5] {
        order: -1;
        width: 100%;
        margin-left: 0;
    }
    
    .po-grand-display[b-rbqe5iibb5] {
        width: 100%;
    }
    
    .po-info-row[b-rbqe5iibb5] {
        flex-wrap: wrap;
    }
    
    .po-info-field[b-rbqe5iibb5] {
        min-width: 120px;
    }
    
    .charges-grid[b-rbqe5iibb5],
    .payment-row[b-rbqe5iibb5] {
        grid-template-columns: 1fr;
    }
}

/* ===== PRINT ===== */
@media print {
    .po-page[b-rbqe5iibb5] {
        height: auto;
        overflow: visible;
    }
    
    .po-header-right[b-rbqe5iibb5],
    .summary-footer[b-rbqe5iibb5] {
        display: none;
    }
}
/* /Components/Pages/Transactions/QualityCheck.razor.rz.scp.css */
/* ============================================================
   Quality Check - Space-Saving / High-Density Layout
   Uses global design-system tokens (design-system.css)
   Matches HsnMaster design pattern
   ============================================================ */

/* Tighten page chrome for density — full width, minimal gutters (POS-style) */
.form-container[b-w7te38jtoz] { padding: 10px 14px; }

/* In Add/Edit mode the header is position:fixed. The scoped `.form-container { padding }`
   above otherwise overrides the global `has-sticky-header` top clearance, pulling the first
   element (the status banner) underneath the fixed header. Restore the clearance with a more
   specific scoped rule so the locked/error message is never hidden behind the header. */
.form-container.has-sticky-header[b-w7te38jtoz] { padding-top: 3.75rem; }

/* Make the fixed header fully opaque and high-contrast. Previously the right-side actions/labels
   (locked badge, buttons) sat on a not-fully-clear background and were hard to read. A subtle
   tinted surface + a clear divider lifts the action group away from the page behind it. */
.form-header-sticky[b-w7te38jtoz] {
    background: var(--ds-surface, #ffffff) !important;
    border-bottom: 2px solid var(--ds-primary, #1d4ed8);
    padding: 0.5rem 14px;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}

.form-header-sticky .form-title h3[b-w7te38jtoz] { color: #0f172a; font-size: 1.05rem; }
.form-header-sticky .form-title i[b-w7te38jtoz] { font-size: 1.3rem; color: var(--ds-primary, #1d4ed8); }

/* Right-side header controls: ensure they sit above the header background and stay legible. */
.form-header .form-actions[b-w7te38jtoz] { position: relative; z-index: 1; gap: 0.4rem; }

/* Locked badge: high-contrast amber pill so "Locked (…) — read only" is unmistakable. */
.form-header .form-actions .badge[b-w7te38jtoz] {
    font-size: 0.78rem;
    padding: 0.45rem 0.7rem;
    background: var(--ds-amber, #d97706) !important;
    color: #ffffff !important;
    border: none;
}

.form-header-sticky .form-actions .btn[b-w7te38jtoz] {
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Give the matte-gray Cancel/secondary button a visible outline so it doesn't melt into the
   white header background. */
.form-header-sticky .form-actions .btn-secondary[b-w7te38jtoz] {
    border: 1px solid var(--ds-border-strong, #cbd5e1) !important;
}

/* Status / error banner: stays pinned just below the fixed header while the form is open so
   messages like "QC is locked (Closed)" are always visible, even after scrolling. */
.qc-status-banner[b-w7te38jtoz] { margin-bottom: 0.75rem; }

.form-container.has-sticky-header .qc-status-banner[b-w7te38jtoz] {
    position: sticky;
    top: 3.75rem;
    z-index: 1019; /* just under the fixed header (1020) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.form-card-body[b-w7te38jtoz] { padding: 12px; }
.form-card-header[b-w7te38jtoz] { padding: 8px 14px; }
.form-card-footer[b-w7te38jtoz] { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.footer-left[b-w7te38jtoz] { display: flex; gap: 8px; }
.footer-right[b-w7te38jtoz] { display: flex; gap: 8px; }

/* Cards span the full width with tight vertical rhythm */
.form-card[b-w7te38jtoz] { margin-bottom: 0.75rem; }

/* ===== Compact form grid (12-column like HSN) ===== */
.qc-form[b-w7te38jtoz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qc-grid[b-w7te38jtoz] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem 0.6rem;
}

.qc-cell[b-w7te38jtoz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qc-cell.span-2[b-w7te38jtoz] { grid-column: span 2; }
.qc-cell.span-3[b-w7te38jtoz] { grid-column: span 3; }
.qc-cell.span-4[b-w7te38jtoz] { grid-column: span 4; }
.qc-cell.span-5[b-w7te38jtoz] { grid-column: span 5; }
.qc-cell.span-6[b-w7te38jtoz] { grid-column: span 6; }
.qc-cell.span-7[b-w7te38jtoz] { grid-column: span 7; }

/* Compact labels & inputs for a dense, professional POS feel */
.qc-cell .form-label[b-w7te38jtoz] {
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
}

.qc-form .form-control[b-w7te38jtoz],
.qc-form .form-select[b-w7te38jtoz] {
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    min-height: 0;
    height: calc(1.5em + 0.6rem + 2px);
}

/* Responsive: collapse the 12-col grid gracefully on narrow screens without h-scroll */
@media (max-width: 992px) {
    .qc-cell.span-2[b-w7te38jtoz],
    .qc-cell.span-3[b-w7te38jtoz] { grid-column: span 4; }
    .qc-cell.span-4[b-w7te38jtoz],
    .qc-cell.span-5[b-w7te38jtoz],
    .qc-cell.span-6[b-w7te38jtoz],
    .qc-cell.span-7[b-w7te38jtoz] { grid-column: span 12; }
}

/* ===== Search box (header) ===== */
.qc-search[b-w7te38jtoz] {
    position: relative;
    display: flex;
    align-items: center;
}

.qc-search i[b-w7te38jtoz] {
    position: absolute;
    left: 0.6rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.qc-search input[b-w7te38jtoz] {
    padding-left: 1.9rem;
    min-width: 250px;
}

/* ===== Summary chips in card header =====
   The card header sets `color: white`; chips sit on light pill backgrounds, so force a
   high-contrast dark colour (text + icon) that wins over that inherited white. */
.qc-summary-chips[b-w7te38jtoz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.qc-summary-chips .chip[b-w7te38jtoz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #ffffff;
    color: #1e293b !important;          /* default contrast colour (beats inherited header white) */
    border: 1px solid rgba(15, 23, 42, 0.08);
    line-height: 1.2;
}

/* Icons inherit the chip's (dark) colour, never the header's white. */
.qc-summary-chips .chip i[b-w7te38jtoz] {
    color: inherit !important;
    font-size: 0.8rem;
}

.qc-summary-chips .chip.accepted[b-w7te38jtoz] {
    background: #dcfce7;
    color: #15803d !important;
}

.qc-summary-chips .chip.rejected[b-w7te38jtoz] {
    background: #fee2e2;
    color: #b91c1c !important;
}

.qc-summary-chips .chip.status[b-w7te38jtoz] {
    background: #e0e7ff;
    color: #4338ca !important;
}

.qc-summary-chips .chip.chip-open[b-w7te38jtoz] { background: #dbeafe; color: #1d4ed8 !important; }
.qc-summary-chips .chip.chip-inprogress[b-w7te38jtoz] { background: #fef3c7; color: #92400e !important; }
.qc-summary-chips .chip.chip-passed[b-w7te38jtoz] { background: #dcfce7; color: #15803d !important; }
.qc-summary-chips .chip.chip-failed[b-w7te38jtoz] { background: #fee2e2; color: #b91c1c !important; }
.qc-summary-chips .chip.chip-partial[b-w7te38jtoz] { background: #ffedd5; color: #c2410c !important; }
.qc-summary-chips .chip.chip-completed[b-w7te38jtoz] { background: #e0e7ff; color: #4338ca !important; }

/* ===== QC Items Panel ===== */
.qc-items-panel[b-w7te38jtoz] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    overflow: hidden;
    background: var(--ds-surface, #fff);
    margin-top: 0.5rem;
}

.qc-items-head[b-w7te38jtoz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qc-items-title[b-w7te38jtoz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.qc-items-title i[b-w7te38jtoz] { color: var(--ds-primary, #1d4ed8); }

.qc-items-actions[b-w7te38jtoz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qc-accept-hint[b-w7te38jtoz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.qc-count[b-w7te38jtoz] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ds-primary, #1d4ed8);
    color: #fff;
    font-size: 0.72rem;
    text-align: center;
}

/* ===== List header ===== */
.qc-list-head[b-w7te38jtoz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qc-list-title[b-w7te38jtoz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ds-text, #1e293b);
}

.qc-list-title i[b-w7te38jtoz] { color: var(--ds-primary, #1d4ed8); }

.qc-list-filters[b-w7te38jtoz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.qc-list-filters select[b-w7te38jtoz] {
    min-width: 120px;
}

/* ===== Dense table ===== */
.qc-table[b-w7te38jtoz] {
    margin: 0;
    font-size: 0.83rem;
    width: 100%;
    table-layout: fixed;
}

.qc-table thead th[b-w7te38jtoz] {
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--ds-primary, #1d4ed8);
}

.qc-table tbody td[b-w7te38jtoz] {
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ds-grid-line, #edf0f4);
}

/* Subtle zebra striping for a clean, scannable data grid (matches the list page feel). */
.qc-table tbody tr:nth-child(even) > td[b-w7te38jtoz] { background-color: var(--ds-surface-alt, #fafbfc); }
.qc-table tbody tr:hover > td[b-w7te38jtoz] { background-color: var(--ds-primary-soft, #eff4ff); }

.qc-code-chip[b-w7te38jtoz] {
    font-weight: 700;
    color: var(--ds-primary-dark, #1e40af);
}

.qc-product-name[b-w7te38jtoz] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.qc-vendor[b-w7te38jtoz] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-text-muted, #64748b);
}

.qc-variant-chip[b-w7te38jtoz] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.qc-table tbody td .qc-accepted-input[b-w7te38jtoz] { font-weight: 600; }
.qc-table tbody td .qc-accepted-input:focus[b-w7te38jtoz] {
    background-color: #dcfce7;
    border-color: #22c55e;
    box-shadow: 0 0 0 2px #dcfce7;
}
.qc-table tbody td .qc-rejected-input[b-w7te38jtoz] { color: #dc2626; font-weight: 600; }
.qc-table tbody td .qc-rejected-input:focus[b-w7te38jtoz] {
    background-color: #fee2e2;
    border-color: #ef4444;
    box-shadow: 0 0 0 2px #fee2e2;
}

/* Row states (semantic tints win over zebra striping — target the cells). */
.qc-table tbody tr.row-accepted > td[b-w7te38jtoz] { background: #f0fdf4; }
.qc-table tbody tr.row-rejected > td[b-w7te38jtoz] { background: #fef2f2; }
.qc-table tbody tr.row-partial > td[b-w7te38jtoz]  { background: #fffbeb; }
.qc-table tbody tr.row-hold > td[b-w7te38jtoz]     { background: #fef3c7; }

/* Totals row */
.qc-totals-row[b-w7te38jtoz] {
    background: var(--ds-head-bg, #f4f6f9);
    border-top: 2px solid var(--ds-border, #e2e8f0);
}

.qc-empty[b-w7te38jtoz] {
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    padding: 2rem 1rem !important;
}

.qc-empty i[b-w7te38jtoz] {
    font-size: 1.4rem;
    color: var(--ds-text-subtle, #94a3b8);
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Result select styling */
.result-passed[b-w7te38jtoz] { background: #dcfce7 !important; color: #15803d; }
.result-failed[b-w7te38jtoz] { background: #fee2e2 !important; color: #b91c1c; }
.result-hold[b-w7te38jtoz] { background: #fef3c7 !important; color: #92400e; }

/* ===== Stats bar ===== */
.qc-stats-bar[b-w7te38jtoz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--ds-head-bg, #f4f6f9);
    border-top: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.78rem;
}

.qc-stats-bar .stat[b-w7te38jtoz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 500;
}

.qc-stats-bar .stat.open[b-w7te38jtoz] { background: #dbeafe; color: #1d4ed8; }
.qc-stats-bar .stat.progress[b-w7te38jtoz] { background: #fef3c7; color: #92400e; }
.qc-stats-bar .stat.passed[b-w7te38jtoz] { background: #dcfce7; color: #15803d; }
.qc-stats-bar .stat.failed[b-w7te38jtoz] { background: #fee2e2; color: #b91c1c; }
.qc-stats-bar .stat.done[b-w7te38jtoz] { background: #e0e7ff; color: #4338ca; }

/* ===== Items table cell controls (sleek, list-like editable grid) =====
   The add/edit grid should read as cleanly as the read-only list table: inputs sit FLUSH in the
   cell (transparent, borderless) and only reveal a border + soft focus ring on interaction. This
   removes the boxy "form inside a table" clutter and the empty space around each control. */
.qc-table tbody td .form-control-sm[b-w7te38jtoz],
.qc-table tbody td .form-select-sm[b-w7te38jtoz] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    height: calc(1.5em + 0.3rem + 2px);
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color .12s ease, border-color .12s ease;
}

.qc-table tbody td .form-control-sm:hover[b-w7te38jtoz],
.qc-table tbody td .form-select-sm:hover[b-w7te38jtoz] {
    border-color: var(--ds-border, #e2e8f0);
    background-color: var(--ds-surface, #fff);
}

.qc-table tbody td .form-control-sm:focus[b-w7te38jtoz],
.qc-table tbody td .form-select-sm:focus[b-w7te38jtoz] {
    border-color: var(--ds-primary, #1d4ed8);
    background-color: var(--ds-surface, #fff);
    box-shadow: 0 0 0 2px var(--ds-primary-soft, #eff4ff);
    outline: none;
}

/* Disabled (locked QC) cells stay quiet — plain text, no input chrome. */
.qc-table tbody td .form-control-sm:disabled[b-w7te38jtoz],
.qc-table tbody td .form-select-sm:disabled[b-w7te38jtoz] {
    background-color: transparent;
    border-color: transparent;
    color: var(--ds-text, #1e293b);
    opacity: 1;
    -webkit-text-fill-color: var(--ds-text, #1e293b);
}

/* Native dropdown arrow needs room so the value isn't clipped/overlapped. */
.qc-table tbody td .form-select-sm[b-w7te38jtoz] {
    padding-right: 1.4rem;
    text-overflow: ellipsis;
}

/* Keep the Result coloured state readable (was overridden by a stale rule). */
.qc-table tbody td .form-select-sm.result-passed[b-w7te38jtoz] { background-color: #dcfce7; color: #15803d; }
.qc-table tbody td .form-select-sm.result-failed[b-w7te38jtoz] { background-color: #fee2e2; color: #b91c1c; }
.qc-table tbody td .form-select-sm.result-hold[b-w7te38jtoz]   { background-color: #fef3c7; color: #92400e; }

/* ===== List grid: keep the Status column fully visible ===== */
.qc-table td .status-badge[b-w7te38jtoz],
.qc-table td .badge[b-w7te38jtoz] {
    white-space: nowrap;
}

/* The items panel clips its rounded corners; let the inline variant search
   dropdown (and any popover) escape so it isn't hidden behind the next row. */
.qc-items-panel .table-responsive[b-w7te38jtoz] {
    overflow: visible;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .qc-cell.span-2[b-w7te38jtoz],
    .qc-cell.span-3[b-w7te38jtoz],
    .qc-cell.span-4[b-w7te38jtoz],
    .qc-cell.span-5[b-w7te38jtoz],
    .qc-cell.span-6[b-w7te38jtoz] { grid-column: span 6; }
}

@media (max-width: 576px) {
    .qc-cell.span-2[b-w7te38jtoz],
    .qc-cell.span-3[b-w7te38jtoz],
    .qc-cell.span-4[b-w7te38jtoz],
    .qc-cell.span-5[b-w7te38jtoz],
    .qc-cell.span-6[b-w7te38jtoz] { grid-column: span 12; }

    .qc-summary-chips[b-w7te38jtoz] { flex-wrap: wrap; }
}
/* /Components/Pages/Transactions/Reports.razor.rz.scp.css */
.reports-shell[b-k283ytod6e] {
    display: flex;
    height: calc(100vh - 60px);
    background: #f5f6f8;
    overflow: hidden;
}

/* ===== LEFT SIDEBAR ===== */
.reports-sidebar[b-k283ytod6e] {
    width: 260px;
    min-width: 260px;
    background: #fff;
    border-right: 1px solid #e3e6ea;
    display: flex;
    flex-direction: column;
}

.sidebar-head[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: #0d6efd;
    border-bottom: 1px solid #eef0f3;
}

.sidebar-search[b-k283ytod6e] {
    position: relative;
    padding: 0.6rem 0.9rem;
}

.sidebar-search i[b-k283ytod6e] {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    font-size: 0.85rem;
}

.sidebar-search input[b-k283ytod6e] {
    width: 100%;
    padding: 0.35rem 0.5rem 0.35rem 1.8rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.4rem;
    font-size: 0.85rem;
}

.sidebar-nav[b-k283ytod6e] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.sidebar-category[b-k283ytod6e] { margin-bottom: 0.15rem; }

.sidebar-cat-head[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #3a3f45;
    cursor: pointer;
}

.sidebar-cat-head:hover[b-k283ytod6e] { background: #f2f4f7; }
.sidebar-cat-head.open[b-k283ytod6e] { color: #0d6efd; }

.sidebar-cat-head .chevron[b-k283ytod6e] {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.sidebar-cat-head.open .chevron[b-k283ytod6e] { transform: rotate(180deg); }

.sidebar-report-list[b-k283ytod6e] {
    list-style: none;
    margin: 0.1rem 0 0.3rem;
    padding: 0 0 0 0.5rem;
}

.sidebar-report[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0.3rem;
    font-size: 0.82rem;
    color: #55595f;
    cursor: pointer;
}

.sidebar-report:hover[b-k283ytod6e] { background: #f2f4f7; color: #212529; }

.report-planned-badge[b-k283ytod6e] {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 0.6rem;
    background: #fff3cd;
    color: #997404;
    border: 1px solid #ffe69c;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}


.sidebar-report.active[b-k283ytod6e] {
    background: #e7f1ff;
    color: #0d6efd;
    border-left-color: #0d6efd;
    font-weight: 600;
}

.sidebar-analytics[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.1rem;
    border-top: 1px solid #eef0f3;
    text-decoration: none;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
}

.sidebar-analytics:hover[b-k283ytod6e] { color: #0d6efd; background: #f8f9fb; }

/* ===== MAIN PANEL ===== */
.reports-main[b-k283ytod6e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reports-topbar[b-k283ytod6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e3e6ea;
}

.topbar-title[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topbar-title > i[b-k283ytod6e] {
    font-size: 1.5rem;
    color: #0d6efd;
}

.topbar-title h4[b-k283ytod6e] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.topbar-cat[b-k283ytod6e] {
    font-size: 0.75rem;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topbar-controls[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.date-range[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.date-range label[b-k283ytod6e] {
    font-size: 0.78rem;
    color: #6c757d;
    margin: 0;
}

.date-range input[b-k283ytod6e] { width: 140px; }

/* ===== CONTEXTUAL FILTERS ===== */
.reports-filters[b-k283ytod6e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fbfcfd;
    border-bottom: 1px solid #eef0f3;
}

.filter-field[b-k283ytod6e] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 150px;
}

.filter-field label[b-k283ytod6e] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.filter-apply[b-k283ytod6e] {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
    min-width: auto;
}

/* ===== GRID ===== */
.reports-grid-wrap[b-k283ytod6e] {
    flex: 1;
    overflow: auto;
    background: #fff;
    margin: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}

.reports-grid[b-k283ytod6e] {
    margin: 0;
    font-size: 0.82rem;
}

.reports-grid thead th[b-k283ytod6e] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #55595f;
}

.reports-grid td.rownum[b-k283ytod6e],
.reports-grid th.rownum[b-k283ytod6e] {
    width: 48px;
    text-align: center;
    color: #9aa0a6;
}

.reports-empty[b-k283ytod6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9aa0a6;
    gap: 0.5rem;
}

.reports-empty i[b-k283ytod6e] { font-size: 2.5rem; }

/* ===== BOTTOM BAR ===== */
.reports-bottombar[b-k283ytod6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-top: 1px solid #e3e6ea;
}

.bottom-totals[b-k283ytod6e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.totals-label[b-k283ytod6e] {
    font-weight: 600;
    font-size: 0.82rem;
    color: #3a3f45;
}

.total-chip[b-k283ytod6e] {
    display: inline-flex;
    flex-direction: column;
    padding: 0.2rem 0.6rem;
    background: #f1f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 0.4rem;
    line-height: 1.1;
}

.total-name[b-k283ytod6e] {
    font-size: 0.65rem;
    color: #6c757d;
    text-transform: uppercase;
}

.total-value[b-k283ytod6e] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0d6efd;
}

.bottom-pager[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-size[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.page-size label[b-k283ytod6e] {
    font-size: 0.78rem;
    color: #6c757d;
    margin: 0;
}

.page-size select[b-k283ytod6e] { width: 80px; }

.pager-controls[b-k283ytod6e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.page-indicator[b-k283ytod6e] {
    font-size: 0.82rem;
    color: #3a3f45;
    padding: 0 0.5rem;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .reports-shell[b-k283ytod6e] { flex-direction: column; height: auto; }
    .reports-sidebar[b-k283ytod6e] { width: 100%; min-width: 0; }
    .reports-main[b-k283ytod6e] { overflow: visible; }
}
/* /Components/Shared/DetailsGrid.razor.rz.scp.css */
/* Details Grid Component Styles */

.details-grid[b-jebpdxa910] {
    margin: 20px 0;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.details-header[b-jebpdxa910] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.details-header h6[b-jebpdxa910] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.details-grid .table[b-jebpdxa910] {
    margin-bottom: 0;
}

.details-grid .table thead th[b-jebpdxa910] {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 8px;
}

.details-grid .table tbody td[b-jebpdxa910] {
    padding: 8px;
    vertical-align: middle;
    font-size: 14px;
}

.details-grid .table tbody tr:hover[b-jebpdxa910] {
    background-color: #f8f9fa;
}

.details-grid .btn-sm[b-jebpdxa910] {
    padding: 4px 8px;
    font-size: 12px;
}

.details-grid .form-control-sm[b-jebpdxa910] {
    font-size: 13px;
    padding: 4px 8px;
}

.details-grid .alert[b-jebpdxa910] {
    margin-bottom: 15px;
}
/* /Components/Shared/ModernBillingLayout.razor.rz.scp.css */
/* ============================================
   MODERN BILLING LAYOUT - ULTRA COMPACT
   ============================================ */

.modern-billing-layout[b-zcsq240tzm] {
    display: flex;
    flex-direction: column;
    background: var(--ds-app-bg, #F5F6F8);
    overflow: hidden;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ===== TOP ACTION BAR ===== */
.billing-top-bar[b-zcsq240tzm] {
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 0.25rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 45px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    z-index: 100;
}

.billing-top-left[b-zcsq240tzm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-toggle-btn[b-zcsq240tzm] {
    background: none;
    border: 1px solid #dee2e6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.menu-toggle-btn:hover[b-zcsq240tzm] {
    background: #f8f9fa;
    border-color: #1b6ec2;
}

.billing-title[b-zcsq240tzm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.billing-title i[b-zcsq240tzm] {
    font-size: 1.25rem;
    color: #1b6ec2;
}

.billing-title h5[b-zcsq240tzm] {
    font-weight: 600;
    color: #212529;
    margin: 0;
    font-size: 1rem;
}

.billing-top-right[b-zcsq240tzm] {
    display: flex;
    gap: 0.25rem;
}

/* ===== ALERT MESSAGES ===== */
.billing-alert[b-zcsq240tzm] {
    margin: 0.25rem 0.75rem 0;
    padding: 0.5rem;
    flex-shrink: 0;
}

/* ===== MAIN CONTENT WRAPPER ===== */
.billing-content-wrapper[b-zcsq240tzm] {
    display: flex;
    gap: 0;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 45px);
    min-height: 0;
}

/* ===== LEFT PANEL (Form & Items) ===== */
.billing-left-panel[b-zcsq240tzm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border-right: 1px solid #dee2e6;
    min-width: 0;
    height: 100%;
}

/* ===== HEADER FORM (ULTRA COMPACT) ===== */
.billing-header-form[b-zcsq240tzm] {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    background: #f8f9fa;
    overflow: visible;
    position: relative;
    z-index: 20;
}

.billing-header-form[b-zcsq240tzm]::-webkit-scrollbar {
    width: 4px;
}

.billing-header-form[b-zcsq240tzm]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* ===== QUICK ENTRY SECTION (ULTRA COMPACT) ===== */
.quick-entry-section[b-zcsq240tzm] {
    padding: 0.25rem 0.75rem;
    background: #fff3cd;
    border-bottom: 1px solid #ffc107;
    flex-shrink: 0;
}

.quick-entry-box[b-zcsq240tzm] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.quick-entry-box label[b-zcsq240tzm] {
    font-weight: 600;
    font-size: 0.75rem;
    color: #856404;
    margin-bottom: 0;
    white-space: nowrap;
}

.quick-entry-input[b-zcsq240tzm] {
    font-size: 0.813rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ffc107;
    border-radius: 4px;
    flex: 1;
    height: 30px;
}

.quick-entry-input:focus[b-zcsq240tzm] {
    border-color: #ff9800;
    box-shadow: 0 0 0 0.15rem rgba(255, 193, 7, 0.25);
}

.quick-entry-box small[b-zcsq240tzm] {
    font-size: 0.688rem;
    color: #856404;
    white-space: nowrap;
}

/* ===== ITEMS GRID (SCROLLABLE - FORCED) ===== */
.billing-items-grid[b-zcsq240tzm] {
    flex: 1 1 0;
    overflow-y: scroll !important; /* Force scrollbar */
    overflow-x: auto !important;
    padding: 0.5rem;
    background: #ffffff;
    position: relative;
    min-height: 0;
}

/* Custom Scrollbar - ALWAYS VISIBLE */
.billing-items-grid[b-zcsq240tzm]::-webkit-scrollbar {
    width: 16px !important;
    height: 16px !important;
}

.billing-items-grid[b-zcsq240tzm]::-webkit-scrollbar-track {
    background: #e9ecef !important;
    border-radius: 8px;
}

.billing-items-grid[b-zcsq240tzm]::-webkit-scrollbar-thumb {
    background: #6c757d !important;
    border-radius: 8px;
    border: 3px solid #e9ecef !important;
}

.billing-items-grid[b-zcsq240tzm]::-webkit-scrollbar-thumb:hover {
    background: #495057 !important;
}

.billing-items-grid[b-zcsq240tzm]::-webkit-scrollbar-corner {
    background: #e9ecef !important;
}

/* For Firefox - Force scrollbar */
.billing-items-grid[b-zcsq240tzm] {
    scrollbar-width: auto !important;
    scrollbar-color: #6c757d #e9ecef !important;
}

/* Table inside items grid */
.billing-items-grid table[b-zcsq240tzm] {
    font-size: 0.813rem;
    width: 100%;
    min-width: 900px; /* Force minimum width to trigger horizontal scroll */
    margin-bottom: 0.5rem;
    border-collapse: collapse;
}

.billing-items-grid table thead th[b-zcsq240tzm] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ds-primary-dark, #1e40af) !important;
    color: white !important;
    padding: 0.375rem 0.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--ds-primary, #1d4ed8) !important;
}

.billing-items-grid table tbody td[b-zcsq240tzm] {
    padding: 0.25rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.75rem;
}

.billing-items-grid table tbody tr:hover[b-zcsq240tzm] {
    background-color: #f8f9fa;
}

/* Make form controls inside table ultra compact */
.billing-items-grid .form-control-sm[b-zcsq240tzm],
.billing-items-grid .form-select-sm[b-zcsq240tzm] {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.75rem !important;
    height: 28px !important;
    border-radius: 3px;
}

.billing-items-grid .btn-sm[b-zcsq240tzm] {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1;
}

/* ===== RIGHT PANEL (Summary - COMPACT) ===== */
.billing-right-panel[b-zcsq240tzm] {
    width: 280px;
    flex-shrink: 0;
    background: #ffffff;
    border-left: 1px solid #dee2e6;
    overflow-y: auto;
    padding: 0.5rem;
}

.billing-right-panel[b-zcsq240tzm]::-webkit-scrollbar {
    width: 6px;
}

.billing-right-panel[b-zcsq240tzm]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.billing-right-panel[b-zcsq240tzm]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.billing-right-panel[b-zcsq240tzm]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===== AMOUNT SUMMARY CARD ===== */
.amount-summary-card[b-zcsq240tzm] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

.amount-summary-card h6[b-zcsq240tzm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
}

.summary-row[b-zcsq240tzm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.75rem;
}

.summary-row span:first-child[b-zcsq240tzm] {
    color: #6c757d;
}

.summary-row span:last-child[b-zcsq240tzm] {
    color: #212529;
}

.summary-row input[b-zcsq240tzm] {
    height: 26px !important;
    font-size: 0.75rem !important;
    padding: 0.2rem 0.3rem !important;
}

.summary-row-total[b-zcsq240tzm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-top: 2px solid #dee2e6;
}

/* ===== COMPACT FORM CONTROLS ===== */
.form-label-sm[b-zcsq240tzm] {
    font-size: 0.75rem !important;
    font-weight: 600;
    margin-bottom: 0.15rem !important;
    color: #495057;
}

.form-control-sm[b-zcsq240tzm], .form-select-sm[b-zcsq240tzm] {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.375rem !important;
    height: 30px !important;
    border-radius: 3px;
}

/* Remove extra spacing from rows */
.row.g-2[b-zcsq240tzm] {
    --bs-gutter-y: 0.25rem !important;
    --bs-gutter-x: 0.25rem !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .billing-right-panel[b-zcsq240tzm] {
        width: 250px;
    }
}

@media (max-width: 992px) {
    .billing-content-wrapper[b-zcsq240tzm] {
        flex-direction: column;
    }
    
    .billing-right-panel[b-zcsq240tzm] {
        width: 100%;
        max-height: 250px;
        border-left: none;
        border-top: 1px solid #dee2e6;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-end[b-zcsq240tzm] {
    text-align: right !important;
}

.fw-bold[b-zcsq240tzm] {
    font-weight: 700 !important;
}

.text-muted[b-zcsq240tzm] {
    color: #6c757d !important;
}

.text-danger[b-zcsq240tzm] {
    color: #dc3545 !important;
}

.text-success[b-zcsq240tzm] {
    color: #198754 !important;
}

.small[b-zcsq240tzm] {
    font-size: 0.75rem !important;
}

/* /Components/Shared/ProductPickerModal.razor.rz.scp.css */
/* ProductPickerModal — modern drill-down product finder */

.ppk-backdrop[b-pmx0n2cjsx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1080;
    animation: ppk-fade-b-pmx0n2cjsx 0.15s ease;
}

.ppk-modal[b-pmx0n2cjsx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(860px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    z-index: 1090;
    overflow: hidden;
    animation: ppk-pop-b-pmx0n2cjsx 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ppk-fade-b-pmx0n2cjsx { from { opacity: 0; } to { opacity: 1; } }
@keyframes ppk-pop-b-pmx0n2cjsx { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Header */
.ppk-header[b-pmx0n2cjsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}

.ppk-title[b-pmx0n2cjsx] {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ppk-header .btn-close[b-pmx0n2cjsx] {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.9;
}

/* Filter bar */
.ppk-filters[b-pmx0n2cjsx] {
    display: grid;
    grid-template-columns: 1fr 170px 170px 150px;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f4;
    background: #fafbfd;
}

.ppk-search[b-pmx0n2cjsx] {
    position: relative;
    display: flex;
    align-items: center;
}

.ppk-search > i.bi-search[b-pmx0n2cjsx] {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.9rem;
}

.ppk-search .form-control[b-pmx0n2cjsx] {
    padding-left: 34px;
    border-radius: 8px;
}

.ppk-clear[b-pmx0n2cjsx] {
    position: absolute;
    right: 6px;
    border: none;
    background: #e2e8f0;
    color: #475569;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
}

.ppk-facet[b-pmx0n2cjsx] {
    border-radius: 8px;
}

/* Results */
.ppk-results[b-pmx0n2cjsx] {
    overflow-y: auto;
    padding: 8px 12px 14px;
}

.ppk-count[b-pmx0n2cjsx] {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 6px 6px 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ppk-list[b-pmx0n2cjsx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ppk-row[b-pmx0n2cjsx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.ppk-row:hover[b-pmx0n2cjsx] {
    border-color: #a5b4fc;
    background: #f5f3ff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
    transform: translateY(-1px);
}

.ppk-row-main[b-pmx0n2cjsx] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ppk-code[b-pmx0n2cjsx] {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4f46e5;
    background: #eef2ff;
    padding: 1px 7px;
    border-radius: 5px;
    white-space: nowrap;
}

.ppk-name[b-pmx0n2cjsx] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppk-row-meta[b-pmx0n2cjsx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ppk-chip[b-pmx0n2cjsx] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ppk-chip-cat[b-pmx0n2cjsx] { background: #ecfeff; color: #0e7490; }
.ppk-chip-price[b-pmx0n2cjsx] { background: #f0fdf4; color: #15803d; font-weight: 700; }
.ppk-chip-in[b-pmx0n2cjsx] { background: #dcfce7; color: #166534; }
.ppk-chip-low[b-pmx0n2cjsx] { background: #fef3c7; color: #92400e; }
.ppk-chip-out[b-pmx0n2cjsx] { background: #fee2e2; color: #991b1b; }
.ppk-chip-old[b-pmx0n2cjsx] { background: #fef2f2; color: #b45309; border: 1px dashed #f59e0b; }

/* Empty state */
.ppk-empty[b-pmx0n2cjsx] {
    text-align: center;
    padding: 42px 20px;
    color: #94a3b8;
}

.ppk-empty > i[b-pmx0n2cjsx] {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .ppk-filters[b-pmx0n2cjsx] {
        grid-template-columns: 1fr 1fr;
    }
    .ppk-search[b-pmx0n2cjsx] {
        grid-column: 1 / -1;
    }
}
/* /Components/Shared/ProfessionalDataTable.razor.rz.scp.css */
/* Professional Data Table Styles */
.professional-table[b-sxmvp50s6n] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.table-header[b-sxmvp50s6n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    gap: 16px;
    flex-wrap: wrap;
}

.table-title[b-sxmvp50s6n] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.table-title i[b-sxmvp50s6n] {
    color: #2563eb;
    font-size: 20px;
}

.table-title .badge[b-sxmvp50s6n] {
    font-size: 12px;
}

.table-actions[b-sxmvp50s6n] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-box[b-sxmvp50s6n] {
    position: relative;
    min-width: 250px;
}

.search-box i[b-sxmvp50s6n] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.search-box input[b-sxmvp50s6n] {
    padding-left: 36px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.search-box input:focus[b-sxmvp50s6n] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.table-responsive[b-sxmvp50s6n] {
    overflow-x: auto;
}

.table[b-sxmvp50s6n] {
    margin-bottom: 0;
}

.table thead[b-sxmvp50s6n] {
    background: #f9fafb;
}

.table thead th[b-sxmvp50s6n] {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 2px solid #e5e7eb;
}

.table tbody tr[b-sxmvp50s6n] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-sxmvp50s6n] {
    background: #f9fafb;
}

.table tbody td[b-sxmvp50s6n] {
    padding: 14px 16px;
    color: #4b5563;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

.table tfoot[b-sxmvp50s6n] {
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

.table tfoot td[b-sxmvp50s6n],
.table tfoot th[b-sxmvp50s6n] {
    font-weight: 700;
    color: #1f2937;
    padding: 14px 16px;
}

.empty-state[b-sxmvp50s6n] {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state i[b-sxmvp50s6n] {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state p[b-sxmvp50s6n] {
    font-size: 16px;
    margin-bottom: 16px;
}

.table-pagination[b-sxmvp50s6n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.pagination-info[b-sxmvp50s6n] {
    font-size: 14px;
    color: #6b7280;
}

.pagination .page-link[b-sxmvp50s6n] {
    color: #4b5563;
    border: 1px solid #e5e7eb;
    margin: 0 2px;
    border-radius: 6px;
}

.pagination .page-link:hover[b-sxmvp50s6n] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.pagination .page-item.active .page-link[b-sxmvp50s6n] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.pagination .page-item.disabled .page-link[b-sxmvp50s6n] {
    color: #d1d5db;
    pointer-events: none;
}

@media (max-width: 768px) {
    .table-header[b-sxmvp50s6n] {
        flex-direction: column;
        align-items: stretch;
    }

    .table-actions[b-sxmvp50s6n] {
        width: 100%;
        flex-direction: column;
    }

    .search-box[b-sxmvp50s6n] {
        width: 100%;
    }

    .table-pagination[b-sxmvp50s6n] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Shared/QuickProductModal.razor.rz.scp.css */
/* ============================================================
   Quick Product Modal (Purchase Order — add a new product)
   ============================================================ */

.qpm-backdrop[b-x47jqt9ov6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1070;
    animation: qpm-fade-b-x47jqt9ov6 0.15s ease;
}

.qpm-modal[b-x47jqt9ov6] {
    position: fixed;
    inset: 0;
    z-index: 1071;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 1rem;
    pointer-events: none;
}

.qpm-dialog[b-x47jqt9ov6] {
    pointer-events: auto;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 12px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: qpm-pop-b-x47jqt9ov6 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes qpm-fade-b-x47jqt9ov6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes qpm-pop-b-x47jqt9ov6 {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Header ===== */
.qpm-head[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ds-primary-dark, #1e40af);
    color: var(--ds-text-invert, #fff);
}

.qpm-head-title[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.qpm-close[b-x47jqt9ov6] {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.qpm-close:hover[b-x47jqt9ov6] {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

/* ===== Body ===== */
.qpm-body[b-x47jqt9ov6] {
    padding: 1rem;
    overflow-y: auto;
}

.qpm-hint[b-x47jqt9ov6] {
    font-size: 0.8rem;
    color: var(--ds-text-muted, #64748b);
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.9rem;
}

.qpm-grid[b-x47jqt9ov6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.qpm-field[b-x47jqt9ov6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qpm-col-2[b-x47jqt9ov6] {
    grid-column: span 2;
}

.qpm-field label[b-x47jqt9ov6] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
}

.qpm-req[b-x47jqt9ov6] {
    color: #dc2626;
}

.qpm-optional[b-x47jqt9ov6] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ds-text-muted, #94a3b8);
}

/* ===== Variants ===== */
.qpm-variants[b-x47jqt9ov6] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.qpm-variants-head[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--ds-surface-alt, #f8fafc);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qpm-variants-title[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-text, #1e293b);
}

.qpm-badge[b-x47jqt9ov6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ds-primary, #2563eb);
    border-radius: 999px;
}

.qpm-variants-empty[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    font-size: 0.82rem;
    color: var(--ds-text-muted, #64748b);
}

.qpm-variants-empty i[b-x47jqt9ov6] {
    font-size: 1.1rem;
    opacity: 0.6;
}

.qpm-variants-table-wrap[b-x47jqt9ov6] {
    max-height: 30vh;
    overflow-y: auto;
}

.qpm-variants-table[b-x47jqt9ov6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.qpm-variants-table thead th[b-x47jqt9ov6] {
    position: sticky;
    top: 0;
    background: var(--ds-surface, #fff);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qpm-variants-table tbody td[b-x47jqt9ov6] {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--ds-border-soft, #f1f5f9);
}

.qpm-num[b-x47jqt9ov6] {
    text-align: right;
}

.qpm-sku[b-x47jqt9ov6] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    color: var(--ds-text, #1e293b);
}

.qpm-del[b-x47jqt9ov6] {
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s ease;
}

.qpm-del:hover[b-x47jqt9ov6] {
    background: rgba(220, 38, 38, 0.1);
}

/* ===== Footer ===== */
.qpm-foot[b-x47jqt9ov6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ds-surface-alt, #f8fafc);
    border-top: 1px solid var(--ds-border, #e2e8f0);
}

@media (max-width: 640px) {
    .qpm-grid[b-x47jqt9ov6] {
        grid-template-columns: 1fr;
    }

    .qpm-col-2[b-x47jqt9ov6] {
        grid-column: span 1;
    }
}

/* Product title autocomplete / duplicate-prevention */
.qpm-title-suggest[b-x47jqt9ov6] { border: 1px solid #ffe0a3; background: #fffdf5; border-radius: 6px; margin-top: 4px; overflow: hidden; }
.qpm-title-suggest-head[b-x47jqt9ov6] { padding: 6px 10px; font-size: .78rem; background: #fff3cd; color: #664d03; }
.qpm-title-suggest-item[b-x47jqt9ov6] { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none; background: #fff; padding: 7px 10px; font-size: .82rem; border-top: 1px solid #f1e7c9; cursor: pointer; }
.qpm-title-suggest-item:hover[b-x47jqt9ov6] { background: #f7f9ff; }
.qpm-title-suggest-new[b-x47jqt9ov6] { width: 100%; border: none; border-top: 1px solid #f1e7c9; background: #eef7ee; color: #1c6b2c; padding: 7px 10px; font-size: .82rem; cursor: pointer; text-align: left; }
.qpm-title-suggest-new:hover[b-x47jqt9ov6] { background: #e2f0e2; }
/* /Components/Shared/ReadOnlyBanner.razor.rz.scp.css */
.readonly-banner[b-f8ft8cxdar] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.85rem;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.88rem;
}

.readonly-banner i[b-f8ft8cxdar] {
    font-size: 1rem;
    flex-shrink: 0;
}

.readonly-banner strong[b-f8ft8cxdar] {
    margin-right: 0.25rem;
}

/* Pinned just below a fixed form header so the reason stays on-screen while scrolling. */
.readonly-banner-sticky[b-f8ft8cxdar] {
    position: sticky;
    top: 5rem;
    z-index: 1019;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* Status Badge Styles */
.status-badge[b-iffctc947i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.status-badge i[b-iffctc947i] {
    font-size: 10px;
}

/* Status Colors */
.status-active[b-iffctc947i],
.status-approved[b-iffctc947i],
.status-completed[b-iffctc947i],
.status-paid[b-iffctc947i],
.status-delivered[b-iffctc947i] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-pending[b-iffctc947i],
.status-draft[b-iffctc947i] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-rejected[b-iffctc947i],
.status-cancelled[b-iffctc947i],
.status-failed[b-iffctc947i] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-processing[b-iffctc947i],
.status-in-progress[b-iffctc947i] {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.status-partial[b-iffctc947i] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-inactive[b-iffctc947i] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}
/* /Components/Shared/VariantMatrixBuilder.razor.rz.scp.css */
/* ============================================================
   Variant Matrix Builder (Product Master — generate variants)
   ============================================================ */

.vmb-backdrop[b-7hn2diu8lj] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1080;
    animation: vmb-fade-b-7hn2diu8lj 0.15s ease;
}

.vmb-modal[b-7hn2diu8lj] {
    position: fixed;
    inset: 0;
    z-index: 1081;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 1rem;
    pointer-events: none;
}

.vmb-dialog[b-7hn2diu8lj] {
    pointer-events: auto;
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 12px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: vmb-pop-b-7hn2diu8lj 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vmb-fade-b-7hn2diu8lj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vmb-pop-b-7hn2diu8lj {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Header ===== */
.vmb-head[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ds-primary-dark, #1e40af);
    color: var(--ds-text-invert, #fff);
}

.vmb-head-title[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.vmb-head-title i[b-7hn2diu8lj] { font-size: 1.1rem; }

.vmb-close[b-7hn2diu8lj] {
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: var(--ds-radius, 6px);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.vmb-close:hover[b-7hn2diu8lj] { background: rgba(255, 255, 255, 0.3); }

/* ===== Body: two sections side by side ===== */
.vmb-body[b-7hn2diu8lj] {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    flex: 1;
}

.vmb-panel[b-7hn2diu8lj] {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    overflow-y: auto;
}

.vmb-panel-fill[b-7hn2diu8lj] {
    width: 268px;
    flex: 0 0 268px;
    background: var(--ds-surface-alt, #fafbfc);
    border-right: 1px solid var(--ds-border, #e2e8f0);
}

.vmb-panel-grow[b-7hn2diu8lj] {
    flex: 1 1 auto;
    min-width: 0;
}

.vmb-panel-head[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ds-primary-dark, #1e40af);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.vmb-panel-hint[b-7hn2diu8lj] {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ds-text-subtle, #94a3b8);
}

.vmb-muted[b-7hn2diu8lj] {
    color: var(--ds-text-muted, #64748b);
    font-size: 0.82rem;
    padding: 0.35rem 0;
}

/* ===== Quick-fill fields (stacked vertically) ===== */
.vmb-field[b-7hn2diu8lj] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.6rem;
}

.vmb-label[b-7hn2diu8lj] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
    margin-bottom: 0.2rem;
}

.vmb-optional[b-7hn2diu8lj] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--ds-text-subtle, #94a3b8);
}

.vmb-hint[b-7hn2diu8lj] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--ds-text-subtle, #94a3b8);
}

.vmb-apply[b-7hn2diu8lj] {
    margin-top: 0.35rem;
    align-self: stretch;
}

/* ===== Colour list (swatch + name, vertical) ===== */
.vmb-colors[b-7hn2diu8lj] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.vmb-color-pill[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius, 6px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #1e293b);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.vmb-color-pill:hover[b-7hn2diu8lj] {
    border-color: var(--ds-primary, #1d4ed8);
    background: var(--ds-primary-soft, #eff4ff);
}

.vmb-color-pill.active[b-7hn2diu8lj] {
    border-color: var(--ds-primary, #1d4ed8);
    background: var(--ds-primary-soft, #eff4ff);
    color: var(--ds-primary-dark, #1e40af);
    font-weight: 600;
}

.vmb-swatch[b-7hn2diu8lj] {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: var(--ds-radius-sm, 4px);
    border: 1px solid rgba(15, 23, 42, 0.2);
    flex: 0 0 auto;
}

.vmb-color-name[b-7hn2diu8lj] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vmb-color-check[b-7hn2diu8lj] {
    flex: 0 0 auto;
    color: var(--ds-primary, #1d4ed8);
    font-size: 0.95rem;
}

/* ===== Matrix grid ===== */
.vmb-grid-wrap[b-7hn2diu8lj] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 8px);
    overflow: auto;
    flex: 1 1 auto;
}

.vmb-grid[b-7hn2diu8lj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.vmb-grid thead th[b-7hn2diu8lj] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ds-head-bg, #f4f6f9);
    color: var(--ds-text, #334155);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.55rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.vmb-grid tbody td[b-7hn2diu8lj] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--ds-grid-line, #edf0f4);
    vertical-align: middle;
}

.vmb-grid tbody tr:hover[b-7hn2diu8lj] { background: var(--ds-row-hover, #f3f6fa); }
.vmb-grid tbody tr.vmb-row-on[b-7hn2diu8lj] { background: var(--ds-primary-soft, #eff4ff); }

.vmb-c-chk[b-7hn2diu8lj] { width: 42px; text-align: center; }
.vmb-c-size[b-7hn2diu8lj] { width: 18%; }
.vmb-c-num[b-7hn2diu8lj] { width: 20%; }
.vmb-c-pct[b-7hn2diu8lj] { width: 20%; }

/* Center the include checkbox in its cell and give it a comfortable hit area */
.vmb-c-chk input[type="checkbox"][b-7hn2diu8lj] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.vmb-grid thead th.vmb-c-chk[b-7hn2diu8lj],
.vmb-grid tbody td.vmb-c-chk[b-7hn2diu8lj] {
    text-align: center;
    vertical-align: middle;
}

.vmb-size-name[b-7hn2diu8lj] { font-weight: 600; color: var(--ds-text, #1e293b); }

/* ===== Footer ===== */
.vmb-foot[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface-alt, #fafbfc);
}

.vmb-foot-summary[b-7hn2diu8lj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ds-slate, #475569);
}

.vmb-foot-sep[b-7hn2diu8lj] { color: var(--ds-text-subtle, #94a3b8); }
.vmb-foot-total[b-7hn2diu8lj] { color: var(--ds-primary-dark, #1e40af); }

.vmb-foot-actions[b-7hn2diu8lj] {
    display: flex;
    gap: 0.5rem;
}

/* ===== Responsive: stack sections on small screens ===== */
@media (max-width: 720px) {
    .vmb-body[b-7hn2diu8lj] {
        flex-direction: column;
        overflow-y: auto;
    }

    .vmb-panel-fill[b-7hn2diu8lj] {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--ds-border, #e2e8f0);
    }

    .vmb-colors[b-7hn2diu8lj] { max-height: 160px; }
}
/* /Components/Shared/VariantMatrixModal.razor.rz.scp.css */
/* ============================================================
   Multi-Variant Matrix Entry Modal
   ============================================================ */

.vmx-backdrop[b-v1h175eftg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1080;
    animation: vmx-fade-b-v1h175eftg 0.15s ease;
}

.vmx-modal[b-v1h175eftg] {
    position: fixed;
    inset: 0;
    z-index: 1081;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 1rem;
    pointer-events: none;
}

.vmx-dialog[b-v1h175eftg] {
    pointer-events: auto;
    width: 100%;
    max-width: 1145px; /* Increased by 30% from 880px */
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--ds-radius-lg, 12px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: vmx-pop-b-v1h175eftg 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vmx-fade-b-v1h175eftg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vmx-pop-b-v1h175eftg {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Header ===== */
.vmx-head[b-v1h175eftg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ds-primary-dark, #1e40af);
    color: #fff;
}

.vmx-head-title[b-v1h175eftg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.vmx-head-title i[b-v1h175eftg] { font-size: 1.1rem; }

.vmx-close[b-v1h175eftg] {
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.vmx-close:hover[b-v1h175eftg] { background: rgba(255, 255, 255, 0.3); }

/* ===== Body ===== */
.vmx-body[b-v1h175eftg] {
    padding: 0.9rem 1rem;
    overflow-y: auto;
    flex: 1;
}

.vmx-pickers[b-v1h175eftg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.vmx-picker[b-v1h175eftg] { display: flex; flex-direction: column; min-width: 330px; } /* Increased by 50% from 220px */
.vmx-picker-grow[b-v1h175eftg] { flex: 1; min-width: 360px; } /* Increased proportionally */

.vmx-picker > label[b-v1h175eftg] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ds-text-muted, #64748b);
    margin-bottom: 0.25rem;
}

.vmx-muted[b-v1h175eftg] {
    display: flex;
    align-items: center;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.82rem;
    padding: 0.35rem 0;
}

/* ===== Color pills ===== */
.vmx-colors[b-v1h175eftg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vmx-color-pill[b-v1h175eftg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vmx-color-pill:hover[b-v1h175eftg] {
    border-color: var(--ds-primary, #1d4ed8);
    color: var(--ds-primary, #1d4ed8);
}

.vmx-color-pill.active[b-v1h175eftg] {
    background: var(--ds-primary, #1d4ed8);
    border-color: var(--ds-primary, #1d4ed8);
    color: #fff;
}

.vmx-color-count[b-v1h175eftg] {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    font-size: 0.68rem;
    font-weight: 700;
}

.vmx-color-pill.active .vmx-color-count[b-v1h175eftg] { background: rgba(255, 255, 255, 0.28); }

/* ===== Quick fill bar ===== */
.vmx-quickfill[b-v1h175eftg] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.6rem;
    background: var(--ds-primary-soft, #eff4ff);
    border: 1px solid #dbe6ff;
    border-radius: var(--ds-radius-md, 10px);
}

.vmx-quickfill-label[b-v1h175eftg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ds-primary-dark, #1e40af);
}

.vmx-quickfill-field[b-v1h175eftg] { display: flex; flex-direction: column; }

.vmx-quickfill-field > label[b-v1h175eftg] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

.vmx-quickfill-field input[b-v1h175eftg] { width: 92px; }

/* ===== Matrix grid ===== */
.vmx-grid-wrap[b-v1h175eftg] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
    overflow: auto;
    max-height: 46vh;
}

.vmx-grid[b-v1h175eftg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.vmx-grid thead th[b-v1h175eftg] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ds-head-bg, #f4f6f9);
    color: #334155;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.55rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.vmx-grid tbody td[b-v1h175eftg] {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--ds-grid-line, #edf0f4);
    vertical-align: middle;
}

.vmx-grid tbody tr:hover[b-v1h175eftg] { background: var(--ds-row-hover, #f3f6fa); }
.vmx-grid tbody tr.vmx-row-on[b-v1h175eftg] { background: var(--ds-primary-soft, #eff4ff); }

.vmx-c-chk[b-v1h175eftg] { width: 38px; text-align: center; }
.vmx-c-size[b-v1h175eftg] { width: 22%; }
.vmx-c-sku[b-v1h175eftg] { width: 24%; }
.vmx-c-stock[b-v1h175eftg] { width: 80px; text-align: center; }
.vmx-c-rate[b-v1h175eftg] { width: 110px; }
.vmx-c-qty[b-v1h175eftg] { width: 100px; }
.vmx-c-total[b-v1h175eftg] { width: 110px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

.vmx-size-name[b-v1h175eftg] { font-weight: 600; color: #1e293b; }
.vmx-size-len[b-v1h175eftg] { margin-left: 0.35rem; color: var(--ds-text-muted, #64748b); font-size: 0.72rem; }
.vmx-sku[b-v1h175eftg] { color: var(--ds-primary, #1d4ed8); font-weight: 600; font-size: 0.76rem; }

.vmx-stock[b-v1h175eftg] {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.72rem;
}

.vmx-stock.ok[b-v1h175eftg] { background: #f0fdf4; color: #15803d; }
.vmx-stock.out[b-v1h175eftg] { background: #fef2f2; color: #b91c1c; }

/* ===== Footer ===== */
.vmx-foot[b-v1h175eftg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    background: #fafbfc;
}

.vmx-foot-summary[b-v1h175eftg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #334155;
}

.vmx-foot-sep[b-v1h175eftg] { color: #cbd5e1; }

.vmx-foot-actions[b-v1h175eftg] { display: flex; gap: 0.5rem; }

@media (max-width: 640px) {
    .vmx-c-sku[b-v1h175eftg] { display: none; }
    .vmx-foot[b-v1h175eftg] { flex-direction: column; align-items: stretch; }
    .vmx-foot-actions[b-v1h175eftg] { justify-content: flex-end; }
}
/* /Components/Shared/VariantSelector.razor.rz.scp.css */
.variant-selector[b-8nsmacc5n1] {
    position: relative;
}

.variant-selector .dropdown-menu[b-8nsmacc5n1] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 2px;
}

/* Fixed-position results menu: escapes ancestor overflow clipping (grid scroll
   containers, cards) so the list is never cut off or hidden behind the sections
   that follow. JS (variant-selector.js) sets top/left/width/max-height. */
.variant-selector .variant-dropdown[b-8nsmacc5n1] {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
}

.variant-selector .variant-item[b-8nsmacc5n1] {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s;
}

.variant-selector .variant-item:hover[b-8nsmacc5n1] {
    background-color: #f8f9fa;
}

.variant-selector .variant-item.active[b-8nsmacc5n1] {
    background-color: #e7f3ff;
    border-left: 3px solid #0d6efd;
}

.variant-selector .variant-item:last-child[b-8nsmacc5n1] {
    border-bottom: none;
}

.variant-selector .selected-variant-info[b-8nsmacc5n1] {
    animation: fadeIn-b-8nsmacc5n1 0.3s ease-in;
}

@keyframes fadeIn-b-8nsmacc5n1 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.variant-selector .spinner-border-sm[b-8nsmacc5n1] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.variant-selector .badge[b-8nsmacc5n1] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}