/* 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;

    /* Severity Colors (for alerts, status indicators) */
    --ssbcore-severity-critical: #f44336;
    --ssbcore-severity-high: #ff9800;
    --ssbcore-severity-medium: #2196f3;
    --ssbcore-severity-low: #4caf50;
    --ssbcore-severity-active: #9c27b0;

    /* Dark Mode Base Colors */
    --ssbcore-dark-bg: #121212;
    --ssbcore-dark-surface: #1E1E1E;
    --ssbcore-dark-paper: #252525;
    --ssbcore-dark-elevated: #2A2A2A;
    --ssbcore-dark-border: #333333;
    --ssbcore-dark-border-light: #2A2A2A;
    --ssbcore-dark-text: #B0B0B0;
    --ssbcore-dark-text-primary: rgba(255,255,255,0.87);
    --ssbcore-dark-text-secondary: rgba(255,255,255,0.6);
    --ssbcore-dark-primary-light: #7A9CC6;

    /* 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;
}

/* Table header — bold with subtle background to distinguish from data rows */
.mud-simple-table th {
    font-weight: 700 !important;
    background-color: var(--mud-palette-action-default-hover);
    border-bottom: 2px solid var(--mud-palette-divider);
}

/* Summary/total row — bold with top border separator */
.mud-simple-table .ssbcore-summary-row td {
    font-weight: 700;
    background-color: var(--mud-palette-action-default-hover);
    border-top: 2px solid var(--mud-palette-divider) !important;
}

/* 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: var(--ssbcore-bg);
    min-height: 100vh;
    /* `dvh` по `vh` — в. образложението кај `html, body` подолу. */
    min-height: 100dvh;
}

.dark-content {
    background-color: var(--ssbcore-dark-bg);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ============================== */
/* 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: var(--ssbcore-bg);
}

/* Dark mode overlay */
.tenant-switch-overlay.dark {
    background-color: var(--ssbcore-dark-bg);
}

/* 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: var(--ssbcore-dark-surface);
    border-color: var(--ssbcore-dark-border);
}

.mud-theme-dark .ssbcore-document-id {
    background: var(--ssbcore-dark-elevated);
    color: var(--ssbcore-dark-text);
}

.mud-theme-dark .ssbcore-page-title {
    color: var(--ssbcore-dark-primary-light);
}

.mud-theme-dark .ssbcore-upload-zone {
    background: var(--ssbcore-dark-surface);
    border-color: var(--ssbcore-dark-border);
}

.mud-theme-dark .ssbcore-upload-zone:hover,
.mud-theme-dark .ssbcore-upload-zone.drag-over {
    border-color: var(--ssbcore-primary-light);
    background: var(--ssbcore-dark-paper);
}

/* Dark mode navigation adjustments */
.mud-theme-dark .mud-drawer {
    background-color: var(--ssbcore-dark-bg) !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;
}

/* ============================== */
/* Heading Accent (gradient line) */
/* Brand identity element         */
/* ============================== */

.ssbcore-heading-accent {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten));
    margin-top: 6px;
    width: 40px;
}

/* Size variants */
.ssbcore-heading-accent--lg { width: 60px; }
.ssbcore-heading-accent--sm { width: 32px; height: 2px; margin-top: 4px; }

/* Severity variants */
.ssbcore-heading-accent--error {
    background: linear-gradient(90deg, var(--mud-palette-error), var(--mud-palette-error-lighten, #EF5350));
}

.ssbcore-heading-accent--success {
    background: linear-gradient(90deg, var(--mud-palette-success), var(--mud-palette-success-lighten, #66BB6A));
}

.ssbcore-heading-accent--warning {
    background: linear-gradient(90deg, var(--mud-palette-warning), var(--mud-palette-warning-lighten, #FFA726));
}

.ssbcore-heading-accent--info {
    background: linear-gradient(90deg, var(--mud-palette-info), var(--mud-palette-info-lighten, #42A5F5));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .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;
}

/* ────────────────────────────────────────────────────────────────────────────
   Page-level horizontal overflow guard + theme-aware background.
   - max-width / overflow-x: every page stays within viewport horizontally,
     preventing horizontal scroll on mobile and broken sticky bottom nav.
   - background-color: reads from MudBlazor's --mud-palette-background variable
     (auto-switches between light/dark via MudThemeProvider). Without this,
     html/body would inherit the browser default (white) and show through
     wherever there are gaps between MudBlazor surfaces.
   ──────────────────────────────────────────────────────────────────────────── */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
    /* На телефон `100vh` е ГОЛЕМИОТ видлив простор — оној кога лентата на прелистувачот е
       скриена. Бидејќи документот не скрола (`overflow-y: hidden` погоре), разликата не може да
       се достигне: последните ~100 точки од секој внатрешен скрол-сад остануваат под лентата на
       прелистувачот и до нив нема пат. Така копчето на дното на јавната страница за преземање
       се гледаше пресечено, без скрол што би стигнал до него.
       `dvh` го следи вистински видливото. Редот погоре останува како резерва — неподдржана
       единица прави правилото да отпадне при читање, па важи претходното. */
    height: 100dvh;
    background-color: var(--mud-palette-background, #FAFAFA) !important;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87)) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Mobile MudDialog responsive clamping (≤ 600px viewports).
   MudBlazor v8 width classes (.mud-dialog-width-sm = 600px, etc.) overflow
   narrow phones (375px iPhone SE). Override via attribute selector to catch
   ALL width variants in a single rule. Applied globally — every dialog on
   mobile (PDF export, Settings, Legal, EducationalTooltip, etc.) benefits
   from being viewport-clamped with 8px margin instead of clipping.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mud-dialog,
    [class*="mud-dialog-width-"] {
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
        box-sizing: border-box !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sentence case for buttons & tabs (Material 3 / Apple HIG / Atlassian).
   MudBlazor defaults .mud-button-root and .mud-tab to text-transform: uppercase.
   ALL CAPS hurts readability, sounds like shouting, and breaks accessibility
   (screen readers spell letter-by-letter). Cyrillic suffers more — fewer
   distinctive letter shapes at uppercase. Override globally — opt back in
   per-element with Style="text-transform: uppercase" when truly needed
   (status pills, BETA badges, etc.).
   ────────────────────────────────────────────────────────────────────────── */
.mud-button-root,
.mud-button,
.mud-button-label,
.mud-tab {
    text-transform: none !important;
}

/* Button weight: 600 (Semi Bold) compensates for losing uppercase visual mass.
   At sentence case, default 500 (Medium) reads "thin" next to body text —
   especially for Cyrillic. 600 keeps buttons visually distinct as actionable
   elements without bumping font-size. Tabs stay at default weight. */
.mud-button-root,
.mud-button,
.mud-button-label {
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Обвивач на страница.

   ⚠️ Класата `ssbcore-page-container` се употребуваше на 58 страници БЕЗ ДА
   ПОСТОИ дефиниција — мртва разметка, копирана од страница во страница.
   Мерено 29.08.2026: ниту еден `.css`, `.scss`, `.js` или `.html` во репото
   не ја носеше.

   ⛔ Основата НЕ менува ширина. Таа останува таму каде е денес — во
   `SharedMainLayout` (`MudContainer MaxWidth.ExtraLarge` = 1920 px). Значи
   давањето дефиниција на класата не поместува ниту една постоечка страница.

   Ширината ја бара САМАТА страница, со модификатор. Така една табла или
   список не може да се стесни ненамерно, а бројот живее на ЕДНО место —
   ако 1280 испадне тесно, се менува променливата, не деветнаесет екрана.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --ssbcore-form-max-width: 1280px;
}

.ssbcore-page-container {
    width: 100%;
}

/* Страница чија содржина се ЧИТА — форма, поставки, профил, уредувач.
   Без ова окото патува меѓу натписот и вредноста преку цел широк монитор
   (в. `.claude/rules/config-page-layout.md`, „Ширината ја одредува СОДРЖИНАТА"). */
.ssbcore-page-container--form {
    max-width: var(--ssbcore-form-max-width);
    margin-inline: auto;
}