/* SSBCore Global Styles */
/* ====================== */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

/* CSS Variables */
:root {
    /* Primary Colors */
    --ssbcore-primary-dark: #1E3A5F;
    --ssbcore-primary: #2E5077;
    --ssbcore-primary-light: #4A6FA5;
    --ssbcore-primary-lightest: #E8EEF4;

    /* Secondary Colors */
    --ssbcore-secondary-dark: #8B6914;
    --ssbcore-secondary: #C4941A;
    --ssbcore-secondary-light: #E8B84A;
    --ssbcore-secondary-lightest: #FDF6E3;

    /* Status Colors */
    --ssbcore-success: #2E7D32;
    --ssbcore-success-light: #4CAF50;
    --ssbcore-success-bg: #E8F5E9;

    --ssbcore-warning: #ED6C02;
    --ssbcore-warning-light: #FF9800;
    --ssbcore-warning-bg: #FFF3E0;

    --ssbcore-error: #C62828;
    --ssbcore-error-light: #EF5350;
    --ssbcore-error-bg: #FFEBEE;

    --ssbcore-info: #0288D1;
    --ssbcore-info-light: #29B6F6;
    --ssbcore-info-bg: #E1F5FE;

    /* Document Type Colors */
    --ssbcore-doc-invoice: #1E88E5;
    --ssbcore-doc-contract: #7B1FA2;
    --ssbcore-doc-order: #00897B;
    --ssbcore-doc-quote: #F4511E;
    --ssbcore-doc-delivery: #6D4C41;
    --ssbcore-doc-other: #546E7A;

    /* Mailbox Colors */
    --ssbcore-outbox: #E65100;
    --ssbcore-inbox: #1565C0;
    --ssbcore-archive: #2E7D32;
    --ssbcore-draft: #757575;

    /* Text Colors */
    --ssbcore-text-primary: #1A1A1A;
    --ssbcore-text-secondary: #424242;
    --ssbcore-text-disabled: #757575;
    --ssbcore-text-hint: #9E9E9E;

    /* Border Colors */
    --ssbcore-border-dark: #BDBDBD;
    --ssbcore-border: #E0E0E0;
    --ssbcore-border-light: #EEEEEE;

    /* Background Colors */
    --ssbcore-bg: #F5F5F5;
    --ssbcore-surface: #FAFAFA;
    --ssbcore-paper: #FFFFFF;

    /* Spacing */
    --ssbcore-spacing-xs: 4px;
    --ssbcore-spacing-sm: 8px;
    --ssbcore-spacing-md: 16px;
    --ssbcore-spacing-lg: 24px;
    --ssbcore-spacing-xl: 32px;
    --ssbcore-spacing-xxl: 48px;

    /* Border Radius */
    --ssbcore-radius-sm: 4px;
    --ssbcore-radius-md: 6px;
    --ssbcore-radius-lg: 8px;
    --ssbcore-radius-xl: 12px;

    /* Shadows */
    --ssbcore-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ssbcore-shadow-md: 0 2px 4px rgba(0,0,0,0.1);
    --ssbcore-shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
    --ssbcore-shadow-xl: 0 8px 16px rgba(0,0,0,0.1);

    /* Transitions */
    --ssbcore-transition-fast: 150ms ease;
    --ssbcore-transition-normal: 250ms ease;
    --ssbcore-transition-slow: 350ms ease;
}

/* Base Styles */
* {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ssbcore-text-primary);
    background-color: var(--ssbcore-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ssbcore-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ssbcore-border-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ssbcore-text-disabled);
}

/* MudBlazor Overrides for ERP density */
.mud-input-control {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.mud-table-dense .mud-table-row {
    height: 36px;
}

.mud-table-dense .mud-table-cell {
    padding: 4px 12px;
    font-size: 13px;
}

/* Card styling */
.mud-card {
    border: 1px solid var(--ssbcore-border-light);
    box-shadow: var(--ssbcore-shadow-sm);
}

.mud-card:hover {
    box-shadow: var(--ssbcore-shadow-md);
}

/* Chip/Badge for document status */
.ssbcore-status-chip {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Document type badge */
.ssbcore-doctype-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Light mode document types */
.ssbcore-doctype-invoice { background: #E3F2FD; color: #1E88E5; }
.ssbcore-doctype-contract { background: #F3E5F5; color: #7B1FA2; }
.ssbcore-doctype-order { background: #E0F2F1; color: #00897B; }
.ssbcore-doctype-quote { background: #FBE9E7; color: #F4511E; }
.ssbcore-doctype-delivery { background: #EFEBE9; color: #6D4C41; }
.ssbcore-doctype-other { background: #ECEFF1; color: #546E7A; }

/* Dark mode document types */
.mud-theme-dark .ssbcore-doctype-invoice { background: rgba(30,136,229,0.2); color: #64B5F6; }
.mud-theme-dark .ssbcore-doctype-contract { background: rgba(123,31,162,0.2); color: #CE93D8; }
.mud-theme-dark .ssbcore-doctype-order { background: rgba(0,137,123,0.2); color: #4DB6AC; }
.mud-theme-dark .ssbcore-doctype-quote { background: rgba(244,81,30,0.2); color: #FF8A65; }
.mud-theme-dark .ssbcore-doctype-delivery { background: rgba(109,76,65,0.2); color: #A1887F; }
.mud-theme-dark .ssbcore-doctype-other { background: rgba(84,110,122,0.2); color: #90A4AE; }

/* Mailbox indicator */
.ssbcore-mailbox-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

/* Light mode mailbox */
.ssbcore-mailbox-outbox { background: #FFF3E0; color: #E65100; }
.ssbcore-mailbox-inbox { background: #E3F2FD; color: #1565C0; }
.ssbcore-mailbox-archive { background: #E8F5E9; color: #2E7D32; }
.ssbcore-mailbox-draft { background: #F5F5F5; color: #757575; }

/* Dark mode mailbox */
.mud-theme-dark .ssbcore-mailbox-outbox { background: rgba(230,81,0,0.2); color: #FFB74D; }
.mud-theme-dark .ssbcore-mailbox-inbox { background: rgba(21,101,192,0.2); color: #64B5F6; }
.mud-theme-dark .ssbcore-mailbox-archive { background: rgba(46,125,50,0.2); color: #81C784; }
.mud-theme-dark .ssbcore-mailbox-draft { background: rgba(117,117,117,0.2); color: #BDBDBD; }

/* Amount display */
.ssbcore-amount {
    font-family: 'Nunito', monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--ssbcore-text-primary);
}

.ssbcore-amount-large {
    font-size: 18px;
    font-weight: 700;
}

.ssbcore-amount-positive { color: var(--ssbcore-success); }
.ssbcore-amount-negative { color: var(--ssbcore-error); }

/* Date display */
.ssbcore-date {
    font-size: 12px;
    color: var(--ssbcore-text-secondary);
}

/* Document ID display */
.ssbcore-document-id {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--ssbcore-text-secondary);
    background: var(--ssbcore-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Validation status */
.ssbcore-validation-pending {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* File upload area */
.ssbcore-upload-zone {
    border: 2px dashed var(--ssbcore-border);
    border-radius: var(--ssbcore-radius-lg);
    padding: var(--ssbcore-spacing-xl);
    text-align: center;
    transition: all var(--ssbcore-transition-normal);
    background: var(--ssbcore-surface);
}

.ssbcore-upload-zone:hover,
.ssbcore-upload-zone.drag-over {
    border-color: var(--ssbcore-primary);
    background: var(--ssbcore-primary-lightest);
}

/* PDF Preview */
.ssbcore-pdf-preview {
    background: #525659;
    border-radius: var(--ssbcore-radius-md);
    overflow: hidden;
    box-shadow: var(--ssbcore-shadow-lg);
}

/* Sidebar navigation */
.ssbcore-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: rgba(255,255,255,0.8);
    border-radius: 0 20px 20px 0;
    margin-right: 12px;
    transition: all var(--ssbcore-transition-fast);
    text-decoration: none;
}

.ssbcore-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: #FFFFFF;
}

.ssbcore-nav-item.active {
    background: rgba(255,255,255,0.2);
    color: #FFFFFF;
    font-weight: 600;
}

/* MudBlazor Navigation Menu Overrides for Dark Sidebar - Colors only */
.mud-drawer .mud-nav-link {
    color: rgba(255,255,255,0.9) !important;
}

.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #FFFFFF !important;
}

.mud-drawer .mud-nav-link.active {
    background-color: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
}

.mud-drawer .mud-nav-group-title {
    color: rgba(255,255,255,0.9) !important;
}

.mud-drawer .mud-expand-panel {
    background-color: transparent !important;
}

.mud-drawer .mud-expand-panel-header {
    color: rgba(255,255,255,0.9) !important;
}

.mud-drawer .mud-expand-panel-header:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

.mud-drawer .mud-icon-root {
    color: rgba(255,255,255,0.9) !important;
}

.mud-drawer .mud-divider {
    background-color: rgba(255,255,255,0.15) !important;
}

/* Badge count */
.ssbcore-badge-count {
    background: var(--ssbcore-secondary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Status badges */
.ssbcore-status-validated {
    background: var(--ssbcore-success-bg);
    color: var(--ssbcore-success);
}

.ssbcore-status-pending {
    background: var(--ssbcore-warning-bg);
    color: var(--ssbcore-warning);
}

.ssbcore-status-rejected {
    background: var(--ssbcore-error-bg);
    color: var(--ssbcore-error);
}

.ssbcore-status-new {
    background: var(--ssbcore-info-bg);
    color: var(--ssbcore-info);
}

/* Page header */
.ssbcore-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ssbcore-spacing-lg);
}

.ssbcore-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ssbcore-primary-dark);
    margin: 0;
}

/* Toolbar */
.ssbcore-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ssbcore-spacing-sm);
    padding: var(--ssbcore-spacing-sm) var(--ssbcore-spacing-md);
    background: var(--ssbcore-paper);
    border-radius: var(--ssbcore-radius-md);
    box-shadow: var(--ssbcore-shadow-sm);
    margin-bottom: var(--ssbcore-spacing-md);
}

/* Data card */
.ssbcore-data-card {
    background: var(--ssbcore-paper);
    border-radius: var(--ssbcore-radius-md);
    padding: var(--ssbcore-spacing-md);
    box-shadow: var(--ssbcore-shadow-sm);
    border: 1px solid var(--ssbcore-border-light);
}

/* Empty state */
.ssbcore-empty-state {
    text-align: center;
    padding: var(--ssbcore-spacing-xxl);
    color: var(--ssbcore-text-secondary);
}

.ssbcore-empty-state-icon {
    font-size: 48px;
    color: var(--ssbcore-border);
    margin-bottom: var(--ssbcore-spacing-md);
}

/* Loading overlay */
.ssbcore-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Selection highlight */
.ssbcore-selected {
    background: var(--ssbcore-primary-lightest) !important;
    border-left: 3px solid var(--ssbcore-primary) !important;
}

/* Logo text */
.ssbcore-logo-text {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ssbcore-primary-dark);
    letter-spacing: -0.5px;
}

/* Main content areas */
.light-content {
    background-color: #F5F5F5;
    min-height: 100vh;
}

.dark-content {
    background-color: #121212;
    min-height: 100vh;
}

/* ============================== */
/* Theme Transition Styles        */
/* Smooth color transitions       */
/* ============================== */

/* Global theme transition - applies to all color-related properties */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 400ms ease-in-out,
        border-color 400ms ease-in-out,
        color 300ms ease-in-out,
        fill 300ms ease-in-out,
        box-shadow 400ms ease-in-out !important;
}

/* Always smooth transitions for key layout elements */
.mud-appbar,
.mud-drawer,
.mud-main-content,
.mud-paper,
.mud-card,
.mud-table,
.mud-button,
.mud-chip,
body,
.light-content,
.dark-content {
    transition:
        background-color 400ms ease-in-out,
        border-color 400ms ease-in-out,
        color 300ms ease-in-out,
        box-shadow 400ms ease-in-out;
}

/* Smooth transitions for navigation */
.mud-nav-link,
.mud-nav-group,
.mud-expand-panel,
.mud-expand-panel-header {
    transition:
        background-color 300ms ease-in-out,
        color 300ms ease-in-out;
}

/* Smooth icon color transitions */
.mud-icon-root,
.mud-svg-icon {
    transition: color 300ms ease-in-out, fill 300ms ease-in-out;
}

/* Footer transitions */
.footer-light,
.footer-dark {
    transition:
        background-color 400ms ease-in-out,
        border-color 400ms ease-in-out,
        color 300ms ease-in-out;
}

/* ============================== */
/* Tenant Switch Overlay          */
/* Smooth fade transition         */
/* ============================== */

.tenant-switch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

/* Light mode overlay */
.tenant-switch-overlay.light {
    background-color: #F5F5F5;
}

/* Dark mode overlay */
.tenant-switch-overlay.dark {
    background-color: #121212;
}

/* Show overlay when switching */
.tenant-switch-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Initial page load fade-in */
html.page-loading .mud-layout {
    opacity: 0;
}

html.page-ready .mud-layout {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

/* Dark mode adjustments */
.mud-theme-dark .ssbcore-data-card,
.mud-theme-dark .ssbcore-toolbar {
    background: #1E1E1E;
    border-color: #333333;
}

.mud-theme-dark .ssbcore-document-id {
    background: #2A2A2A;
    color: #B0B0B0;
}

.mud-theme-dark .ssbcore-page-title {
    color: #7A9CC6;
}

.mud-theme-dark .ssbcore-upload-zone {
    background: #1E1E1E;
    border-color: #333333;
}

.mud-theme-dark .ssbcore-upload-zone:hover,
.mud-theme-dark .ssbcore-upload-zone.drag-over {
    border-color: #4A6FA5;
    background: #252525;
}

/* Dark mode navigation adjustments */
.mud-theme-dark .mud-drawer {
    background-color: #1A1A1A !important;
}

.mud-theme-dark .mud-drawer .mud-nav-link {
    color: rgba(255,255,255,0.85) !important;
}

.mud-theme-dark .mud-drawer .mud-nav-link:hover {
    background-color: rgba(255,255,255,0.08) !important;
}

.mud-theme-dark .mud-drawer .mud-nav-link.active {
    background-color: rgba(74, 111, 165, 0.3) !important;
}

/* Settings flyout nav group text - ensure white color at all states */
.settings-flyout-panel .mud-nav-group button,
.settings-flyout-panel .mud-nav-group button *,
.settings-flyout-panel .mud-nav-group .mud-expand-panel-header,
.settings-flyout-panel .mud-nav-group .mud-expand-panel-header *,
.settings-flyout-panel .mud-nav-group .mud-expand-panel-text,
.settings-flyout-panel .mud-nav-group.mud-expanded button,
.settings-flyout-panel .mud-nav-group.mud-expanded button * {
    color: white !important;
}

/* Nested nav groups in settings flyout */
.settings-flyout-panel .mud-nav-group .mud-nav-group button,
.settings-flyout-panel .mud-nav-group .mud-nav-group button * {
    color: white !important;
}

/* CRITICAL: Active/selected nav links in settings flyout - ALL nesting levels */
.settings-flyout-panel .mud-nav-link.active,
.settings-flyout-panel .mud-nav-link.active *,
.settings-flyout-panel .mud-nav-link.mud-ripple-container.active,
.settings-flyout-panel .mud-nav-link.mud-ripple-container.active * {
    color: white !important;
}

/* Deeply nested active links (inside nav groups) */
.settings-flyout-panel .mud-nav-group .mud-nav-link.active,
.settings-flyout-panel .mud-nav-group .mud-nav-link.active *,
.settings-flyout-panel .mud-nav-group .mud-nav-group .mud-nav-link.active,
.settings-flyout-panel .mud-nav-group .mud-nav-group .mud-nav-link.active * {
    color: white !important;
}

/* All nav links text in settings flyout - force white */
.settings-flyout-panel .mud-nav-link,
.settings-flyout-panel .mud-nav-link * {
    color: white !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .ssbcore-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ssbcore-spacing-sm);
    }

    .ssbcore-toolbar {
        flex-wrap: wrap;
    }
}

/* Legal Document Dialog - Prevent outer scroll */
.mud-dialog .mud-dialog-content {
    overflow: visible !important;
    max-height: none !important;
}

.mud-dialog-content {
    overflow: visible !important;
    max-height: none !important;
}