/* CSS Variables for theming */
:root {
    --primary-color: #a02c8d;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --secondary-color: #ba6cdf;
    --dark-color: #2e053f;
    --light-color: #efcef0;
    --border-radius: 4px;
    --transition: all 0.3s ease;
    --header-height: 60px;
    
    /* Responsive width variables */
    --container-max-width: 100%;
    --content-padding: 20px;
    --mobile-padding: 15px;
    
    /* Breakpoints for consistency */
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1200px;
    
    /* Z-Index Scale - DO NOT MODIFY WITHOUT UPDATING ALL REFERENCES
     * Base Layer: 1-999 (Map controls, markers, standard UI)
     * Header Layer: 10001 (Main navigation header)
     * Dropdown Layer: 12100-12199 (Search results, unified search, doc search)
     * Modal Layer: 12000-12099 (Standard modals)
     * Mobile UI Layer: 12150-12199 (Mobile dropdowns, nocodb dropdowns)
     * Form Layer: 12200-12249 (Edit footer, move controls)
     * Popup Layer: 12250-12299 (Shift popups, tooltips)
     * Notification Layer: 12300-12399 (Status messages, alerts)
     * Admin Layer: 12400-12499 (Admin sidebars)
     * Loading Layer: 12500-12599 (Loading overlays)
     * Confirmation Layer: 12600-12699 (Confirmation modals)
     * QR Layer: 13000-13099 (QR code modals)
     * Update Layer: 15000+ (Cache-busting notifications - highest priority)
     */
}

/* Authentication loading states */
body.authenticating {
    overflow: hidden;
    background: #ffffff; /* Clean white background during auth */
}

body.authenticating #app.app-hidden {
    opacity: 0;
    visibility: hidden;
    transition: none; /* No transition while hiding */
    transform: translateY(10px); /* Slight offset for smooth entrance */
}

body.authenticated #app {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Enhanced loading overlay for authentication */
body.authenticating .loading-overlay {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(2px);
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--dark-color);
    background-color: var(--light-color);
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    margin-left: 0.5rem;
}

.temp-badge {
    background-color: var(--warning-color);
    color: white;
}