/* Primary Layout & Viewport Sizing Rules */
    html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100vh;
        overscroll-behavior: contain !important;
    }
    #tab-tool {
        height: calc(100vh - 82px) !important;
        overflow: hidden !important;
    }
    .wrapper-tab-content {
        height: calc(100vh - 82px) !important;
        overflow-y: auto !important;
    }
    #app {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }
    .layout {
        display: flex !important;
        flex-direction: row !important;
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }
    .sidebar, aside.sidebar {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .main-content {
        flex: 1 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
        scroll-behavior: smooth !important;
    }
    .login-container {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: calc(100vh - 82px) !important;
        height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
        box-sizing: border-box !important;
    }
    .login-card {
        margin-top: 0.5rem !important;
        margin-bottom: auto !important;
    }

    /* Dashboard & Cards Grid Layout Refactor & Containment */
    .artist-performance-widget, #artist-performance-score-widget {
        min-height: 140px !important;
        max-height: 520px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        margin-bottom: 1.25rem !important;
        position: relative !important;
        width: 100% !important;
        overscroll-behavior: contain !important;
    }

    .daily-summary-kpi-card, #app-daily-summary-card {
        min-height: 80px !important;
        max-height: 320px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        margin-bottom: 1.25rem !important;
        position: relative !important;
        width: 100% !important;
        overscroll-behavior: contain !important;
    }

    .staff-card {
        min-height: 220px !important;
        max-height: 500px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        position: relative !important;
        overscroll-behavior: contain !important;
    }

    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 1.25rem !important;
        margin-bottom: 1.5rem !important;
        width: 100% !important;
    }

    .content-grid {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    @media (max-width: 960px) {
        .content-grid {
            grid-template-columns: 1fr !important;
        }
    }

    /* Registered CSS Palette Variables for Smooth Light/Dark Mode Transitions */
    @property --bg-body { syntax: '<color>'; inherits: true; initial-value: var(--ti-bg, #0B0F17); }
    @property --bg-card { syntax: '<color>'; inherits: true; initial-value: var(--ti-panel, #111827); }
    @property --text-main { syntax: '<color>'; inherits: true; initial-value: var(--ti-text, #F9FAFB); }
    @property --text-muted { syntax: '<color>'; inherits: true; initial-value: var(--ti-muted, #9CA3AF); }
    @property --gray-100 { syntax: '<color>'; inherits: true; initial-value: var(--ti-panel2, #1F2937); }
    @property --gray-200 { syntax: '<color>'; inherits: true; initial-value: var(--ti-line, #374151); }

    /* Force dark mode via class */
    body.dark-mode, html.dark-mode {
        --bg-body: var(--ti-bg, #0B0F17) !important;
        --bg-card: var(--ti-panel, #111827) !important;
        --text-main: var(--ti-text, #F9FAFB) !important;
        --text-muted: var(--ti-muted, #9CA3AF) !important;
        --gray-100: var(--ti-panel2, #1F2937) !important;
        --gray-200: var(--ti-line, #374151) !important;
        background-color: var(--ti-bg, #0B0F17) !important;
        background-image: radial-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px) !important;
        background-size: 24px 24px !important;
    }
    /* Force light mode via class */
    body.light-mode, html.light-mode {
        --bg-body: var(--ti-text, #F8FAFC) !important;
        --bg-card: #FFFFFF !important;
        --text-main: var(--ti-bg2, #0F172A) !important;
        --text-muted: var(--ti-line2, #475569) !important;
        --gray-100: var(--ti-text, #F1F5F9) !important;
        --gray-200: var(--ti-text, #E2E8F0) !important;
        background-color: var(--ti-text, #F8FAFC) !important;
        background-image: radial-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px) !important;
        background-size: 24px 24px !important;
    }

    /* Cyber Studio Glow Tabs */
    .tool-tab {
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    .tool-tab:hover {
        background: var(--ti-line, #334155) !important;
        color: var(--ti-text, #F8FAFC) !important;
    }
    .tool-tab.active {
        background: linear-gradient(135deg, var(--ti-blue, #2563EB) 0%, var(--ti-blue, #1D4ED8) 100%) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
        font-weight: 700 !important;
    }

    /* Stock Level Cell Visual Animations: Green Pulse for Restocks & Red Flash for Usage Adjustments */
    .stock-level-cell {
        transition: background-color 0.8s ease-out, color 0.8s ease-out, box-shadow 0.8s ease-out, transform 0.3s ease !important;
        border-radius: 6px;
    }
    .stock-level-cell.stock-flash-green {
        background-color: rgba(16, 185, 129, 0.45) !important;
        color: var(--ti-green, #34D399) !important;
        font-weight: 800 !important;
        box-shadow: 0 0 14px rgba(16, 185, 129, 0.8), inset 0 0 8px rgba(52, 211, 153, 0.6) !important;
        animation: stockPulseGreen 1.1s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .stock-level-cell.stock-flash-red {
        background-color: rgba(239, 68, 68, 0.45) !important;
        color: var(--ti-alert-ink, #F87171) !important;
        font-weight: 800 !important;
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.8), inset 0 0 8px rgba(248, 113, 113, 0.6) !important;
        animation: stockFlashRed 0.9s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .stock-level-cell.stock-flash-yellow {
        background-color: rgba(251, 191, 36, 0.65) !important;
        color: var(--ti-panel, #111827) !important;
        font-weight: 800 !important;
        box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.7) !important;
        transition: background-color 0.02s ease-in, color 0.02s ease-in, box-shadow 0.02s ease-in !important;
    }
    @keyframes stockPulseGreen {
        0% { transform: scale(1); background-color: rgba(16, 185, 129, 0.75); box-shadow: 0 0 18px rgba(16, 185, 129, 0.95); }
        45% { transform: scale(1.1); background-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0 14px rgba(16, 185, 129, 0.75); }
        100% { transform: scale(1); background-color: transparent; }
    }
    @keyframes stockFlashRed {
        0% { transform: scale(1); background-color: rgba(239, 68, 68, 0.75); box-shadow: 0 0 18px rgba(239, 68, 68, 0.95); }
        45% { transform: scale(0.94); background-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); }
        100% { transform: scale(1); background-color: transparent; }
    }

    /* Futuristic Cyber Cards & Glassmorphism */
    .activity-card, .tech-studio-card {
        background: rgba(17, 24, 39, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(55, 65, 81, 0.8) !important;
        border-radius: 12px !important;
        padding: 1rem 1.25rem !important;
        margin-bottom: 0.85rem !important;
        transition: all 0.25s ease !important;
        display: flex !important;
        gap: 1rem !important;
        align-items: flex-start !important;
        position: relative !important;
    }

    .activity-card:hover, .tech-studio-card:hover {
        border-color: var(--ti-purple-ink, #A855F7) !important;
        transform: scale(1.02) translateY(-2px) !important;
        box-shadow: 0 0 22px rgba(168, 85, 247, 0.45), 0 0 10px rgba(59, 130, 246, 0.35) !important;
    }

    /* Refactored Dashboard CSS Grid Layout - Prevents Card Overlap & Enforces Visual Hierarchy */
    .dashboard, .dashboard-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stats Cards Grid: Responsive auto-fit grid preventing card squishing or overlap */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
        gap: 1.25rem !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        align-items: stretch !important;
    }

    .stat-card {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
        background: var(--bg-card, var(--ti-panel2, #1F2937)) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Content Grid for Primary & Secondary Widgets */
    .content-grid {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        align-items: start !important;
    }

    @media (max-width: 992px) {
        .content-grid {
            grid-template-columns: 1fr !important;
        }
    }

    @media (max-width: 580px) {
        .stats-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .card, .stat-card, .tech-studio-card, #app-daily-summary-card {
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
    }

    /* Activity Feed Components Styling */
    @keyframes heartPop {
        0% { transform: scale(1); }
        25% { transform: scale(1.4) rotate(-10deg); }
        50% { transform: scale(0.88) rotate(6deg); }
        75% { transform: scale(1.18) rotate(-3deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    .heart-pop-anim {
        animation: heartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }

    @keyframes floatingHeart {
        0% { transform: translateY(0) scale(0.7); opacity: 1; }
        50% { transform: translateY(-28px) scale(1.25); opacity: 0.95; }
        100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
    }

    .floating-heart-particle {
        position: fixed;
        pointer-events: none;
        font-size: 1.2rem;
        animation: floatingHeart 0.75s ease-out forwards;
        z-index: 2000050;
    }

    .chart-brush .selection {
        fill: var(--ti-blue, #3B82F6) !important;
        fill-opacity: 0.28 !important;
        stroke: var(--ti-blue-ink, #60A5FA) !important;
        stroke-width: 2px !important;
        rx: 6px !important;
    }
    .chart-brush .handle {
        fill: var(--ti-blue-ink, #93C5FD) !important;
        rx: 2px !important;
    }

    .activity-feed-container {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    @keyframes qrFocusPulse {
        0% {
            border-color: var(--ti-blue, #3B82F6) !important;
            box-shadow: 0 0 0 4000px rgba(0,0,0,0.45), 0 0 12px rgba(59,130,246,0.6) !important;
            transform: scale(1);
        }
        50% {
            border-color: var(--ti-green, #10B981) !important;
            box-shadow: 0 0 0 4000px rgba(0,0,0,0.35), 0 0 32px rgba(16,185,129,0.95) !important;
            transform: scale(1.04);
        }
        100% {
            border-color: var(--ti-blue, #3B82F6) !important;
            box-shadow: 0 0 0 4000px rgba(0,0,0,0.45), 0 0 12px rgba(59,130,246,0.6) !important;
            transform: scale(1);
        }
    }

    .qr-focus-pulsing {
        animation: qrFocusPulse 0.75s infinite ease-in-out !important;
        border-style: solid !important;
        border-width: 3px !important;
    }

    .pulse-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--ti-green, #10B981);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: pulse-ring 1.8s infinite;
        margin-right: 6px;
    }

    @keyframes pulse-ring {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    @keyframes cardFadeSlideUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .activity-card {
        background: var(--ti-panel2, #1F2937);
        border: 1px solid var(--ti-line, #374151);
        border-radius: 12px;
        padding: 1rem 1.25rem;
        margin-bottom: 0.85rem;
        transition: all 0.25s ease;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        position: relative;
        animation: cardFadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .activity-card:hover {
        border-color: var(--ti-blue, #38BDF8) !important;
        transform: scale(1.02) translateY(-2px) !important;
        box-shadow: 0 0 22px rgba(56, 189, 248, 0.45), 0 0 10px rgba(168, 85, 247, 0.35) !important;
    }

    .activity-card.new-flash,
    .activity-card.sse-fade-in,
    .sse-fade-in {
        animation: sseFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    @keyframes pulseHealth {
        0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
        70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }

    @keyframes poRowFadeSlide {
        0% {
            opacity: 0;
            transform: translateY(14px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes sseFadeIn {
        0% {
            opacity: 0;
            transform: translateY(18px) scale(0.97);
            border-color: var(--ti-blue, #38BDF8) !important;
            background: rgba(56, 189, 248, 0.28) !important;
            box-shadow: 0 0 24px rgba(56, 189, 248, 0.5) !important;
        }
        35% {
            opacity: 1;
            transform: translateY(-2px) scale(1.015);
            border-color: var(--ti-gold, #F59E0B) !important;
            background: rgba(245, 158, 11, 0.22) !important;
            box-shadow: 0 0 18px rgba(245, 158, 11, 0.45) !important;
        }
        70% {
            opacity: 1;
            transform: translateY(0) scale(1);
            border-color: var(--ti-blue, #38BDF8) !important;
            background: rgba(56, 189, 248, 0.12) !important;
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            border-color: var(--ti-line, #374151) !important;
            background: var(--ti-panel2, #1F2937) !important;
            box-shadow: none !important;
        }
    }

    .badge-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .badge-blue { background: rgba(59, 130, 246, 0.15); color: var(--ti-blue-ink, #60A5FA); border: 1px solid rgba(59, 130, 246, 0.3); }
    .badge-green { background: rgba(16, 185, 129, 0.15); color: var(--ti-green, #34D399); border: 1px solid rgba(16, 185, 129, 0.3); }
    .badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--ti-gold, #FBBF24); border: 1px solid rgba(245, 158, 11, 0.3); }
    .badge-purple { background: rgba(168, 85, 247, 0.15); color: var(--ti-purple-ink, #C084FC); border: 1px solid rgba(168, 85, 247, 0.3); }
    .badge-red { background: rgba(239, 68, 68, 0.15); color: var(--ti-alert-ink, #F87171); border: 1px solid rgba(239, 68, 68, 0.3); }
    .badge-indigo { background: rgba(99, 102, 241, 0.15); color: var(--ti-blue-ink, #818CF8); border: 1px solid rgba(99, 102, 241, 0.3); }

    .filter-btn {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        border: 1px solid var(--ti-line, #374151);
        background: var(--ti-panel, #111827);
        color: var(--ti-muted, #9CA3AF);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-btn:hover {
        color: var(--ti-text, #F9FAFB);
        border-color: var(--ti-faint, #6B7280);
    }

    .filter-btn.active {
        background: var(--ti-blue, #3B82F6);
        color: #FFFFFF;
        border-color: var(--ti-blue, #3B82F6);
        font-weight: 600;
    }

    /* Floating Activity Drawer */
    #activity-drawer {
        position: fixed;
        top: 0;
        right: -450px;
        width: 440px;
        max-width: 90vw;
        height: 100vh;
        background: var(--ti-panel, #111827);
        border-left: 1px solid var(--ti-line, #374151);
        box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
        z-index: 1000000;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
    }

    #activity-drawer.open {
        right: 0;
    }

    #floating-feed-btn {
        position: fixed;
        bottom: 24px;
        right: 170px;
        z-index: 99999;
        background: var(--ti-blue, #3B82F6);
        color: #FFFFFF;
        border: none;
        border-radius: 50px;
        padding: 12px 20px;
        font-weight: 600;
        font-size: 0.95rem;
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.25s ease;
    }

    #floating-feed-btn:hover {
        transform: translateY(-3px) scale(1.03);
        background: var(--ti-blue, #2563EB);
        box-shadow: 0 14px 30px rgba(59, 130, 246, 0.5);
    }

    /* Low Stock Prediction and Warning Row Highlights */
    .low-stock-prediction-row {
        background: rgba(239, 68, 68, 0.08) !important;
        border-left: 3px solid var(--ti-alert, #EF4444) !important;
    }
    .low-stock-prediction-badge {
        animation: pulseStockWarning 2.2s infinite ease-in-out;
    }
    @keyframes pulseStockWarning {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
        50% { transform: scale(1.04); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
    }



  

/* poli-stat-card-axis -------------------------------------------------------------------
   The metric cards stack a label row, a value and a caption. .stat-card above
   gives them a row layout intended for icon-beside-text, which squeezes the
   value to about 55px in a 304px card; word-break then splits it, rendering
   "$1,850.00" as "$1,8 / 50.0 / 0". Stack them instead. */
.stat-card {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.35rem !important;
}

/* Break a token only when it truly cannot fit, rather than whenever it is snug.
   A currency amount or a ratio must never be split. */
.card, .stat-card, .tech-studio-card, #app-daily-summary-card {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}
/* end poli-stat-card-axis ------------------------------------------------------------- */