/* ═══════════════════════════════════════
   PIXELIZZ BUSINESS OS — ADMIN THEME
   ═══════════════════════════════════════ */

/* ══════════════════════
   SIDEBAR
   ══════════════════════ */

/* Sidebar background */
.fi-sidebar {
    background-color: #1a1a2e !important;
    border-right: none !important;
}

/* Sidebar header (logo area) */
.fi-sidebar-header {
    background-color: #1a1a2e !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 1rem 1.25rem !important;
}

/* Brand/Logo text */
.fi-logo {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* ══════════════════════
   NAVIGATION ITEMS
   ══════════════════════
   Was written against .fi-nav-item*/.fi-nav-group-* — class names from an
   older Filament version. The installed Filament 3.3.54 renders sidebar
   items/groups as .fi-sidebar-item*/.fi-sidebar-group-* instead (confirmed
   by dumping the real rendered page — .fi-nav-item matched 0 elements,
   .fi-sidebar-item matched 110). Every rule below was therefore dead CSS:
   items fell back to Filament's own light-mode default colors over this
   dark sidebar background (low contrast), and grouped/collapsible items
   (Catalog, Warehouse) had no active/hover/indent styling at all. Retargeted
   1:1 to the real classes, same intended design (dark item text, red active
   state, indented dimmer sub-items). */

/* Nav item base — the <a>/<button> itself carries .fi-sidebar-item-button */
.fi-sidebar-item-button {
    color: rgba(255,255,255,0.65) !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    transition: all 0.15s ease !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* Nav item hover */
.fi-sidebar-item-button:hover {
    background-color: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* Active nav item — RED background. .fi-active lands on the <li> (.fi-sidebar-item), not the button. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: #f84545 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-shadow: 0 1px 4px rgba(200,0,0,0.4) !important;
    box-shadow: 0 2px 8px rgba(248,69,69,0.35) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button:hover {
    background-color: #e03030 !important;
}

/* Sub items — items nested one level down: either inside a collapsible
   NavigationGroup (.fi-sidebar-group-items, e.g. Catalog/Warehouse's
   children) or under a single item's own child-items
   (.fi-sidebar-sub-group-items). Both styled the same: smaller, dimmer,
   indented. */
.fi-sidebar-group-items .fi-sidebar-item-button,
.fi-sidebar-sub-group-items .fi-sidebar-item-button {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.78rem !important;
    padding: 5px 10px 5px 28px !important;
    text-shadow: none !important;
}

.fi-sidebar-group-items .fi-sidebar-item-button:hover,
.fi-sidebar-sub-group-items .fi-sidebar-item-button:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.05) !important;
}

.fi-sidebar-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-sub-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(248,69,69,0.15) !important;
    color: #f84545 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Nav item label text */
.fi-sidebar-item-label {
    font-size: 0.82rem !important;
    color: inherit !important;
}

/* Nav item icon */
.fi-sidebar-item-icon {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
}

/* Nav item badge (notification count) — Filament's own .fi-badge component */
.fi-sidebar-item-button .fi-badge {
    background-color: #f84545 !important;
    color: #ffffff !important;
    font-size: 0.6rem !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
}

/* Active item badge */
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-badge {
    background-color: #ffffff !important;
    color: #f84545 !important;
}

/* ══════════════════════
   NAV GROUP HEADINGS (Catalog/Warehouse/System)
   ══════════════════════
   These used to look like a separate muted "section divider" label (small,
   0.3 opacity, uppercase, letter-spaced) — visibly different from the flat
   items above (Dashboard/Orders/Purchase/...). Faisal wants the group's own
   clickable row to blend in as just another menu item, not stand apart, so
   this now matches .fi-sidebar-item-button/-label exactly instead of having
   its own distinct "section label" treatment. */

.fi-sidebar-group-label {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* Group heading row (icon + label + collapse chevron) — same box model as
   a regular item row (.fi-sidebar-item-button above) so it reads as one
   more clickable menu row rather than a section header. */
.fi-sidebar-group-button {
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    transition: all 0.15s ease !important;
}

.fi-sidebar-group-button:hover {
    background-color: rgba(255,255,255,0.07) !important;
}

.fi-sidebar-group-button:hover .fi-sidebar-group-label {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* Group collapse chevron button — same resting/hover tone as regular item text/icons, not a separately-muted control */
.fi-sidebar-group-collapse-button {
    color: rgba(255,255,255,0.65) !important;
}

.fi-sidebar-group-collapse-button:hover {
    color: #ffffff !important;
}

/* =====================================================
   Pixelizz Sidebar — Compact Navigation Spacing
   =====================================================
   Confirmed by dumping the real rendered /admin sidebar DOM (not guessed):
   the "excessive gap between Reports/Catalog/Website CMS/Warehouse/System"
   is Filament's own compiled Tailwind class on the groups list itself —
   <ul class="fi-sidebar-nav-groups -mx-2 flex flex-col gap-y-7"> — gap-y-7
   = 1.75rem = 28px between every top-level group block. Sub-item spacing
   (.fi-sidebar-group-items, e.g. "Audit"/"Settings" under System) already
   uses gap-y-1 (4px) — already tight; those two items simply sit right
   after that same 28px group gap, which is what actually reads as
   "excessive space around Audit, Settings". <nav class="fi-sidebar-nav">
   itself also carries gap-y-7, but was confirmed (via DOM child dump) to
   have only one real flex child (the groups <ul>), so it has no visible
   effect and is deliberately left untouched — only fixing what the DOM
   proves is actually rendering the gap.

   Item row height was NOT touched beyond adding an explicit min-height:
   main items already compute to ~40px (24px icon + 8px+8px padding from
   Filament's own py-2, matching this file's existing
   `.fi-sidebar-item-button { padding: 8px 12px }` override) — already
   inside the 36–40px target, so only a min-height floor was added for
   robustness, not a padding change. Sub-items' existing 5px vertical
   padding was nudged to 6px (the low end of the 6–8px target) with a
   min-height floor added the same way. Horizontal padding/indentation,
   icons, typography, active/hover colors, borders, and collapse behavior
   are all untouched — verified by only editing padding-block/min-height/
   gap properties below, nothing else. */

.fi-sidebar-nav-groups {
    gap: 14px !important; /* was gap-y-7 = 28px (Filament default) */
}

.fi-sidebar-item-button {
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.fi-sidebar-group-button {
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.fi-sidebar-group-items .fi-sidebar-item-button,
.fi-sidebar-sub-group-items .fi-sidebar-item-button {
    min-height: 34px !important;
    box-sizing: border-box !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ══════════════════════
   SIDEBAR FOOTER
   ══════════════════════ */

.fi-sidebar-footer {
    background-color: rgba(0,0,0,0.2) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 0.75rem !important;
}

/* User menu in footer */
.fi-sidebar-footer .fi-avatar {
    border: 2px solid rgba(255,255,255,0.2) !important;
}

.fi-sidebar-footer .fi-user-name {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.8rem !important;
}

.fi-sidebar-footer .fi-user-email {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.7rem !important;
}

/* ══════════════════════
   TOPBAR
   ══════════════════════ */

.fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Topbar expand sidebar button */
.fi-topbar-nav {
    color: #595959 !important;
}

/* ══════════════════════
   MAIN CONTENT AREA
   ══════════════════════ */

.fi-main {
    background-color: #f5f5f7 !important;
}

/* Page header */
.fi-page-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 1rem 1.5rem !important;
}

.fi-page-header-heading {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

/* ══════════════════════
   WIDGETS / CARDS
   ══════════════════════ */

/* Stats overview widget */
.fi-wi-stats-overview-stat {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
    color: #8c8c8c !important;
}

/* Chart widget */
.fi-wi-chart {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Table widget */
.fi-ta-table {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ══════════════════════
   BUTTONS
   ══════════════════════ */

/* Primary button */
.fi-btn-color-primary {
    background-color: #f84545 !important;
    border-color: #f84545 !important;
}

.fi-btn-color-primary:hover {
    background-color: #e03030 !important;
    border-color: #e03030 !important;
}

/* ══════════════════════
   BADGES
   ══════════════════════ */

.fi-badge-color-success {
    background-color: #e6f9f0 !important;
    color: #00703c !important;
}

.fi-badge-color-warning {
    background-color: #fff7e6 !important;
    color: #d46b08 !important;
}

.fi-badge-color-danger {
    background-color: #fff1f0 !important;
    color: #cf1322 !important;
}

.fi-badge-color-info {
    background-color: #e6f4ff !important;
    color: #0958d9 !important;
}

/* ══════════════════════
   DASHBOARD GREETING
   ══════════════════════ */

/* Greeting widget gradient */
.pos-greeting {
    background: linear-gradient(
        135deg, #f84545 0%, #ff6b35 100%
    ) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    color: #ffffff !important;
    margin-bottom: 1rem !important;
}

/* ══════════════════════
   SCROLLBAR
   ══════════════════════ */

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bfbfbf;
}

/* Sidebar scrollbar */
.fi-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}

.fi-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* ══════════════════════════════════════
   MODERN CARD STYLES
   Inspired by colorful account card design
   ══════════════════════════════════════ */

/* ── STAT CARDS ── */
.fi-wi-stats-overview {
    gap: 1rem !important;
}

.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 1.25rem 1.5rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) !important;
}

/* Stat icon circle (top right) */
.fi-wi-stats-overview-stat-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
}

/* Color variants for stat icon */
.fi-wi-stats-overview-stat-color-success .fi-wi-stats-overview-stat-icon {
    background: #e6f9f0 !important;
    color: #00b96b !important;
}
.fi-wi-stats-overview-stat-color-danger .fi-wi-stats-overview-stat-icon {
    background: #fff1f0 !important;
    color: #f84545 !important;
}
.fi-wi-stats-overview-stat-color-warning .fi-wi-stats-overview-stat-icon {
    background: #fff7e6 !important;
    color: #ff8c00 !important;
}
.fi-wi-stats-overview-stat-color-info .fi-wi-stats-overview-stat-icon {
    background: #e6f4ff !important;
    color: #1890ff !important;
}
.fi-wi-stats-overview-stat-color-primary .fi-wi-stats-overview-stat-icon {
    background: #fff1f0 !important;
    color: #f84545 !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important;
    color: #8c8c8c !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0.5rem !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.72rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ── COLORFUL ACCOUNT/BALANCE CARDS ── */
/* Apply to specific widgets via custom class */

/* Cash card — warm orange */
.pix-card-cash {
    background: linear-gradient(
        135deg, #fff8f0 0%, #fff3e6 100%
    ) !important;
    border: 1px solid #ffe0b2 !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}

/* Bank card — cool blue */
.pix-card-bank {
    background: linear-gradient(
        135deg, #f0f7ff 0%, #e6f0fd 100%
    ) !important;
    border: 1px solid #b3d1f7 !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}

/* bKash card — pink */
.pix-card-bkash {
    background: linear-gradient(
        135deg, #fff0f6 0%, #fde8f0 100%
    ) !important;
    border: 1px solid #f7b3d1 !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}

/* Nagad card — teal/green */
.pix-card-nagad {
    background: linear-gradient(
        135deg, #f0faf5 0%, #e6f7ef 100%
    ) !important;
    border: 1px solid #b3e6cc !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
}

/* ── CHART WIDGETS ── */
.fi-wi-chart {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 1.5rem !important;
}

.fi-wi-chart-heading {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin-bottom: 1rem !important;
}

/* ── TABLE WIDGETS ── */
.fi-wi-ta {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}

/* ── SECTION CARDS ── */
.fi-section {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    margin-bottom: 1.25rem !important;
}
.fi-section-header {
    background: #fafafa !important;
}
.fi-section-header-heading {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
.fi-section-header-description {
    font-size: 0.8rem !important;
    color: #8c8c8c !important;
}
.fi-section-content {
    padding: 1.5rem !important;
}

/* ── SETTINGS: CUSTOM SELECT CARDS (branch mode, business type) ── */
.pix-set-grid-2, .pix-set-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .pix-set-grid-2, .pix-set-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pix-set-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.pix-set-card {
    position: relative;
    text-align: left;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pix-set-card:hover { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.pix-set-card-active {
    border-color: #f84545 !important;
    background: #fff1f0 !important;
    box-shadow: 0 4px 12px rgba(248,69,69,0.12) !important;
}
.pix-set-card-check {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #f84545;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pix-set-card-check svg { width: 0.75rem; height: 0.75rem; color: #ffffff; }
.pix-set-card-emoji { font-size: 1.5rem; margin-bottom: 0.75rem; }
.pix-set-card-icon {
    margin-bottom: 0.75rem;
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    background: #f5f5f7;
}
.pix-set-card-icon-active { background: #ffe0e0; }
.pix-set-card-icon svg { width: 1.25rem; height: 1.25rem; }
.pix-set-icon-blue { background: #e6f4ff; color: #0958d9; }
.pix-set-icon-purple { background: #f3e8ff; color: #7e22ce; }
.pix-set-icon-green { background: #e6f9f0; color: #00703c; }
.pix-set-icon-orange { background: #fff7e6; color: #d46b08; }
.pix-set-icon-red { background: #fff1f0; color: #cf1322; }
.pix-set-icon-teal { background: #e6fffa; color: #0d9488; }
.pix-set-card-link-wrap { text-decoration: none; display: block; }
.pix-set-card-arrow { margin-top: 0.5rem; font-size: 0.72rem; color: #f84545; font-weight: 600; }
.pix-set-card-title { font-size: 0.85rem; font-weight: 600; color: #1a1a2e; }
.pix-set-card-title-active { color: #c0392b; }
.pix-set-card-desc { margin-top: 0.25rem; font-size: 0.75rem; color: #8c8c8c; }
.pix-set-card-link { margin-top: 0.5rem; font-size: 0.75rem; color: #f84545; font-weight: 600; }

/* core module rows */
.pix-set-module-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    padding: 0.75rem 1rem;
}
.pix-set-module-row-name { font-size: 0.82rem; font-weight: 600; color: #1a1a2e; }
.pix-set-module-row-desc { font-size: 0.72rem; color: #8c8c8c; }
.pix-set-badge-core {
    flex-shrink: 0;
    border-radius: 9999px;
    background: #e6f9f0;
    color: #00703c;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.625rem;
}

/* toggle module cards (industry/addon) */
.pix-set-toggle-card {
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    transition: all 0.15s ease;
}
.pix-set-toggle-card-active {
    border-color: #f8a8a8 !important;
    background: #fff8f8 !important;
}
.pix-set-toggle-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.pix-set-toggle-name { font-size: 0.82rem; font-weight: 600; color: #1a1a2e; }
.pix-set-toggle-name-active { color: #c0392b; }
.pix-set-toggle-desc { margin-top: 0.125rem; font-size: 0.72rem; color: #8c8c8c; }
.pix-set-type-badge {
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
}
.pix-set-type-industry { background: #e6f4ff; color: #0958d9; }
.pix-set-type-addon { background: #f3e8ff; color: #7e22ce; }

.pix-set-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pix-set-switch-active { background: #f84545; }
.pix-set-switch-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateX(0);
    transition: transform 0.2s ease;
}
.pix-set-switch-active .pix-set-switch-knob { transform: translateX(1.25rem); }

.pix-set-features { border-top: 1px solid #f0f0f0; padding: 0.75rem 1.25rem; }
.pix-set-features-label {
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #8c8c8c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pix-set-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    padding: 0.125rem 0.625rem;
    background: #f5f5f7;
    color: #8c8c8c;
}
.pix-set-feature-pill-on { background: #e6f9f0; color: #00703c; }
.pix-set-feature-pill svg { width: 0.65rem; height: 0.65rem; }

.pix-set-badge-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #fff1f0;
    color: #cf1322;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
}

/* ── AUDIT DASHBOARD (Activity Monitor) ── */
.pix-audit-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .pix-audit-stats { grid-template-columns: repeat(4, 1fr); }
}
.pix-audit-stat-box {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 1rem;
    text-align: center;
}
.pix-audit-stat-value { font-size: 1.875rem; font-weight: 700; color: #f84545; }
.pix-audit-stat-value-green { color: #00b96b; }
.pix-audit-stat-value-red { color: #cf1322; }
.pix-audit-stat-value-gray { color: #374151; font-size: 1.25rem; }
.pix-audit-stat-label { font-size: 0.82rem; color: #8c8c8c; margin-top: 0.25rem; }

.pix-audit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .pix-audit-grid { grid-template-columns: 2fr 1fr; }
}
.pix-audit-card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 1.25rem;
}
.pix-audit-card-critical { border-color: #fecaca; }
.pix-audit-card-title { font-size: 1rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; }
.pix-audit-card-title-critical { color: #b91c1c; }

.pix-audit-filter-pill {
    padding: 0.25rem 0.75rem;
    font-size: 0.72rem;
    border-radius: 9999px;
    font-weight: 500;
    background: #f5f5f7;
    color: #6b7280;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pix-audit-filter-pill-active { background: #f84545; color: #ffffff; }

.pix-audit-timeline { max-height: 480px; overflow-y: auto; padding-right: 0.25rem; }
.pix-audit-timeline-row { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.75rem; }
.pix-audit-timeline-dotcol { display: flex; flex-direction: column; align-items: center; margin-top: 0.25rem; }
.pix-audit-timeline-line { width: 1px; height: 100%; min-height: 20px; background: #e5e7eb; margin-top: 0.25rem; flex-shrink: 0; }
.pix-audit-timeline-time { font-size: 0.72rem; color: #9ca3af; margin-bottom: 0.125rem; }
.pix-audit-timeline-text { font-size: 0.85rem; color: #1f2937; }
.pix-audit-timeline-desc { font-size: 0.72rem; color: #9ca3af; }

.pix-audit-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pix-audit-bar-label { width: 6rem; font-size: 0.72rem; color: #6b7280; text-transform: capitalize; }
.pix-audit-bar-track { flex: 1; background: #f3f4f6; border-radius: 9999px; height: 1rem; overflow: hidden; }
.pix-audit-bar-fill { background: #f84545; height: 1rem; border-radius: 9999px; transition: width 0.3s ease; }
.pix-audit-bar-count { width: 1.5rem; text-align: right; font-size: 0.72rem; font-weight: 600; color: #4b5563; }

.pix-audit-login-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.pix-audit-login-row:last-child { border-bottom: none; }
.pix-audit-login-ip { font-size: 0.7rem; color: #9ca3af; margin-left: 0.25rem; }
.pix-audit-login-time { font-size: 0.7rem; color: #9ca3af; }

.pix-audit-severity-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.pix-audit-severity-critical { background: #fee2e2; color: #b91c1c; }
.pix-audit-severity-warning { background: #ffedd5; color: #c2410c; }

/* ── DATA TABLE ── */
.fi-ta-table {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}

.fi-ta-header {
    background: #fafafa !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 0.75rem 1.25rem !important;
}

.fi-ta-header-cell {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #8c8c8c !important;
    padding: 6px 10px !important;
    border-right: 1px solid #f0f0f0 !important;
}

.fi-ta-cell {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    line-height: 1.25 !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-right: 1px solid #f0f0f0 !important;
}

/* Visible grid look (row + column dividers) applied app-wide — was
   previously a 0.5px row-only line with no column dividers at all;
   originally built for Inventory Overview then generalized here to
   every resource table per direct request, rather than kept as a
   per-page override. */
.fi-ta-header-cell:last-child,
.fi-ta-cell:last-child {
    border-right: none !important;
}

.fi-ta-row:last-child .fi-ta-cell {
    border-bottom: none !important;
}

.fi-ta-row:hover .fi-ta-cell {
    background: #fafafa !important;
}

.fi-ta-row {
    line-height: 1.1 !important;
}

/* ── TOPBAR ── */
.fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    height: 56px !important;
}

/* Search in topbar */
.fi-global-search-field {
    background: #f5f5f7 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
}

/* Primary action button in topbar */
.fi-topbar .fi-btn-color-primary {
    background: #f84545 !important;
    border-color: #f84545 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
}

/* User avatar in topbar */
.fi-user-avatar {
    background: #f84545 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
}

/* ── DASHBOARD PAGE CONTENT ── */
.fi-page-content {
    padding: 1.25rem 1.5rem !important;
}

/* Dashboard heading */
.fi-page-header-heading {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

/* ══════════════════════════════════════
   DASHBOARD HERO BANNER
   ══════════════════════════════════════ */
.pix-hero-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 45%, #0f3460 100%);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.pix-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pix-hero-orb-1 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(248,69,69,0.18) 0%, transparent 70%);
    top: -100px;
    right: 80px;
}
.pix-hero-orb-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    bottom: -80px;
    right: 240px;
}
.pix-hero-left {
    flex: 1;
    min-width: 0;
}
.pix-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(248,69,69,0.15);
    border: 1px solid rgba(248,69,69,0.3);
    color: #f87171;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.pix-hero-greeting {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
    line-height: 1.2;
}
.pix-hero-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 22px 0;
}
.pix-hero-stats {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}
.pix-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 12px 18px;
    transition: background 0.2s;
}
.pix-hero-stat:hover {
    background: rgba(255,255,255,0.12);
}
.pix-hero-stat-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.pix-hero-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.pix-hero-stat-lbl {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1px;
}
.pix-hero-divider {
    width: 1px;
    background: rgba(255,255,255,0.1);
    align-self: stretch;
    display: none;
}
.pix-hero-right {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}
.pix-hero-clock-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pix-hero-clock {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -1px;
}
.pix-hero-clock-ampm {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.05em;
}
.pix-hero-clock-lbl {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}
.pix-hero-clock-badge {
    font-size: 0.65rem;
    color: #4ade80;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: 8px;
    font-weight: 600;
}

/* ══════════════════════════════════════
   KPI SUMMARY CARDS
   ══════════════════════════════════════ */
.pix-kpi-grid {
    display: grid;
    grid-template-columns: repeat(var(--kpi-count, 5), minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}
@media (max-width: 1024px) {
    .pix-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pix-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pix-kpi-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.pix-kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.18s;
}
.pix-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
.pix-kpi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pix-kpi-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
/* Color variants */
.pix-kpi-c0 .pix-kpi-icon-wrap { background: #fff0f0; }
.pix-kpi-c1 .pix-kpi-icon-wrap { background: #e6f4ff; }
.pix-kpi-c2 .pix-kpi-icon-wrap { background: #f0fdf4; }
.pix-kpi-c3 .pix-kpi-icon-wrap { background: #fff7ed; }
.pix-kpi-c4 .pix-kpi-icon-wrap { background: #faf5ff; }
.pix-kpi-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.pix-kpi-badge-up { background: #e6f9f0; color: #00703c; }
.pix-kpi-badge-dn { background: #fff1f0; color: #cf1322; }
.pix-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 2px;
}
.pix-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #595959;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pix-kpi-sub {
    font-size: 0.65rem;
    color: #8c8c8c;
    margin-top: 1px;
}
.pix-kpi-footer {
    font-size: 0.65rem;
    color: #bfbfbf;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
    transition: color 0.15s;
}
.pix-kpi-card:hover .pix-kpi-footer {
    color: #f84545;
}

/* ── MODAL ── */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.12) !important;
    border: 1px solid #f0f0f0 !important;
}

.fi-modal-header {
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 1.25rem 1.5rem !important;
}

.fi-modal-header-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

/* ── BUTTONS ── */
.fi-btn {
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

.fi-btn-color-primary {
    background: #f84545 !important;
    border-color: #f84545 !important;
}

.fi-btn-color-primary:hover {
    background: #e03030 !important;
}

/* ── TABS ── */
.fi-tabs-tab[aria-selected="true"] {
    color: #f84545 !important;
    border-bottom-color: #f84545 !important;
    font-weight: 600 !important;
}

/* ── BADGES ── */
.fi-badge {
    border-radius: 20px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
}

.fi-badge-color-success {
    background: #e6f9f0 !important;
    color: #00703c !important;
}
.fi-badge-color-warning {
    background: #fff7e6 !important;
    color: #d46b08 !important;
}
.fi-badge-color-danger {
    background: #fff1f0 !important;
    color: #cf1322 !important;
}
.fi-badge-color-info {
    background: #e6f4ff !important;
    color: #0958d9 !important;
}
.fi-badge-color-gray {
    background: #f5f5f5 !important;
    color: #595959 !important;
}

/* ── FORM INPUTS ── */
.fi-input,
.fi-select,
.fi-textarea {
    border-color: #e8e8e8 !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    background: #fafafa !important;
    transition: all 0.15s !important;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus {
    border-color: #f84545 !important;
    box-shadow: 0 0 0 3px rgba(248,69,69,0.1) !important;
    background: #ffffff !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bfbfbf;
}

/* ══════════════════════════════════════
   ACCOUNT CARDS
   ══════════════════════════════════════ */

.pix-acc-card {
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.15s;
}
.pix-acc-card:hover {
    transform: translateY(-1px);
}
.pix-acc-cash {
    background: #fff8f0;
    border: 0.5px solid #ffe0b2;
}
.pix-acc-bank {
    background: #f0f7ff;
    border: 0.5px solid #b3d1f7;
}
.pix-acc-bkash {
    background: #fff0f6;
    border: 0.5px solid #f7b3d1;
}
.pix-acc-nagad {
    background: #f0faf5;
    border: 0.5px solid #b3e6cc;
}
.pix-acc-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.pix-acc-cash .pix-acc-icon svg { color: #d46b08; }
.pix-acc-bank .pix-acc-icon svg { color: #1890ff; }
.pix-acc-bkash .pix-acc-icon svg { color: #eb2f96; }
.pix-acc-nagad .pix-acc-icon svg { color: #52c41a; }
.pix-acc-type {
    font-size: 9px;
    color: #8c8c8c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}
.pix-acc-name {
    font-size: 12px;
    font-weight: 500;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.pix-acc-bal {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Compact stat cards */
.fi-wi-stats-overview-stat {
    padding: 10px 12px !important;
    border-radius: 10px !important;
}
.fi-wi-stats-overview-stat-value {
    font-size: 1.4rem !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 0.68rem !important;
}

/* Force 6-column layout for SalesStats on large screens */
@media (min-width: 1280px) {
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Dashboard page gap */
.fi-page-content {
    padding: 1rem 1.25rem !important;
    gap: 0.75rem !important;
}

/* ── POS TERMINAL FULL-SCREEN ── */
.fi-page:has(.pos-terminal-wrapper) .fi-page-header {
    display: none !important;
}
.fi-page:has(.pos-terminal-wrapper) .fi-page-content {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    height: calc(100vh - 64px) !important;
}

/* ══════════════════════
   OVERVIEW PAGES (tab-style)
   ══════════════════════ */

.pix-ico-sm { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* Title row */
.pix-ov-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.pix-ov-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.pix-ov-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pix-ov-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background 0.15s ease;
}
.pix-ov-action-btn:hover {
    background: #f9fafb;
}
.pix-ov-action-btn-create {
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(to bottom right, #22c55e, #84cc16);
    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.4);
    border: none;
    transition: all 0.2s ease;
}
.pix-ov-action-btn-create:hover {
    box-shadow: 0 12px 24px -5px rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}

/* Tab bar */
.pix-ov-tabs {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #f9fafb;
    overflow-x: auto;
}
.pix-ov-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border-right: 1px solid #f3f4f6;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.pix-ov-tab:last-child { border-right: none; }
.pix-ov-tab:hover { color: #1f2937; background: rgba(255,255,255,0.6); }
.pix-ov-tab-active {
    color: #ef4444 !important;
    border-bottom-color: #ef4444 !important;
    background: #ffffff !important;
}

/* Bordered stats strip */
.pix-ov-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #ffffff;
    margin-top: -1px;
}
.pix-ov-stat {
    padding: 0.625rem 0.75rem;
    border-right: 1px solid #e5e7eb;
}
.pix-ov-stat:last-child { border-right: none; }
button.pix-ov-stat.pix-ov-stat-clickable {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
button.pix-ov-stat.pix-ov-stat-clickable:hover,
button.pix-ov-stat.pix-ov-stat-clickable:focus-visible {
    background: #f9fafb;
}
.pix-ov-stat-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}
.pix-ov-stat-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.pix-ov-stat-label {
    font-size: 9px;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pix-ov-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}
.pix-ov-stat-desc {
    font-size: 9px;
    margin-top: 0.125rem;
    color: #9ca3af;
}
.pix-ov-stat-desc-up { color: #22c55e; }
.pix-ov-stat-desc-down { color: #ef4444; }

.pix-dot-red { background: #ef4444; }
.pix-dot-orange { background: #f97316; }
.pix-dot-purple { background: #a855f7; }
.pix-dot-teal { background: #14b8a6; }
.pix-dot-green { background: #22c55e; }
.pix-dot-blue { background: #3b82f6; }
.pix-dot-yellow { background: #eab308; }
.pix-dot-gray { background: #9ca3af; }
.pix-dot-violet { background: #9333ea; }
.pix-dot-pink { background: #db2777; }

@media (max-width: 1024px) {
    .pix-ov-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .pix-ov-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Table card (orders overview etc.) */
.pix-ov-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: -1px;
}
.pix-ov-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.pix-ov-table-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* ═══════════════════════════
   CUSTOM TOPBAR — LIGHT/DARK
   ═══════════════════════════ */

/* Hide Filament's default topbar inner elements — our component replaces them */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar nav > div.me-6,
.fi-topbar nav > ul.me-4,
.fi-topbar nav > div.ms-auto {
    display: none !important;
}
.fi-topbar nav {
    background-color: transparent !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    padding: 0 !important;
    height: auto !important;
}
.fi-topbar {
    padding: 0 !important;
}

/* Structural layout */
.pix-topbar-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 3.5rem;
    padding: 0 1rem;
    box-sizing: border-box;
    border-bottom: 0.5px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pix-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.pix-topbar-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}
.pix-topbar-icon-btn svg { width: 1rem; height: 1rem; }
.pix-topbar-bell-btn { width: 2rem; height: 2rem; position: relative; }
.pix-topbar-bell-btn svg { width: 1rem; height: 1rem; }
.pix-topbar-bell-dot {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: #ef4444;
}
.pix-topbar-logo {
    width: 1.75rem;
    height: 1.75rem;
    background-color: #ef4444;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pix-topbar-logo svg { width: 1rem; height: 1rem; color: #ffffff; }
.pix-topbar-logo.pix-topbar-logo-has-image {
    background-color: transparent;
    border-radius: 0;
    width: 2rem;
    height: 2rem;
}
.pix-topbar-logo.pix-topbar-logo-has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pix-topbar-brand-block { line-height: 1.2; }
.pix-topbar-brand { font-size: 0.875rem; font-weight: 700; }
.pix-topbar-brand-sub { font-size: 8.5px; }

.pix-topbar-center { flex: 1; max-width: 28rem; margin: 0 auto; }
.pix-topbar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.pix-topbar-search svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.pix-topbar-search span { font-size: 0.75rem; }

.pix-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    margin-left: auto;
}
.pix-topbar-avatar-init {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pix-topbar-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
}
.pix-topbar-toggle svg { width: 0.875rem; height: 0.875rem; }
.pix-toggle-track { width: 2rem; height: 1rem; border-radius: 9999px; position: relative; }
.pix-toggle-knob {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    position: absolute;
    top: 0.125rem;
    transition: left 0.2s ease;
}
.pix-topbar-pos-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(to bottom right, #22c55e, #84cc16);
    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.4);
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pix-topbar-pos-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -5px rgba(34, 197, 94, 0.5);
}
.pix-topbar-pos-btn svg { width: 0.875rem; height: 0.875rem; }

.pix-topbar-user-wrap { position: relative; flex-shrink: 0; }
.pix-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}
.pix-topbar-user-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 10rem;
    border-radius: 0.5rem;
    padding: 0.375rem;
    z-index: 40;
}
.pix-topbar-user-menu form { margin: 0; }
.pix-topbar-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    border: 0;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.pix-topbar-user-menu-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pix-topbar-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #ef4444, #fb923c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pix-topbar-user-block { line-height: 1.2; display: none; }
@media (min-width: 768px) {
    .pix-topbar-user-block { display: block; }
}
.pix-topbar-username { font-size: 0.75rem; font-weight: 600; }
.pix-topbar-userrole { font-size: 9px; }
.pix-topbar-chevron { width: 0.75rem; height: 0.75rem; }

/* LIGHT MODE */
.pix-topbar-light { background-color: #ffffff; border-bottom-color: #f0f0f0; }
.pix-topbar-light .pix-topbar-brand { color: #1a1a2e; }
.pix-topbar-light .pix-topbar-brand-sub { color: #8c8c8c; }
.pix-topbar-light .pix-topbar-icon-btn { background-color: #f5f5f7; color: #8c8c8c; }
.pix-topbar-light .pix-topbar-search {
    background-color: #f5f5f7;
    border: 0.5px solid #e8e8e8;
    color: #b0b0b0;
}
.pix-topbar-light .pix-topbar-avatar-init { background-color: #1a1a2e; color: #ffffff; }
.pix-topbar-light .pix-topbar-toggle { background-color: #f5f5f7; color: #595959; }
.pix-topbar-light .pix-toggle-track { background-color: #e0e0e0; }
.pix-topbar-light .pix-toggle-knob { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pix-topbar-light .pix-topbar-user:hover { background-color: #f5f5f7; }
.pix-topbar-light .pix-topbar-username { color: #1a1a2e; }
.pix-topbar-light .pix-topbar-userrole { color: #8c8c8c; }
.pix-topbar-light .pix-topbar-chevron { color: #b0b0b0; }
.pix-topbar-light .pix-topbar-user-menu {
    background-color: #ffffff;
    border: 0.5px solid #e8e8e8;
    box-shadow: 0 12px 24px -5px rgba(0,0,0,0.12);
}
.pix-topbar-light .pix-topbar-user-menu-item { color: #ef4444; }
.pix-topbar-light .pix-topbar-user-menu-item:hover { background-color: #fef2f2; }

/* DARK MODE */
.pix-topbar-dark { background-color: #1a1a2e; border-bottom-color: rgba(255,255,255,0.08); }
.pix-topbar-dark .pix-topbar-brand { color: #ffffff; }
.pix-topbar-dark .pix-topbar-brand-sub { color: rgba(255,255,255,0.4); }
.pix-topbar-dark .pix-topbar-icon-btn { background-color: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.pix-topbar-dark .pix-topbar-search {
    background-color: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
}
.pix-topbar-dark .pix-topbar-avatar-init { background-color: rgba(255,255,255,0.1); color: #ffffff; }
.pix-topbar-dark .pix-topbar-toggle { background-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.pix-topbar-dark .pix-toggle-track { background-color: #f84545; }
.pix-topbar-dark .pix-toggle-knob { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.pix-topbar-dark .pix-topbar-user:hover { background-color: rgba(255,255,255,0.06); }
.pix-topbar-dark .pix-topbar-username { color: #ffffff; }
.pix-topbar-dark .pix-topbar-userrole { color: rgba(255,255,255,0.4); }
.pix-topbar-dark .pix-topbar-chevron { color: rgba(255,255,255,0.4); }
.pix-topbar-dark .pix-topbar-user-menu {
    background-color: #1a1a2e;
    border: 0.5px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 24px -5px rgba(0,0,0,0.4);
}
.pix-topbar-dark .pix-topbar-user-menu-item { color: #f87171; }
.pix-topbar-dark .pix-topbar-user-menu-item:hover { background-color: rgba(239,68,68,0.1); }

/* ══════════════════════
   POS TERMINAL (scoped to .pos-page)
   ══════════════════════ */

.pos-page .pos-online-pill {
    font-size: 9px;
    font-weight: 600;
}
.pos-page .pos-pill-on { color: #4ade80; }
.pos-page .pos-pill-off { color: #f87171; }

.pos-page .pos-dropdown-panel {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    font-size: 11px;
    overflow: hidden;
}

.pos-page .pos-new-order-btn {
    background: linear-gradient(135deg, #f84545 0%, #ff6b35 100%);
    box-shadow: 0 2px 10px rgba(248,69,69,0.35);
}
.pos-page .pos-new-order-btn:hover {
    box-shadow: 0 4px 14px rgba(248,69,69,0.5);
    transform: translateY(-1px);
}

.pos-page .pos-shortcut-bar {
    overflow-x: auto;
}
.pos-page .pos-kbd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #1f2937;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pos-page .pos-kbd-chip:hover {
    background: #374151;
    color: #ffffff;
}
.pos-page .pos-kbd-chip kbd {
    background: #374151;
    color: #d1d5db;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 9px;
    font-family: inherit;
}
.pos-page .pos-kbd-chip:hover kbd {
    background: #4b5563;
    color: #ffffff;
}

/* ── POS TERMINAL: fallback color utilities ──
   Filament's compiled CSS excludes these because the panel has
   darkMode(false) — these specific dark-gray / saturated-color
   shades were never used by Filament's own (light-mode) components,
   so they got tree-shaken out of the build. Restoring them here,
   scoped to .pos-page only, with the exact Tailwind v3 palette values. */

.pos-page .bg-gray-600{background-color:#4b5563!important}
.pos-page .bg-gray-700{background-color:#374151!important}
.pos-page .bg-gray-800{background-color:#1f2937!important}
.pos-page .bg-gray-900{background-color:#111827!important}
.pos-page .bg-gray-950{background-color:#030712!important}

.pos-page .border-gray-700{border-color:#374151!important}
.pos-page .border-gray-800{border-color:#1f2937!important}
.pos-page .border-blue-300{border-color:#93c5fd!important}

.pos-page .bg-blue-50{background-color:#eff6ff!important}
.pos-page .bg-blue-100{background-color:#dbeafe!important}
.pos-page .bg-blue-600{background-color:#2563eb!important}
.pos-page .bg-blue-700{background-color:#1d4ed8!important}
.pos-page .text-blue-600{color:#2563eb!important}
.pos-page .text-blue-700{color:#1d4ed8!important}

.pos-page .bg-green-50{background-color:#f0fdf4!important}
.pos-page .bg-green-100{background-color:#dcfce7!important}
.pos-page .bg-green-200{background-color:#bbf7d0!important}
.pos-page .bg-green-400{background-color:#4ade80!important}
.pos-page .bg-green-500{background-color:#22c55e!important}
.pos-page .bg-green-600{background-color:#16a34a!important}
.pos-page .bg-green-700{background-color:#15803d!important}
.pos-page .text-green-400{color:#4ade80!important}
.pos-page .text-green-500{color:#22c55e!important}
.pos-page .text-green-600{color:#16a34a!important}
.pos-page .text-green-700{color:#15803d!important}
.pos-page .text-green-800{color:#166534!important}

.pos-page .bg-red-50{background-color:#fef2f2!important}
.pos-page .bg-red-400{background-color:#f87171!important}
.pos-page .bg-red-500{background-color:#ef4444!important}
.pos-page .bg-red-600{background-color:#dc2626!important}
.pos-page .bg-red-700{background-color:#b91c1c!important}
.pos-page .bg-red-900{background-color:#7f1d1d!important}
.pos-page .text-red-300{color:#fca5a5!important}
.pos-page .text-red-400{color:#f87171!important}
.pos-page .text-red-500{color:#ef4444!important}
.pos-page .text-red-600{color:#dc2626!important}

.pos-page .bg-yellow-400{background-color:#facc15!important}
.pos-page .bg-yellow-500{background-color:#eab308!important}
.pos-page .bg-yellow-600{background-color:#ca8a04!important}
.pos-page .bg-yellow-700{background-color:#a16207!important}
.pos-page .bg-yellow-900{background-color:#713f12!important}
.pos-page .text-yellow-400{color:#facc15!important}
.pos-page .text-yellow-500{color:#eab308!important}
.pos-page .text-yellow-600{color:#ca8a04!important}
.pos-page .text-yellow-900{color:#713f12!important}

.pos-page .text-amber-400{color:#fbbf24!important}
.pos-page .text-amber-500{color:#f59e0b!important}

.pos-page .bg-orange-500{background-color:#f97316!important}
.pos-page .text-orange-400{color:#fb923c!important}

.pos-page .bg-purple-50{background-color:#faf5ff!important}
.pos-page .bg-purple-100{background-color:#f3e8ff!important}
.pos-page .bg-purple-500{background-color:#a855f7!important}
.pos-page .text-purple-600{color:#9333ea!important}
.pos-page .text-purple-700{color:#7e22ce!important}

.pos-page .text-gray-300{color:#d1d5db!important}
.pos-page .text-gray-900{color:#111827!important}

.pos-page .bg-primary-50{background-color:rgba(var(--primary-50),1)!important}
.pos-page .bg-primary-700{background-color:rgba(var(--primary-700),1)!important}
.pos-page .text-primary-300{color:rgba(var(--primary-300),1)!important}

/* hover: variants — Filament's bundle has zero raw Tailwind hover: utilities */
.pos-page .hover\:bg-blue-100:hover{background-color:#dbeafe!important}
.pos-page .hover\:bg-blue-600:hover{background-color:#2563eb!important}
.pos-page .hover\:bg-gray-200:hover{background-color:#e5e7eb!important}
.pos-page .hover\:bg-gray-300:hover{background-color:#d1d5db!important}
.pos-page .hover\:bg-gray-600:hover{background-color:#4b5563!important}
.pos-page .hover\:bg-gray-700:hover{background-color:#374151!important}
.pos-page .hover\:bg-gray-800:hover{background-color:#1f2937!important}
.pos-page .hover\:bg-gray-900:hover{background-color:#111827!important}
.pos-page .hover\:bg-green-100:hover{background-color:#dcfce7!important}
.pos-page .hover\:bg-green-200:hover{background-color:#bbf7d0!important}
.pos-page .hover\:bg-green-400:hover{background-color:#4ade80!important}
.pos-page .hover\:bg-green-600:hover{background-color:#16a34a!important}
.pos-page .hover\:bg-green-700:hover{background-color:#15803d!important}
.pos-page .hover\:bg-primary-50:hover{background-color:rgba(var(--primary-50),1)!important}
.pos-page .hover\:bg-primary-500:hover{background-color:rgba(var(--primary-500),1)!important}
.pos-page .hover\:bg-primary-600:hover{background-color:rgba(var(--primary-600),1)!important}
.pos-page .hover\:bg-primary-700:hover{background-color:rgba(var(--primary-700),1)!important}
.pos-page .hover\:bg-purple-100:hover{background-color:#f3e8ff!important}
.pos-page .hover\:bg-red-700:hover{background-color:#b91c1c!important}
.pos-page .hover\:bg-red-900:hover{background-color:#7f1d1d!important}
.pos-page .hover\:bg-yellow-500:hover{background-color:#eab308!important}
.pos-page .hover\:bg-yellow-600:hover{background-color:#ca8a04!important}
.pos-page .hover\:border-primary-500:hover{border-color:rgba(var(--primary-500),1)!important}
.pos-page .hover\:text-amber-400:hover{color:#fbbf24!important}
.pos-page .hover\:text-gray-300:hover{color:#d1d5db!important}
.pos-page .hover\:text-gray-600:hover{color:#4b5563!important}
.pos-page .hover\:text-primary-300:hover{color:rgba(var(--primary-300),1)!important}
.pos-page .hover\:text-red-300:hover{color:#fca5a5!important}
.pos-page .hover\:text-red-400:hover{color:#f87171!important}
.pos-page .hover\:text-red-600:hover{color:#dc2626!important}

/* grid / placeholder / focus / disabled / opacity-shadow fallbacks */
.pos-page .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.pos-page .grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}

.pos-page .placeholder-gray-500::placeholder{color:#6b7280!important}
.pos-page .placeholder-gray-600::placeholder{color:#4b5563!important}

.pos-page .focus\:border-primary-500:focus{border-color:rgba(var(--primary-500),1)!important}
.pos-page .focus\:ring-primary-500:focus{box-shadow:0 0 0 1px rgba(var(--primary-500),1)!important}
.pos-page .ring-primary-500{box-shadow:0 0 0 2px rgba(var(--primary-500),1)!important}

.pos-page .disabled\:bg-gray-700:disabled{background-color:#374151!important}
.pos-page .disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}
.pos-page .disabled\:opacity-50:disabled{opacity:0.5!important}

.pos-page .shadow-primary-500\/10{box-shadow:0 10px 15px -3px rgba(var(--primary-500),0.1),0 4px 6px -4px rgba(var(--primary-500),0.1)!important}
.pos-page .shadow-green-500\/20{box-shadow:0 10px 15px -3px rgba(34,197,94,0.2),0 4px 6px -4px rgba(34,197,94,0.2)!important}
.pos-page .bg-red-900\/50{background-color:rgba(127,29,29,0.5)!important}

.pos-page .focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}
.pos-page .focus\:ring-1:focus{box-shadow:0 0 0 1px currentColor!important}
.pos-page .focus\:ring-2:focus{box-shadow:0 0 0 2px currentColor!important}
.pos-page .focus\:ring-purple-500:focus{box-shadow:0 0 0 1px #a855f7!important}

/* ══════════════════════
   PURCHASE OVERVIEW
   ══════════════════════ */

.pix-po-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    background: #fff7e6;
    border: 1px solid #ffe0a3;
    color: #ad6800;
    font-size: 0.8rem;
}
.pix-po-alert-link {
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 700;
    color: #d46b08;
    text-decoration: none;
    white-space: nowrap;
}
.pix-po-alert-link:hover { color: #ad6800; }

.pix-po-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.pix-po-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
@media (min-width: 1280px) {
    .pix-po-grid { grid-template-columns: 7fr 3fr; align-items: start; }
}
.pix-po-main { min-width: 0; }
.pix-po-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.pix-po-donut-wrap { display: flex; justify-content: center; }
.pix-po-donut-chart {
    position: relative;
    width: 100%;
    max-width: 220px;
}
.pix-po-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pix-po-donut-total { font-size: 1.05rem; font-weight: 700; color: #111827; }
.pix-po-donut-total-lbl { font-size: 0.65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }

.pix-po-legend { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pix-po-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.pix-po-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.pix-po-legend-label { color: #4b5563; font-weight: 500; }
.pix-po-legend-value { margin-left: auto; color: #111827; font-weight: 600; }

.pix-po-viewall { font-size: 0.72rem; font-weight: 600; color: #f84545; text-decoration: none; }
.pix-po-viewall:hover { color: #e03030; }

.pix-po-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8rem;
}
.pix-po-list-row:last-child { border-bottom: none; }
.pix-po-list-name { display: block; font-weight: 600; color: #1a1a2e; }
.pix-po-list-sub { display: block; font-size: 0.68rem; color: #9ca3af; margin-top: 1px; }
.pix-po-list-amt { display: block; font-weight: 700; color: #1a1a2e; }
.pix-po-list-amt-due { color: #cf1322; }
.pix-po-badge {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    background: #f5f5f7;
    color: #595959;
}
.pix-po-empty { font-size: 0.78rem; color: #9ca3af; padding: 0.5rem 0; }

/* Custom search+filter row replaces the native table toolbar (search field /
   filters dialog / column-toggle) on this page only — scoped so no other
   Overview or Resource table is affected. */
.pix-po-page .fi-ta-header-toolbar { display: none !important; }

.pix-po-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.pix-po-filter-search {
    flex: 1 1 220px;
    min-width: 160px;
    height: 2.25rem;
    padding: 0 0.75rem;
}
.pix-po-filter-date {
    flex: 0 0 auto;
    width: 9.5rem;
    height: 2.25rem;
    padding: 0 0.625rem;
}
.pix-po-filter-select {
    flex: 0 0 auto;
    width: 10rem;
    height: 2.25rem;
    padding: 0 0.625rem;
}
.pix-po-filter-reset {
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .pix-po-filter-date, .pix-po-filter-select { width: 100%; }
}

/* ══════════════════════════════════════
   REPORTS WORKSPACE — additive, do not remove existing rules above
   ══════════════════════════════════════ */

.pix-rep-subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8rem;
    color: #8c8c8c;
}

.pix-rep-launcher-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.pix-rep-launcher-disabled:hover {
    box-shadow: none;
}
.pix-rep-coming-soon {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
}

.pix-rep-chart-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .pix-rep-chart-row-2 { grid-template-columns: 2fr 1fr; }
    .pix-rep-chart-row-3 { grid-template-columns: repeat(3, 1fr); }
}

.pix-rep-independent-note {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media print {
    .fi-sidebar, .fi-topbar, .pix-ov-actions, .pix-ov-tabs, .pix-set-grid-3, .pix-po-pills, .pix-po-filter-row {
        display: none !important;
    }
    .pix-rep-page {
        margin: 0 !important;
    }
}

/* ══════════════════════════════════════
   ORDERS WORKSPACE — additive, do not remove existing rules above
   ══════════════════════════════════════ */

/* Stat-card row itself now reuses .pix-ov-stats/.pix-ov-stat verbatim
   (see kpi-strip.blade.php) — same bordered flat strip as Inventory
   Overview. .pix-order-kpi-strip only exists to keep the native-toolbar
   -hiding rule below scoped to this page (see that rule's own comment). */

/* Still used as the small sub-line under table cells (payment due amount,
   courier tracking number, assigned-user sub-text) — kept independently
   of the old KPI-card markup it originally styled. */
.pix-order-kpi-sub {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Was a single flex-wrap:wrap row for all ~10 controls (7 dropdowns +
   Date's conditional From/Until + Search + Filter + Reset) — at typical
   viewport widths the last 3 items (Search/Filter/Reset) didn't fit on
   the dropdowns' line and wrapped one-at-a-time onto their own separate
   lines instead of staying together, since a flex line breaks per-item
   as soon as it runs out of width, not per logical group. Search's
   flex:1 1 200px then had an entire line's width to itself, and the
   whole thing read as one abnormally tall box. Split into two explicit
   sub-rows (.pix-order-filter-subrow) so Search/Filter/Reset always wrap
   together as their own compact line, never split further apart. */
.pix-order-filter-row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.pix-order-filter-subrow {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    flex-wrap: wrap;
}
/* Dropdowns row (Date/Branch/Order Source/Courier/Payment/Status/Assigned
   User) forced onto a single line — scrolls horizontally instead of
   wrapping to a second line when it doesn't fit the viewport width. */
.pix-order-filter-subrow-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
}
.pix-order-filter-subrow-scroll > * {
    flex-shrink: 0;
}
.pix-order-filter-subrow-scroll::-webkit-scrollbar {
    height: 6px;
}
.pix-order-filter-subrow-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
.pix-order-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pix-order-filter-label {
    font-size: 9px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pix-order-filter-field .fi-select,
.pix-order-filter-field .fi-input {
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    max-height: 2.15rem !important;
    min-width: 8.5rem;
    font-size: 0.78rem;
    box-sizing: border-box;
}
.pix-order-filter-search {
    flex: 0 0 200px !important;
    width: 200px;
    min-width: 200px !important;
    max-width: 200px;
}
.pix-order-more-filters {
    position: relative;
}
/* Plain absolute positioning — safe now that this field lives in its own
   non-scrolling .pix-order-filter-subrow (filter-bar.blade.php), not the
   overflow-x:auto dropdowns row that used to clip it. x-teleport was tried
   and reverted; see that file's comment for why. */
.pix-order-more-filters-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 30;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 16rem;
}

.pix-order-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #4b5563;
}
.pix-order-source-badge svg { width: 0.9rem; height: 0.9rem; }
.pix-order-mini-pill {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    margin-top: 2px;
}

/* Hides Filament's native search/filters/column-toggle toolbar in favor of
   the custom filter-bar row above — scoped via a plain sibling combinator
   (kpi-strip.blade.php and filter-bar.blade.php render as true siblings
   immediately before {{ $this->table }} in Filament's own
   list-records.blade.php, confirmed by reading that vendor file), so this
   ONLY affects pages where .pix-order-kpi-strip actually renders (the
   Orders list), never any other Resource table in the app — deliberately
   NOT scoped off the shared .pix-ov-stats class, since Inventory/Purchase
   Overview also render that class immediately before their own table and
   still rely on Filament's native toolbar for search/filtering. */
.pix-order-kpi-strip ~ .fi-ta .fi-ta-header-toolbar {
    display: none !important;
}

/* Orders list tab bar (native Filament Tab::make() objects, rendered via
   Filament's own <x-filament::tabs> component — see
   vendor/filament/support/resources/views/components/tabs/{index,item}.blade.php)
   restyled to match Inventory/Purchase Overview's underline tab bar
   (.pix-ov-tabs/.pix-ov-tab above) as closely as the different underlying
   component allows. Scoped to .fi-resource-ecom-orders (the body class
   Filament stamps on every ListEcomOrders/CreateEcomOrder/ViewEcomOrder
   page — see vendor/filament/filament/.../list-records.blade.php) so no
   other resource's native tab bar anywhere else in the app is touched. */
.fi-resource-ecom-orders .fi-tabs {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
}
.fi-resource-ecom-orders .fi-tabs-item {
    border-radius: 0;
    border-right: 1px solid #f3f4f6;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.625rem 1rem;
}
.fi-resource-ecom-orders .fi-tabs-item:hover {
    background: rgba(255,255,255,0.6);
}
.fi-resource-ecom-orders .fi-tabs-item.fi-active {
    background: #ffffff;
    border-bottom-color: #ef4444;
}
.fi-resource-ecom-orders .fi-tabs-item-label {
    font-size: 0.75rem;
    font-weight: 600;
}
.fi-resource-ecom-orders .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #ef4444 !important;
}

/* Orders table now uses plain flat columns (real <table>/<td>), same as
   every other resource — it inherits the app-wide Inventory-style grid/
   border/row-height rules automatically, no more Split/Stack card-row
   overrides needed here. Selectors below were written for Split mode's
   `.fi-ta-record` row wrapper, which no longer exists in classic <table>
   mode (rows are `.fi-ta-row`, cells `.fi-ta-cell`) — retargeted, and
   extra-compact padding/font-size added on top of the app-wide .fi-ta-*
   base rules: 10 real columns + actions is wider than Inventory/Products
   ever have to fit, so Orders needs to run tighter than the app default
   to stay inside the viewport without horizontal scroll. */
.fi-resource-ecom-orders .fi-ta-header-cell {
    font-size: 0.58rem !important;
    padding: 4px 6px !important;
}
.fi-resource-ecom-orders .fi-ta-cell {
    font-size: 0.7rem !important;
    padding: 3px 6px !important;
}
.fi-resource-ecom-orders .fi-ta-cell .fi-badge {
    font-size: 10px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.fi-resource-ecom-orders .fi-ta-cell .fi-icon-btn {
    width: 1.4rem !important;
    height: 1.4rem !important;
}
.fi-resource-ecom-orders .pix-order-kpi-sub {
    font-size: 0.62rem !important;
}
.fi-resource-ecom-orders .pix-order-source-badge {
    font-size: 0.7rem !important;
    gap: 0.2rem !important;
}
.fi-resource-ecom-orders .pix-order-source-badge svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

/* Without an explicit max-width, a <table> in the default table-layout:auto
   sizes each column to fit its widest cell's content on one line — the
   .truncate classes already used in these cells' markup do nothing until
   the cell itself is capped, since truncate only activates inside a box
   that's actually narrower than the text wants to be. This is what let
   long customer names/product titles push Order Date and Actions off the
   visible width even after the padding/font-size reductions above. */
.fi-resource-ecom-orders .fi-ecom-col-order { max-width: 130px; }
.fi-resource-ecom-orders .fi-ecom-col-products { max-width: 160px; }
.fi-resource-ecom-orders .fi-ecom-col-customer { max-width: 110px; }
.fi-resource-ecom-orders .fi-ecom-col-order,
.fi-resource-ecom-orders .fi-ecom-col-products,
.fi-resource-ecom-orders .fi-ecom-col-customer {
    overflow: hidden;
}

/* ══════════════════════
   WEBSITE CMS WORKSPACE — TOP BAR + HORIZONTAL MENU
   Scoped to the /admin/website-cms Livewire workspace's own markup
   (resources/views/livewire/website-cms/workspace.blade.php) — a plain
   <div>/<nav>/<button>/<a> tree, NOT Filament's own .fi-sidebar/.fi-topbar
   (different DOM, different class names, no collision either direction).
   Replaces the old vertical left-nav column (.pix-wcms-nav-item etc.,
   removed 2026-08-12) with a top bar + horizontal tab-style menu, per the
   requested mockup layout. Plain CSS, same convention as the rest of this
   file. */
.pix-wcms-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pix-wcms-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pix-wcms-topbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a0a0f;
    line-height: 1.3;
}

.dark .pix-wcms-topbar-title {
    color: #ffffff;
}

.pix-wcms-topbar-subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.dark .pix-wcms-topbar-subtitle {
    color: #9ca3af;
}

.pix-wcms-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.pix-wcms-domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 600;
}

.dark .pix-wcms-domain-badge {
    background: rgba(255,255,255,0.06);
    color: #d1d5db;
}

.pix-wcms-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background: #f84545;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pix-wcms-visit-btn:hover {
    background: #e03030;
}

/* Horizontal section menu — reuses the .pix-ov-tabs red-underline visual
   language (Inventory/Orders tab bars) for consistency across the app,
   adapted for icon+label items and horizontal scroll on narrow screens. */
.pix-wcms-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    gap: 0.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f9fafb;
    padding: 0.375rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.dark .pix-wcms-menu {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

.pix-wcms-menu-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: #6b7280;
    text-decoration: none;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.pix-wcms-menu-item:hover {
    color: #1f2937;
    background: rgba(255,255,255,0.6);
}

.dark .pix-wcms-menu-item:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.06);
}

.pix-wcms-menu-item-active {
    color: #ef4444 !important;
    background: #ffffff !important;
    border-bottom-color: #ef4444 !important;
}

.dark .pix-wcms-menu-item-active {
    background: rgba(255,255,255,0.08) !important;
}

.pix-wcms-menu-item-icon {
    flex-shrink: 0;
    opacity: 0.75;
}

.pix-wcms-menu-item-active .pix-wcms-menu-item-icon {
    opacity: 1;
}

.pix-wcms-menu-item-external {
    flex-shrink: 0;
    opacity: 0.45;
}

.pix-wcms-menu-item:hover .pix-wcms-menu-item-external {
    opacity: 0.7;
}

.pix-wcms-content {
    flex: 1;
    min-width: 0;
}

/* Slide-over drawer for Pages/Blog/Media Library (real separate Filament
   resource pages loaded via iframe instead of navigating away — see the
   comment in workspace.blade.php for why). Panel is always in the DOM,
   off-screen via transform when closed, so it can actually slide in/out
   instead of popping via display:none. */
.pix-wcms-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: flex-end;
}

.pix-wcms-drawer-panel {
    width: min(90vw, 1100px);
    height: 100%;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.dark .pix-wcms-drawer-panel {
    background: #111827;
}

.pix-wcms-drawer-panel-open {
    transform: translateX(0);
}

.pix-wcms-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.dark .pix-wcms-drawer-header {
    border-color: rgba(255,255,255,0.1);
}

.pix-wcms-drawer-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0f;
}

.dark .pix-wcms-drawer-title {
    color: #ffffff;
}

.pix-wcms-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pix-wcms-drawer-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.dark .pix-wcms-drawer-close:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

.pix-wcms-drawer-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

@media (max-width: 640px) {
    .pix-wcms-drawer-panel {
        width: 100vw;
    }
}

/* ══════════════════════
   WEBSITE CMS WORKSPACE — HOMEPAGE VIEW
   Scoped to resources/views/livewire/website-cms/{homepage,homepage-editor,
   homepage-editor/partials/basic}.blade.php — plain CSS for the same reason
   as the nav section above (static, no-longer-regenerated admin theme.css
   bundle; new Tailwind utility classes there would silently do nothing).
   Every class here is prefixed .pix-wcms-hp- to avoid any collision with
   Filament's own .fi-* selectors or the sitewide checked-toggle-red
   !important rule near the top of this file.
   ══════════════════════ */

.pix-wcms-hp {
    padding-bottom: 4rem;
    position: relative;
}

/* -- Header (title/breadcrumb + View Website / Website Settings) -- */
.pix-wcms-hp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.pix-wcms-hp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}
.pix-wcms-hp-breadcrumb-current {
    color: #4b5563;
    font-weight: 600;
}
.pix-wcms-hp-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.pix-wcms-hp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.pix-wcms-hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.pix-wcms-hp-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.pix-wcms-hp-btn-primary {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}
.pix-wcms-hp-btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
}

/* -- Topbar & stats pills (Phase 10.5F simplified header) -- */
.pix-wcms-hp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    flex-wrap: wrap;
}
.pix-wcms-hp-topbar-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.pix-wcms-hp-topbar-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
}
.pix-wcms-hp-topbar-subtitle {
    font-size: 0.72rem;
    color: #6b7280;
}
.pix-wcms-hp-stats-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.pix-wcms-hp-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 0.72rem;
    color: #374151;
}
.pix-wcms-hp-stat-pill-val {
    font-weight: 700;
    color: #111827;
}
.pix-wcms-hp-stat-pill-active { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pix-wcms-hp-stat-pill-active .pix-wcms-hp-stat-pill-val { color: #047857; }
.pix-wcms-hp-stat-pill-draft { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pix-wcms-hp-stat-pill-draft .pix-wcms-hp-stat-pill-val { color: #b45309; }
.pix-wcms-hp-stat-pill-scheduled { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pix-wcms-hp-stat-pill-scheduled .pix-wcms-hp-stat-pill-val { color: #1d4ed8; }
.pix-wcms-hp-stat-pill-hidden { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
.pix-wcms-hp-stat-pill-hidden .pix-wcms-hp-stat-pill-val { color: #4b5563; }

/* KPI widgets (legacy fallback class kept for compatibility) */
.pix-wcms-hp-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 1180px) {
    .pix-wcms-hp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pix-wcms-hp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pix-wcms-hp-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 0.75rem 0.875rem;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.pix-wcms-hp-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    flex-shrink: 0;
    background: #eef2ff;
    color: #4f46e5;
}
.pix-wcms-hp-kpi-icon svg { width: 1.05rem; height: 1.05rem; }
.pix-wcms-hp-kpi-primary   .pix-wcms-hp-kpi-icon { background: #eef2ff; color: #4f46e5; }
.pix-wcms-hp-kpi-active    .pix-wcms-hp-kpi-icon { background: #ecfdf5; color: #16a34a; }
.pix-wcms-hp-kpi-draft     .pix-wcms-hp-kpi-icon { background: #fffbeb; color: #d97706; }
.pix-wcms-hp-kpi-scheduled .pix-wcms-hp-kpi-icon { background: #eff6ff; color: #2563eb; }
.pix-wcms-hp-kpi-hidden    .pix-wcms-hp-kpi-icon { background: #f3f4f6; color: #6b7280; }
.pix-wcms-hp-kpi-body { min-width: 0; }
.pix-wcms-hp-kpi-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}
.pix-wcms-hp-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    margin-top: 0.1rem;
}
.pix-wcms-hp-kpi-sub {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 0.05rem;
}
.pix-wcms-hp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
}
.pix-wcms-hp-badge-active {
    background: #ecfdf5;
    color: #059669;
}
.pix-wcms-hp-badge-inactive {
    background: #f3f4f6;
    color: #6b7280;
}
.pix-wcms-hp-badge-scheduled {
    background: #eff6ff;
    color: #2563eb;
}
.pix-wcms-hp-badge-expired {
    background: #fef2f2;
    color: #dc2626;
}
.pix-wcms-hp-badge-draft {
    background: #fffbeb;
    color: #b45309;
}

/* Phase 10.5D — schedule-aware preview notice banner */
.pix-wcms-hp-preview-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
}
.pix-wcms-hp-preview-notice svg { flex-shrink: 0; margin-top: 0.1rem; }
.pix-wcms-hp-preview-notice-scheduled { background: #eff6ff; color: #1d4ed8; }
.pix-wcms-hp-preview-notice-expired { background: #fef2f2; color: #b91c1c; }
.pix-wcms-hp-preview-notice-inactive { background: #f3f4f6; color: #4b5563; }
.pix-wcms-hp-preview-notice-draft { background: #fffbeb; color: #92400e; }

/* -- Workspace layout -- */
.pix-wcms-hp-columns {
    display: grid;
    grid-template-columns: minmax(17rem, 24%) minmax(0, 1fr) minmax(18rem, 28%);
    gap: 0.875rem;
    align-items: start;
}
@media (max-width: 1280px) {
    .pix-wcms-hp-columns { grid-template-columns: minmax(16rem, 28%) minmax(0, 1fr); }
    .pix-wcms-hp-right-col { display: none; }
}
@media (max-width: 860px) {
    .pix-wcms-hp-columns { grid-template-columns: 1fr; }
}
.pix-wcms-hp-columns-full {
    grid-template-columns: minmax(17rem, 24%) minmax(0, 1fr);
}
.pix-wcms-hp-right-col {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pix-wcms-hp-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
}
.pix-wcms-hp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid #f3f4f6;
}
.pix-wcms-hp-panel-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}
.pix-wcms-hp-panel-body {
    padding: 0.625rem;
}

/* -- Left: Homepage Sections list -- */
.pix-wcms-hp-new-section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    margin-bottom: 0.625rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.pix-wcms-hp-new-section-btn:hover {
    border-color: #9ca3af;
    color: #374151;
}
.pix-wcms-hp-section-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: calc(100vh - 21rem);
    min-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.pix-wcms-hp-section-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: grab;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pix-wcms-hp-section-item:hover {
    background: #f9fafb;
}
.pix-wcms-hp-section-item:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}
.pix-wcms-hp-section-item.is-active {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.pix-wcms-hp-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    background: #f3f4f6;
    color: #4b5563;
    flex-shrink: 0;
}
.pix-wcms-hp-section-icon svg { width: 0.9rem; height: 0.9rem; }
.pix-wcms-hp-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.4rem 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    cursor: default;
}
.pix-wcms-hp-group-header:first-child { margin-top: 0; }
.pix-wcms-hp-group-count {
    font-size: 0.62rem;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 9999px;
    padding: 0.05rem 0.4rem;
}
.pix-wcms-hp-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.pix-wcms-hp-status-dot-active { background: #22c55e; }
.pix-wcms-hp-status-dot-draft { background: #f59e0b; }
.pix-wcms-hp-status-dot-scheduled { background: #3b82f6; }
.pix-wcms-hp-status-dot-expired { background: #ef4444; }
.pix-wcms-hp-status-dot-inactive { background: #9ca3af; }
.pix-wcms-hp-section-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pix-wcms-hp-section-text { flex: 1 1 auto; min-width: 0; }
.pix-wcms-hp-section-meta {
    font-size: 0.65rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pix-wcms-hp-section-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    padding-left: 0.5rem;
}
.pix-wcms-hp-status-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.pix-wcms-hp-status-toggle:hover {
    background: #f3f4f6;
}
.pix-wcms-hp-status-icon {
    width: 1.05rem;
    height: 1.05rem;
}
.pix-wcms-hp-status-icon-active {
    color: #22c55e;
}
.pix-wcms-hp-status-icon-inactive {
    color: #f97316;
}
.pix-wcms-hp-section-actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}
.pix-wcms-hp-move-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.35rem;
    color: #9ca3af;
    flex-shrink: 0;
    border: none;
    background: transparent;
}
.pix-wcms-hp-move-btn:hover:not(:disabled) { background: #f3f4f6; color: #4b5563; }
.pix-wcms-hp-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pix-wcms-hp-move-btn svg { width: 0.8rem; height: 0.8rem; }
.pix-wcms-hp-section-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: #9ca3af;
    flex-shrink: 0;
}
.pix-wcms-hp-section-menu-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.pix-wcms-hp-section-menu-btn svg { width: 1rem; height: 1rem; }
.pix-wcms-hp-drag-ghost {
    opacity: 0.4;
}

/* Quick tools footer in sidebar */
.pix-wcms-hp-tools-bar {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.625rem;
    margin-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
}
.pix-wcms-hp-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
    transition: all 0.15s ease;
}
.pix-wcms-hp-tool-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}
.pix-wcms-hp-tool-btn.is-active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

/* -- Phase 10.5B: New Section type picker + row dropdown menu -- */
.pix-wcms-hp-new-section-wrap { position: relative; }
.pix-wcms-hp-new-section-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    width: 20rem;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    padding: 0.5rem;
}
.pix-wcms-hp-new-section-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.pix-wcms-hp-new-section-menu-item:hover,
.pix-wcms-hp-new-section-menu-item:focus-visible { background: #f3f4f6; }
.pix-wcms-hp-new-section-menu-item:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.pix-wcms-hp-new-section-menu-item svg { color: #9ca3af; flex-shrink: 0; margin-top: 0.1rem; width: 0.9rem; height: 0.9rem; }

.pix-wcms-hp-library-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #f9fafb;
    color: #9ca3af;
}
.pix-wcms-hp-library-search svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.pix-wcms-hp-library-search-input {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 0.76rem;
    color: #111827;
    width: 100%;
}
.pix-wcms-hp-library-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.pix-wcms-hp-library-chip {
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid transparent;
    cursor: pointer;
}
.pix-wcms-hp-library-chip:hover { background: #e5e7eb; }
.pix-wcms-hp-library-chip.is-active { color: #4338ca; background: #eef2ff; border-color: #c7d2fe; }
.pix-wcms-hp-library-list {
    max-height: 14rem;
    overflow-y: auto;
}
.pix-wcms-hp-library-item-text { display: flex; flex-direction: column; gap: 0.05rem; }
.pix-wcms-hp-library-item-label { font-weight: 600; color: #111827; }
.pix-wcms-hp-library-item-desc { font-weight: 400; font-size: 0.68rem; color: #9ca3af; }

.pix-wcms-hp-delete-error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.625rem;
    border-radius: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 500;
}
.pix-wcms-hp-delete-error svg { flex-shrink: 0; margin-top: 0.1rem; width: 0.9rem; height: 0.9rem; }

.pix-wcms-hp-section-menu-wrap { position: relative; }
.pix-wcms-hp-section-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 9rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    padding: 0.25rem;
}
.pix-wcms-hp-section-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.pix-wcms-hp-section-dropdown-item:hover { background: #f3f4f6; }
.pix-wcms-hp-section-dropdown-item svg { color: #9ca3af; flex-shrink: 0; width: 0.875rem; height: 0.875rem; }
.pix-wcms-hp-section-dropdown-item-danger { color: #b91c1c; }
.pix-wcms-hp-section-dropdown-item-danger svg { color: #b91c1c; }
.pix-wcms-hp-section-dropdown-item-danger:hover { background: #fef2f2; }
.pix-wcms-hp-drag-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.68rem;
    color: #9ca3af;
}
.pix-wcms-hp-drag-hint svg { width: 0.85rem !important; height: 0.85rem !important; max-width: 1rem; max-height: 1rem; }

/* -- Middle: editor tabs + fields -- */
.pix-wcms-hp-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-bottom: 1px solid #f3f4f6;
    padding: 0 0.625rem;
}
.pix-wcms-hp-tab {
    padding: 0.625rem 0.625rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #9ca3af;
    border-bottom: 2px solid transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pix-wcms-hp-tab:hover {
    color: #4b5563;
}
.pix-wcms-hp-tab.is-active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}
.pix-wcms-hp-tab-panel {
    padding: 0.875rem;
}
.pix-wcms-hp-field {
    margin-bottom: 0.875rem;
}
.pix-wcms-hp-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.3rem;
}
.pix-wcms-hp-field-hint {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.pix-wcms-hp-input,
.pix-wcms-hp-textarea,
.pix-wcms-hp-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8rem;
    color: #111827;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.pix-wcms-hp-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.85rem;
}
.pix-wcms-hp-input:focus,
.pix-wcms-hp-textarea:focus,
.pix-wcms-hp-select:focus {
    outline: none;
    border-color: #4f46e5;
}
.pix-wcms-hp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.pix-wcms-hp-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}
.pix-wcms-hp-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #d1d5db;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.pix-wcms-hp-toggle.is-on {
    background: #059669;
}
.pix-wcms-hp-toggle-dot {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}
.pix-wcms-hp-toggle.is-on .pix-wcms-hp-toggle-dot {
    transform: translateX(1rem);
}
.pix-wcms-hp-theme-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}
.pix-wcms-hp-theme-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #4b5563;
}
.pix-wcms-hp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9ca3af;
}
.pix-wcms-hp-empty svg {
    width: 2rem;
    height: 2rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}
.pix-wcms-hp-empty-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
}
.pix-wcms-hp-empty-sub {
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

/* -- Right: Live Preview Stage & Chrome -- */
.pix-wcms-hp-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.pix-wcms-hp-device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    color: #9ca3af;
    border: none;
    background: transparent;
    cursor: pointer;
}
.pix-wcms-hp-device-btn svg { width: 0.95rem; height: 0.95rem; }
.pix-wcms-hp-device-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.pix-wcms-hp-device-btn.is-active {
    background: #eef2ff;
    color: #4f46e5;
}
.pix-wcms-hp-preview-stage {
    background: #f3f4f6;
    padding: 0.875rem;
    display: flex;
    justify-content: center;
}
.pix-wcms-hp-preview-frame {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border-radius: 0.875rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: max-width 0.2s ease;
}
.pix-wcms-hp-preview-frame.is-tablet {
    max-width: 21rem;
}
.pix-wcms-hp-preview-frame.is-mobile {
    max-width: 14rem;
}
.pix-wcms-hp-browser-chrome {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}
.pix-wcms-hp-browser-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
}
.pix-wcms-hp-browser-dot-red { background: #f87171; }
.pix-wcms-hp-browser-dot-yellow { background: #fbbf24; }
.pix-wcms-hp-browser-dot-green { background: #34d399; }
.pix-wcms-hp-browser-url {
    margin-left: 0.375rem;
    font-size: 0.6rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pix-wcms-hp-preview-body {
    max-height: 32rem;
    overflow-y: auto;
}

/* -- Homepage Visual Canvas (Phase 10.5F Main Feature) -- */
.pix-wcms-hp-canvas-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    overflow: hidden;
}
.pix-wcms-hp-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.pix-wcms-hp-canvas-chrome-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pix-wcms-hp-canvas-url-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 0.72rem;
    color: #6b7280;
    font-family: monospace;
}
.pix-wcms-hp-canvas-viewport {
    background: #f3f4f6;
    padding: 1.25rem;
    min-height: 35rem;
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
    display: flex;
    justify-content: center;
}
.pix-wcms-hp-canvas-sheet {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: max-width 0.25s ease;
}
.pix-wcms-hp-canvas-sheet.is-tablet {
    max-width: 768px;
}
.pix-wcms-hp-canvas-sheet.is-mobile {
    max-width: 375px;
}

/* Storefront Mock Header inside Canvas */
.pix-wcms-hp-store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
}
.pix-wcms-hp-store-brand {
    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
}
.pix-wcms-hp-store-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

/* Storefront Mock Footer inside Canvas */
.pix-wcms-hp-store-footer {
    padding: 1.5rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
    text-align: center;
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: auto;
}

/* Section Blocks in Visual Canvas */
.pix-wcms-hp-canvas-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
}
.pix-wcms-hp-canvas-block {
    position: relative;
    border: 2px dashed #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    transition: all 0.2s ease;
    overflow: hidden;
}
.pix-wcms-hp-canvas-block:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99,102,241,0.08);
}
.pix-wcms-hp-canvas-block.is-selected {
    border-style: solid;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}
.pix-wcms-hp-canvas-block-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}
.pix-wcms-hp-canvas-block-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pix-wcms-hp-canvas-block-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #111827;
}
.pix-wcms-hp-canvas-block-type {
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: capitalize;
}
.pix-wcms-hp-canvas-block-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.pix-wcms-hp-canvas-block-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.375rem;
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pix-wcms-hp-canvas-block-edit-btn:hover {
    background: #4338ca;
}
.pix-wcms-hp-canvas-block-content {
    padding: 0.875rem;
    position: relative;
}
.pix-wcms-hp-canvas-block-draft-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

/* -- Footer bar (Close / Save Draft / Publish) -- */
.pix-wcms-hp-footer {
    position: sticky;
    bottom: 1rem;
    z-index: 40;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.pix-wcms-hp-footer-msg {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
}
.pix-wcms-hp-footer-msg-dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #b45309;
    background: #fffbeb;
}
.pix-wcms-hp-footer-msg-dirty svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.pix-wcms-hp-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
}
.pix-wcms-hp-footer-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
}
.pix-wcms-hp-footer-btn:hover {
    background: #f9fafb;
}
.pix-wcms-hp-footer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pix-wcms-hp-footer-btn-primary {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}
.pix-wcms-hp-footer-btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
}

/* ══════════════════════════════════════
   INVENTORY OVERVIEW REDESIGN — additive, scoped to .pix-inv-page only.
   Does not touch .pix-ov-* (still used by Purchase/other Overview pages)
   or .pix-order-* (Orders list) — new classes throughout.
   ══════════════════════════════════════ */

.pix-inv-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Solid indigo primary button (Add Product) — a page-scoped variant of
   .pix-ov-action-btn rather than reusing .pix-ov-action-btn-create, since
   that green pill is still Purchase/Settings' own "create" convention. */
.pix-inv-action-btn-primary {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    border-radius: 0.5rem;
}
.pix-inv-action-btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
}

/* Pill-style contained tab bar (vs. Purchase/other Overview pages'
   underline .pix-ov-tabs) — plain anchors, same as .pix-ov-tabs, just a
   different visual treatment matching the Inventory redesign reference. */
.pix-inv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.375rem;
    margin-bottom: 1rem;
}
.pix-inv-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.pix-inv-tab:hover { background: #f9fafb; color: #374151; }
.pix-inv-tab-active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

/* Elevated icon-chip stat cards — named .pix-inv-stat-* (NOT .pix-kpi-*,
   which already exists elsewhere — see the Dashboard's own .pix-kpi-card
   at line ~1020, complete with its own ::after hover-glow pseudo-element
   with no pointer-events:none. Reusing that class name here caused it to
   silently inherit that ::after overlay, which sat on top of and
   swallowed clicks on the "View products" buttons — confirmed via
   Playwright reporting ".pix-kpi-card intercepts pointer events". Fully
   renamed to avoid the collision instead of patching around it). */
.pix-inv-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
@media (max-width: 1280px) {
    .pix-inv-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .pix-inv-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.pix-inv-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0.9rem 1rem;
}
.pix-inv-stat-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pix-inv-stat-icon svg { width: 1.15rem; height: 1.15rem; }
.pix-inv-stat-c-blue    { background: #dbeafe; color: #2563eb; }
.pix-inv-stat-c-orange  { background: #ffedd5; color: #ea580c; }
.pix-inv-stat-c-red     { background: #fee2e2; color: #dc2626; }
.pix-inv-stat-c-purple  { background: #ede9fe; color: #7c3aed; }
.pix-inv-stat-c-teal    { background: #ccfbf1; color: #0d9488; }
.pix-inv-stat-c-green   { background: #dcfce7; color: #16a34a; }
.pix-inv-stat-body { min-width: 0; }
.pix-inv-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}
.pix-inv-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.pix-inv-stat-desc {
    font-size: 0.7rem;
    color: #9ca3af;
}
.pix-inv-stat-link {
    display: inline-block;
    margin-top: 0.125rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4f46e5;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
.pix-inv-stat-link:hover { text-decoration: underline; }

/* Search box with a leading icon — the rest of the filter row (selects,
   Reset button) reuses .pix-po-filter-row/.pix-po-filter-select verbatim
   (see Purchase Overview), so only the icon-in-search-box wrapper is new. */
.pix-inv-search-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}
.pix-inv-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.pix-inv-search-input {
    width: 100%;
    padding-left: 2.25rem !important;
}

/* Native Filament table search box is hidden — the row above (bound to
   the same $tableSearch/$tableFilters state) replaces it. Filters/Columns
   buttons and the footer pagination are left exactly as Filament renders
   them, only the search field is redundant with the row above. */
.pix-inv-page .fi-ta-search-field {
    display: none !important;
}

/* Grid borders, font size, cell padding, and row line-height were all
   moved to the app-wide .fi-ta-* rules further up this file (originally
   built here for Inventory Overview only, then generalized to every
   resource table on request) — nothing left to duplicate here. Only the
   pieces that are still genuinely page-specific remain below: the
   variant-count/attribute sub-heading text (a plain <p> with no
   distinguishing class of its own) and badge/icon-button sizing inside
   this page's particular column markup. */
.fi-ta-cell p {
    font-size: 0.66rem !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
}
.pix-inv-page .fi-ta-cell .fi-badge {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.pix-inv-page .fi-ta-cell .fi-icon-btn {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* ── Media picker (Curator grid picker override) ─────────────────────── */
/* .pix-curator-panel uses position:absolute;inset:0 to fill the modal's
   content area. Filament's own modal component (vendor/filament/support/
   resources/views/components/modal/index.blade.php) puts position:relative
   on .fi-modal-window (the OUTER window, containing header+content+footer
   as siblings) but not on .fi-modal-content itself — so an absolutely
   positioned child of .fi-modal-content skips past it and covers the
   whole window, header (and its close X) included. Scoped to this modal's
   id only, so no other Filament modal is affected. */
[data-fi-modal-id="curator-panel"] .fi-modal-content {
    position: relative;
    overflow: hidden;
}
.pix-curator-panel {
    background: #fff;
    color: #111827;
}
.pix-curator-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.pix-curator-tab {
    padding: 0.85rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    margin-right: 1.25rem;
}
.pix-curator-tab:hover { color: #111827; }
.pix-curator-tab-active {
    color: #f84545;
    border-bottom-color: #f84545;
}
.pix-curator-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pix-curator-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pix-curator-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pix-curator-toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pix-curator-sort {
    font-size: 0.8125rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #374151;
}
.pix-curator-selected-only {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
}
.pix-curator-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
}
.pix-curator-search-icon {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    position: absolute;
    left: 0.6rem;
}
.pix-curator-search input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
}
.pix-curator-search input:focus { outline: none; box-shadow: none; }
.pix-curator-gallery {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
}
.pix-curator-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1280px) { .pix-curator-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .pix-curator-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .pix-curator-grid { grid-template-columns: repeat(2, 1fr); } }
.pix-curator-card { display: flex; flex-direction: column; gap: 0.4rem; }
.pix-curator-thumb-wrap {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0;
    cursor: pointer;
}
.pix-curator-thumb-selected {
    border-color: #f84545;
    box-shadow: 0 0 0 2px rgba(248, 69, 69, 0.25);
}
.pix-curator-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pix-curator-doc-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: #9ca3af;
}
.pix-curator-doc-icon { width: 2.5rem; height: 2.5rem; opacity: 0.5; }
.pix-curator-doc-ext { font-size: 0.6875rem; text-transform: uppercase; font-weight: 600; }
.pix-curator-check {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: #f84545;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.pix-curator-check-icon { width: 0.875rem; height: 0.875rem; color: #fff; }
.pix-curator-meta { min-width: 0; }
.pix-curator-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.pix-curator-size { font-size: 0.6875rem; color: #9ca3af; margin: 0; }
.pix-curator-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
    list-style: none;
}
.pix-curator-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.pix-curator-selection-count {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
}
.pix-curator-clear {
    background: none;
    border: none;
    color: #f84545;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.pix-curator-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pix-curator-page-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
}
.pix-curator-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pix-curator-page-indicator { font-size: 0.75rem; color: #6b7280; }
.pix-curator-upload-pane { padding: 1.25rem; overflow-y: auto; }
/* .pix-curator-upload-form is a flex item of .pix-curator-upload-pane
   (display:flex;flex-direction:column). Centering a flex item with
   margin:auto only works if it also has an explicit width — otherwise
   the auto side-margins absorb all free space (per the flexbox spec)
   instead of the item stretching, so it shrinks to its content's
   intrinsic width. The FileUpload/FilePond field inside has no intrinsic
   width of its own, so without this the whole field (and FilePond)
   collapsed to width:0 — the root cause of the blank "Upload New" tab. */
.pix-curator-upload-form { width: 100%; max-width: 640px; margin: 0 auto; }
.pix-curator-edit-actions { display: flex; gap: 0.5rem; }

/* ── FileUpload (FilePond) preview — replace the default pure-black
   letterbox behind non-covering images with a light neutral panel, so
   portrait product photos in a wide/square panel don't look like a
   broken black box. ─────────────────────────────────────────────────── */
.fi-fo-file-upload .filepond--image-preview-wrapper,
.fi-fo-file-upload .filepond--image-preview {
    background: #f3f4f6 !important;
}
.fi-fo-file-upload .filepond--panel-root {
    background: #f9fafb !important;
    border-radius: 0.75rem !important;
}
.fi-fo-file-upload .filepond--item-panel {
    border-radius: 0.75rem !important;
}
.fi-fo-file-upload .filepond--file-info-main,
.fi-fo-file-upload .filepond--file-info-sub {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE APP SHELL (<768px only) — bottom nav + touch targets
   Everything in this section is wrapped in the same max-width:767px
   media query, so none of it can affect the desktop layout at all —
   .pix-bottom-nav itself is display:none outside the query, and every
   other rule here only exists inside it.
   ══════════════════════════════════════════════════════════════ */

.pix-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .pix-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: #1a1a2e;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }

    .pix-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        padding: 6px 2px;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        background: none;
        border: none;
        line-height: 1.2;
    }

    .pix-bottom-nav-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .pix-bottom-nav-item-active {
        color: #f84545;
    }

    /* Page content must clear the fixed bottom bar (~52px item height +
       any iOS home-indicator safe area) so the last row of a table/form
       is never hidden underneath it. */
    .fi-main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Touch-friendly tap targets — additive min-height/padding only,
       doesn't change desktop sizing (this whole block is inside the
       max-width:767px query). Filament's own buttons/inputs are already
       reasonably sized; this just guarantees the ~44px minimum. */
    .fi-btn,
    .fi-icon-btn,
    .fi-input,
    .fi-select-input,
    .fi-checkbox-input,
    .fi-sidebar-item-button,
    .fi-dropdown-list-item {
        min-height: 44px;
    }

    .fi-ta-cell {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* POS Terminal reserves exactly "topbar height" (64px) via a hardcoded
       inline style (resources/views/filament/pages/pos-terminal.blade.php)
       and an !important CSS rule above (.fi-page:has(.pos-terminal-wrapper)
       .fi-page-content) — both written before the bottom nav existed, so
       neither left room for it. Without this, the bottom nav would cover
       POS's own bottom row (cart total / checkout button). !important
       needed to beat the inline style's specificity. */
    .fi-page:has(.pos-terminal-wrapper) .fi-page-content {
        height: calc(100vh - 64px - 52px - env(safe-area-inset-bottom, 0px)) !important;
    }
    .pos-terminal-wrapper {
        height: calc(100vh - 64px - 52px - env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ===========================================================
   Phase 10.2 — Warehouse Stock (Style -> Variant matrix)
   Reuses .pix-inv-stat-card/-icon/-body/-label/-value/-desc and
   .pix-po-filter-row/-select verbatim for the KPI cards and filter bar;
   only the 7-column grid variant and the style/variant table itself are
   new, namespaced .pix-wh-* to avoid colliding with .pix-inv-*'s own
   6-column grid used elsewhere (Inventory Overview).
   =========================================================== */
.pix-wh-stat-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
@media (max-width: 1400px) {
    .pix-wh-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .pix-wh-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.pix-wh-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    overflow: hidden;
}
.pix-wh-table-head {
    padding: 0.9rem 1.1rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.pix-wh-table-title { font-size: 0.95rem; font-weight: 700; color: #111827; }
.pix-wh-table-sub { font-size: 0.75rem; color: #9ca3af; margin-top: 0.125rem; }

.pix-wh-view-toggle {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}
.pix-wh-view-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #ffffff;
    border: none;
    cursor: pointer;
}
.pix-wh-view-btn:not(:last-child) { border-right: 1px solid #e5e7eb; }
.pix-wh-view-btn-active { background: #eef2ff; color: #4338ca; }
.pix-wh-view-btn:disabled { cursor: not-allowed; opacity: 0.45; }

.pix-wh-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.pix-wh-table thead th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.pix-wh-table thead th.pix-wh-num { text-align: right; }

.pix-wh-style-row > td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}
.pix-wh-style-row:hover { background: #fafafa; }
.pix-wh-style-row.pix-wh-row-expanded { background: #fafbff; }

.pix-wh-style-cell { display: flex; align-items: center; gap: 0.65rem; min-width: 220px; }
.pix-wh-style-thumb {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: #9ca3af;
}
.pix-wh-style-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pix-wh-style-name { font-weight: 700; color: #111827; font-size: 0.83rem; line-height: 1.25; }
.pix-wh-style-meta { font-size: 0.7rem; color: #9ca3af; margin-top: 0.1rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pix-wh-style-badge {
    display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
    font-size: 0.62rem; font-weight: 600; background: #f3f4f6; color: #6b7280;
}
.pix-wh-style-badge-active { background: #dcfce7; color: #16a34a; }

.pix-wh-subgroup-label { font-size: 0.63rem; color: #9ca3af; font-weight: 600; }
.pix-wh-subgroup-value { font-size: 0.82rem; font-weight: 700; color: #1f2937; }

.pix-wh-colors { display: inline-flex; align-items: center; gap: 0.2rem; }
.pix-wh-color-dot {
    width: 0.65rem; height: 0.65rem; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
.pix-wh-sizes { font-size: 0.75rem; color: #4b5563; }

.pix-wh-num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.pix-wh-num-neg { color: #dc2626; font-weight: 700; }
.pix-wh-num-pos { color: #16a34a; font-weight: 700; }

.pix-wh-status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.pix-wh-status-in { background: #dcfce7; color: #16a34a; }
.pix-wh-status-low { background: #ffedd5; color: #ea580c; }
.pix-wh-status-out { background: #fee2e2; color: #dc2626; }
.pix-wh-status-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.pix-wh-expand-btn {
    width: 1.6rem; height: 1.6rem; border-radius: 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #6b7280; border: none; cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.pix-wh-expand-btn:hover { background: #e5e7eb; }
.pix-wh-expand-btn svg { width: 0.85rem; height: 0.85rem; transition: transform 0.15s ease; }
.pix-wh-expand-btn-open svg { transform: rotate(180deg); }

.pix-wh-variant-wrap > td { padding: 0 0.85rem 0.85rem; border-bottom: 1px solid #f5f5f5; }
.pix-wh-variant-box {
    background: #fafafa; border: 1px solid #eee; border-radius: 0.65rem;
    overflow: hidden; margin-left: 2.2rem;
}
.pix-wh-variant-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.pix-wh-variant-table thead th {
    text-align: left; font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: #9ca3af; padding: 0.45rem 0.7rem;
    border-bottom: 1px solid #ececec; white-space: nowrap;
}
.pix-wh-variant-table thead th.pix-wh-num { text-align: right; }
.pix-wh-variant-table tbody td { padding: 0.4rem 0.7rem; border-bottom: 1px solid #f0f0f0; color: #374151; }
.pix-wh-variant-table tbody tr:last-child td { border-bottom: none; }
.pix-wh-variant-table tbody tr.pix-wh-variant-matched { background: #fef9c3; }
.pix-wh-variant-sku { font-family: ui-monospace, monospace; font-size: 0.72rem; color: #6b7280; }
.pix-wh-variant-actions { display: inline-flex; gap: 0.5rem; }
.pix-wh-variant-actions a { font-size: 0.7rem; font-weight: 600; color: #4f46e5; text-decoration: none; }
.pix-wh-variant-actions a:hover { text-decoration: underline; }

.pix-wh-empty { padding: 3rem 1rem; text-align: center; color: #9ca3af; }
.pix-wh-empty svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; color: #d1d5db; }
.pix-wh-empty-title { font-weight: 700; color: #6b7280; font-size: 0.9rem; }
.pix-wh-empty-sub { font-size: 0.78rem; margin-top: 0.25rem; }

.pix-wh-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.1rem; border-top: 1px solid #f0f0f0; font-size: 0.75rem; color: #6b7280;
}
.pix-wh-pager-btns { display: inline-flex; align-items: center; gap: 0.35rem; }
.pix-wh-pager-btn {
    min-width: 1.75rem; height: 1.75rem; padding: 0 0.5rem; border-radius: 0.4rem;
    border: 1px solid #e5e7eb; background: #ffffff; color: #4b5563;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.pix-wh-pager-btn:hover:not(:disabled) { background: #f9fafb; }
.pix-wh-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pix-wh-pager-btn-active { background: #4338ca; border-color: #4338ca; color: #fff; }

@media (max-width: 900px) {
    .pix-wh-table thead { display: none; }
    .pix-wh-style-row { display: block; }
    .pix-wh-style-row > td { display: block; border-bottom: none; padding: 0.4rem 0.85rem; }
    .pix-wh-style-row { border-bottom: 1px solid #f0f0f0; }
    .pix-wh-variant-box { margin-left: 0; overflow-x: auto; }
    .pix-wh-variant-table { min-width: 720px; }
}

/* ══════════════════════════════════════
   LOGIN PAGE — two-column enterprise layout
   Reuses the app's own tokens: sidebar navy (#1a1a2e) and primary red
   (#f84545, from AdminPanelProvider's ->colors()) so the login screen
   reads as the same product as the dashboard/POS/CMS, not a bolted-on
   auth template. Scoped entirely under .pix-login-* — touches nothing
   else. No dark-mode variants: this panel has darkMode(false).
   ══════════════════════════════════════ */

.pix-login {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: #ffffff;
}

/* ---- Left brand panel ---- */
.pix-login-brand {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 46%;
    padding: 3rem 3.5rem;
    background: #1a1a2e;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .pix-login-brand { display: flex; }
}

.pix-login-brand-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(248, 69, 69, 0.22), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(99, 102, 241, 0.16), transparent 45%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
    pointer-events: none;
}

.pix-login-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    margin-top: 3.5rem;
}

.pix-login-wordmark {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin-bottom: 3rem;
}

.pix-login-headline {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.pix-login-subcopy {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 2.5rem;
    max-width: 26rem;
}

.pix-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.pix-login-features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.pix-login-feature-icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    color: #f84545;
}

.pix-login-brand-footer {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

/* ---- Right form panel ---- */
.pix-login-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.pix-login-panel-inner {
    width: 100%;
    max-width: 420px;
    animation: pix-login-fade-in 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pix-login-panel-inner { animation: none; }
}

@keyframes pix-login-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pix-login-mobile-wordmark {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1.75rem;
}

@media (min-width: 1024px) {
    .pix-login-mobile-wordmark { display: none; }
}

.pix-login-welcome {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.pix-login-welcome-sub {
    font-size: 0.86rem;
    color: #6b7280;
    margin: 0 0 2rem;
}

.pix-login-form .fi-input,
.pix-login-form .fi-input-wrp {
    border-radius: 0.6rem !important;
}

.pix-login-form input:focus {
    outline: none;
}

.pix-login-form .fi-input-wrp:has(input:focus) {
    box-shadow: 0 0 0 3px rgba(248, 69, 69, 0.15) !important;
    border-color: #f84545 !important;
}

.pix-login-form .fi-fo-field-wrp + .fi-fo-field-wrp {
    margin-top: 1.1rem;
}

.pix-login-panel-footer {
    margin-top: 2.5rem;
    font-size: 0.72rem;
    color: #9ca3af;
    text-align: center;
}

@media (min-width: 1024px) {
    .pix-login-panel-footer { display: none; }
}

/* ── SEO MONITORING (Phase 10.5B) ── */
.pix-seo-hero {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.pix-seo-score-block { display: flex; align-items: baseline; gap: 12px; }
.pix-seo-score { font-size: 3rem; font-weight: 800; color: #1a1a2e; line-height: 1; }
.pix-seo-score-max { font-size: 1.1rem; color: #bfbfbf; font-weight: 600; }
.pix-seo-status-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pix-seo-status-Healthy { background: #e6f9f0; color: #00703c; }
.pix-seo-status-Warning { background: #fff7ed; color: #c2410c; }
.pix-seo-status-Critical { background: #fee2e2; color: #b91c1c; }
.pix-seo-trend { font-size: 0.8rem; font-weight: 600; margin-top: 6px; }
.pix-seo-trend-up { color: #00703c; }
.pix-seo-trend-down { color: #cf1322; }
.pix-seo-trend-flat { color: #8c8c8c; }
.pix-seo-meta { font-size: 0.72rem; color: #8c8c8c; margin-top: 4px; }
.pix-seo-env-toggle { display: flex; gap: 6px; }
.pix-seo-env-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #595959;
    cursor: pointer;
}
.pix-seo-env-pill-active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

.pix-seo-severity-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.pix-seo-severity-box {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 16px;
    text-align: center;
}
.pix-seo-severity-count { font-size: 1.6rem; font-weight: 800; }
.pix-seo-severity-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8c8c8c; margin-top: 2px; }
.pix-seo-severity-CRITICAL .pix-seo-severity-count { color: #b91c1c; }
.pix-seo-severity-HIGH .pix-seo-severity-count { color: #c2410c; }
.pix-seo-severity-MEDIUM .pix-seo-severity-count { color: #2563eb; }
.pix-seo-severity-LOW .pix-seo-severity-count { color: #8c8c8c; }

.pix-seo-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) {
    .pix-seo-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pix-seo-category-tile {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 16px 18px;
}
.pix-seo-category-tile-Critical { border-color: #fecaca; background: #fff8f8; }
.pix-seo-category-tile-Warning { border-color: #fed7aa; }
.pix-seo-category-name { font-size: 0.78rem; font-weight: 700; color: #1a1a2e; margin-bottom: 6px; }
.pix-seo-category-score { font-size: 1.5rem; font-weight: 800; }
.pix-seo-category-score-Healthy { color: #00703c; }
.pix-seo-category-score-Warning { color: #c2410c; }
.pix-seo-category-score-Critical { color: #b91c1c; }
.pix-seo-category-sub { font-size: 0.68rem; color: #8c8c8c; margin-top: 4px; }
.pix-seo-category-not-checked { font-size: 0.7rem; color: #bfbfbf; font-weight: 600; margin-top: 4px; }

.pix-seo-coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.pix-seo-coverage-box { background: #ffffff; border-radius: 16px; border: 1px solid #f0f0f0; padding: 16px; text-align: center; }
.pix-seo-coverage-value { font-size: 1.4rem; font-weight: 800; color: #1a1a2e; }
.pix-seo-coverage-label { font-size: 0.68rem; color: #8c8c8c; margin-top: 2px; }

.pix-seo-issue-row, .pix-seo-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.pix-seo-issue-row:last-child, .pix-seo-alert-row:last-child { border-bottom: none; }
.pix-seo-empty-state { text-align: center; padding: 2rem 0; color: #8c8c8c; font-size: 0.82rem; }