/* ==========================================================================
   PORTER DESIGN SYSTEM FOR SHOPLOGIC OMS
   Inspired by Porter SaaS Dashboard
   - Ultra-crisp Light Mode with maximum readability and contrast
   - Elevated nocturnal Dark Mode
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. LIGHT MODE (DEFAULT / html:not(.dark))
   ========================================================================== */
:root {
    --prt-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --prt-font-serif: 'Newsreader', 'Playfair Display', Georgia, serif;
    --prt-font-mono: 'JetBrains Mono', monospace;

    /* Light Canvas & Surfaces */
    --prt-bg-canvas: #f8fafc;
    --prt-bg-surface: #f8fafc;
    --prt-bg-subtle: #f1f5f9;
    --prt-bg-card: #ffffff;
    --prt-bg-card-hover: #fcfdfe;

    /* Porter Signature Dark Sidebar (Constant across Light and Dark Canvas) */
    --prt-sidebar-bg: #0c141d;
    --prt-sidebar-border: rgba(255, 255, 255, 0.07);
    --prt-sidebar-text: #ffffff;
    --prt-sidebar-text-muted: #94a3b8;
    --prt-sidebar-hover: rgba(255, 255, 255, 0.05);
    --prt-sidebar-active: rgba(255, 255, 255, 0.09);
    --prt-sidebar-indicator: #ffffff;

    /* Light Canvas Borders & Surfaces */
    --prt-border-subtle: #e2e8f0;
    --prt-border-card: #e2e8f0;
    --prt-border-input: #e2e8f0;

    /* Light Canvas High Contrast Text */
    --prt-text-primary: #0f172a;
    --prt-text-secondary: #334155;
    --prt-text-muted: #64748b;
    --prt-text-subtle: #94a3b8;

    /* Primary Accent */
    --prt-accent: #0f172a;
    --prt-accent-hover: #1e293b;
    --prt-accent-text: #ffffff;

    /* Status Badges */
    --prt-status-green-bg: #ecfdf5;
    --prt-status-green-text: #047857;
    --prt-status-green-border: #a7f3d0;
    --prt-status-green-dot: #10b981;

    --prt-status-amber-bg: #fef3c7;
    --prt-status-amber-text: #b45309;
    --prt-status-amber-border: #fde68a;
    --prt-status-amber-dot: #f59e0b;

    --prt-status-blue-bg: #eff6ff;
    --prt-status-blue-text: #1d4ed8;
    --prt-status-blue-border: #bfdbfe;
    --prt-status-blue-dot: #3b82f6;

    --prt-status-red-bg: #fef2f2;
    --prt-status-red-text: #b91c1c;
    --prt-status-red-border: #fecaca;
    --prt-status-red-dot: #ef4444;

    --prt-status-purple-bg: #f5f3ff;
    --prt-status-purple-text: #6d28d9;
    --prt-status-purple-border: #ddd6fe;
    --prt-status-purple-dot: #8b5cf6;
}

/* ==========================================================================
   2. DARK MODE (html.dark, [data-theme="dark"])
   ========================================================================== */
html.dark,
[data-theme="dark"],
body.dark {
    --prt-bg-canvas: #090e13;
    --prt-bg-surface: #111820;
    --prt-bg-subtle: #0d131a;
    --prt-bg-card: #111820;
    --prt-bg-card-hover: #151f2b;

    --prt-sidebar-bg: #0c141d;
    --prt-sidebar-border: rgba(255, 255, 255, 0.07);
    --prt-sidebar-text: #ffffff;
    --prt-sidebar-text-muted: #94a3b8;
    --prt-sidebar-hover: rgba(255, 255, 255, 0.05);
    --prt-sidebar-active: rgba(255, 255, 255, 0.09);
    --prt-sidebar-indicator: #ffffff;

    --prt-border-subtle: rgba(255, 255, 255, 0.06);
    --prt-border-card: rgba(255, 255, 255, 0.08);
    --prt-border-input: rgba(255, 255, 255, 0.12);

    --prt-text-primary: #f8fafc;
    --prt-text-secondary: #cbd5e1;
    --prt-text-muted: #94a3b8;
    --prt-text-subtle: #64748b;

    --prt-accent: #1e293b;
    --prt-accent-hover: #334155;
    --prt-accent-text: #ffffff;

    --prt-status-green-bg: rgba(52, 211, 153, 0.12);
    --prt-status-green-text: #34d399;
    --prt-status-green-border: rgba(52, 211, 153, 0.25);
    --prt-status-green-dot: #10b981;

    --prt-status-amber-bg: rgba(251, 191, 36, 0.12);
    --prt-status-amber-text: #fbbf24;
    --prt-status-amber-border: rgba(251, 191, 36, 0.25);
    --prt-status-amber-dot: #f59e0b;

    --prt-status-blue-bg: rgba(56, 189, 248, 0.12);
    --prt-status-blue-text: #38bdf8;
    --prt-status-blue-border: rgba(56, 189, 248, 0.25);
    --prt-status-blue-dot: #0ea5e9;

    --prt-status-red-bg: rgba(248, 113, 113, 0.12);
    --prt-status-red-text: #f87171;
    --prt-status-red-border: rgba(248, 113, 113, 0.25);
    --prt-status-red-dot: #ef4444;

    --prt-status-purple-bg: rgba(192, 132, 252, 0.12);
    --prt-status-purple-text: #c084fc;
    --prt-status-purple-border: rgba(192, 132, 252, 0.25);
    --prt-status-purple-dot: #a855f7;
}

/* ==========================================================================
   GLOBAL LAYOUT BASE
   ========================================================================== */
body,
.fi-body {
    font-family: var(--prt-font-sans) !important;
    background-color: var(--prt-bg-canvas) !important;
    color: var(--prt-text-primary) !important;
    -webkit-font-smoothing: antialiased;
}

.fi-main,
.fi-page,
.fi-layout,
.fi-main-ctn {
    background-color: var(--prt-bg-canvas) !important;
}

/* ==========================================================================
   PORTER SIDEBAR: FULL HEIGHT DEEP OBSIDIAN NAVY (#0c141d)
   Constant in both Light Canvas and Dark Canvas modes (Image 1)
   ========================================================================== */

/* 1. All sidebar containers & wrappers forced to #0c141d */
#fi-main-sidebar,
.fi-sidebar,
.fi-main-sidebar,
aside.fi-sidebar,
div.fi-sidebar,
div[wire\:name="Filament\\Livewire\\Sidebar"],
div:has(> #fi-main-sidebar),
.fi-sidebar-header-ctn,
.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar-nav-groups,
.fi-sidebar-group {
    background-color: #0c141d !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

#fi-main-sidebar,
.fi-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

/* 2. Desktop Layout: Full-Height Sidebar on Left (Image 1) */
@media (min-width: 1024px) {
    #fi-main-sidebar,
    .fi-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        z-index: 45 !important;
        background-color: #0c141d !important;
    }

    /* Shift Topbar to the right of the sidebar */
    .fi-topbar-ctn {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        background-color: var(--prt-bg-canvas) !important;
        border-bottom: 1px solid var(--prt-border-subtle) !important;
    }

    .fi-topbar {
        background-color: var(--prt-bg-canvas) !important;
        height: 64px !important;
        padding: 0 24px !important;
    }

    /* Shift Main Content to the right of the sidebar */
    .fi-main-ctn {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        background-color: var(--prt-bg-canvas) !important;
        min-height: calc(100vh - 64px) !important;
    }

    /* Show Sidebar Header on desktop */
    .fi-sidebar-header-ctn,
    .fi-sidebar-header {
        display: flex !important;
        height: 64px !important;
        padding: 0 18px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        background-color: #0c141d !important;
    }

    .fi-sidebar-header-logo-ctn,
    .fi-sidebar-header-logo-ctn a {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .fi-sidebar-header .fi-logo {
        display: flex !important;
        align-items: center !important;
        color: #ffffff !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }

    /* Hide redundant logo from topbar */
    .fi-topbar-start .fi-logo,
    .fi-topbar-start a:has(.fi-logo) {
        display: none !important;
    }
}

/* 3. Section Headers (WORKSPACE, CATALOG, ORDER MANAGEMENT) */
.fi-sidebar-group-label,
.fi-sidebar-group-label span,
.fi-sidebar-group-btn span {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    padding: 12px 14px 4px 14px !important;
}

/* 4. Navigation Items (Inactive) */
.fi-sidebar-nav a.fi-sidebar-item-btn,
.fi-sidebar-nav button.fi-sidebar-item-btn,
.fi-sidebar-item-btn {
    border-radius: 8px !important;
    margin: 2px 10px !important;
    padding: 7px 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
}

.fi-sidebar-nav a.fi-sidebar-item-btn:hover,
.fi-sidebar-nav button.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-btn span {
    color: inherit !important;
    font-weight: inherit !important;
}

.fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-btn svg {
    color: #64748b !important;
    stroke: currentColor !important;
    transition: color 0.15s ease !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item-btn:hover svg {
    color: #ffffff !important;
}

/* 5. Active Navigation Item (Porter elevated charcoal pill: Image 1) */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item-active .fi-sidebar-item-btn,
.fi-sidebar-nav .fi-sidebar-item.fi-active a.fi-sidebar-item-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > a .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > a .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Remove default indicator line */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-item.fi-active > a::before,
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border,
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    display: none !important;
}

/* 6. Navigation Badges (Dark translucent pill badges like 18, 6 in Image 1) */
.fi-sidebar-nav .fi-badge,
.fi-sidebar-item-badge-ctn .fi-badge,
.fi-sidebar-item .fi-badge,
.fi-sidebar-nav .fi-badge.fi-color-warning,
.fi-sidebar-nav .fi-badge.fi-color-primary,
.fi-sidebar-nav .fi-badge.fi-color-gray {
    border-radius: 9999px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   WORKSPACE SELECTOR (IMAGE 1 PORTER STYLE)
   ========================================================================== */
.admin-workspace-box {
    margin: 12px 14px 16px 14px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.admin-workspace-box:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.admin-workspace-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #dcfce7 !important;
    /* Sage mint green like NL in Image 1 */
    color: #065f46 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.05em !important;
}

.admin-workspace-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.admin-workspace-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.25 !important;
}

.admin-workspace-sub {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    display: block !important;
    line-height: 1.25 !important;
}

.admin-workspace-chevron {
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   SIDEBAR FOOTER & USER PROFILE (IMAGE 1 PORTER STYLE)
   ========================================================================== */
.porter-sidebar-bottom {
    margin-top: auto !important;
    padding: 10px 12px 14px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    position: relative !important;
}

.porter-sidebar-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    margin-top: 6px !important;
}

.porter-sidebar-user:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.porter-user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.porter-user-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.porter-user-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
}

.porter-user-role {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.porter-user-action {
    color: #94a3b8 !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
}

.porter-sidebar-user:hover .porter-user-action {
    color: #ffffff !important;
}


.porter-user-dropdown {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    background: var(--prt-bg-card) !important;
    border: 1px solid var(--prt-border-card) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
    z-index: 100 !important;
}

.porter-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--prt-text-secondary) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.porter-dropdown-item:hover {
    background: var(--prt-bg-subtle) !important;
    color: var(--prt-text-primary) !important;
}

.porter-dropdown-divider {
    height: 1px !important;
    background: var(--prt-border-subtle) !important;
    margin: 4px 0 !important;
}

/* ==========================================================================
   TOPBAR: SEAMLESS PORTER CANVAS (IMAGE 1)
   ========================================================================== */
.fi-topbar {
    background-color: var(--prt-bg-canvas) !important;
    border-bottom: 1px solid var(--prt-border-subtle) !important;
    box-shadow: none !important;
}

.fi-topbar nav {
    background-color: var(--prt-bg-canvas) !important;
}

.fi-topbar h1,
.fi-topbar-heading,
.fi-breadcrumbs {
    color: var(--prt-text-primary) !important;
}

html:not(.dark) .fi-topbar h1,
html:not(.dark) .fi-topbar-heading,
html:not(.dark) .fi-topbar a:not(.porter-btn-create-order):not(.admin-search-trigger-btn),
html:not(.dark) .fi-topbar .fi-logo,
html:not(.dark) .fi-topbar button:not(.porter-btn-create-order):not(.admin-search-trigger-btn) {
    color: #0f172a !important;
}

/* Capsule Search Bar (Image 1 style) */
.admin-search-trigger-btn {
    height: 38px !important;
    background: #ffffff !important;
    border: 1px solid var(--prt-border-input) !important;
    border-radius: 9999px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

html.dark .admin-search-trigger-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

.admin-search-trigger-btn:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

html.dark .admin-search-trigger-btn:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.admin-search-shortcut-badge {
    margin-left: auto !important;
    background: #f1f5f9 !important;
    border: 1px solid var(--prt-border-input) !important;
    border-radius: 6px !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

html.dark .admin-search-shortcut-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

/* Circular Topbar Icon Buttons (? and clock in Image 1) */
.porter-topbar-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid var(--prt-border-input) !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.dark .porter-topbar-icon-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

.porter-topbar-icon-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.dark .porter-topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* + Create Order Button (Image 1 style: Deep Charcoal Black, rounded-lg) */
a.porter-btn-create-order,
.porter-btn-create-order {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

a.porter-btn-create-order span,
.porter-btn-create-order span {
    color: #ffffff !important;
    display: inline !important;
    font-weight: 600 !important;
}

a.porter-btn-create-order svg,
.porter-btn-create-order svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

a.porter-btn-create-order:hover,
.porter-btn-create-order:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

html.dark a.porter-btn-create-order,
html.dark .porter-btn-create-order {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark a.porter-btn-create-order:hover,
html.dark .porter-btn-create-order:hover {
    background-color: #334155 !important;
}

/* Primary Action Buttons on Canvas (Deep Charcoal in Image 1 style) */
.fi-btn-color-primary:not(.porter-topbar-icon-btn),
button.fi-btn-color-primary,
a.fi-btn-color-primary {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.fi-btn-color-primary:not(.porter-topbar-icon-btn):hover,
button.fi-btn-color-primary:hover,
a.fi-btn-color-primary:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* ==========================================================================
   HEADINGS, BREADCRUMBS & MAIN PAGE CONTENT
   ========================================================================== */
h1,
h2,
h3,
h4,
.fi-header-heading {
    color: var(--prt-text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.fi-breadcrumbs {
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.fi-breadcrumbs-item-label {
    color: var(--prt-text-muted) !important;
    font-weight: 600 !important;
}

.fi-breadcrumbs-item-label:hover {
    color: var(--prt-text-primary) !important;
}

/* ==========================================================================
   TABLES: CRISP & HIGH CONTRAST
   ========================================================================== */
.fi-ta,
.fi-ta-ctn,
.fi-section {
    background-color: var(--prt-bg-card) !important;
    border: 1px solid var(--prt-border-card) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.fi-ta-header {
    background-color: var(--prt-bg-card) !important;
    border-bottom: 1px solid var(--prt-border-subtle) !important;
}

.fi-ta-table {
    background-color: var(--prt-bg-card) !important;
}

/* Table Header Cells (Image 1 style) */
.fi-ta-header-cell {
    background-color: var(--prt-bg-card) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--prt-border-subtle) !important;
}

html:not(.dark) .fi-ta-header-cell {
    background-color: #ffffff !important;
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.fi-ta-header-cell-label {
    font-weight: 700 !important;
}

html:not(.dark) .fi-ta-header-cell-label {
    color: #64748b !important;
}

/* Table Body Rows */
.fi-ta-row {
    border-bottom: 1px solid var(--prt-border-subtle) !important;
    transition: background 0.15s ease !important;
}

html:not(.dark) .fi-ta-row {
    border-bottom: 1px solid #f1f5f9 !important;
}

.fi-ta-row:hover {
    background-color: var(--prt-bg-subtle) !important;
}

html:not(.dark) .fi-ta-row:hover {
    background-color: #f8fafc !important;
}

.fi-ta-cell {
    color: var(--prt-text-primary) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-ta-cell {
    color: #0f172a !important;
}

.fi-ta-text-item-label {
    color: var(--prt-text-primary) !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-ta-text-item-label {
    color: #0f172a !important;
}

/* Table Secondary & URL links */
html:not(.dark) .fi-ta-cell a[href*="http"],
html:not(.dark) .fi-ta-text-description {
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

html:not(.dark) .fi-ta-cell a[href*="http"]:hover {
    text-decoration: underline !important;
    color: #0f172a !important;
}

/* Table Count Badges (e.g. Products count pill [ 9 ]) */
html:not(.dark) .fi-ta-cell .fi-badge,
html:not(.dark) .fi-ta-text.fi-ta-text-has-badges .fi-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 2px 10px !important;
}

/* Table Action Buttons */
.fi-ta-actions button,
.fi-ta-actions a,
.fi-ta-actions .fi-link {
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Table Search Input */
html:not(.dark) .fi-ta-header-toolbar input,
html:not(.dark) .fi-ta-search-field input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 8px !important;
}

html:not(.dark) .fi-ta-header-toolbar input::placeholder,
html:not(.dark) .fi-ta-search-field input::placeholder {
    color: #64748b !important;
}

/* ==========================================================================
   DASHBOARD HEADER & EDITORIAL SERIF GREETING
   ========================================================================== */
.porter-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.porter-greeting-block {
    display: flex;
    flex-direction: column;
}

.porter-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--prt-status-green-text);
    margin-bottom: 6px;
}

.porter-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--prt-status-green-dot);
    box-shadow: 0 0 8px var(--prt-status-green-dot);
    animation: porterPulse 2s infinite;
}

@keyframes porterPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.2);
    }
}

.porter-greeting-title {
    font-family: var(--prt-font-serif) !important;
    font-size: 2.2rem !important;
    font-weight: 500 !important;
    color: var(--prt-text-primary) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15;
    margin: 2px 0 6px 0;
}

.porter-greeting-sub {
    font-size: 14px;
    color: var(--prt-text-muted);
    font-weight: 500;
    margin: 0;
}

.porter-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.porter-viewing-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.porter-viewing-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--prt-text-muted);
}

.porter-date-capsule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--prt-bg-card);
    border: 1px solid var(--prt-border-card);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--prt-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.porter-date-divider {
    width: 1px;
    height: 14px;
    background: var(--prt-border-subtle);
}

.porter-range-trigger {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--prt-text-primary);
    cursor: pointer;
}

.porter-date-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--prt-bg-card);
    border: 1px solid var(--prt-border-card);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    z-index: 50;
    min-width: 160px;
}

.porter-date-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--prt-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.porter-date-menu-item:hover,
.porter-date-menu-item.active {
    background: var(--prt-bg-subtle);
    color: var(--prt-text-primary);
    font-weight: 700;
}

/* ==========================================================================
   DASHBOARD STAT CARDS & KPI WIDGETS
   ========================================================================== */
.dash-card,
.dash-kpi-card,
.dash-header {
    background-color: var(--prt-bg-card) !important;
    border: 1px solid var(--prt-border-card) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.dash-three-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dash-big-stat-card {
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-big-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

.dash-big-stat-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--prt-text-secondary) !important;
    display: block;
    margin-bottom: 4px;
}

.dash-big-stat-val {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--prt-text-primary) !important;
    line-height: 1.15;
}

.dash-big-stat-amount {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-top: 4px;
}

.dash-big-stat-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--prt-bg-subtle) !important;
    border: 1px solid var(--prt-border-card) !important;
}

/* 8 Smart KPI Grid */
.dash-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 24px;
}

@media (min-width: 1280px) {
    .dash-kpi-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }
}

.dash-kpi-card {
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 110px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

.dash-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dash-kpi-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--prt-text-secondary) !important;
}

.dash-kpi-icon-pill {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prt-bg-subtle) !important;
    border: 1px solid var(--prt-border-subtle);
    font-size: 13px;
}

.dash-kpi-val {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--prt-text-primary) !important;
    line-height: 1.15;
    margin-bottom: 4px;
}

.dash-delta-up {
    color: var(--prt-status-green-text);
    background: var(--prt-status-green-bg);
    border: 1px solid var(--prt-status-green-border);
}

.dash-delta-down {
    color: var(--prt-status-red-text);
    background: var(--prt-status-red-bg);
    border: 1px solid var(--prt-status-red-border);
}

.dash-delta-neutral {
    color: var(--prt-text-secondary);
    background: var(--prt-bg-subtle);
}

/* ==========================================================================
   STATUS PILL BADGES WITH LEADING DOT
   ========================================================================== */
.badge-admin,
.fi-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 3px 10px 3px 8px !important;
    line-height: 1.25 !important;
}

.badge-admin::before,
.fi-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.badge-admin--success,
.fi-badge-color-success,
.fi-badge.fi-color-success {
    background: var(--prt-status-green-bg) !important;
    color: var(--prt-status-green-text) !important;
    border: 1px solid var(--prt-status-green-border) !important;
}

.badge-admin--success::before,
.fi-badge-color-success::before,
.fi-badge.fi-color-success::before {
    background: var(--prt-status-green-dot) !important;
}

.badge-admin--warning,
.fi-badge-color-warning,
.fi-badge.fi-color-warning {
    background: var(--prt-status-amber-bg) !important;
    color: var(--prt-status-amber-text) !important;
    border: 1px solid var(--prt-status-amber-border) !important;
}

.badge-admin--warning::before,
.fi-badge-color-warning::before,
.fi-badge.fi-color-warning::before {
    background: var(--prt-status-amber-dot) !important;
}

.badge-admin--danger,
.fi-badge-color-danger,
.fi-badge.fi-color-danger {
    background: var(--prt-status-red-bg) !important;
    color: var(--prt-status-red-text) !important;
    border: 1px solid var(--prt-status-red-border) !important;
}

.badge-admin--danger::before,
.fi-badge-color-danger::before,
.fi-badge.fi-color-danger::before {
    background: var(--prt-status-red-dot) !important;
}

.badge-admin--info,
.fi-badge-color-info,
.fi-badge.fi-color-info {
    background: var(--prt-status-blue-bg) !important;
    color: var(--prt-status-blue-text) !important;
    border: 1px solid var(--prt-status-blue-border) !important;
}

.badge-admin--info::before,
.fi-badge-color-info::before,
.fi-badge.fi-color-info::before {
    background: var(--prt-status-blue-dot) !important;
}

.fi-badge.fi-color-gray,
.fi-badge-color-gray {
    background: var(--prt-bg-subtle) !important;
    color: var(--prt-text-primary) !important;
    border: 1px solid var(--prt-border-subtle) !important;
}

.fi-badge.fi-color-primary,
.fi-badge-color-primary {
    background: var(--prt-sidebar-active) !important;
    color: var(--prt-sidebar-indicator) !important;
    border: 1px solid var(--prt-border-card) !important;
}