/* BBL GIS Immobilienportfolio - Main Stylesheet */
/* Extracted from index.html for better maintainability */

/* ===== CSS CUSTOM PROPERTIES ===== */
        :root {
            /* Grey Scale - Cold blue-grey to match --accent-panel #6C757D */
            --grey-900: #2D3236;
            --grey-800: #3D4347;
            --grey-700: #4E555A;
            --grey-600: #5E666B;
            --grey-500: #6C757D; /* WCAG AA compliant on white, matches accent-panel */
            --grey-300: #C5CCD1;
            --grey-200: #DDE2E6;
            --grey-100: #F3F5F7;
            --grey-50: #F9FAFB;

            /* Brand Colors */
            --accent-panel: #6C757D;
            --primary-red: #c00;
            --primary-red-dark: #a00;
            --white: #ffffff;

            /* Interactive Blue (consolidated) */
            --interactive-blue: #005ea8;
            --focus-ring: var(--interactive-blue);

            /* Status Colors - Unified System */
            --status-active: #2e7d32;
            --status-active-bg: #e8f5e9;
            --status-active-text: #1b5e20;

            --status-renovation: #ef6c00;
            --status-renovation-bg: #fff3e0;
            --status-renovation-text: #e65100;

            --status-planning: #1976d2;
            --status-planning-bg: #e3f2fd;
            --status-planning-text: #0d47a1;

            --status-inactive: #6C757D;
            --status-inactive-bg: var(--grey-100);
            --status-inactive-text: #5E666B;

            /* Error/Warning Status (for toasts, validation) */
            --status-error: #d32f2f;
            --status-error-bg: #ffebee;
            --status-error-text: #c62828;

            --status-warning: #f57c00;
            --status-warning-bg: #fff3e0;
            --status-warning-text: #e65100;

            /* Legacy semantic colors (mapped to new system) */
            --success-green: var(--status-active);
            --warning-orange: var(--status-renovation-text);
            --info-blue: var(--status-planning);

            /* ===== TYPOGRAPHY SYSTEM ===== */
            /* Type Scale (1.25 ratio - Major Third) */
            --text-xs: 0.75rem;     /* 12px - minimum accessible size */
            --text-sm: 0.875rem;    /* 14px - secondary text */
            --text-base: 1rem;      /* 16px - body text */
            --text-lg: 1.125rem;    /* 18px - large text */
            --text-xl: 1.25rem;     /* 20px - headings */
            --text-2xl: 1.5rem;     /* 24px - large headings */

            /* Line Heights */
            --leading-tight: 1.25;
            --leading-snug: 1.375;
            --leading-normal: 1.5;
            --leading-relaxed: 1.625;

            /* Font Weights */
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;

            /* ===== SPACING SYSTEM ===== */
            /* 4px base unit scale */
            --space-0: 0;
            --space-1: 0.25rem;     /* 4px */
            --space-2: 0.5rem;      /* 8px */
            --space-3: 0.75rem;     /* 12px */
            --space-4: 1rem;        /* 16px */
            --space-5: 1.25rem;     /* 20px */
            --space-6: 1.5rem;      /* 24px */
            --space-8: 2rem;        /* 32px */
            --space-10: 2.5rem;     /* 40px */
            --space-12: 3rem;       /* 48px */
            --space-16: 4rem;       /* 64px */

            /* ===== COMPONENT TOKENS ===== */
            /* Border Radius */
            --radius-sm: 0.25rem;   /* 4px */
            --radius-md: 0.5rem;    /* 8px */
            --radius-lg: 0.75rem;   /* 12px */
            --radius-full: 9999px;

            /* Shadows */
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
            --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.2);

            /* Touch Target (WCAG 2.1 minimum) */
            --touch-target-min: 44px;

            /* ===== ICON SIZE SYSTEM ===== */
            --icon-xs: 14px;      /* inline with text */
            --icon-sm: 16px;      /* small buttons, badges */
            --icon-md: 18px;      /* standard buttons */
            --icon-lg: 20px;      /* headers, navigation */
            --icon-xl: 24px;      /* large navigation, carousel */
            --icon-2xl: 36px;     /* feature highlights */
            --icon-display: 48px; /* loading spinners */
            --icon-hero: 64px;    /* empty states */

            /* ===== TRANSITION SYSTEM ===== */
            --transition-fast: 0.15s ease;
            --transition-normal: 0.2s ease;
            --transition-slow: 0.3s ease;

            /* ===== LAYOUT HEIGHT SYSTEM ===== */
            /* Centralized height values to eliminate magic numbers */
            --header-main-height: 90px;
            --header-detail-height: 124px;
            --footer-height: 27px;
            --header-total-height: calc(var(--header-main-height) + var(--header-detail-height));

            /* Smart Drawer */
            --drawer-width: 450px;
            --drawer-min-width: 300px;
            --drawer-max-width: 800px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: var(--text-sm);
            line-height: var(--leading-normal);
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            color: var(--grey-900);
        }
        
        /* ===== HEADER ===== */
        #header {
            background: var(--white);
            display: flex;
            flex-direction: column;
            z-index: 1000;
        }

        .header-main {
            display: flex;
            align-items: center;
            padding: 0 var(--space-5);
            height: var(--header-main-height);
            border-bottom: 1px solid var(--grey-300);
            box-shadow: var(--shadow-md);
            position: relative;
            z-index: 1; /* Shadow appears above header-detail */
        }

        .header-detail {
            display: none;
            flex-direction: column;
            position: relative;
            z-index: 0;
        }

        body.detail-active .header-detail {
            display: flex;
        }

        /* Detail header and tabs now in header */
        .header-detail .detail-header {
            background: var(--white);
            padding: var(--space-4) var(--space-5);
            transition: padding-right var(--transition-slow);
        }

        .header-detail .detail-tabs {
            background: var(--white);
            transition: padding-right var(--transition-slow);
        }

        /* Align header elements with detail-content when drawer is open */
        /* drawer width + var(--space-6) to match detail-content padding */
        body:has(#smart-drawer.open) .header-detail .detail-header,
        body:has(#smart-drawer.open) .header-detail .detail-tabs {
            padding-right: calc(var(--drawer-width) + var(--space-6));
        }

        #logo-area {
            display: flex;
            align-items: flex-start;
            cursor: pointer;
        }
        
        #logo-flag {
            width: 25px;
            height: auto;
        }
        
        #logo-text-img {
            height: 50px;
            width: auto;
        }
        
        #search-area {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-4);
            padding: 0 var(--space-10);
        }
        
        #search-wrapper {
            position: relative;
            width: 100%;
            max-width: 550px;
            z-index: 2000;
        }

        #search-container {
            display: flex;
            align-items: center;
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            width: 100%;
            overflow: hidden;
            background: var(--white);
            height: var(--touch-target-min);
        }
        
        #search-icon-btn {
            background: var(--grey-100);
            border: none;
            border-right: 1px solid var(--grey-300);
            padding: var(--space-3) var(--space-4);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #search-icon-btn:hover {
            background: var(--grey-200);
        }
        
        #search-icon-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-600);
        }
        
        #search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            line-height: var(--leading-normal);
            outline: none;
        }
        
        #search-input::placeholder {
            color: var(--grey-500);
        }

        /* NEW: Search Clear Button */
        #search-clear-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0 10px;
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
            color: var(--grey-500);
            height: 100%;
        }

        #search-clear-btn:hover {
            color: var(--grey-900);
            background: var(--grey-50);
        }

        #search-clear-btn .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        #search-clear-btn.visible {
            display: flex;
        }

        /* Spinner style */
        .spinner {
            width: 18px;
            height: 18px;
            border: 2px solid var(--grey-100);
            border-top: 2px solid var(--grey-600);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: var(--space-3);
            display: none; /* Hidden by default */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-top: none;
            border-radius: 0 0 4px 4px;
            box-shadow: var(--shadow-lg);
            max-height: 500px;
            overflow-y: auto;
            display: none;
        }

        #search-results.active {
            display: block;
        }

        .search-section-header {
            background: var(--accent-panel);
            color: white;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-xs);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .search-item {
            padding: var(--space-3) var(--space-4);
            cursor: pointer;
            border-bottom: 1px solid var(--grey-100);
            transition: background var(--transition-fast);
        }

        .search-item:hover {
            background: var(--grey-100);
        }

        .search-item:last-child {
            border-bottom: none;
        }

        .search-item-title {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--grey-900);
        }

        .search-item-title b {
            color: var(--primary-red);
        }

        .search-item-subtitle {
            font-size: var(--text-xs);
            color: var(--grey-600);
            margin-top: var(--space-1);
        }
        
        .view-toggle {
            display: flex;
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            overflow: hidden;
            flex-shrink: 0;
            height: 40px;
        }
        
        .view-toggle-btn {
            background: var(--white);
            border: none;
            padding: var(--space-2) var(--space-3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            border-right: 1px solid var(--grey-300);
            transition: background var(--transition-normal), padding var(--transition-normal);
        }
        
        .view-toggle-btn:last-child {
            border-right: none;
        }
        
        .view-toggle-btn:hover {
            background: var(--grey-100);
        }
        
        .view-toggle-btn.active {
            background: var(--accent-panel);
        }
        
        .view-toggle-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-600);
        }
        
        .view-toggle-btn.active .material-symbols-outlined {
            color: var(--white);
        }
        
        .view-toggle-btn .view-label {
            display: none;
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--grey-900);
        }
        
        .view-toggle-btn.active .view-label {
            display: inline;
            color: var(--white);
        }
        
        #header-right {
            display: flex;
            align-items: center;
            gap: var(--space-8);
            min-width: 250px;
            justify-content: flex-end;
        }

        #object-count {
            font-size: var(--text-sm);
            color: var(--grey-900);
            font-weight: 500;
            padding: 0 8px;
        }
        
        .header-btn {
            background: var(--white);
            border: 1px solid var(--grey-300);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            cursor: pointer;
            font-size: var(--text-sm);
            display: flex;
            align-items: center;
            height: 40px;
            gap: var(--space-2);
            transition: background var(--transition-normal);
        }
        
        .header-btn:hover {
            background: var(--grey-100);
        }

        .header-btn.panel-open {
            background: var(--accent-panel);
            border-color: var(--accent-panel);
            color: var(--white);
        }

        .header-btn.panel-open .material-symbols-outlined {
            color: var(--white);
        }

        .header-btn .material-symbols-outlined {
            font-size: var(--icon-md);
        }
        
        #login-btn {
            background: var(--white);
            border: 1px solid var(--grey-300);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #login-btn:hover {
            background: var(--grey-100);
        }
        
        #login-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-600);
        }
        
        /* ===== MAIN CONTENT ===== */
        #main {
            flex: 1;
            position: relative;
            display: flex;
            overflow: hidden;
        }

        .main-content {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* ===== MAP VIEW ===== */
        #map-view {
            flex: 1;
            position: relative;
            display: none;
        }
        
        #map-view.active {
            display: flex;
        }
        
        #map {
            flex: 1;
            height: 100%;
        }
        
        /* ===== LIST VIEW ===== */
        #list-view {
            flex: 1;
            display: none;
            flex-direction: column;
            background: var(--grey-50);
            overflow-y: auto;
            padding: var(--space-6);
        }

        #list-view.active {
            display: flex;
        }

        /* ===== SHARED TOOLBAR STYLES ===== */
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-3) var(--space-5);
            border-bottom: 1px solid var(--grey-100);
            background: var(--grey-50);
        }

        .toolbar-search {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-3);
            min-width: 250px;
        }

        .toolbar-search .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-500);
        }

        .toolbar-search input {
            border: none;
            outline: none;
            font-size: var(--text-sm);
            width: 100%;
            background: transparent;
        }

        .toolbar-search input::placeholder {
            color: var(--grey-500);
        }

        .toolbar-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        /* List View Toolbar - extends .toolbar */
        .list-toolbar-search {
            min-width: 280px;
        }

        /* Dropdown Button Styles */
        .dropdown-container {
            position: relative;
        }

        .dropdown-btn {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            color: var(--grey-700);
            cursor: pointer;
            transition: background var(--transition-normal), border-color var(--transition-normal);
        }

        .dropdown-btn:hover {
            background: var(--grey-50);
            border-color: var(--grey-500);
        }

        .dropdown-btn .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: var(--space-1);
            background: var(--white);
            border: 1px solid var(--grey-200);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            z-index: 1000;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-menu-header {
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
            color: var(--grey-500);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--grey-100);
        }

        .dropdown-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-sm);
            color: var(--grey-700);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .dropdown-menu-item:hover {
            background: var(--grey-50);
        }

        .dropdown-menu-item .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-500);
        }

        .dropdown-menu-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .dropdown-menu-divider {
            height: 1px;
            background: var(--grey-100);
            margin: var(--space-1) 0;
        }

        .dropdown-menu-toggle-row {
            display: flex;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
        }

        .dropdown-toggle-btn {
            flex: 1;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--grey-700);
            background: var(--grey-100);
            border: 1px solid var(--grey-200);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }

        .dropdown-toggle-btn:hover {
            background: var(--grey-200);
            border-color: var(--grey-300);
        }

        /* List Table Container */
        .list-table-container {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-width: 1500px;
            margin: 0 auto;
            width: 100%;
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
        }

        .list-table-wrapper {
            overflow-x: auto;
            padding: var(--space-5);
        }

        .list-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }

        .list-table th {
            position: sticky;
            top: 0;
            background: var(--white);
            padding: var(--space-3) var(--space-4);
            text-align: left;
            font-weight: 500;
            color: var(--grey-600);
            border-bottom: 1px solid var(--grey-300);
            white-space: nowrap;
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .list-table th:hover {
            background: var(--grey-50);
        }

        .list-table th .material-symbols-outlined {
            font-size: var(--icon-sm);
            color: var(--grey-500);
            vertical-align: middle;
            margin-left: var(--space-1);
        }

        .list-table td {
            padding: var(--space-4) var(--space-4);
            border-bottom: 1px solid var(--grey-100);
            color: var(--grey-900);
            white-space: nowrap;
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .list-table tbody tr {
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .list-table tbody tr:hover {
            background: var(--grey-50);
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: 500;
        }

        .status-badge.status-active {
            background: var(--status-active-bg);
            color: var(--status-active-text);
        }

        .status-badge.status-renovation {
            background: var(--status-renovation-bg);
            color: var(--status-renovation-text);
        }

        .status-badge.status-planning {
            background: var(--status-planning-bg);
            color: var(--status-planning-text);
        }

        .status-badge.status-inactive {
            background: var(--status-inactive-bg);
            color: var(--status-inactive-text);
        }

        .status-badge.status-terminated {
            background: var(--status-warning-bg);
            color: var(--status-warning-text);
        }

        .status-badge.status-expired {
            background: var(--status-inactive-bg);
            color: var(--status-inactive-text);
        }

        /* ===== PAGINATION ===== */
        .pagination-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-3) var(--space-5);
            border-top: 1px solid var(--grey-100);
            background: var(--grey-50);
            font-size: var(--text-sm);
            color: var(--grey-600);
        }

        .pagination-rows {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .pagination-rows select {
            padding: var(--space-1) var(--space-2);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            font-size: var(--text-sm);
            color: var(--grey-700);
            cursor: pointer;
        }

        .pagination-rows select:hover {
            border-color: var(--grey-500);
        }

        .pagination-info {
            font-weight: var(--font-medium);
        }

        .pagination-nav {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .pagination-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            color: var(--grey-700);
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }

        .pagination-btn:hover:not(:disabled) {
            background: var(--grey-100);
            border-color: var(--grey-500);
        }

        .pagination-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .pagination-btn .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        /* ===== GALLERY VIEW ===== */
        #gallery-view {
            flex: 1;
            display: none;
            background: var(--grey-50);
            overflow-y: auto;
            padding: var(--space-6);
        }
        
        #gallery-view.active {
            display: block;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: var(--space-6);
            max-width: 1500px;
            margin: 0 auto;
        }
        
        .gallery-card {
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition-normal), transform var(--transition-normal);
            cursor: pointer;
        }
        
        .gallery-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }
        
        .gallery-image {
            height: 180px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .gallery-image .material-symbols-outlined {
            font-size: var(--icon-hero);
            color: rgba(255,255,255,0.3);
        }
        
        .gallery-image-label {
            position: absolute;
            top: var(--space-3);
            left: var(--space-3);
            background: rgba(0,0,0,0.6);
            color: white;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
        }
        
        .gallery-content {
            padding: var(--space-4);
        }
        
        .gallery-title {
            font-size: var(--text-base);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            margin-bottom: var(--space-1);
            line-height: var(--leading-snug);
        }
        
        .gallery-subtitle {
            font-size: var(--text-sm);
            color: var(--grey-600);
            margin-bottom: var(--space-3);
        }
        
        .gallery-meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        
        .gallery-tag {
            background: var(--grey-100);
            color: var(--grey-600);
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
        }
        
        /* ===== DETAIL VIEW ===== */
        #detail-view {
            flex: 1;
            display: none;
            flex-direction: column;
            background: var(--grey-50);
            overflow: hidden;
        }

        #detail-view.active {
            display: flex;
        }

        /* ===== DETAIL VIEW PAGE SCROLL MODE ===== */
        /* When detail view is active, enable page scrolling instead of internal scrollbar */
        body.detail-active {
            height: auto;
            overflow: auto;
            background: var(--grey-50); /* Grey background fills viewport */
        }

        body.detail-active #main {
            flex: none;
            /* No min-height - body background fills viewport visually */
        }

        body.detail-active .main-content {
            align-self: flex-start;
        }

        body.detail-active #detail-view {
            overflow: visible;
            align-self: flex-start;
            padding-bottom: 30px; /* Space for fixed footer */
            /* No min-height - content determines height, grey background from body fills rest */
        }

        /* Sticky footer in detail view */
        body.detail-active #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 50;
        }

        /* Fix smart-drawer height in detail view - fully collapse when closed */
        body.detail-active #smart-drawer:not(.open) {
            height: 0;
            min-height: 0;
            width: 0;
            min-width: 0;
            padding: 0;
            border: none;
            position: absolute; /* remove from flow when closed */
        }

        /* When open, use fixed positioning below full header */
        body.detail-active #smart-drawer.open {
            position: fixed;
            top: var(--header-total-height);
            right: 0;
            height: calc(100vh - var(--header-total-height) - var(--footer-height));
            z-index: 100;
        }

        .detail-header {
            background: var(--white);
            border-bottom: 1px solid var(--grey-300);
            padding: var(--space-4) var(--space-5); /* 16px 20px - matches panel headers */
        }
        
        .detail-header-inner {
            max-width: 1500px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            color: var(--grey-600);
        }
        
        .breadcrumb .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-500);
        }
        
        .breadcrumb a {
            color: var(--grey-600);
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            color: var(--grey-900);
            text-decoration: underline;
        }
        
        .breadcrumb span.current {
            color: var(--grey-900);
            font-weight: 500;
        }
        
        .detail-header-actions {
            display: flex;
            gap: var(--space-4);
        }
        
        .btn-edit {
            background: var(--grey-900);
            color: var(--white);
            border: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-sm);
            line-height: 1;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .btn-edit:hover {
            background: var(--grey-800);
        }
        
        .btn-edit .material-symbols-outlined {
            font-size: var(--icon-sm);
        }
        
        .btn-back {
            background: var(--white);
            color: var(--grey-900);
            border: 1px solid var(--grey-300);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-sm);
            line-height: 1;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .btn-back:hover {
            background: var(--grey-100);
        }
        
        .btn-back .material-symbols-outlined {
            font-size: var(--icon-sm);
        }
        
        .detail-tabs {
            background: var(--white);
            border-bottom: 1px solid var(--grey-300);
            padding: 0 24px;
        }
        
        .detail-tabs-inner {
            max-width: 1500px;
            margin: 0 auto;
            display: flex;
            gap: 0;
        }
        
        .detail-tab {
            padding: var(--space-4) var(--space-5);
            font-size: var(--text-sm);
            color: var(--grey-600);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all var(--transition-normal);
        }
        
        .detail-tab:hover {
            color: var(--grey-900);
            background: var(--grey-50);
        }
        
        .detail-tab.active {
            color: var(--primary-red);
            border-bottom-color: var(--primary-red);
        }
        
        .detail-tab.disabled {
            color: var(--grey-500);
            cursor: not-allowed;
        }
        
        .detail-tab.disabled:hover {
            color: var(--grey-500);
            background: transparent;
        }
        
        .detail-content {
            overflow: visible;
            padding: var(--space-6);
            transition: padding-right var(--transition-slow);
        }

        /* Add padding when drawer is open in detail view */
        body.detail-active:has(#smart-drawer.open) .detail-content {
            padding-right: calc(var(--drawer-width) + var(--space-6));
        }

        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-6);
            max-width: 1500px;
            margin: 0 auto;
        }

        .detail-left,
        .detail-right {
            display: flex;
            flex-direction: column;
            gap: var(--space-6);
        }
        
        .detail-section {
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        
        .detail-section-title {
            background: var(--grey-100);
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            border-bottom: 1px solid var(--grey-300);
            line-height: var(--leading-snug);
        }

        .detail-section-content {
            padding: var(--space-5);
        }
        
        /* Image Carousel */
        .carousel {
            position: relative;
            height: 340px;
            background: var(--grey-100);
        }
        
        .carousel-image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }
        
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.9);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-md);
            transition: background var(--transition-normal);
        }
        
        .carousel-btn:hover {
            background: var(--white);
        }
        
        .carousel-btn.prev {
            left: var(--space-4);
        }

        .carousel-btn.next {
            right: var(--space-4);
        }

        .carousel-btn .material-symbols-outlined {
            font-size: var(--icon-xl);
            color: var(--grey-900);
        }

        .carousel-dots {
            position: absolute;
            bottom: var(--space-4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: var(--space-2);
        }
        
        .carousel-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background var(--transition-normal);
        }
        
        .carousel-dot.active {
            background: var(--white);
        }
        
        /* Data Grid */
        .data-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-8);
        }

        .data-item {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        .data-item.full-width {
            grid-column: 1 / -1;
        }

        .data-label {
            font-size: var(--text-xs);
            color: var(--grey-600);
            line-height: var(--leading-normal);
        }

        .data-value {
            font-size: var(--text-sm);
            color: var(--grey-900);
            font-weight: var(--font-medium);
            line-height: var(--leading-normal);
        }
        
        /* Mini Map */
        .mini-map-container {
            height: 340px;
            margin-bottom: var(--space-4);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        
        .mini-map {
            width: 100%;
            height: 100%;
        }
        
        .address-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }
        
        .address-table th {
            background: var(--grey-100);
            padding: var(--space-2) var(--space-3);
            text-align: left;
            font-weight: 500;
            color: var(--grey-600);
            border-bottom: 1px solid var(--grey-300);
        }
        
        .address-table td {
            padding: var(--space-3) var(--space-3);
            border-bottom: 1px solid var(--grey-100);
        }
        
        .address-table tr:last-child td {
            border-bottom: none;
        }
        
        .address-marker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--primary-red);
            border-radius: 50%;
            margin-right: var(--space-2);
        }
        
        .address-marker .material-symbols-outlined {
            font-size: var(--text-sm);
            color: var(--white);
        }
        
        /* ===== ACCORDION PANEL ===== */
        #accordion-panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 380px;
            background: var(--accent-panel);
            color: white;
            z-index: 500;
            display: flex;
            flex-direction: column;
            max-height: calc(100% - 60px);
            margin: var(--space-3);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-md);
        }
        
        #accordion-panel.collapsed {
            display: none;
        }
        
        .accordion-item {
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        .accordion-item:last-of-type {
            border-bottom: none;
        }
        
        .accordion-header {
            padding: var(--space-3);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            transition: background var(--transition-normal);
        }

        .accordion-header:hover {
            background: rgba(255,255,255,0.1);
        }

        .accordion-header.active {
            background: var(--grey-100);
            color: var(--grey-900);
        }

        .accordion-arrow {
            transition: transform var(--transition-slow);
            display: flex;
            align-items: center;
        }

        .accordion-arrow .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        .accordion-header.active .accordion-arrow {
            transform: rotate(90deg);
        }

        .accordion-header.active .accordion-arrow .material-symbols-outlined {
            color: var(--grey-900);
        }
        
        .accordion-content {
            display: none;
            padding: var(--space-3) var(--space-4);
            background: var(--white);
            font-size: var(--text-sm);
            color: var(--grey-900);
        }
        
        .accordion-content.show {
            display: block;
        }

        /* ===== SHARE PANEL ===== */
        .share-panel {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .share-icons {
            display: flex;
            gap: var(--space-3);
            align-items: center;
        }

        .share-icon-btn {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            border: none;
            background: var(--grey-900);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--transition-normal), transform var(--transition-fast);
        }

        .share-icon-btn:hover {
            background: var(--grey-600);
            transform: scale(1.05);
        }

        .share-icon-btn svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        .share-link-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .share-link-label {
            font-size: var(--text-xs);
            color: var(--grey-600);
        }

        .share-link-row {
            display: flex;
            gap: var(--space-2);
        }

        .share-link-input {
            flex: 1;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            color: var(--grey-900);
            background: var(--grey-50);
        }

        .share-link-input:focus {
            outline: none;
            border-color: var(--accent-panel);
        }

        .share-copy-btn {
            padding: var(--space-2) var(--space-4);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            color: var(--grey-900);
            font-size: var(--text-sm);
            cursor: pointer;
            white-space: nowrap;
            transition: background var(--transition-normal), border-color var(--transition-normal);
        }

        .share-copy-btn:hover {
            background: var(--grey-100);
            border-color: var(--grey-500);
        }

        .share-copy-btn.copied {
            background: var(--status-active);
            color: white;
            border-color: var(--status-active);
        }

        /* ===== GEOKATALOG TREE ===== */
        .geokatalog-header .geokatalog-theme-switch {
            font-size: var(--text-sm);
            color: rgba(255,255,255,0.7);
            font-weight: normal;
            margin-left: auto;
        }

        .geokatalog-header.active .geokatalog-theme-switch {
            color: var(--grey-600);
        }

        .geokatalog-content {
            padding: 0 !important;
        }

        /* Full height when Geokatalog is expanded */
        #geokatalog-accordion.expanded {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #geokatalog-accordion.expanded .accordion-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #geokatalog-accordion.expanded .geokatalog-tree {
            flex: 1;
            max-height: none;
        }

        .geokatalog-tree {
            max-height: 450px;
            overflow-y: auto;
            padding: 0;
        }

        .geokatalog-tree::-webkit-scrollbar {
            width: 6px;
        }

        .geokatalog-tree::-webkit-scrollbar-track {
            background: var(--grey-100);
        }

        .geokatalog-tree::-webkit-scrollbar-thumb {
            background: var(--grey-300);
            border-radius: 3px;
        }

        .catalog-item {
            user-select: none;
        }

        .catalog-node {
            display: flex;
            align-items: center;
            padding: var(--space-3) var(--space-3);
            cursor: pointer;
            font-size: var(--text-sm);
            color: var(--grey-900);
            border-bottom: 1px solid var(--grey-300);
        }

        .catalog-node:hover {
            background: var(--grey-100);
        }

        .catalog-node .node-arrow {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--space-2);
            color: var(--grey-500);
        }

        .catalog-node .node-arrow .material-symbols-outlined {
            font-size: var(--icon-sm);
            transition: transform var(--transition-fast);
        }

        .catalog-node.expanded .node-arrow .material-symbols-outlined {
            transform: rotate(90deg);
        }

        .catalog-node.leaf .node-arrow {
            display: none;
        }

        /* Leaf node with checkbox */
        .catalog-node .node-checkbox {
            width: 16px;
            height: 16px;
            border: 2px solid var(--grey-500);
            border-radius: 3px;
            margin-right: var(--space-3);
            flex-shrink: 0;
            cursor: pointer;
        }

        .catalog-node .node-checkbox:hover {
            border-color: var(--grey-600);
        }

        .catalog-node .node-label {
            flex: 1;
        }

        .catalog-node .node-info {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: var(--space-2);
            color: var(--grey-600);
            cursor: pointer;
            flex-shrink: 0;
        }

        .catalog-node .node-info .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        .catalog-node .node-info:hover {
            color: var(--grey-900);
        }

        .catalog-children {
            display: none;
            margin-left: var(--space-5);
        }

        .catalog-item.expanded > .catalog-children {
            display: block;
        }

        .geokatalog-loading {
            text-align: center;
            padding: var(--space-5);
            color: var(--grey-500);
        }

        .geokatalog-error {
            text-align: center;
            padding: var(--space-5);
            color: var(--primary-red);
            font-size: var(--text-xs);
        }

        #menu-toggle {
            position: absolute;
            left: var(--space-3);
            background: var(--grey-900);
            color: white;
            padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
            border-radius: var(--radius-sm);
            cursor: pointer;
            z-index: 501;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            box-shadow: var(--shadow-md);
            width: auto;
            margin-left: calc((380px - 180px) / 2);
        }
        
        #menu-toggle:hover {
            background: var(--grey-800);
        }
        
        #menu-toggle .material-symbols-outlined {
            font-size: var(--icon-md);
        }
        
        /* ===== INFO PANEL ===== */
        #info-panel {
            position: absolute;
            top: var(--space-3);
            right: 60px;
            width: 320px;
            background: var(--white);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-md);
            z-index: 500;
            display: none;
        }
        
        #info-panel.show {
            display: block;
        }
        
        #info-preview-image {
            height: 140px;
            background-size: cover;
            background-position: center;
            background-color: var(--grey-100);
        }
        
        #info-header {
            background: var(--grey-100);
            padding: var(--space-3) var(--space-4);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--grey-300);
        }
        
        #info-header-title {
            font-weight: 600;
            font-size: var(--text-sm);
        }
        
        #info-header-actions {
            display: flex;
            gap: var(--space-2);
        }
        
        #info-header-actions button {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--grey-600);
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #info-header-actions button:hover {
            color: var(--grey-900);
        }
        
        #info-header-actions .material-symbols-outlined {
            font-size: var(--icon-lg);
        }
        
        #info-body {
            padding: var(--space-4);
        }

        .info-row {
            display: flex;
            padding: var(--space-2) 0;
            font-size: var(--text-sm);
        }
        
        .info-label {
            color: var(--grey-600);
            width: 120px;
            flex-shrink: 0;
        }
        
        .info-value {
            color: var(--grey-900);
        }
        
        .info-footer {
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--grey-100);
        }
        
        .info-detail-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            background: var(--grey-900);
            color: var(--white);
            text-decoration: none;
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            font-weight: 500;
            transition: background var(--transition-normal);
            cursor: pointer;
            border: none;
            width: 100%;
        }
        
        .info-detail-link:hover {
            background: var(--grey-800);
        }
        
        .info-detail-link .material-symbols-outlined {
            font-size: var(--icon-md);
        }
        
        /* ===== FOOTER ===== */
        #footer {
            background: var(--grey-100);
            border-top: 1px solid var(--grey-300);
            padding: 4px 16px;
            font-size: var(--text-xs);
            color: var(--grey-600);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        #coordinates {
            font-family: monospace;
        }
        
        #footer-links a {
            color: var(--interactive-blue);
            text-decoration: none;
            margin-left: var(--space-4);
        }
        
        #footer-links a:hover {
            text-decoration: underline;
        }
        
        /* Mapbox Controls */
        .mapboxgl-ctrl-top-right {
            top: var(--space-3);
            right: var(--space-3);
        }

        /* Home Button Control - matches Mapbox default control size for visual consistency */
        .map-home-btn {
            background: var(--white);
            border: none;
            border-radius: var(--radius-sm);
            width: 29px;
            height: 29px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
        }

        .map-home-btn:hover {
            background: var(--grey-100);
        }

        .map-home-btn .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        /* ===== STYLE SWITCHER (in #map-view, bottom-right) ===== */
        .style-switcher {
            position: absolute;
            bottom: 40px;
            right: 20px;
            z-index: 500;
            display: none;
            transition: right var(--transition-slow);
        }

        .style-switcher.visible {
            display: block;
        }

        .style-switcher-btn {
            background: var(--white);
            border: 2px solid var(--grey-300);
            border-radius: var(--radius-sm);
            padding: var(--space-1);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            box-shadow: var(--shadow-md);
            transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
        }

        .style-switcher-btn:hover {
            border-color: var(--grey-500);
            box-shadow: var(--shadow-lg);
        }

        .style-switcher-btn.active {
            border-color: var(--primary-red);
            background: var(--grey-100);
        }

        .style-switcher-btn img {
            width: 80px;
            height: 60px;
            border-radius: 2px;
            object-fit: cover;
        }

        .style-switcher-btn span {
            font-size: var(--text-xs);
            color: var(--grey-600);
            font-weight: var(--font-medium);
        }

        .style-switcher-panel {
            position: absolute;
            bottom: 0;
            right: 100%;
            margin-right: var(--space-3);
            background: var(--white);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-xl);
            padding: var(--space-2);
            display: flex;
            gap: var(--space-2);
            opacity: 0;
            visibility: hidden;
            transform: translateX(10px);
            transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
        }

        .style-switcher-panel.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .style-option {
            background: var(--white);
            border: 2px solid var(--grey-300);
            border-radius: var(--radius-sm);
            padding: var(--space-1);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            transition: border-color var(--transition-normal), transform var(--transition-fast);
        }

        .style-option:hover {
            border-color: var(--grey-500);
            transform: translateY(-2px);
        }

        .style-option.active {
            border-color: var(--primary-red);
            border-width: 3px;
            padding: 3px;
        }

        .style-option img {
            width: 70px;
            height: 50px;
            border-radius: 2px;
            object-fit: cover;
        }

        .style-option span {
            font-size: var(--text-xs);
            color: var(--grey-600);
            font-weight: var(--font-medium);
            white-space: nowrap;
        }

        .style-option.active span {
            color: var(--primary-red);
            font-weight: var(--font-semibold);
        }

        /* ===== AI ASSISTANT PANEL ===== */
        #ai-assistant-panel {
            width: 0;
            min-width: 0;
            height: 100%;
            background: var(--white);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width var(--transition-slow), min-width var(--transition-slow);
            flex-shrink: 0;
        }

        #ai-assistant-panel.show {
            width: var(--drawer-width);
            min-width: var(--drawer-width);
            border-left: 1px solid var(--grey-300);
            box-shadow: -4px 0 16px rgba(0,0,0,0.15);
        }

        .ai-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--grey-200);
            background: var(--grey-50);
        }

        .ai-panel-header-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            line-height: 1;
            color: var(--grey-900);
        }

        .ai-panel-header-title .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        .ai-panel-close {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: background var(--transition-normal);
        }

        .ai-panel-close:hover {
            background: var(--grey-200);
        }

        .ai-panel-close .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-600);
        }

        .ai-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-5);
        }

        .ai-chat-message {
            margin-bottom: var(--space-5);
        }

        .ai-chat-message-label {
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--grey-700);
            margin-bottom: var(--space-2);
        }

        .ai-chat-message-content {
            font-size: var(--text-sm);
            color: var(--grey-800);
            line-height: 1.6;
        }

        .ai-chat-message-content ul {
            margin: var(--space-2) 0;
            padding-left: 20px;
        }

        .ai-chat-message-content li {
            margin-bottom: var(--space-1);
        }

        .ai-panel-input {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-4) var(--space-5);
            border-top: 1px solid var(--grey-200);
            background: var(--grey-50);
        }

        .ai-panel-input-field {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--space-3);
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-full);
            padding: var(--space-3) var(--space-4);
        }

        .ai-panel-input-field .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-400);
        }

        .ai-panel-input-field input {
            flex: 1;
            border: none;
            outline: none;
            font-size: var(--text-sm);
            color: var(--grey-800);
            background: transparent;
        }

        .ai-panel-input-field input::placeholder {
            color: var(--grey-400);
        }

        .ai-panel-send-btn {
            background: var(--grey-200);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background var(--transition-normal);
        }

        .ai-panel-send-btn:hover {
            background: var(--grey-300);
        }

        .ai-panel-send-btn .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        /* ===== TAB CONTENT SWITCHING ===== */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* ===== DETAIL TABLE (shared styles for Bemessungen & Dokumente) ===== */
        .detail-table-container {
            max-width: 1500px;
            margin: 0 auto;
        }

        /* Detail Table Toolbar - extends .toolbar */
        .detail-table-actions {
            gap: var(--space-3);
        }

        .btn-action {
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            color: var(--grey-600);
            border-radius: var(--radius-sm);
            transition: background var(--transition-normal), color var(--transition-normal);
        }

        .btn-action:hover:not(:disabled) {
            background: var(--grey-100);
            color: var(--grey-900);
        }

        .btn-action:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-action .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        /* Detail Table Base */
        .detail-table-wrapper {
            overflow-x: auto;
            padding: var(--space-5);
        }

        .detail-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            font-size: var(--text-sm);
        }

        .detail-table th {
            background: var(--white);
            padding: var(--space-3) var(--space-4);
            text-align: left;
            font-weight: 500;
            color: var(--grey-600);
            border-bottom: 1px solid var(--grey-300);
            white-space: nowrap;
        }

        .detail-table th.sortable {
            cursor: pointer;
            user-select: none;
        }

        .detail-table th.sortable:hover {
            background: var(--grey-50);
        }

        .detail-table th .sort-icon {
            font-size: 16px;
            vertical-align: middle;
            margin-left: var(--space-1);
        }

        .detail-table td {
            padding: var(--space-4) var(--space-4);
            border-bottom: 1px solid var(--grey-100);
            color: var(--grey-900);
        }

        .detail-table tbody tr:hover {
            background: var(--grey-50);
        }

        .detail-table tbody tr.selected {
            background: var(--status-planning-bg);
        }

        .detail-table input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        /* ===== SHARED DETAIL TABLE COLUMN STYLES ===== */

        /* Checkbox column: fixed width, centered */
        .detail-table .col-checkbox {
            width: 48px;
            text-align: center;
        }

        /* ID columns: fixed width for all tables */
        .detail-table .col-id,
        .detail-table [class*="-id"] {
            width: 150px;
            min-width: 120px;
            max-width: 180px;
            word-break: break-all;
            font-size: var(--text-xs);
            color: var(--grey-600);
        }

        /* All other columns use auto width by default */

        /* ===== CATEGORY BADGE ===== */
        .kategorie-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: 500;
            background: rgba(107, 116, 124, 0.1);
            color: var(--accent-panel);
        }

        /* ===== FILTER PANE ===== */
        /* ===== SMART DRAWER ===== */
        #smart-drawer {
            position: relative;
            width: 0;
            min-width: 0;
            height: 100%;
            background: var(--white);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width var(--transition-slow), min-width var(--transition-slow);
            flex-shrink: 0;
        }

        /* Disable transitions during resize for smooth dragging */
        #smart-drawer.resizing {
            transition: none;
        }

        #smart-drawer.open {
            width: var(--drawer-width);
            min-width: var(--drawer-min-width);
            max-width: var(--drawer-max-width);
            border-left: 1px solid var(--grey-300);
        }

        .smart-drawer-resize-handle {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            cursor: ew-resize;
            background: transparent;
            z-index: 10;
            transition: background var(--transition-fast);
        }

        .smart-drawer-resize-handle:hover,
        .smart-drawer-resize-handle.dragging {
            background: var(--interactive-blue);
        }

        #smart-drawer:not(.open) .smart-drawer-resize-handle {
            display: none;
        }

        .smart-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--grey-200);
            background: var(--grey-50);
            flex-shrink: 0;
            gap: var(--space-3);
        }

        .smart-drawer-tabs {
            display: flex;
            background: var(--grey-200);
            border-radius: var(--radius-md);
            padding: 3px;
            gap: 2px;
        }

        .smart-drawer-tab {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--grey-600);
            cursor: pointer;
            transition: all var(--transition-normal);
            white-space: nowrap;
        }

        .smart-drawer-tab:hover {
            color: var(--grey-900);
        }

        .smart-drawer-tab.active {
            background: var(--white);
            color: var(--grey-900);
            box-shadow: var(--shadow-sm);
        }

        .smart-drawer-tab .material-symbols-outlined {
            font-size: var(--icon-sm);
        }

        .smart-drawer-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .smart-drawer-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--grey-600);
            border-radius: var(--radius-sm);
            transition: background var(--transition-normal);
        }

        .smart-drawer-btn:hover {
            background: var(--grey-200);
        }

        .smart-drawer-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
        }

        /* Hide reset button when not on filter tab */
        #smart-drawer[data-active-tab="assistant"] #drawer-reset-btn {
            display: none;
        }

        .smart-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }

        .smart-drawer-content[data-drawer-content="assistant"] {
            display: flex;
            flex-direction: column;
        }

        .smart-drawer-content .ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-4);
        }

        .ai-assistant-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: var(--white);
        }

        /* Legacy filter-pane styles for backward compatibility */
        #filter-pane {
            width: 0;
            min-width: 0;
            height: 100%;
            background: var(--white);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width var(--transition-slow), min-width var(--transition-slow);
            flex-shrink: 0;
        }

        #filter-pane.open {
            width: 340px;
            min-width: 340px;
            border-left: 1px solid var(--grey-300);
        }

        #filter-pane-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--grey-200);
            background: var(--grey-50);
            flex-shrink: 0;
        }

        .filter-pane-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            line-height: 1;
            color: var(--grey-900);
        }

        .filter-pane-title .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        #filter-pane-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .filter-pane-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--grey-600);
            border-radius: var(--radius-sm);
            transition: background var(--transition-normal);
        }

        .filter-pane-btn:hover {
            background: var(--grey-200);
        }

        .filter-pane-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
        }

        #filter-pane-body {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }

        .filter-section {
            border-bottom: 1px solid var(--grey-200);
        }

        .filter-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
            cursor: pointer;
            background: var(--white);
            transition: background var(--transition-normal);
        }

        .filter-section-header:hover {
            background: var(--grey-50);
        }

        .filter-section-title {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--grey-900);
        }

        .filter-section-arrow {
            display: flex;
            align-items: center;
            transition: transform var(--transition-normal);
        }

        .filter-section-arrow .material-symbols-outlined {
            font-size: var(--icon-lg);
            color: var(--grey-600);
        }

        .filter-section.open .filter-section-arrow {
            transform: rotate(180deg);
        }

        .filter-section-content {
            display: none;
            padding: 0 20px 16px 20px;
        }

        .filter-section.open .filter-section-content {
            display: block;
        }

        .filter-option {
            display: flex;
            align-items: center;
            padding: 8px 0;
        }

        .filter-option input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: var(--space-3);
            cursor: pointer;
            accent-color: var(--primary-red);
        }

        .filter-option label {
            font-size: var(--text-sm);
            color: var(--grey-900);
            cursor: pointer;
            flex: 1;
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            background: var(--grey-100);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-lg);
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-xs);
            color: var(--grey-900);
            margin: var(--space-1);
        }

        .filter-chip-remove {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            color: var(--grey-600);
        }

        .filter-chip-remove:hover {
            color: var(--primary-red);
        }

        .filter-chip-remove .material-symbols-outlined {
            font-size: var(--icon-sm);
        }

        /* Filter button - active filters state */
        #filter-btn.has-active-filters {
            background: rgba(204, 0, 0, 0.1); /* --primary-red at 10% opacity */
        }

        #filter-btn.has-active-filters.panel-open {
            background: var(--accent-panel);
        }

        /* Filter count badge */
        .filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            background: var(--primary-red);
            color: var(--white);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
            margin-left: var(--space-2);
        }

        /* ===== FOCUS VISIBLE STYLES (Accessibility) ===== */
        *:focus {
            outline: none;
        }

        *:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: 2px;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: 2px;
        }

        .view-toggle-btn:focus-visible,
        .dropdown-btn:focus-visible,
        .header-btn:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: 2px;
            z-index: 1;
        }

        /* Skip link for keyboard navigation */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--grey-900);
            color: var(--white);
            padding: var(--space-2) var(--space-4);
            z-index: 10000;
            text-decoration: none;
            font-size: var(--text-sm);
        }

        .skip-link:focus {
            top: 0;
        }

        /* ===== UNIFIED BUTTON STYLES ===== */
        /* Primary Button */
        .btn-primary {
            background: var(--grey-900);
            color: var(--white);
            border: none;
            padding: var(--space-2) var(--space-5);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            line-height: var(--leading-normal);
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            transition: background var(--transition-normal);
            min-height: var(--touch-target-min);
        }

        .btn-primary:hover {
            background: var(--grey-700);
        }

        .btn-primary:active {
            background: var(--grey-900);
        }

        /* Secondary Button */
        .btn-secondary {
            background: var(--white);
            color: var(--grey-900);
            border: 1px solid var(--grey-300);
            padding: var(--space-2) var(--space-5);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            line-height: var(--leading-normal);
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            transition: background var(--transition-normal), border-color var(--transition-normal);
            min-height: var(--touch-target-min);
        }

        .btn-secondary:hover {
            background: var(--grey-100);
            border-color: var(--grey-500);
        }

        /* Tertiary Button (text-only) */
        .btn-tertiary {
            background: transparent;
            color: var(--grey-700);
            border: none;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-sm);
            line-height: var(--leading-normal);
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            transition: background var(--transition-normal), color var(--transition-normal);
            min-height: var(--touch-target-min);
        }

        .btn-tertiary:hover {
            background: var(--grey-100);
            color: var(--grey-900);
        }

        /* ===== UTILITY CLASSES ===== */

        /* Panel Header - Reusable header for side panels */
        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--grey-200);
            background: var(--grey-50);
            flex-shrink: 0;
        }

        .panel-header-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            line-height: 1;
            color: var(--grey-900);
        }

        .panel-header-title .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        .panel-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        /* Icon Button - Circular icon-only buttons */
        .icon-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            color: var(--grey-600);
            transition: background var(--transition-normal), color var(--transition-normal);
        }

        .icon-btn:hover {
            background: var(--grey-200);
            color: var(--grey-900);
        }

        .icon-btn .material-symbols-outlined {
            font-size: var(--icon-lg);
        }

        /* Icon Button Variants */
        .icon-btn--circle {
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

        .icon-btn--bordered {
            border: 1px solid var(--grey-300);
            background: var(--white);
        }

        .icon-btn--bordered:hover {
            background: var(--grey-100);
        }

        /* ===== EMPTY & LOADING STATES ===== */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-16) var(--space-5);
            text-align: center;
            color: var(--grey-600);
        }

        .empty-state .material-symbols-outlined {
            font-size: var(--icon-hero);
            color: var(--grey-300);
            margin-bottom: var(--space-4);
        }

        .empty-state-title {
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            margin-bottom: var(--space-2);
            line-height: var(--leading-snug);
        }

        .empty-state-description {
            font-size: var(--text-sm);
            color: var(--grey-600);
            max-width: 400px;
            line-height: var(--leading-normal);
        }

        .empty-state-action {
            margin-top: var(--space-5);
        }

        /* Table empty state (inline in table) */
        .empty-row td {
            padding: 0 !important;
            border: none !important;
        }

        .table-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-10) var(--space-5);
            text-align: center;
            color: var(--grey-500);
        }

        .table-empty-state .material-symbols-outlined {
            font-size: var(--icon-display);
            color: var(--grey-300);
            margin-bottom: var(--space-3);
        }

        .table-empty-message {
            font-size: var(--text-sm);
            color: var(--grey-600);
        }

        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-16) var(--space-5);
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--grey-200);
            border-top-color: var(--primary-red);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-text {
            margin-top: var(--space-4);
            font-size: var(--text-sm);
            color: var(--grey-600);
        }


        /* ===== RESPONSIVE DESIGN ===== */

        /* Tablet breakpoint (768px - 1024px) */
        @media screen and (max-width: 1024px) {
            /* Override layout height variables for tablet */
            :root {
                --header-main-height: 70px;
                --header-detail-height: 100px;
                --footer-height: 30px;
            }

            .header-main {
                padding: 0 16px;
                height: var(--header-main-height);
            }

            #logo-text-img {
                height: 40px;
            }

            #search-area {
                padding: 0 16px;
                gap: var(--space-3);
            }

            #search-wrapper {
                max-width: 400px;
            }

            #header-right {
                min-width: auto;
                gap: var(--space-4);
            }

            .header-detail .detail-header {
                padding: var(--space-3) var(--space-4);
            }

            #smart-drawer.open {
                width: 340px;
                min-width: 340px;
            }

            /* Match header elements padding to tablet drawer width */
            body:has(#smart-drawer.open) .header-detail .detail-header,
            body:has(#smart-drawer.open) .header-detail .detail-tabs {
                padding-right: calc(340px + var(--space-6));
            }

            #accordion-panel {
                width: 320px;
            }

            #menu-toggle {
                margin-left: calc((320px - 160px) / 2);
            }

            #info-panel {
                width: 300px;
                right: 10px;
            }

            .detail-grid {
                gap: var(--space-4);
            }

            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: var(--space-4);
                padding: var(--space-4);
            }

            #gallery-view {
                padding: var(--space-4);
            }

            /* Smart-drawer fixed positioning for tablet - uses overridden CSS variables */
            body.detail-active #smart-drawer.open {
                top: var(--header-total-height);
                height: calc(100vh - var(--header-total-height) - var(--footer-height));
            }

            /* Detail content padding for tablet drawer width */
            body.detail-active:has(#smart-drawer.open) .detail-content {
                padding-right: calc(340px + var(--space-6));
            }
        }

        /* Mobile breakpoint (< 768px) */
        @media screen and (max-width: 767px) {
            .header-main {
                flex-wrap: wrap;
                height: auto;
                padding: var(--space-3) var(--space-4);
                gap: var(--space-3);
            }

            #logo-area {
                order: 1;
            }

            #logo-text-img {
                height: 32px;
            }

            #header-right {
                order: 2;
                margin-left: auto;
            }

            #object-count {
                display: none;
            }

            .header-btn span:not(.material-symbols-outlined) {
                display: none;
            }

            .header-btn {
                padding: var(--space-2);
                border-radius: 50%;
                width: 40px;
                height: 40px;
                justify-content: center;
            }

            #search-area {
                order: 3;
                width: 100%;
                padding: 0;
                flex-wrap: wrap;
            }

            #search-wrapper {
                max-width: 100%;
                flex: 1;
                min-width: 200px;
            }

            .view-toggle {
                flex-shrink: 0;
            }

            .view-toggle-btn {
                padding: var(--space-2) var(--space-3);
            }

            .view-toggle-btn .view-label {
                display: none !important;
            }

            /* Header detail on mobile */
            .header-detail .detail-header {
                padding: var(--space-3) var(--space-4);
            }

            .header-detail .detail-tabs {
                overflow-x: auto;
            }

            /* No padding adjustment on mobile - drawer is fullscreen overlay */
            body:has(#smart-drawer.open) .header-detail .detail-header,
            body:has(#smart-drawer.open) .header-detail .detail-tabs {
                padding-right: var(--space-4);
            }

            /* Smart drawer - full screen on mobile */
            #smart-drawer {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100% !important;
                min-width: 100% !important;
                z-index: 2000;
                border-left: none;
            }

            #smart-drawer:not(.open) {
                display: none;
            }

            .smart-drawer-tab span:not(.material-symbols-outlined) {
                display: none;
            }

            /* Accordion panel - full width bottom sheet on mobile */
            #accordion-panel {
                position: fixed;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-height: 60vh;
                margin: 0;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            }

            #menu-toggle {
                position: fixed;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                margin-left: 0;
                width: auto;
                padding: var(--space-3) var(--space-5);
            }

            #accordion-panel.collapsed + #menu-toggle {
                bottom: 10px;
            }

            /* Info panel - full width bottom sheet on mobile */
            #info-panel {
                position: fixed;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-height: 70vh;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                overflow-y: auto;
            }

            /* Style switcher position on mobile */
            .style-switcher {
                bottom: 80px;
                right: 10px;
            }

            .style-switcher-panel {
                right: 0;
                bottom: 100%;
                margin-bottom: var(--space-3);
                margin-right: 0;
                flex-direction: column;
            }

            /* List view adjustments */
            .toolbar {
                flex-direction: column;
                gap: var(--space-3);
                padding: var(--space-3) var(--space-4);
            }

            .toolbar-search {
                width: 100%;
                min-width: auto;
            }

            .toolbar-actions {
                width: 100%;
                justify-content: flex-end;
            }

            .list-table {
                font-size: var(--text-xs);
            }

            .list-table th,
            .list-table td {
                padding: var(--space-3) var(--space-2);
            }

            /* Hide some columns on mobile */
            .list-table .col-adresse,
            .list-table .col-portfolio {
                display: none;
            }

            /* Gallery view adjustments */
            #gallery-view {
                padding: var(--space-3);
            }

            .gallery-grid {
                grid-template-columns: 1fr;
                gap: var(--space-3);
            }

            .gallery-card {
                display: flex;
                flex-direction: row;
            }

            .gallery-image {
                width: 120px;
                height: auto;
                min-height: 120px;
                flex-shrink: 0;
            }

            .gallery-content {
                flex: 1;
                padding: var(--space-3);
            }

            .gallery-title {
                font-size: var(--text-sm);
            }

            .gallery-subtitle {
                font-size: var(--text-xs);
                margin-bottom: var(--space-2);
            }

            .gallery-meta {
                margin-bottom: var(--space-2);
            }

            .gallery-tag {
                font-size: var(--text-xs);
                padding: 2px 6px;
            }

            /* Detail view adjustments */
            .detail-header {
                padding: var(--space-3) var(--space-4);
            }

            .detail-header-inner {
                flex-direction: column;
                gap: var(--space-3);
                align-items: flex-start;
            }

            .breadcrumb {
                font-size: var(--text-xs);
                flex-wrap: wrap;
            }

            .detail-header-actions {
                width: 100%;
                justify-content: space-between;
            }

            .detail-tabs {
                padding: 0 16px;
                overflow-x: auto;
            }

            .detail-tabs-inner {
                min-width: max-content;
            }

            .detail-tab {
                padding: var(--space-3) var(--space-4);
                font-size: var(--text-sm);
                white-space: nowrap;
            }

            .detail-content {
                padding: var(--space-4);
            }

            .detail-grid {
                grid-template-columns: 1fr;
            }

            .data-grid {
                grid-template-columns: 1fr;
                gap: var(--space-5);
            }

            .carousel {
                height: 200px;
            }

            .mini-map-container {
                height: 200px;
            }

            .address-table {
                font-size: var(--text-xs);
            }

            .address-table th,
            .address-table td {
                padding: var(--space-2) var(--space-1);
            }

            /* Filter pane - full screen overlay on mobile */
            #filter-pane {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100% !important;
                min-width: 100% !important;
                z-index: 2000;
                border-left: none;
            }

            #filter-pane:not(.open) {
                display: none;
            }

            /* Footer adjustments */
            #footer {
                padding: var(--space-2) var(--space-3);
                font-size: var(--text-xs);
                flex-wrap: wrap;
                gap: var(--space-2);
            }

            #coordinates {
                font-size: var(--text-xs);
            }

            #footer-links a {
                margin-left: var(--space-3);
            }
        }

        /* Small mobile (< 480px) */
        @media screen and (max-width: 479px) {
            #logo-text-img {
                display: none;
            }

            .view-toggle-btn {
                padding: var(--space-2);
            }

            #info-panel {
                max-height: 80vh;
            }

            #info-preview-image {
                height: 100px;
            }

            .gallery-image {
                width: 100px;
                min-height: 100px;
            }

            .detail-tab {
                padding: var(--space-2) var(--space-3);
                font-size: var(--text-xs);
            }
        }

        /* ===== SKELETON LOADING ===== */
        .skeleton {
            background: linear-gradient(90deg, var(--grey-100) 25%, var(--grey-200) 50%, var(--grey-100) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: var(--radius-sm);
        }

        @keyframes skeleton-shimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        .skeleton-text {
            height: 14px;
            margin-bottom: var(--space-2);
        }

        .skeleton-text.short {
            width: 60%;
        }

        .skeleton-text.medium {
            width: 80%;
        }

        .skeleton-text.long {
            width: 100%;
        }

        .skeleton-card {
            height: 200px;
            border-radius: var(--radius-md);
        }

        .skeleton-row {
            display: flex;
            gap: var(--space-4);
            padding: var(--space-4);
            border-bottom: 1px solid var(--grey-100);
        }

        .skeleton-cell {
            height: 16px;
            flex: 1;
        }

        .skeleton-cell.small {
            flex: 0 0 50px;
        }

        .skeleton-cell.medium {
            flex: 0 0 100px;
        }

        /* Table loading skeleton */
        .table-skeleton {
            padding: 0 var(--space-5);
        }

        .table-skeleton-header {
            display: flex;
            gap: var(--space-4);
            padding: var(--space-3) var(--space-4);
            background: var(--grey-50);
            border-bottom: 1px solid var(--grey-200);
        }

        .table-skeleton-header .skeleton-cell {
            height: 12px;
        }

        /* Gallery loading skeleton */
        .gallery-skeleton {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: var(--space-5);
            padding: var(--space-5);
        }

        .gallery-skeleton-card {
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--grey-200);
        }

        .gallery-skeleton-image {
            height: 160px;
        }

        .gallery-skeleton-content {
            padding: var(--space-4);
        }

        /* ===== TOAST NOTIFICATIONS ===== */
        .toast-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            max-width: 400px;
        }

        .toast {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-4);
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            border-left: 4px solid var(--grey-400);
            animation: slideIn 0.3s ease-out;
            transition: opacity var(--transition-slow), transform var(--transition-slow);
        }

        .toast.hiding {
            opacity: 0;
            transform: translateX(100%);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .toast-error {
            border-left-color: var(--status-error);
        }

        .toast-error .toast-icon {
            color: var(--status-error);
        }

        .toast-warning {
            border-left-color: var(--status-warning);
        }

        .toast-warning .toast-icon {
            color: var(--status-warning);
        }

        .toast-success {
            border-left-color: var(--status-active);
        }

        .toast-success .toast-icon {
            color: var(--status-active);
        }

        .toast-info {
            border-left-color: var(--status-planning);
        }

        .toast-info .toast-icon {
            color: var(--status-planning);
        }

        .toast-icon {
            flex-shrink: 0;
        }

        .toast-icon .material-symbols-outlined {
            font-size: var(--icon-xl);
        }

        .toast-content {
            flex: 1;
            min-width: 0;
        }

        .toast-title {
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            margin-bottom: var(--space-1);
        }

        .toast-message {
            font-size: var(--text-sm);
            color: var(--grey-600);
            line-height: 1.4;
        }

        .toast-close {
            flex-shrink: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: var(--space-1);
            color: var(--grey-400);
            border-radius: var(--radius-sm);
            transition: background var(--transition-normal), color var(--transition-normal);
        }

        .toast-close:hover {
            background: var(--grey-100);
            color: var(--grey-600);
        }

        .toast-close .material-symbols-outlined {
            font-size: var(--icon-md);
        }

        .toast-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-3);
        }

        .toast-action-btn {
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-normal);
        }

        .toast-action-btn.primary {
            background: var(--grey-900);
            color: var(--white);
            border: none;
        }

        .toast-action-btn.primary:hover {
            background: var(--grey-700);
        }

        .toast-action-btn.secondary {
            background: transparent;
            color: var(--grey-700);
            border: 1px solid var(--grey-300);
        }

        .toast-action-btn.secondary:hover {
            background: var(--grey-100);
        }

        /* ===== LOADING OVERLAY ===== */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity var(--transition-slow);
        }

        .loading-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-overlay .loading-spinner {
            width: 48px;
            height: 48px;
            border-width: 4px;
        }

        .loading-overlay .loading-text {
            margin-top: var(--space-5);
            font-size: var(--text-base);
            color: var(--grey-700);
        }

        /* Responsive toast */
        @media screen and (max-width: 767px) {
            .toast-container {
                top: auto;
                bottom: 20px;
                left: 20px;
                right: 20px;
                max-width: none;
            }
        }

        /* ===== MAP CONTEXT MENU ===== */
        .map-context-menu {
            position: absolute;
            background: var(--white);
            border: 1px solid var(--grey-200);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            z-index: 1001;
            display: none;
            overflow: hidden;
        }

        .map-context-menu.show {
            display: block;
        }

        /* Edge detection classes for flipping menu position */
        .map-context-menu.flip-horizontal {
            transform: translateX(-100%);
        }

        .map-context-menu.flip-vertical {
            transform: translateY(-100%);
        }

        .map-context-menu.flip-horizontal.flip-vertical {
            transform: translate(-100%, -100%);
        }

        .context-menu-coords.copied {
            background: var(--status-active-bg);
            color: var(--status-active-text);
        }

        .context-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-sm);
            color: var(--grey-700);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .context-menu-item:hover {
            background: var(--grey-50);
        }

        .context-menu-item:last-child {
            border-radius: 0 0 var(--radius-md) var(--radius-md);
        }

        /* Measure mode active state */
        .context-menu-item.measure-active {
            background: var(--status-planning-bg);
            color: var(--status-planning-text);
        }

        /* ===== MEASURE DISTANCE DISPLAY ===== */
        .measure-distance-display {
            position: absolute;
            bottom: 40px;
            left: 10px;
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            display: none;
            flex-direction: column;
            width: 280px;
            z-index: 1000;
            overflow: hidden;
        }

        .measure-distance-display.show {
            display: flex;
        }

        .measure-distance-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-4);
            background: var(--grey-50);
            border-bottom: 1px solid var(--grey-200);
            font-weight: var(--font-medium);
            color: var(--grey-900);
        }

        .measure-distance-header .material-symbols-outlined {
            font-size: var(--icon-md);
            color: var(--grey-600);
        }

        .measure-distance-close {
            margin-left: auto;
            background: transparent;
            border: none;
            padding: var(--space-1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .measure-distance-close:hover {
            background: var(--grey-200);
        }

        .measure-distance-close .material-symbols-outlined {
            font-size: var(--icon-sm);
            color: var(--grey-500);
        }

        .measure-distance-info {
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-xs);
            color: var(--grey-600);
            border-bottom: 1px solid var(--grey-100);
        }

        .measure-distance-result {
            padding: var(--space-3) var(--space-4);
        }

        .measure-result-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-1) 0;
        }

        .measure-result-label {
            font-size: var(--text-sm);
            color: var(--grey-600);
        }

        .measure-result-value {
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
        }

        /* Distance labels on map segments */
        .measure-label {
            background: var(--white);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            padding: 2px 6px;
            font-size: 11px;
            font-weight: var(--font-medium);
            color: var(--grey-800);
            box-shadow: var(--shadow-sm);
            white-space: nowrap;
            pointer-events: none;
        }

        /* Measure marker styles */
        .measure-marker {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--white);
            border: 2px solid #000;
            cursor: pointer;
            transition: transform 0.1s ease;
        }

        .measure-marker:hover {
            transform: scale(1.3);
        }

        .measure-marker.dragging {
            cursor: grabbing;
        }

        /* Print styles */
        @media print {
            #header,
            #footer,
            #accordion-panel,
            #info-panel,
            .style-switcher,
            #menu-toggle,
            .btn-back,
            .btn-edit,
            #filter-pane,
            .toast-container,
            .loading-overlay,
            .map-context-menu,
            .measure-distance-display {
                display: none !important;
            }

            #main {
                height: auto;
                overflow: visible;
            }

            .detail-view {
                overflow: visible;
            }

            .detail-content {
                overflow: visible;
            }
        }