/* BBL GIS Grünflächeninventar - Main Stylesheet */
/* Design tokens defined in tokens.css */

        * {
            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: var(--z-modal);
        }

        .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: var(--z-raised); /* Shadow appears above header-detail */
        }

        .header-detail {
            display: none;
            flex-direction: column;
            position: relative;
            z-index: var(--z-base);
        }

        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-name {
            height: 40px;
            width: auto;
            margin-left: var(--space-2);
        }

        #logo-divider {
            width: 1px;
            align-self: stretch;
            background: var(--grey-400);
            margin: 4px var(--space-3);
            flex-shrink: 0;
        }

        #logo-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.3;
            font-size: var(--text-xs);
            color: var(--grey-900, #212121);
            white-space: nowrap;
        }

        .logo-line-bold {
            font-weight: 700;
        }

        .logo-line {
            font-weight: 400;
        }
        
        #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: var(--z-popover);
        }

        #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;
        }

        /* Hide browser's default clear button on search inputs */
        #search-input::-webkit-search-cancel-button,
        #search-input::-webkit-search-decoration {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }

        #search-input::-ms-clear {
            display: 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: var(--radius-full);
            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: var(--radius-full);
            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%;
        }
        
        /* ===== WIKI / TASKS / DASHBOARD VIEWS ===== */
        #wiki-view,
        #tasks-view,
        #dashboard-view,
        #settings-view,
        #api-view {
            flex: 1;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--grey-50);
            overflow-y: auto;
            padding: var(--space-6);
        }

        #wiki-view.active,
        #tasks-view.active,
        #dashboard-view.active,
        #settings-view.active,
        #api-view.active {
            display: flex;
        }

        .placeholder-view {
            text-align: center;
            color: var(--grey-500);
            padding: var(--space-8);
        }

        .placeholder-view .placeholder-icon {
            font-size: var(--icon-hero);
            color: var(--grey-300);
            margin-bottom: var(--space-4);
        }

        .placeholder-view h2 {
            font-size: var(--text-xl);
            font-weight: 600;
            color: var(--grey-700);
            margin: 0 0 var(--space-2) 0;
        }

        .placeholder-view p {
            font-size: var(--text-base);
            color: var(--grey-500);
            margin: 0;
        }

        /* ===== 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: var(--z-modal);
            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: var(--overlay-light-30);
        }
        
        .gallery-image-label {
            position: absolute;
            top: var(--space-3);
            left: var(--space-3);
            background: var(--overlay-dark-60);
            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: var(--z-sticky);
        }

        /* 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: var(--z-banner);
        }

        .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: var(--overlay-light-90);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            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: var(--radius-full);
            background: var(--overlay-light-50);
            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: var(--radius-full);
            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: var(--z-overlay);
            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 var(--overlay-light-20);
        }
        
        .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: var(--overlay-light-10);
        }

        .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;
        }

        /* Dargestellte Karten accordion — no outer padding, items handle their own */
        #dargestellte-karten-content {
            padding: 0;
        }

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

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

        .print-form-row {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .print-label {
            flex: 0 0 100px;
            font-size: var(--text-sm);
            color: var(--grey-700);
        }

        .print-select {
            flex: 1;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            font-size: var(--text-sm);
            color: var(--grey-900);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }

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

        .print-select:focus {
            outline: none;
            border-color: var(--accent-panel);
        }

        .print-checkboxes {
            display: flex;
            gap: var(--space-4);
            padding: var(--space-2) 0;
        }

        .print-checkbox-label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            color: var(--grey-900);
            cursor: pointer;
        }

        .print-checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary-red);
        }

        .print-btn {
            width: 100%;
            padding: var(--space-3) 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);
            font-weight: var(--font-medium);
            cursor: pointer;
            transition: background var(--transition-normal), border-color var(--transition-normal);
        }

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

        .print-btn:active {
            background: var(--grey-200);
        }

        .print-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* ===== PRINT CROP PREVIEW ===== */
        .print-preview-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: var(--z-drawer);
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--transition-normal);
        }

        .print-preview-overlay.active {
            opacity: 1;
        }

        .print-preview-overlay svg {
            width: 100%;
            height: 100%;
        }

        .print-preview-crop {
            position: absolute;
            border: 2px dashed var(--primary-red);
            box-shadow: 0 0 0 2px var(--overlay-light-50);
            pointer-events: none;
        }

        .print-preview-label {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-red);
            color: white;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
            white-space: nowrap;
            box-shadow: var(--shadow-sm);
        }

        /* ===== EXPORT PANEL ===== */
        .export-panel {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

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

        .export-section-label {
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
            color: var(--grey-600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .export-select {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            font-size: var(--text-sm);
            color: var(--grey-900);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }

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

        .export-select:focus {
            outline: none;
            border-color: var(--accent-panel);
        }

        .export-count {
            font-size: var(--text-xs);
            color: var(--grey-500);
            margin-top: var(--space-1);
        }

        .export-format-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-2);
        }

        .export-format-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-3);
            border: 1px solid var(--grey-300);
            border-radius: var(--radius-sm);
            background: var(--white);
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .export-format-card:hover {
            border-color: var(--grey-500);
            background: var(--grey-50);
        }

        .export-format-card.active {
            border-color: var(--accent-panel);
            background: rgba(0, 60, 105, 0.05);
            box-shadow: 0 0 0 1px var(--accent-panel);
        }

        .export-format-icon {
            font-size: var(--text-lg);
            color: var(--grey-700);
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .export-format-card.active .export-format-icon {
            color: var(--accent-panel);
        }

        .export-format-icon .material-symbols-outlined {
            font-size: var(--text-2xl);
        }

        .export-format-name {
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            color: var(--grey-900);
        }

        .export-format-desc {
            font-size: var(--text-xs);
            color: var(--grey-500);
        }

        .export-options {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .export-checkbox-label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            color: var(--grey-900);
            cursor: pointer;
        }

        .export-checkbox-label input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent-panel);
        }

        .export-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-3) var(--space-4);
            border: none;
            border-radius: var(--radius-sm);
            background: var(--accent-panel);
            color: white;
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            cursor: pointer;
            transition: background var(--transition-normal);
        }

        .export-btn:hover {
            background: var(--grey-800);
        }

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

        .export-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

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

        /* ===== GEOKATALOG TREE ===== */
        .geokatalog-header .geokatalog-theme-switch {
            font-size: var(--text-sm);
            color: var(--overlay-light-70);
            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;
            margin: 0;
            margin-right: var(--space-3);
            flex-shrink: 0;
            cursor: pointer;
            accent-color: var(--primary);
        }

        .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);
        }


        /* ===== IDENTIFY POPUP ===== */
        .identify-popup {
            font-family: inherit;
        }

        .identify-popup-header {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--grey-900);
            padding-bottom: var(--space-2);
            margin-bottom: var(--space-2);
            border-bottom: 1px solid var(--grey-200);
        }

        .identify-popup-content {
            max-height: 200px;
            overflow-y: auto;
        }

        .identify-prop {
            font-size: var(--text-xs);
            padding: var(--space-1) 0;
            line-height: 1.4;
        }

        .identify-prop-key {
            color: var(--grey-500);
            font-weight: 500;
        }

        .identify-prop-value {
            color: var(--grey-800);
        }

        /* Mapbox popup overrides */
        .mapboxgl-popup-content {
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
        }

        .mapboxgl-popup-close-button {
            font-size: var(--icon-md);
            padding: var(--space-1) var(--space-2);
            color: var(--grey-500);
        }

        .mapboxgl-popup-close-button:hover {
            background: var(--grey-100);
            color: var(--grey-700);
        }

        #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: var(--z-overlay-above);
            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);
        }
        
        /* ===== 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 — navigation vertically centered on right edge */
        .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 var(--overlay-dark-10);
        }

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

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

        /* 3D Toggle Button */
        .map-3d-btn {
            background: var(--white);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 29px;
            height: 29px;
            padding: 0;
            box-shadow: 0 0 0 2px var(--overlay-dark-10);
            font-size: var(--text-xs);
            font-weight: var(--font-bold);
            color: var(--grey-600);
        }

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

        .map-3d-btn.active {
            background: var(--interactive-blue);
            color: var(--white);
        }

        /* ===== LAYER CONTROLS (inside Dargestellte Karten accordion) ===== */
        .layer-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            transition: background var(--transition-normal);
        }

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

        .layer-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--interactive-blue);
            cursor: pointer;
            flex-shrink: 0;
        }


        .layer-name {
            flex: 1;
            color: var(--grey-900);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layer-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }

        .layer-info-btn {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            color: var(--grey-500);
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            transition: background var(--transition-normal), color var(--transition-normal);
        }

        .layer-info-btn:hover {
            background: var(--grey-200);
            color: var(--grey-700);
        }

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

        .layer-divider {
            height: 1px;
            background: var(--grey-200);
            margin: var(--space-2) var(--space-3);
        }

        .layer-footer {
            padding: var(--space-2) var(--space-3) var(--space-3);
            font-size: var(--text-xs);
            color: var(--grey-500);
            text-align: right;
        }

        /* Layer group label */
        .layer-group-label {
            font-size: var(--text-xs);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--grey-600);
            padding: var(--space-3) var(--space-3) var(--space-1) var(--space-3);
        }

        /* Remove button (X) for reference layers */
        .layer-remove-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: none;
            background: var(--grey-600);
            cursor: pointer;
            border-radius: var(--radius-full);
            color: white;
            flex-shrink: 0;
            padding: 0;
            transition: background var(--transition-normal);
        }

        .layer-remove-btn:hover {
            background: var(--grey-800);
        }

        .layer-remove-btn .material-symbols-outlined {
            font-size: var(--icon-xs);
            font-weight: 600;
        }

        /* Edit button on editable layers */
        .layer-edit-btn {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            color: var(--grey-500);
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            transition: background var(--transition-normal), color var(--transition-normal);
        }

        .layer-edit-btn:hover {
            background: var(--grey-200);
            color: var(--grey-700);
        }

        .layer-edit-btn.active {
            background: var(--interactive-blue);
            color: var(--white);
        }

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

        /* ===== EDIT BANNER (top-center warning) ===== */
        .edit-banner {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--z-overlay);
            display: none;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--primary);
            color: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
            font-size: var(--text-sm);
            font-weight: 500;
            white-space: nowrap;
        }

        .edit-banner.visible {
            display: flex;
        }

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

        .edit-banner-actions {
            display: flex;
            gap: var(--space-2);
            margin-left: var(--space-3);
        }

        .edit-banner-btn {
            border: none;
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-sm);
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .edit-banner-cancel {
            background: var(--overlay-light-20);
            color: var(--white);
        }

        .edit-banner-cancel:hover {
            background: var(--overlay-light-30);
        }

        .edit-banner-save {
            background: var(--white);
            color: var(--primary);
        }

        .edit-banner-save:hover {
            background: var(--grey-100);
        }

        /* ===== EDIT TOOLBAR (bottom-center of map) ===== */
        .edit-toolbar {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--z-overlay);
            background: var(--white);
            border: 1px solid var(--grey-200);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
            display: none;
            overflow: hidden;
        }

        .edit-toolbar.visible {
            display: block;
        }

        .edit-toolbar-tools {
            display: flex;
            align-items: center;
            padding: var(--space-2) var(--space-3);
            gap: var(--space-1);
        }

        .edit-tool-group {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .edit-tool-divider {
            width: 1px;
            height: 32px;
            background: var(--grey-200);
            margin: 0 var(--space-1);
        }

        .edit-tool-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: var(--space-1) var(--space-2);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            color: var(--grey-600);
            cursor: pointer;
            transition: all var(--transition-normal);
            min-width: 52px;
        }

        .edit-tool-btn:hover {
            background: var(--grey-50);
            color: var(--grey-900);
        }

        .edit-tool-btn.active {
            background: #e0edff;
            color: var(--primary);
        }

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

        .edit-tool-label {
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
        }

        /* ===== STYLE SWITCHER (in #map-view, bottom-right) ===== */
        .style-switcher {
            position: absolute;
            bottom: 40px;
            right: 20px;
            z-index: var(--z-overlay);
            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: var(--radius-full);
            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: var(--icon-sm);
            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: var(--z-dropdown);
            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-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--grey-700);
        }

        .smart-drawer-title .material-symbols-outlined {
            font-size: var(--icon-sm);
            color: var(--grey-500);
        }

        .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);
        }


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


        /* 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: var(--z-raised);
        }

        /* 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: var(--z-tooltip);
            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: var(--radius-full);
            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: var(--radius-full);
            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-name {
                display: none;
            }

            #logo-text {
                font-size: 11px;
            }

            #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);
            }


            .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 {
                font-size: 10px;
            }

            #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: var(--radius-full);
                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: var(--z-popover);
                border-left: none;
            }

            #smart-drawer:not(.open) {
                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;
            }


            /* 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: var(--z-popover);
                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);
            }

            /* Toast position on mobile */
            .toast-container {
                bottom: 60px;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 40px);
                max-width: none;
            }

            /* Layer info modal on mobile */
            .layer-info-modal {
                padding: var(--space-3);
            }

            .layer-info-modal-content {
                max-height: 90vh;
            }

            .layer-info-body {
                padding: var(--space-4);
            }
        }

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

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


            .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;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--z-tooltip);
            display: flex;
            flex-direction: column-reverse;
            gap: var(--space-3);
            max-width: 400px;
            width: calc(100% - 40px);
            pointer-events: none;
        }

        .toast-container .toast {
            pointer-events: auto;
        }

        .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: var(--overlay-light-90);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: var(--z-toast);
            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 */
        /* ===== LAYER INFO MODAL ===== */
        .layer-info-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--overlay-dark-50);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: var(--z-tooltip-above);
            padding: var(--space-5);
        }

        .layer-info-modal.show {
            display: flex;
        }

        .layer-info-modal-content {
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            max-width: 600px;
            max-height: 80vh;
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .layer-info-modal-close {
            position: absolute;
            top: var(--space-3);
            right: var(--space-3);
            background: var(--grey-100);
            border: none;
            border-radius: var(--radius-full);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--grey-600);
            transition: background var(--transition-normal), color var(--transition-normal);
            z-index: var(--z-raised);
        }

        .layer-info-modal-close:hover {
            background: var(--grey-200);
            color: var(--grey-900);
        }

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

        .layer-info-body {
            padding: var(--space-5);
            overflow-y: auto;
            flex: 1;
        }

        .layer-info-loading {
            text-align: center;
            padding: var(--space-8);
            color: var(--grey-500);
        }

        /* Swisstopo legend styles */
        .layer-info-body .legend-container {
            font-size: var(--text-sm);
            line-height: 1.6;
        }

        .layer-info-body .bod-title {
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            margin: 0 0 var(--space-3) 0;
        }

        .layer-info-body .legend-abstract {
            color: var(--grey-600);
            margin: 0 0 var(--space-5) 0;
            padding: var(--space-3);
            background: var(--grey-50);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--primary);
        }

        .layer-info-body .legend-footer {
            margin-top: var(--space-4);
        }

        .layer-info-body .legend-footer > span {
            font-weight: var(--font-semibold);
            color: var(--grey-900);
            display: block;
            margin-bottom: var(--space-2);
        }

        .layer-info-body .img-container {
            background: var(--grey-50);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-4);
        }

        .layer-info-body .img-container img {
            max-width: 100%;
            height: auto;
        }

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

        .layer-info-body table tr {
            border-bottom: 1px solid var(--grey-200);
        }

        .layer-info-body table tr:last-child {
            border-bottom: none;
        }

        .layer-info-body table td {
            padding: var(--space-2) var(--space-3);
            vertical-align: top;
        }

        .layer-info-body table td:first-child {
            font-weight: var(--font-medium);
            color: var(--grey-700);
            width: 40%;
            padding-left: 0;
        }

        .layer-info-body table td:last-child {
            color: var(--grey-600);
            padding-right: 0;
        }

        .layer-info-body table a {
            color: var(--primary);
            text-decoration: none;
        }

        .layer-info-body table a:hover {
            text-decoration: underline;
        }

        /* Internal layer info */
        .layer-info-internal {
            padding: var(--space-4);
        }

        .layer-info-internal-header {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .layer-info-internal-header .material-symbols-outlined {
            font-size: var(--icon-xl);
            color: var(--grey-600);
        }

        .layer-info-internal-header h3 {
            margin: 0;
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
        }

        .layer-info-internal-desc {
            color: var(--grey-700);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-6);
        }

        .layer-info-internal-meta {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            padding-top: var(--space-4);
            border-top: 1px solid var(--grey-200);
        }

        .layer-info-meta-item {
            display: flex;
            justify-content: space-between;
        }

        .layer-info-meta-label {
            color: var(--grey-500);
            font-size: var(--text-sm);
        }

        .layer-info-meta-value {
            font-weight: var(--font-medium);
            font-size: var(--text-sm);
        }

        /* ===== API DOCS PLACEHOLDER ===== */
        .api-placeholder-endpoints {
            text-align: left;
            display: inline-block;
            margin-top: var(--space-4);
        }

        .api-endpoint-group h4 {
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            color: var(--grey-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: 0 0 var(--space-3);
        }

        .api-endpoint {
            font-family: monospace;
            font-size: var(--text-sm);
            padding: var(--space-2) var(--space-3);
            background: var(--grey-50);
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-2);
            color: var(--grey-700);
        }

        .api-method {
            display: inline-block;
            font-size: var(--text-xs);
            font-weight: var(--font-bold);
            padding: 1px 6px;
            border-radius: var(--radius-sm);
            margin-right: var(--space-2);
            min-width: 36px;
            text-align: center;
        }

        .api-method.get { background: var(--status-active-bg); color: var(--status-active-text); }
        .api-method.post { background: var(--status-planning-bg); color: var(--status-planning-text); }
        .api-method.put { background: var(--status-renovation-bg); color: var(--status-renovation-text); }
        .api-method.delete { background: var(--status-error-bg); color: var(--status-error-text); }

        /* ===== 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: var(--z-modal-above);
            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: 50%;
            transform: translateX(-50%);
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            display: none;
            flex-direction: column;
            width: 280px;
            z-index: var(--z-modal);
            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: var(--radius-full);
            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,
            .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;
            }
        }

/* ===== INFO PANEL TABS ===== */

.info-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-grey-200, #E1E5E8);
    margin: 0 calc(-1 * var(--space-4, 16px));
    padding: 0 var(--space-4, 16px);
    gap: var(--space-1, 4px);
}

.info-tab {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
    color: var(--color-grey-500, #6C757D);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.info-tab:hover {
    color: var(--color-grey-700, #3D454B);
    background: var(--color-grey-50, #F9FAFB);
}

.info-tab.active {
    color: var(--color-primary-red, #CC0000);
    border-bottom-color: var(--color-primary-red, #CC0000);
}

.info-tab-content {
    display: none;
    padding-top: var(--space-3, 12px);
}

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

/* ===== CONDITION BADGE ===== */

.condition-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: var(--text-xs, 12px);
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.02em;
}

.info-value-notes {
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
    font-style: italic;
}

/* ===== INSPECTION CARDS ===== */

.inspection-card {
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
    background: var(--color-white, #fff);
}

.inspection-card-latest {
    border-color: var(--color-interactive-blue, #005EA8);
    box-shadow: 0 0 0 1px var(--color-interactive-blue, #005EA8);
}

.inspection-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}

.inspection-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: var(--text-sm, 13px);
}

.inspection-card-meta span {
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
}

.inspection-card-body .info-row {
    padding: var(--space-1, 4px) 0;
    border-bottom: none;
}

.inspection-urgency {
    font-size: var(--text-xs, 12px);
    font-weight: var(--font-semibold, 600);
    padding: 2px 8px;
    border-radius: 10px;
}

.inspection-urgency-high { background: #FFEBEE; color: #c62828; }
.inspection-urgency-medium { background: #FFF3E0; color: #E65100; }
.inspection-urgency-low { background: #E8F5E9; color: #1B5E20; }

.damage-findings {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
}

.damage-finding {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) 0;
    font-size: var(--text-xs, 12px);
}

.zone-badge {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-grey-100, #F3F5F7);
    font-size: 11px;
    font-weight: var(--font-medium, 500);
    color: var(--color-grey-600, #5E666B);
}

.severity-badge {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: var(--font-semibold, 600);
}

.severity-high { background: #FFEBEE; color: #c62828; }
.severity-medium { background: #FFF3E0; color: #E65100; }
.severity-low { background: #E8F5E9; color: #1B5E20; }

.recommended-actions {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 12px);
}

.recommended-actions ul {
    margin: var(--space-1, 4px) 0 0 var(--space-4, 16px);
    padding: 0;
}

.recommended-actions li {
    padding: 2px 0;
}

.inspection-notes {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
    font-style: italic;
}

.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8, 32px) var(--space-4, 16px);
    color: var(--color-grey-400, #8E979E);
    text-align: center;
}

.empty-state-small .material-symbols-outlined {
    font-size: 36px;
    margin-bottom: var(--space-2, 8px);
    opacity: 0.5;
}

.empty-state-small p {
    margin: 0;
    font-size: var(--text-sm, 13px);
}

/* ===== TASK CARD MINI (info panel) ===== */

.task-card-mini {
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3, 12px);
    margin-bottom: var(--space-2, 8px);
}

.task-card-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1, 4px);
}

.task-card-mini-date {
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
}

.task-card-mini-title {
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-semibold, 600);
    margin-bottom: var(--space-1, 4px);
}

.task-card-mini-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
}

/* ===== TASKS VIEW ===== */

.tasks-view-container {
    padding: var(--space-6, 24px);
    max-width: 1400px;
    margin: 0 auto;
    overflow-y: auto;
    height: 100%;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4, 16px);
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

.tasks-header h2 {
    margin: 0;
    font-size: var(--text-xl, 20px);
    font-weight: var(--font-bold, 700);
}

.tasks-summary {
    display: flex;
    gap: var(--space-4, 16px);
    font-size: var(--text-sm, 13px);
}

.tasks-summary-item {
    display: flex;
    gap: var(--space-1, 4px);
    align-items: center;
}

.tasks-summary-open strong { color: var(--color-interactive-blue, #005EA8); }
.tasks-summary-done strong { color: #2e7d32; }
.tasks-summary-overdue strong { color: #c62828; }

.tasks-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-grey-200, #E1E5E8);
    margin-bottom: var(--space-4, 16px);
    gap: var(--space-1, 4px);
}

.tasks-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
    color: var(--color-grey-500, #6C757D);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.tasks-tab .material-symbols-outlined { font-size: 18px; }

.tasks-tab:hover {
    color: var(--color-grey-700, #3D454B);
    background: var(--color-grey-50, #F9FAFB);
}

.tasks-tab.active {
    color: var(--color-primary-red, #CC0000);
    border-bottom-color: var(--color-primary-red, #CC0000);
}

/* ===== TASKS CALENDAR ===== */

.tasks-calendar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4, 16px);
}

.calendar-month {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.calendar-month-empty {
    opacity: 0.5;
}

.calendar-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-grey-50, #F9FAFB);
    border-bottom: 1px solid var(--color-grey-200, #E1E5E8);
    font-weight: var(--font-semibold, 600);
}

.calendar-month-name {
    font-size: var(--text-base, 14px);
}

.calendar-month-count {
    background: var(--color-interactive-blue, #005EA8);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.calendar-month-body {
    padding: var(--space-2, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    min-height: 60px;
}

/* ===== TASK CARDS ===== */

.task-card {
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-sm, 4px);
    padding: var(--space-3, 12px);
    background: var(--color-white, #fff);
    transition: box-shadow 0.2s;
}

.task-card:hover {
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.task-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}

.task-type-icon {
    font-size: 16px;
    color: var(--color-grey-500, #6C757D);
}

.task-card-title {
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-semibold, 600);
    margin-bottom: var(--space-2, 8px);
    line-height: 1.3;
}

.task-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
}

.task-card-meta .material-symbols-outlined {
    vertical-align: text-bottom;
}

.task-card-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
    font-size: 11px;
    color: var(--color-grey-500, #6C757D);
}

.task-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--color-grey-100, #F3F5F7);
    border-radius: 2px;
    overflow: hidden;
}

.task-progress-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 2px;
    transition: width 0.3s;
}

.task-priority-badge {
    font-size: 11px;
    font-weight: var(--font-semibold, 600);
    padding: 2px 8px;
    border-radius: 10px;
}

.priority-high { background: #FFEBEE; color: #c62828; }
.priority-medium { background: #FFF3E0; color: #E65100; }
.priority-low { background: var(--color-grey-100, #F3F5F7); color: var(--color-grey-600, #5E666B); }

/* ===== TASKS LIST TABLE ===== */

.tasks-list-table {
    overflow-x: auto;
}

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

.tasks-list-table thead th {
    background: var(--color-grey-50, #F9FAFB);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-align: left;
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-xs, 12px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-grey-500, #6C757D);
    border-bottom: 2px solid var(--color-grey-200, #E1E5E8);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tasks-list-table tbody td {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--color-grey-100, #F3F5F7);
    vertical-align: middle;
}

.tasks-list-table tbody tr:hover {
    background: var(--color-grey-50, #F9FAFB);
}

/* ===== JAHRESPLANER GRID ===== */

.planner-grid {
    overflow-x: auto;
}

.planner-grid table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs, 12px);
    min-width: 900px;
}

.planner-grid thead th {
    background: var(--color-grey-50, #F9FAFB);
    padding: var(--space-2, 8px) var(--space-2, 8px);
    text-align: center;
    font-weight: var(--font-semibold, 600);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-grey-500, #6C757D);
    border-bottom: 2px solid var(--color-grey-200, #E1E5E8);
    position: sticky;
    top: 0;
    z-index: 1;
}

.planner-area-col {
    min-width: 180px;
    text-align: left !important;
    padding-left: var(--space-3, 12px) !important;
}

.planner-profile-label {
    font-size: 11px;
    font-weight: var(--font-medium, 500);
}

.planner-grid tbody td {
    padding: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-grey-100, #F3F5F7);
    text-align: center;
    vertical-align: top;
}

.planner-cell-active {
    padding: var(--space-1, 4px) var(--space-2, 8px) !important;
}

.planner-cell-empty {
    background: var(--color-grey-50, #F9FAFB);
}

.planner-action {
    display: block;
    font-size: 10px;
    padding: 1px 0;
    line-height: 1.4;
}

/* ===== DASHBOARD VIEW ===== */

.dashboard-container {
    padding: var(--space-6, 24px);
    max-width: 1400px;
    margin: 0 auto;
    overflow-y: auto;
    height: 100%;
}

.kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-6, 24px);
}

.kpi-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5, 20px);
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
}

.kpi-icon {
    font-size: 36px;
    opacity: 0.8;
}

.kpi-value {
    font-size: var(--text-xl, 20px);
    font-weight: var(--font-bold, 700);
    color: var(--color-grey-800, #2D3236);
    line-height: 1.2;
}

.kpi-label {
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
    margin-top: 2px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-4, 16px);
}

.dashboard-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-grey-200, #E1E5E8);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-5, 20px);
}

.dashboard-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-base, 14px);
    font-weight: var(--font-semibold, 600);
    margin: 0 0 var(--space-4, 16px) 0;
    color: var(--color-grey-700, #3D454B);
}

.dashboard-card h3 .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-grey-400, #8E979E);
}

.dashboard-card h4 {
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
    margin: var(--space-4, 16px) 0 var(--space-2, 8px) 0;
    color: var(--color-grey-500, #6C757D);
    border-top: 1px solid var(--color-grey-100, #F3F5F7);
    padding-top: var(--space-3, 12px);
}

/* ===== COST COMPARISON ===== */

.cost-comparison,
.cost-profile-estimate {
    font-size: var(--text-sm, 13px);
}

.cost-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1, 4px) 0;
}

.cost-label {
    color: var(--color-grey-600, #5E666B);
}

.cost-value {
    font-weight: var(--font-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.cost-row-diff .cost-value {
    color: #2e7d32;
}

.cost-bar-container {
    height: 8px;
    background: var(--color-grey-100, #F3F5F7);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-2, 8px);
}

.cost-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.cost-bar-soll { background: var(--color-interactive-blue, #005EA8); }
.cost-bar-ist { background: #4caf50; }

/* ===== COST CATEGORIES ===== */

.cost-categories {
    font-size: var(--text-sm, 13px);
}

.cost-category-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1, 4px) 0;
}

.cost-category-label {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.cost-category-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cost-category-value {
    font-weight: var(--font-semibold, 600);
    font-variant-numeric: tabular-nums;
}

/* ===== ECOLOGY INDICATORS ===== */

.ecology-indicators {
    font-size: var(--text-sm, 13px);
}

.ecology-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1, 4px) 0;
}

.ecology-label {
    color: var(--color-grey-600, #5E666B);
}

.ecology-value {
    font-weight: var(--font-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ecology-value-highlight {
    color: #2e7d32;
    font-size: var(--text-lg, 18px);
}

/* ===== ECOSYSTEM SERVICES ===== */

.ecosystem-services {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.eco-service-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px);
    background: var(--color-grey-50, #F9FAFB);
    border-radius: var(--radius-sm, 4px);
}

.eco-service-icon {
    font-size: 28px;
}

.eco-service-data {
    flex: 1;
}

.eco-service-value {
    font-size: var(--text-base, 14px);
    font-weight: var(--font-bold, 700);
}

.eco-service-label {
    font-size: var(--text-xs, 12px);
    color: var(--color-grey-500, #6C757D);
}