/* 🎨 The Foundry Aesthetic - Tranquil Neubrutalism v2.0 */
/*:root {*/
    /* --- The Core Spectrum --- */
    /*--brutal-bg: #F5F5F5;*/ /* Soft Paper (Tranquil Background) */
    /*--brand-accent: #FF8C00;*/ /* Electric Orange (The Star) */
    /*--deep-slate: #2F2F2F;*/ /* Deep Slate Gray (The Void) */
    /* --- Structural Logic --- */
    /*--brutal-border: 4px solid var(--deep-slate);
    --brutal-shadow: 6px 6px 0px var(--deep-slate);
    --brutal-orange: var(--brand-accent);
    --brutal-red: #ff3333;
    --brutal-green: #00cc66;*/
    /* --- Legacy Compatibility --- */
    /*--bs-secondary-color: #6c757d;
}*/

/*html, body {*/
    /*font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    /*font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--deep-slate);
}*/

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    /*margin: 0;*/
    min-height: 100vh;
    /*background-color: var(--brutal-bg);*/
}

/* --- Layout Stability Framework --- */
.page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.sidebar {
    width: 260px;
    flex: 0 0 260px;
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: #ffffff;
    border-right: var(--brutal-border);
    overflow-y: auto;
    z-index: 100;
}

/* --- The Cards: High-Contrast Neubrutalism --- */
.brutal-card {
    background-color: #ffffff;
    border: var(--brutal-border);
    box-shadow: var(--brutal-shadow);
    border-radius: 0px;
    padding: 1.5rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

    .brutal-card:hover {
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0px var(--deep-slate);
    }

.brutal-header {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--deep-slate);
    border-bottom: 4px solid var(--deep-slate);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.stat-value {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--brutal-orange);
    line-height: 1;
}

/* --- Syncfusion Overrides: The Architect's Will --- */
.e-grid.brutal-grid {
    border: var(--brutal-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--brutal-shadow) !important;
}

    .e-grid.brutal-grid .e-headercell {
        background-color: var(--deep-slate) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        border-bottom: 2px solid var(--deep-slate) !important;
    }

.e-dialog.brutal-modal {
    border: 6px solid var(--deep-slate) !important;
    box-shadow: 15px 15px 0px var(--deep-slate) !important;
    border-radius: 0px !important;
}

    .e-dialog.brutal-modal .e-dlg-header-content {
        background-color: var(--deep-slate) !important;
        color: #ffffff !important;
        padding: 1rem !important;
    }

/* --- Kinetic Animations --- */
.glow-on-hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--deep-slate);
}

    .glow-on-hover:hover {
        box-shadow: 0 0 15px 2px var(--brand-accent);
        transform: translateY(-2px);
        background-color: var(--brand-accent);
        color: var(--deep-slate);
    }

.glow-active {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px var(--brand-accent);
    }

    50% {
        box-shadow: 0 0 20px var(--brand-accent);
    }

    100% {
        box-shadow: 0 0 5px var(--brand-accent);
    }
}

.ripple-shockwave.trigger-ripple::after {
    animation: shockwave-expand 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes shockwave-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}


.sidebar {
    position: sticky;
    top: 0; /* Anchor to the ceiling of the viewport */
    height: 100vh; /* Force the height to span the entire monitor */
    overflow-y: auto; /* Allow scrolling inside the menu if the menu itself gets too tall */
    z-index: 1000; /* Ensure it hovers above scrolling content */
    /* Ensure your Neubrutalist border is intact */
    border-right: 4px solid var(--ink-dark);
}


/* 🚀 THE NEUBRUTALIST SCROLLBAR PROTOCOL */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--paper-bg, #F8FAFC);
    border-left: 3px solid var(--ink-dark, #111111);
}

::-webkit-scrollbar-thumb {
    background-color: var(--ink-dark, #111111);
    border: 3px solid var(--paper-bg, #F8FAFC);
    border-radius: 0px; /* Hard edges */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-accent, #D81B60);
}

/* The tiny corner piece where X and Y scrollbars meet */
::-webkit-scrollbar-corner {
    background: var(--paper-bg, #F8FAFC);
    border-left: 3px solid var(--ink-dark, #111111);
    border-top: 3px solid var(--ink-dark, #111111);
}


/* 🚀 GLOBAL LOCK OVERRIDE: Frees the LiveCanvasPreview from CSS Containing Blocks */
body:has(.canvas-fullscreen) .page,
body:has(.canvas-fullscreen) .main,
body:has(.canvas-fullscreen) .sidebar,
body:has(.canvas-fullscreen) #app {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    perspective: none !important;
}

/* 🚀 GLOBAL CHROMATIC ENFORCEMENT */

/* 1. Any primary button MUST use primary text */
.ledger-btn-primary, .brutal-btn-primary {
    background-color: var(--brand-primary) !important;
    color: var(--brand-primary-text) !important; /* <--- THIS IS THE MAGIC FIX */
}

/* 2. Any accent button MUST use accent text */
.ledger-btn-accent, .brutal-btn-accent {
    background-color: var(--brand-accent) !important;
    color: var(--brand-accent-text) !important; /* <--- THIS IS THE MAGIC FIX */
}

/* 3. Fix Disabled Buttons (Like the "Unlock Feature" button in your screenshot) */
/* Disabled buttons should drop the background color entirely to stay readable */
.ledger-btn:disabled, button:disabled {
    background-color: var(--paper-bg) !important;
    color: var(--ink-light) !important;
    border: 2px dashed var(--ink-light) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 4. Fix Informational Alert Boxes (Like the "Monthly Total" box in your screenshot) */
.brutal-alert-box {
    background-color: var(--paper-bg) !important;
    color: var(--ink-dark) !important; /* Forces dark ink text no matter what */
    border: 3px solid var(--brand-primary) !important; /* Uses the brand color just for the border */
    border-left: 8px solid var(--brand-primary) !important;
}