/* CSS compliant with DESIGN_GUIDE.md - iOS-inspired design */
/* Main stylesheet - Import orchestrator for modular CSS architecture */
/* OPTIMIZED FOR PERFORMANCE: Critical styles loaded first */

/* === CRITICAL PATH: Load essential base styles first === */
@import url('base/variables.css');
@import url('base/layout.css');
@import url('base/typography.css');

/* === CRITICAL COMPONENTS: Navigation and forms needed immediately === */
@import url('components/navigation.css');
@import url('components/forms.css');
@import url('components/breadcrumb.css');
@import url('components/template-components.css');

/* === NON-CRITICAL COMPONENTS: Load after above-the-fold content === */
@import url('components/cards.css');
@import url('components/buttons.css');
@import url('components/stats.css');
@import url('components/alerts.css');
@import url('components/pagination.css');
@import url('components/store.css');
@import url('components/map-info-window.css');

@import url('components/user.css');
@import url('components/settings.css');
@import url('components/admin.css');
@import url('components/game-detection.css');
@import url('components/admin-cache.css');
@import url('components/email-change.css');
@import url('components/edit-profile.css');
@import url('components/dropdown-base.css');
@import url('components/share-dropdown.css');
@import url('components/calendar-dropdown.css');
@import url('components/user-dropdown.css');
@import url('components/rsvp-dropdown.css');
@import url('components/my-stores.css');
@import url('components/my-events.css');
@import url('components/event-hub.css');
@import url('components/messaging.css');

/* === PAGE STYLES: Loaded after components === */
@import url('pages/index.css');
@import url('pages/state.css');
@import url('pages/city.css');
@import url('pages/search.css');
@import url('pages/store-details.css');
@import url('pages/event-details.css');
@import url('pages/auth.css');
@import url('pages/user.css');
@import url('pages/admin.css');

/* === UTILITIES: Always last === */
@import url('base/utilities.css');

/* App Logo Styling */
.app-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Critical Search Container - Unified Search Container Styling */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    min-height: 48px;
    width: 100%;
}

/* Main page search - larger and more prominent */
.search-container:not(.navbar-search-container) {
    margin: 32px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Navbar search - compact for header */
.navbar-search-container.search-container {
    margin: 0;
    min-height: 40px;
    flex: 1;
    max-width: 500px;
}

/* Form control styling - consistent across all search bars */
.search-container .app-form-control {
    width: 100%;
    border-radius: 24px; /* iOS-like rounded search */
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--font-size-body);
    color: var(--text-primary-color);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-container .app-form-control:focus {
    outline: none;
    border-color: var(--store-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1), var(--shadow-md);
}

.search-container .app-form-control::placeholder {
    color: var(--text-secondary-color);
}

/* Navbar specific adjustments */
.navbar-search-container .app-form-control {
    padding: 10px 16px;
    font-size: var(--font-size-small);
    border-radius: 20px;
}

/* Forms (per design guide) */
/* Base form controls - not in search containers */
.form-control, .app-form-control:not(.search-container .app-form-control) {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    font-size: var(--font-size-body);
    color: var(--text-primary-color);
    width: 100%;
    transition: var(--transition);
}

.form-control:focus, .app-form-control:not(.search-container .app-form-control):focus {
    outline: none;
    border-color: var(--store-color);
    background-color: var(--surface);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
}

.form-control::placeholder, .app-form-control:not(.search-container .app-form-control)::placeholder {
    color: var(--text-secondary-color);
}

.form-label {
    color: var(--text-primary-color);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    display: block;
}

/* Admin validation form (per design guide example) */
.validate-form {
    background: var(--surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Performance optimizations */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== CRITICAL Z-INDEX FIXES ===== */
/* Ensure all UI elements appear above Google Maps and other high z-index content */

/* Bootstrap dropdowns - general fix */
.dropdown-menu {
    z-index: 1000010 !important;
}

/* Navigation dropdowns - highest priority */
.app-navbar .dropdown-menu,
.navbar .dropdown-menu {
    z-index: 2147483647 !important;
}

/* Bootstrap modals */
.modal {
    z-index: 1000020 !important;
}

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

/* Bootstrap tooltips and popovers */
.tooltip {
    z-index: 1000015 !important;
}

.popover {
    z-index: 1000016 !important;
}

/* Toast notifications */
.toast-container {
    z-index: 1000025 !important;
}

/* Aggressive Google Maps z-index override */
.gm-style,
.gm-style > div,
.gm-style-cc,
.gm-style-mtc,
.gm-bundled-control,
.gmnoprint {
    z-index: 1000000 !important;
}

/* Force navigation elements to be above everything */
.app-navbar,
.navbar {
    z-index: 2147483647 !important;
    position: relative !important;
}

/* Ensure all dropdowns in navigation area are above maps */
.app-navbar *,
.navbar * {
    z-index: inherit !important;
}

/* Override any Google Maps z-index that might be applied dynamically */
[class*="gm-"] {
    z-index: 1000000 !important;
}

/* Navigation specific overrides */
.app-navbar .dropdown-menu,
.app-navbar .dropdown-toggle,
.app-navbar .user-dropdown,
.app-navbar .user-dropdown * {
    z-index: 2147483647 !important;
}

/* Final override - force all Bootstrap dropdowns to appear above everything */
.dropdown-menu[aria-labelledby],
.dropdown-menu.show {
    z-index: 2147483647 !important;
    position: absolute !important;
}

/* Ensure user dropdown specifically is above everything */
#userDropdown + .dropdown-menu {
    z-index: 2147483647 !important;
    position: absolute !important;
}