/* ========== From main.css ========== */
/* CSS Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--surface-variant);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CSS Variables - Light Theme (default) */
:root {
    --nav-item-width: 140px; /* Fixed width for desktop nav items */
    --nav-item-width-mobile: 50px; /* Fixed width for mobile nav items */

    --primary: #1976d2;
    --primary-dark: #115293;
    --primary-light: #4791db;
    --secondary: #dc004e;
    --secondary-dark: #9a0036;
    --secondary-light: #e33371;

    --surface: #ffffff;
    --surface-variant: #f5f5f5;
    --background: #fafafa;
    --error: #f44336;
    --warning: #ff9800;
    --info: #2196f3;
    --success: #4caf50;

    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-disabled: rgba(0, 0, 0, 0.38);
    --text-hint: rgba(0, 0, 0, 0.38);

    --divider: rgba(0, 0, 0, 0.12);
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-round: 50%;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --header-height: 56px;
    --toolbar-height: 53px; /* Increased by 5px for top padding */
    --navbar-height: 56px;
    --statusbar-height: 32px;
}

/* Dark Theme - Anthracite shades only (no pure black) */
html.dark-mode-loading body,
body.dark-mode {
    --primary: #4791db;
    --primary-dark: #1976d2;
    --primary-light: #63a4ff;
    --secondary: #f48fb1;
    --secondary-dark: #dc004e;
    --secondary-light: #ffc1e3;

    --surface: #3a3a3a;  /* Lighter anthracite for surfaces (cards, panels) */
    --surface-variant: #424242;  /* Even lighter anthracite for variants */
    --background: #2e2e2e;  /* Darker anthracite for main background */
    --error: #cf6679;
    --warning: #ffb74d;
    --info: #64b5f6;
    --success: #81c784;

    --text-primary: rgba(255, 255, 255, 0.90);  /* Slightly brighter for better contrast */
    --text-secondary: rgba(255, 255, 255, 0.65);  /* Adjusted for anthracite backgrounds */
    --text-disabled: rgba(255, 255, 255, 0.38);
    --text-hint: rgba(255, 255, 255, 0.38);
    --surface-dark: #262626;  /* Darker anthracite for special surfaces */
    --text-on-dark: rgba(255, 255, 255, 0.95);  /* High contrast text */

    --divider: rgba(255, 255, 255, 0.12);
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.6), 0 6px 6px rgba(0, 0, 0, 0.7);
    --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem 0;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* Material Symbols Font */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline-offset: 4px;
}

/* Selection */
::selection {
    background-color: var(--primary);
    color: white;
}

/* ========== From layout.css ========== */
/* Layout Structure */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* Header */
#title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--surface);
    box-shadow: var(--shadow-1);
    z-index: 500; /* Higher to contain drawer menu properly */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-sm);
}

#app-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

#app-logo-link:hover {
    opacity: 0.8;
}

#app-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

#search-container {
    flex: 0 1 280px;
    min-width: 140px;
    margin: 0 var(--spacing-sm);
    display: none;
}

#header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* Toolbar */
#toolbar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--toolbar-height);
    background-color: var(--surface-variant);
    padding: 5px var(--spacing-md) 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 90;
}

/* Main Content */
#main-content {
    position: fixed;
    top: calc(var(--header-height) + var(--toolbar-height) + 5px);
    left: 5px;
    right: 5px;
    bottom: calc(var(--navbar-height) + var(--statusbar-height) + 5px);
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--surface);
    -webkit-overflow-scrolling: touch;
}

html.dark-mode-loading #main-content,
body.dark-mode #main-content {
    background-color: var(--surface);
}

/* Navigation Bar */
#navbar {
    position: fixed;
    bottom: var(--statusbar-height);
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background-color: var(--surface);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--spacing-sm);
    gap: 4px; /* 4px spacing between navbar items */
    overflow: hidden;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden; /* Prevent flickering */
    will-change: transform; /* Optimize for transforms only */
    contain: layout style paint; /* Better containment */
}

/* Optimize transitions during resize */
#navbar.resizing {
    pointer-events: none; /* Prevent interaction during resize */
}

#navbar.resizing .nav-item {
    transition: background-color var(--transition-fast), color var(--transition-fast);
    animation: none !important;
}

#navbar.resizing .nav-item .label {
    transition: none !important;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 100%;
    width: var(--nav-item-width);
    flex-basis: var(--nav-item-width);
    padding: var(--spacing-xs) 2px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    position: relative;
    border-radius: var(--radius-small);
    will-change: background-color; /* Only animate what changes */
    contain: layout style paint;
    transform: translateZ(0); /* Create layer for smoother transitions */
}

.nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading .nav-item:hover,
body.dark-mode .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
    color: var(--primary);
    background-color: rgba(25, 118, 210, 0.08);
}

.nav-item .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
    display: block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.nav-item .label {
    display: none;
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

#nav-overflow-menu {
    display: none;
    min-width: 50px;
    max-width: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--text-secondary);
    margin-left: auto;
    margin-right: 8px; /* Add space from right edge */
    flex-shrink: 0; /* Prevent shrinking */
    z-index: 10; /* Ensure it's above other items */
}

#nav-overflow-menu:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}

#nav-overflow-menu.active {
    background-color: rgba(25, 118, 210, 0.08);
    color: var(--primary);
}

html.dark-mode-loading #nav-overflow-menu:hover,
body.dark-mode #nav-overflow-menu:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode-loading #nav-overflow-menu.active,
body.dark-mode #nav-overflow-menu.active {
    background-color: rgba(71, 145, 219, 0.15);
    color: var(--primary);
}

/* Navbar Overflow Popup */
.navbar-overflow-popup {
    position: fixed;
    bottom: calc(var(--navbar-height) + var(--statusbar-height) + 12px);
    right: 16px; /* Consistent spacing from right edge */
    background-color: var(--surface);
    border-radius: var(--radius-medium);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--divider);
    padding: var(--spacing-xs) 0;
    min-width: 180px;
    max-height: 50vh;
    max-height: 50dvh;
    overflow-y: auto;
    z-index: 1000; /* Same as drawer menu to ensure proper layering */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
}

.navbar-overflow-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overflow-popup-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
}

.overflow-popup-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading .overflow-popup-item:hover,
body.dark-mode .overflow-popup-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.overflow-popup-item.active {
    color: var(--primary);
    background-color: rgba(25, 118, 210, 0.08);
}

.overflow-popup-item .icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.overflow-popup-item .label {
    font-size: 0.875rem;
    white-space: nowrap;
    display: block !important;
}

/* Status Bar */
#statusbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--statusbar-height);
    background-color: var(--surface-variant);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    z-index: 90;
    border-top: 1px solid var(--divider);
}

#status-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Drawer Menu - Dropdown Popup Style */
#drawer-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 200px;
    background-color: var(--surface);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--divider);
    z-index: 1000; /* Higher than navbar (100) to ensure it appears above */
    transform-origin: top right;
    transform: scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
    overflow: hidden;
}

#drawer-menu.open {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

#drawer-menu nav {
    padding: var(--spacing-sm) 0;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height) - var(--spacing-xl) - 16px);
}

#drawer-menu nav a {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 var(--spacing-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    min-height: 40px;
}

#drawer-menu nav a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading #drawer-menu nav a:hover,
body.dark-mode #drawer-menu nav a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#drawer-menu hr {
    margin: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-top: 1px solid var(--divider);
}

/* Language Selector in Drawer */
.language-selector-container {
    padding: var(--spacing-xs) var(--spacing-md);
    margin: 0 var(--spacing-sm);
}

/* Language Selector */
.language-select {
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--divider);
    border-radius: var(--radius-small);
    background-color: var(--surface-variant);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    padding-right: 32px;
}

.language-select:hover {
    border-color: var(--primary);
}

.language-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

html.dark-mode-loading .language-select,
body.dark-mode .language-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ccc'/%3E%3C/svg%3E");
}

/* Scrim */
#scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 250;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#scrim.visible {
    opacity: 1;
    visibility: visible;
}

/* Prevent layout shifts during orientation changes */
@media (orientation: portrait) and (max-width: 767px) {
    #navbar {
        transition: none;
        gap: 4px; /* Add 4px spacing between items in portrait mode */
    }

    .nav-item {
        transition: background-color var(--transition-fast), color var(--transition-fast);
        margin: 0 2px; /* Add horizontal margin for wider touch targets */
    }
}

/* Landscape mobile - show full navbar items with labels like desktop */
@media (orientation: landscape) and (max-width: 767px) {
    #navbar {
        height: var(--navbar-height); /* Use standard height */
        padding: 2px var(--spacing-sm);
        gap: 4px; /* 4px spacing between items */
        justify-content: flex-start;
        overflow-x: hidden; /* Ensure no horizontal scroll */
    }

    .nav-item {
        flex-direction: row; /* Horizontal layout like desktop */
        justify-content: center;
        gap: var(--spacing-xs);
        padding: 6px var(--spacing-sm);
        width: var(--nav-item-width);
        flex-basis: var(--nav-item-width);
        max-width: none;
        flex: 0 0 auto;
        margin: 0 2px; /* Add horizontal margin for wider touch targets */
    }

    .nav-item .icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .nav-item .label {
        display: block !important; /* Show labels in landscape */
        font-size: 0.875rem;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #nav-overflow-menu {
        display: none; /* Hidden by default, JS will show when needed */
        flex: 0 0 auto;
        min-width: 50px;
        max-width: 50px;
        margin-left: auto; /* Push to the right */
        margin-right: 0; /* Reset right margin in landscape */
    }

    /* Ensure overflow menu is always visible when shown */
    #nav-overflow-menu[style*="flex"] {
        display: flex !important;
    }
}

/* For devices with very limited height (landscape phones) - optional height optimization */
@media (orientation: landscape) and (max-height: 400px) {
    :root {
        --navbar-height: 52px; /* Slightly reduced but still usable */
        --statusbar-height: 20px;
        --header-height: 48px;
        --toolbar-height: 36px;
    }

    #navbar .nav-item {
        padding: 4px var(--spacing-sm);
    }

    #navbar .nav-item .icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    #main-content {
        top: calc(var(--header-height) + var(--toolbar-height) + 4px);
        bottom: calc(var(--navbar-height) + var(--statusbar-height) + 4px);
    }
}

/* Responsive Design - Small Mobile */
@media (min-width: 480px) {
    #search-container {
        display: block;
    }

    #header-actions {
        gap: var(--spacing-sm);
    }
}

/* Responsive Design - Small screens keep more padding for touch */
@media (max-width: 767px) {
    #main-content {
        padding: var(--spacing-sm); /* 8px for better touch usability */
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        top: calc(var(--header-height) + var(--toolbar-height) + var(--spacing-sm));
        bottom: calc(var(--navbar-height) + var(--statusbar-height) + var(--spacing-sm));
    }

    /* Ensure minimum touch target size */
    #navbar {
        gap: 4px; /* 4px spacing between navbar items */
        padding: 2px var(--spacing-md);
    }

    .nav-item {
        margin: 0; /* Remove margin, use gap instead */
    }
}

/* Portrait mobile specific */
@media (max-width: 767px) and (orientation: portrait) {
    /* Make navbar items wider on mobile portrait for better touch targets */
    .nav-item {
        width: 70px; /* Increased width for rectangular shape */
        flex-basis: 70px; /* Increased width for rectangular shape */
        min-width: 70px; /* Ensure minimum width */
        margin: 0; /* Remove margin, use gap instead */
    }

    #navbar {
        gap: 4px; /* 4px spacing between navbar items */
        padding: 2px 8px; /* Consistent padding for proper spacing */
    }

    #nav-overflow-menu {
        margin-right: 0; /* Reset right margin to use navbar padding */
    }

    /* Let JavaScript handle overflow dynamically */
}

/* Responsive Design - Tablet and Desktop */
@media (min-width: 768px) {
    #search-container {
        flex: 0 1 350px;
        margin: 0 var(--spacing-md);
    }

    #navbar {
        padding: 2px var(--spacing-md);
        gap: 4px; /* 4px spacing between navbar items */
    }

    .nav-item {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: 6px var(--spacing-sm);
        width: var(--nav-item-width);
        flex-basis: var(--nav-item-width);
        max-width: none;
        flex: 0 0 auto;
        transition: all var(--transition-fast) ease-out;
    }

    .nav-item .label {
        display: block;
        font-size: 0.875rem;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }

    #nav-overflow-menu {
        flex: 0 0 auto;
        min-width: 50px;
        max-width: 50px;
    }

    /* Handle navbar overflow on desktop */
    @media (min-width: 1024px) {
        #search-container {
            flex: 0 1 400px;
        }

        #navbar {
            justify-content: center;
            gap: 4px; /* 4px spacing between navbar items */
        }

        .nav-item {
            flex: 0 0 auto;
            width: var(--nav-item-width);
            flex-basis: var(--nav-item-width);
            max-width: 150px;
        }
    }
}

/* Large Desktop */
@media (min-width: 1440px) {
    #search-container {
        flex: 0 1 450px;
    }

    /* Remove max-width and auto margin to maintain edge spacing */

    #toolbar {
        padding: 0 var(--spacing-xl);
    }

    #title-bar {
        padding: 0 var(--spacing-xl);
    }
}

/* ========== From components.css ========== */
/* Components */

/* Buttons */
button {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: all var(--transition-fast);
}

/* Header Buttons */
#header-actions button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    color: var(--text-secondary);
    background-color: transparent;
    transition: background-color var(--transition-fast);
}

#header-actions button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading #header-actions button:hover,
body.dark-mode #header-actions button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#header-actions button:active {
    background-color: rgba(0, 0, 0, 0.08);
}

html.dark-mode-loading #header-actions button:active,
body.dark-mode #header-actions button:active {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Add Material Icons to header buttons */
#notification-btn::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 24px 24px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 24px 24px;
}

#user-avatar-btn::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 24px 24px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 24px 24px;
}

#drawer-toggle::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 24px 24px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 24px 24px;
}

/* Primary CTA Button */
.primary-cta {
    background-color: var(--primary);
    color: white;
    padding: 0 var(--spacing-lg);
    height: 36px;
    border-radius: var(--radius-large);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-1);
    transition: all var(--transition-fast);
}

.primary-cta:hover {
    background-color: var(--primary-dark);
    box-shadow: var(--shadow-2);
}

.primary-cta:active {
    box-shadow: var(--shadow-1);
    transform: translateY(1px);
}

.primary-cta:disabled {
    background-color: var(--text-disabled);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Search Input */
#search-main {
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-sm) 0 40px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-large);
    background-color: var(--surface-variant);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: all var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 -960 960 960' width='18' fill='%23666'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px 18px;
}

html.dark-mode-loading #search-main,
body.dark-mode #search-main {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 -960 960 960' width='18' fill='%23aaa'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}

#search-main:focus {
    border-color: var(--primary);
    background-color: var(--surface);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

#search-main::placeholder {
    color: var(--text-hint);
}

#search-main::-webkit-search-decoration,
#search-main::-webkit-search-cancel-button,
#search-main::-webkit-search-results-button,
#search-main::-webkit-search-results-decoration {
    display: none;
}

/* Navigation Icons */
.nav-item:nth-child(1) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/%3E%3C/svg%3E");
}

.nav-item:nth-child(2) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
}

/* Appointments/Termine - List Icon */
.nav-item:nth-child(3) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E");
}

.nav-item:nth-child(4) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z'/%3E%3C/svg%3E");
}

.nav-item:nth-child(5) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M320-240h320v-80H320v80Zm0-160h320v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z'/%3E%3C/svg%3E");
}

/* Invoicing/Rechnungen - Calculator Outlined Icon */
.nav-item:nth-child(6) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM6.25 7.72h5v1.5h-5zM13 15.75h5v1.5h-5zm0-2.5h5v1.5h-5zM8 18h1.5v-2h2v-1.5h-2v-2H8v2H6V16h2zm6.09-7.05l1.41-1.41 1.41 1.41 1.06-1.06-1.41-1.42 1.41-1.41L16.91 6l-1.41 1.41-1.41-1.41L13.03 7.05l1.41 1.41-1.41 1.42z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM6.25 7.72h5v1.5h-5zM13 15.75h5v1.5h-5zm0-2.5h5v1.5h-5zM8 18h1.5v-2h2v-1.5h-2v-2H8v2H6V16h2zm6.09-7.05l1.41-1.41 1.41 1.41 1.06-1.06-1.41-1.42 1.41-1.41L16.91 6l-1.41 1.41-1.41-1.41L13.03 7.05l1.41 1.41-1.41 1.42z'/%3E%3C/svg%3E");
}

/* Booking System/Buchungssystem - Clock Icon */
.nav-item:nth-child(7) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

/* Payments/Zahlungen - Credit Card Icon */
.nav-item:nth-child(8) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}

/* Health Hub/MediShop - Material Design Shopping Cart Outlined Icon */
.nav-item:nth-child(9) .icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0020 4H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0020 4H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* Ripple Effect */
button {
    position: relative;
    overflow: hidden;
}

button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:active::after {
    width: 300px;
    height: 300px;
}

/* Loading States */
.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    pointer-events: none; /* Allow backdrop to be clickable */
}

.modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    transition: opacity var(--transition-normal);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background-color: var(--surface);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-4);
    max-width: 90%;
    max-height: 90vh;
    width: 500px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
    pointer-events: auto; /* Re-enable interactions for content */
    z-index: 2001;
}

.modal.visible .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--divider);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.modal-close:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading .modal-close:hover,
body.dark-mode .modal-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.modal-body {
    padding: var(--spacing-md);
    max-height: calc(90vh - 120px);
    overflow-y: auto;
}

/* Language Selector */
.language-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}

.language-option {
    padding: var(--spacing-md);
    border: 1px solid var(--divider);
    border-radius: var(--radius-medium);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.language-option:hover {
    background-color: var(--surface-variant);
    border-color: var(--primary);
}

.language-option.active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: calc(var(--navbar-height) + var(--statusbar-height) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: rgba(0, 0, 0, 0.87);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-2);
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    max-width: 90%;
    min-width: 200px;
    text-align: center;
}

html.dark-mode-loading .toast,
body.dark-mode .toast {
    background-color: rgba(255, 255, 255, 0.87);
    color: rgba(0, 0, 0, 0.87);
}

.toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Update Notification */
.update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--info);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    z-index: 200;
    box-shadow: var(--shadow-2);
    animation: slideDown var(--transition-normal);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.update-notification button {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-small);
    background-color: white;
    color: var(--info);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.update-notification button:hover {
    opacity: 0.9;
}

/* Section Content */
.section-content {
    animation: fadeIn var(--transition-normal);
}

.section-content p {
    margin: 0;
    color: var(--text-secondary);
}

/* Install Prompt */
.install-prompt {
    position: fixed;
    bottom: calc(var(--navbar-height) + var(--statusbar-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-3);
    padding: var(--spacing-md);
    max-width: 90%;
    width: 400px;
    z-index: 999;
    transition: opacity 0.3s ease;
    border: 1px solid var(--divider);
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.install-prompt-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.install-prompt-text {
    flex: 1;
    min-width: 150px;
}

.install-prompt-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.install-prompt-text small {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.install-prompt-btn {
    padding: 8px 16px;
    border-radius: var(--radius-small);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--divider);
    background-color: var(--surface);
    color: var(--text-primary);
}

.install-prompt-btn.primary {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.install-prompt-btn:hover {
    opacity: 0.9;
}

@media (max-width: 480px) {
    .install-prompt {
        bottom: calc(var(--navbar-height) + var(--statusbar-height) + 10px);
        width: calc(100% - 20px);
        left: 10px;
        transform: none;
    }

    .install-prompt-content {
        flex-direction: column;
        text-align: center;
    }

    .install-prompt-btn {
        width: 100%;
    }
}

/* Context Menu */
.context-menu {
    position: fixed;
    background-color: var(--surface);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--divider);
    padding: var(--spacing-xs) 0;
    min-width: 200px;
    max-width: 280px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.context-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    min-height: 36px;
    font-size: 0.875rem;
}

.context-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading .context-menu-item:hover,
body.dark-mode .context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.context-menu-item[data-action="delete"] {
    color: var(--error);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.context-menu-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    background-color: var(--text-secondary);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.context-menu-item:hover .context-menu-icon {
    background-color: var(--text-primary);
}

.context-menu-item[data-action="delete"] .context-menu-icon {
    background-color: var(--error);
}

/* Material icon masks for context menu */
.context-menu-icon[data-icon="refresh"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="content-copy"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="content-paste"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="add"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="edit"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="delete"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

.context-menu-icon[data-icon="settings"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
}

.context-menu-label {
    flex: 1;
    white-space: nowrap;
}

.context-menu-separator {
    margin: var(--spacing-xs) 0;
    border: none;
    border-top: 1px solid var(--divider);
}

.context-menu-item.module-specific {
    display: none;
}

.context-menu.has-module-actions .context-menu-item.module-specific {
    display: flex;
}

.context-menu:not(.has-module-actions) .module-separator {
    display: none;
}

/* Context menu is now supported on mobile devices with touch gestures */
/* Two-finger tap on iPad and long-press on Android */

/* Touch-friendly context menu adjustments */
@media (pointer: coarse) {
    .context-menu {
        /* Larger touch targets on mobile */
        min-width: 240px;
    }

    .context-menu-item {
        min-height: 48px;
        padding: 12px 16px;
    }

    .context-menu-separator {
        margin: 4px 0;
    }
}

/* Print Styles */
@media print {
    #title-bar,
    #toolbar,
    #navbar,
    #statusbar,
    #drawer-menu,
    #context-menu,
    #scrim,
    .modal,
    .toast,
    .update-notification {
        display: none !important;
    }

    #main-content {
        position: static;
        padding: 0;
        overflow: visible;
    }
}

/* ========== From z-index-fix.css ========== */
/* Z-Index Hierarchy Fix
 * This file ensures proper layering of all UI elements
 *
 * Z-Index Scale:
 * 90  - Status bar
 * 100 - Navbar
 * 200 - Toolbar
 * 500 - Header/Title bar
 * 1000 - Drawer menu (must be above navbar)
 * 1100 - Navbar overflow popup (same level as drawer)
 * 1500 - Context menu
 * 2000 - Modals
 * 3000 - Toast notifications (highest priority)
 */

/* Base layers */
#statusbar {
    z-index: 90 !important;
}

#navbar {
    z-index: 100 !important;
}

#toolbar {
    z-index: 200 !important;
}

#title-bar {
    z-index: 500 !important;
}

/* Dropdown menus - must be above navbar */
#drawer-menu,
#login-drawer-menu {
    z-index: 1000 !important;
}

.navbar-overflow-popup {
    z-index: 1100 !important;
}

/* Context menu - above dropdowns */
.context-menu {
    z-index: 1500 !important;
}

/* Modals - above everything except toasts */
.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1999 !important;
}

/* Toast notifications - highest priority */
.toast {
    z-index: 3000 !important;
}

/* Update notification banner */
.update-notification {
    z-index: 2500 !important;
}

/* Install prompt */
.install-prompt {
    z-index: 1800 !important;
}

/* ========== From login.css ========== */
/* Login Screen Styles */

.view-container {
    visibility: hidden;
    opacity: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    flex-direction: column;
    position: relative;
    display: flex;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.view-container.active {
    visibility: visible;
    opacity: 1;
}

#login-container {
    background: var(--background-color, #fafafa);
}

#login-main-content {
    position: fixed;
    top: var(--header-height, 56px);
    left: 0;
    right: 0;
    bottom: var(--statusbar-height, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background, #fafafa);
    padding: var(--spacing-md, 16px);
    overflow-y: auto;
}

.login-form-wrapper {
    padding: 2rem;
    background: var(--surface, #fff);
    border-radius: var(--radius-medium, 8px);
    box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.1));
    width: 100%;
    max-width: 400px;
    min-height: 420px; /* Fixed minimum height to prevent size changes */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-wrapper h1 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1.75rem;
}

#login-form .form-field {
    margin-bottom: 1.5rem;
}

#login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

#login-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--divider, #e0e0e0);
    border-radius: var(--radius-small, 4px);
    font-size: 1rem;
    background: var(--surface-variant, #f5f5f5);
    color: var(--text-primary, #333);
    transition: all var(--transition-fast, 200ms ease);
}

#login-form input:focus {
    outline: none;
    border-color: var(--primary, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

#login-button {
    width: 100%;
    padding: 0 var(--spacing-lg, 24px);
    margin-top: 1rem;
    height: 36px;
    background-color: var(--primary, #1976d2);
    color: white;
    border: none;
    border-radius: var(--radius-large, 18px);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,0.1));
    cursor: pointer;
    transition: all var(--transition-fast, 200ms ease);
}

#login-button:hover {
    background-color: var(--primary-dark, #1565c0);
    box-shadow: var(--shadow-2, 0 4px 8px rgba(0,0,0,0.15));
}

#login-button:active {
    box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,0.1));
    transform: translateY(1px);
}

#login-button:disabled {
    background-color: var(--text-disabled, #bdbdbd);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.error-message {
    color: var(--error-color, #D32F2F);
    min-height: 2.4em; /* Fixed minimum height for 2 lines to prevent layout shifts */
    max-height: 2.4em;
    line-height: 1.2em;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9em;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

/* Login header - matching main app header */
#login-title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height, 56px);
    background-color: var(--surface, #fff);
    box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,0.1));
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-sm, 8px);
    gap: var(--spacing-sm, 8px);
}

#login-app-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--transition-fast, 200ms ease);
}

#login-app-logo-link:hover {
    opacity: 0.8;
}

#login-app-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

#login-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    flex-shrink: 0;
}

/* Login drawer toggle button - matching main app */
#login-drawer-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round, 50%);
    color: var(--text-secondary, #666);
    background-color: transparent;
    transition: background-color var(--transition-fast, 200ms ease);
}

#login-drawer-toggle:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading #login-drawer-toggle:hover,
body.dark-mode #login-drawer-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#login-drawer-toggle:active {
    background-color: rgba(0, 0, 0, 0.08);
}

html.dark-mode-loading #login-drawer-toggle:active,
body.dark-mode #login-drawer-toggle:active {
    background-color: rgba(255, 255, 255, 0.12);
}

#login-drawer-toggle::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 24px 24px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 24px 24px;
}

/* Login drawer menu - matching main app drawer */
#login-drawer-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 200px;
    background-color: var(--surface, #fff);
    border-radius: var(--radius-medium, 8px);
    box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.15));
    border: 1px solid var(--divider, #e0e0e0);
    z-index: 1000;
    transform-origin: top right;
    transform: scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-fast, 200ms ease), opacity var(--transition-fast, 200ms ease), visibility var(--transition-fast, 200ms ease);
    overflow: hidden;
}

#login-drawer-menu.open,
#login-drawer-menu.active {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

#login-drawer-menu nav {
    padding: var(--spacing-sm, 8px) 0;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height, 56px) - var(--spacing-xl, 24px) - 16px);
}

#login-drawer-menu nav a {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    margin: 0 var(--spacing-sm, 8px);
    color: var(--text-primary, #333);
    text-decoration: none;
    transition: background-color var(--transition-fast, 200ms ease);
    border-radius: var(--radius-small, 4px);
    font-size: 0.875rem;
    min-height: 40px;
}

#login-drawer-menu nav a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html.dark-mode-loading #login-drawer-menu nav a:hover,
body.dark-mode #login-drawer-menu nav a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#login-drawer-menu hr {
    margin: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border: none;
    border-top: 1px solid var(--divider, #e0e0e0);
}

/* Language selector in login drawer */
#login-drawer-menu .language-selector-container {
    padding: var(--spacing-xs, 4px) var(--spacing-md, 16px);
    margin: 0 var(--spacing-sm, 8px);
}

#login-language-select {
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-sm, 8px);
    border: 1px solid var(--divider, #e0e0e0);
    border-radius: var(--radius-small, 4px);
    background-color: var(--surface-variant, #f5f5f5);
    color: var(--text-primary, #333);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast, 200ms ease);
}

#login-language-select:hover {
    border-color: var(--primary, #1976d2);
}

#login-language-select:focus {
    outline: none;
    border-color: var(--primary, #1976d2);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* Login status bar - matching main app */
#login-statusbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--statusbar-height, 24px);
    background-color: var(--surface-variant, #f5f5f5);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md, 16px);
    z-index: 80;
    border-top: 1px solid var(--divider, #e0e0e0);
}

#login-status-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    font-weight: 500;
}

/* Dark mode adjustments */
html.dark-mode-loading #login-container,
body.dark-mode #login-container {
    background: var(--background, #121212);
}

html.dark-mode-loading #login-title-bar,
body.dark-mode #login-title-bar {
    background-color: var(--surface, #1e1e1e);
    box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,0.3));
}

html.dark-mode-loading #login-drawer-menu,
body.dark-mode #login-drawer-menu {
    background-color: var(--surface, #1e1e1e);
    border-color: var(--divider, #333);
}

html.dark-mode-loading #login-statusbar,
body.dark-mode #login-statusbar {
    background-color: var(--surface-variant, #2c2c2c);
    border-top-color: var(--divider, #333);
}

html.dark-mode-loading #login-main-content,
body.dark-mode #login-main-content {
    background: var(--background, #121212);
}

html.dark-mode-loading .login-form-wrapper,
body.dark-mode .login-form-wrapper {
    background: var(--surface, #1e1e1e);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html.dark-mode-loading #login-form input,
body.dark-mode #login-form input {
    background: var(--surface-variant, #2c2c2c);
    border-color: var(--divider, #333);
    color: var(--text-primary, #fff);
}

html.dark-mode-loading #login-form input:focus,
body.dark-mode #login-form input:focus {
    border-color: var(--primary, #64b5f6);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
}

html.dark-mode-loading #login-language-select,
body.dark-mode #login-language-select {
    background-color: var(--surface-variant, #2c2c2c);
    border-color: var(--divider, #333);
    color: var(--text-primary, #fff);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .login-form-wrapper {
        padding: 1.5rem;
        border-radius: var(--radius-medium, 8px); /* Keep rounded corners */
        box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.1)); /* Keep shadow */
        max-width: calc(100% - 2rem); /* Leave some margin on sides */
        min-height: auto; /* Remove fixed height on mobile */
        margin: 1rem; /* Add margin for better spacing */
    }

    #login-main-content {
        padding: 0.5rem;
        align-items: center; /* Center the dialog */
    }
}

/* Vertical mobile view - ensure proper visibility */
@media (orientation: portrait) and (max-width: 767px) {
    #login-main-content {
        padding: 1rem;
        overflow-y: auto; /* Allow scrolling if needed */
    }

    .login-form-wrapper {
        margin: 1rem auto;
        max-height: calc(100vh - var(--header-height, 56px) - var(--statusbar-height, 24px) - 2rem);
        overflow-y: auto;
        /* Maintain consistent appearance */
        border-radius: var(--radius-medium, 8px);
        box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.1));
    }

    /* Ensure form elements are properly spaced on small screens */
    #login-form .form-field {
        margin-bottom: 1rem;
    }

    .login-form-wrapper h1 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* Very small screens - maintain appearance */
@media (max-width: 360px) {
    .login-form-wrapper {
        padding: 1.25rem;
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        /* Always maintain visual consistency */
        border-radius: var(--radius-medium, 8px) !important;
        box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.1)) !important;
    }

    #login-main-content {
        padding: 0.5rem;
    }
}