/* ==========================================================================
   1. Dynamic Strict Tokens (Unified Palette + Modern Depth Matrix)
   ========================================================================== */
:root {
    /* Absolute Strict Brand Colors */
    --brand-dark: #6c150c;
    --brand-light: #851b0d;
    --brand-gold: #f9bf2d;

    /* Alpha Transparencies for Layering and Glass Effects */
    --brand-dark-alpha-05: rgba(108, 21, 12, 0.05);
    --brand-dark-alpha-10: rgba(108, 21, 12, 0.10);
    --brand-dark-alpha-15: rgba(108, 21, 12, 0.15);
    --brand-dark-alpha-30: rgba(108, 21, 12, 0.3);
    --brand-gold-alpha-20: rgba(249, 191, 45, 0.2);

    /* Layout System Bases */
    --mud-palette-tertiary: var(--brand-dark) !important;
    --mud-palette-tertiary-darken: var(--brand-light) !important;
    --mud-palette-tertiary-lighten: var(--brand-dark-alpha-05) !important;
    --mud-palette-background: #ffffff !important; /* Premium off-white tint for digital displays */
    --mud-palette-drawer-background: #ffffff !important;

    /* Modern Angular Design Scale */
    --radius-standard: 12px !important;
    --radius-pill: 50px !important;

    /* Global Cohesive Depth System */
    --shadow-flat: 0 2px 4px rgba(108, 21, 12, 0.03);
    --shadow-raised: 0 8px 24px -4px rgba(108, 21, 12, 0.06), 0 2px 6px -2px rgba(108, 21, 12, 0.02);
    --shadow-overlay: 0 20px 40px -8px rgba(108, 21, 12, 0.14), 0 4px 12px -2px rgba(108, 21, 12, 0.04);
    --shadow-inset: inset 0 2px 4px 0 rgba(108, 21, 12, 0.05);
    --mud-typography-default-font-family: 'Poppins', sans-serif !important;
}

/* ==========================================================================
   2. Canvas & High-Definition Smoothing 
   ========================================================================== */
html, body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--mud-palette-background);
    color: #1a1a1e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

/* ==========================================================================
   3. Framework Layout Elements (Global Flow & Native Shells)
   ========================================================================== */
.mud-drawer-left {
    background: var(--mud-palette-drawer-background) !important;
    border-right: 1px solid var(--brand-dark-alpha-10) !important;
    box-shadow: var(--shadow-raised);
    z-index: 50;
}

.content {
    padding: 2.5rem 2rem !important; /* Optimized balance for native app dashboard scaling */
}

/* Structural Components Inherit Clean Global Architecture */
.mud-paper, .card, .mud-grid-item > div {
    border-radius: var(--radius-standard);
    background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), box-shadow 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* Interactive Hover States for Grid Elements without local overrides */
.mud-paper.mud-paper-hover:hover, .card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-overlay);
}

/* ==========================================================================
   4. Typography Modernizations & Optical Tracking
   ========================================================================== */
h1, h2, h3, .mud-typography-h5, .mud-typography-h6 {
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: -0.03em !important; /* Premium tight display metrics */
    font-weight: 700 !important;
    color: var(--brand-dark);
    line-height: 1.25;
}

code {
    color: var(--brand-light);
    background-color: var(--brand-dark-alpha-05);
    border: 1px solid var(--brand-dark-alpha-10);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   5. Interactive Controls & Premium Kinetic Buttons
   ========================================================================== */
a, .btn-link {
    color: var(--brand-dark);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

a:hover, .btn-link:hover {
    color: var(--brand-light);
}

/* Universal Button Overrides */
.mud-button, .mud-icon-button, .mud-button-root {
    border-radius: var(--radius-standard) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Framework Standard Action Button */
.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    border: none;
    font-family: 'Poppins', sans-serif;
    border-radius: var(--radius-standard);
    padding: 0.65rem 1.5rem;
    box-shadow: 0 4px 12px 0 var(--brand-dark-alpha-30);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 var(--brand-dark-alpha-30);
    filter: brightness(1.08);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-flat);
    filter: brightness(0.95);
}

/* Premium Layered Input Focus Ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .mud-input-focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--mud-palette-drawer-background), 0 0 0 4px var(--brand-dark-alpha-30) !important;
    border-color: var(--brand-dark) !important;
}

/* ==========================================================================
   6. Modern Fluid Inputs & Validations
   ========================================================================== */
.form-control, .mud-input-control {
    border-radius: var(--radius-standard) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:hover, .mud-input-control:hover {
    background-color: #ffffff !important;
}

/* Input Fields Validation Matrix */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border: 2px solid var(--brand-dark) !important;
    box-shadow: 0 0 0 3px var(--brand-dark-alpha-15);
}

.invalid {
    outline: none;
    border: 2px solid var(--brand-gold) !important;
    box-shadow: 0 0 0 4px var(--brand-gold-alpha-20);
    background-color: rgba(249, 191, 45, 0.01) !important;
}

.validation-message {
    color: var(--brand-light);
    font-size: 0.85rem;
    margin-top: 0.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   7. Blazor Platform Components (Errors & Dynamic Progressive Loaders)
   ========================================================================== */
/* Bottom Global Toast Error Engine */
#blazor-error-ui {
    color-scheme: light only;
    background: rgba(108, 21, 12, 0.94) !important; /* Optimized depth via high-blend backdrop */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    border-top: 4px solid var(--brand-gold);
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    width: calc(100% - 3rem);
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-overlay);
    box-sizing: border-box;
    display: none;
    padding: 1.25rem 2rem;
    position: fixed;
    z-index: 10000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 2rem;
    top: 1.25rem;
    color: var(--brand-gold);
    font-weight: 700;
    transition: opacity 0.2s ease;
}

#blazor-error-ui .dismiss:hover {
    opacity: 0.8;
}

/* Block Error Boundary Systems */
.blazor-error-boundary {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI3LjUgMUw1NSA0N0gxdTkuNS00NnoiIGZpbGw9IiNmOWJmMmQiLz48Y2lyY2xlIGN4PSIyNy41IiBjeT0iNDAiIHI9IjMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjUgMTVoNXYyMGgtNXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") no-repeat 1.5rem center/1.5rem, var(--brand-dark);
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-overlay);
    color: #ffffff;
    font-weight: 600;
    border-left: 6px solid var(--brand-gold);
}

/* Circular Loading Engine */
.loading-progress {
    position: absolute;
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    inset: 30vh 0 auto 0;
    margin: 0 auto;
    background: #ffffff;
    padding: 0.75rem;
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-overlay);
}

.loading-progress circle {
    fill: none;
    stroke: var(--brand-dark-alpha-05);
    stroke-width: 0.35rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand-gold);
    stroke-width: 0.45rem;
    stroke-linecap: round;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
    color: var(--brand-dark);
    inset: calc(30vh + 2.5rem) 0 auto 0;
    z-index: 10;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "LOAD");
}

/* ==========================================================================
   8. Utility Classes & Layout Helper Scales
   ========================================================================== */
.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.text-transform-none {
    text-transform: none !important;
}

.bg-light-gray {
    background-color: var(--mud-palette-background-gray, #f5f5f7) !important;
}

.rounded-xl {
    border-radius: 16px !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

/* ==========================================================================
   9. Premium MudTable Native Engine Overrides
   ========================================================================== */
.mud-table {
    background-color: transparent !important;
}

.mud-table-container {
    border-radius: var(--radius-standard) !important;
    box-shadow: var(--shadow-flat);
    border: 1px solid var(--brand-dark-alpha-10);
    background: #ffffff;
    overflow: hidden;
}

/* Modern Minimalist Table Headings */
.mud-table-head .mud-table-cell {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    color: var(--brand-dark) !important;
    background-color: var(--brand-dark-alpha-05) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    border-bottom: 2px solid var(--brand-dark-alpha-10) !important;
    padding: 1rem 1.25rem !important;
}

/* Smooth Interactive Row States */
.mud-table-body .mud-table-row {
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.mud-table-body .mud-table-row:hover {
    background-color: rgba(108, 21, 12, 0.02) !important;
}

.mud-table-body .mud-table-cell {
    font-family: 'Poppins', sans-serif !important;
    color: #2e2e33 !important;
    border-bottom: 1px solid var(--brand-dark-alpha-05) !important;
    padding: 0.85rem 1.25rem !important;
}

/* Dynamic Pagination Blocks */
.mud-table-pagination {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    color: #55555a !important;
    border-top: 1px solid var(--brand-dark-alpha-10) !important;
    background: #ffffff;
}

/* ==========================================================================
   10. Responsive Touch UI Matrix (Mobile Adaptive Rules)
   ========================================================================== */
@media (max-width: 768px) {
    /* Compress Dashboard Padding for Compact Real Estate */
    .content {
        padding: 0.5rem 0.5rem !important;
    }

    /* Prevent text clipping while preserving display density */
    h1, h2, h3 {
        letter-spacing: -0.02em !important;
        line-height: 1.2 !important;
    }

    /* Disable aggressive translateY animations on mobile to ensure smooth scrolling */
    .mud-paper.mud-paper-hover:hover, .card-interactive:hover {
        transform: none !important;
        box-shadow: var(--shadow-raised) !important;
    }

    /* Increase interactive touch targets slightly for buttons */
    .mud-button, .btn-primary {
        padding: 0.5rem 0.75rem !important;
    }

    /* Mobile Table Optimization Matrix */
    .mud-table-container {
        border-radius: 8px !important;
    }

    .mud-table-head .mud-table-cell {
        padding: 0.75rem 0.85rem !important;
        font-size: 0.85rem !important;
    }

    .mud-table-body .mud-table-cell {
        padding: 0.75rem 0.85rem !important;
        font-size: 0.85rem !important;
    }

    /* Standardized Mobile UI utility helpers */
    .hide-on-mobile {
        display: none !important;
    }

    .full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}