/* --- LEAFLET CUSTOM CONTROL STYLES --- */
.leaflet-control-reset-view {
    font-size: 18px !important;
    font-weight: bold;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    line-height: 1 !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    height: 100vh;
}

.layers-panel {
    width: 400px;
    background: white;
    border-right: 1px solid #ddd;
    padding: 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    display: none;
    position: relative;
    flex-direction: column;
    overflow: hidden;
}

.layers-panel.active {
    display: flex;
}

.layers-header {
    background: #2196F3;
    color: white;
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.layers-header h3, .detail-header h3 {
    margin: 0;
    font-size: 16px;
    flex-grow: 1;
    line-height: 1.2;
    white-space: normal;
}

.layers-close {
    float: right;
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layers-close:hover {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
}

.layers-toggle {
    position: relative;
    background: #2196F3;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.layers-toggle:hover {
    background: #1976D2;
}

.table-scroll-wrapper {
    flex-grow: 1;
    overflow-y: auto;
}

.layers-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    table-layout: fixed;
}

.layers-table th {
    background: #f5f5f5;
    padding: 12px 15px;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000; /* Increased slightly to be sure */
    vertical-align: bottom;
}
.layers-table th:nth-child(1) { width: 40%; }
.layers-table th:nth-child(2) { width: 25%; }
.layers-table th:nth-child(3) { width: auto; text-align: left; white-space: nowrap; padding-right: 5px; }

.exclude-button {
    background: #ff5252;
    color: white;
    border: none;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.exclude-button:hover {
    background: #ff1744;
}

.layers-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
    overflow-wrap: break-word;
    word-break: break-word;
}

.layers-table td:nth-child(2) {
    font-size: 13px;
    overflow-wrap: normal;
    word-break: normal;
}

.layers-table td:nth-child(3) {
    font-size: 13px;
    overflow-wrap: normal;
    word-break: normal;
    padding-right: 2px;
}

.layers-table td:nth-child(4) {
    padding: 10px 0 10px 0;
    text-align: right !important;
    width: 30px;
}

.layers-table tr:hover {
    background-color: #f0f8ff;
}

.layers-table tr:nth-child(even) {
    background-color: #fafafa;
}

.layers-table tr:nth-child(even):hover {
    background-color: #f0f8ff;
}

.layers-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #e3f2fd;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    z-index: 1000;
}

.layers-info-buttons {
    display: flex;
    gap: 10px;
}

.export-button {
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-button:hover:not(:disabled) {
    background-color: #0b5ed7;
}

.export-button:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
    opacity: 0.7;
}

/* NOVÝ STYL PRO TLAČÍTKO SHARE FILTERS */
#shareFiltersButton {
    background-color: #4CAF50;
}

#shareFiltersButton:hover:not(:disabled) {
    background-color: #45a049;
}

.detail-panel {
    width: 400px;
    background: white;
    border-right: 1px solid #ddd;
    padding: 0;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    display: none;
}

.detail-panel.active {
    display: block;
}

.detail-header {
    background: #4CAF50;
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
}


.list-nav-btn:hover {
    background: rgba(255,255,255,0.3);
}

.detail-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-close:hover {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
}

.detail-content {
    padding: 15px;
}

.detail-item {
    margin-bottom: 12px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #4CAF50;
}

.detail-item strong {
    color: #333;
    display: block;
    margin-bottom: 4px;
}

.detail-item span {
    color: #666;
    word-break: break-word;
}

.map-container {
    flex: 1;
    position: relative;
}

#map {
    height: 100%;
    width: 100%;
}

.filter-panel {
    width: 300px;
    background: white;
    border-left: 1px solid #ddd;
    padding: 20px;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.filter-panel h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.9);
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    display: none;
}

.info-box {
    background: white;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    border-left: 4px solid #4CAF50;
}

.status {
    background: #e8f5e8;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    font-size: 12px;
}

.filter-group {
    margin: 15px 0;
}

.filter-row {
    display: flex;
    gap: 15px;
}

.filter-row .filter-group {
    flex: 1;
    min-width: 0;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.filter-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter-group input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.filter-group input[type="text"]:focus {
    outline: none;
    border-color: #4CAF50;
}

.checkbox-group {
    margin-top: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 8px;
}

.filter-actions {
    margin: 20px 0;
}

.filter-actions button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.filter-actions button:first-child {
    background: #4CAF50;
    color: white;
}

.filter-actions button:first-child:hover {
    background: #45a049;
}

.filter-actions button:last-child {
    background: #f44336;
    color: white;
}

.filter-actions button:last-child:hover {
    background: #da190b;
}
.scrollable-checkbox-group {
    max-height: 150px; 
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #fdfdfd;
}

#dayFilterContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

#dayFilterContainer label {
    margin: 4px 0;
    white-space: nowrap;
}

.checkbox-group .loading-text {
    color: #888;
    font-style: italic;
}
.resolution-filter {
    padding-left: 25px;
    margin: 5px 0 15px 0;
    border-left: 2px solid #e0e0e0;
}
.resolution-filter label {
    font-weight: normal;
    font-size: 13px;
    color: #555;
}
.resolution-input-wrapper {
    display: flex;
    align-items: center;
}
.resolution-input-wrapper select {
    width: 40%;
    margin-right: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.resolution-input-wrapper input {
    width: 60%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.layers-toggle:disabled {
    background-color: #a0a0a0; 
    cursor: not-allowed;
    opacity: 0.7;
}

.layers-toggle:disabled:hover {
    background-color: #a0a0a0; 
}

.layers-toggle.remove-mode {
    background-color: #f44336; 
}
.layers-toggle.remove-mode:hover {
    background-color: #da190b; 
}
.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.detail-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}


.detail-table td:first-child {
    font-weight: bold;
    color: #333;
    width: 40%;
}


.detail-table td:last-child {
    word-break: break-word;
    color: #666;
}

.layers-table tr.selected-row {
    background-color: #e3f2fd; 
    font-weight: bold;
}

.layers-table tr.selected-row:hover {
    background-color: #d1eaff; 
}

.map-controls-wrapper {
    position: absolute;
    top: 10px;
    left: 60px;
    z-index: 1000;
    display: flex;
    align-items: flex-start; /* Changed to start so dropdown doesn't center weirdly */
    flex-wrap: wrap;
    gap: 10px;
}

.wms-controls-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.85);
    padding: 5px 12px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#togglePolygonsButton {
    position: static;
    background-color: #ff9800;
    padding: 10px; /* Match other buttons */
    white-space: nowrap;
    width: 100%;
}

#togglePolygonsButton:hover {
    background-color: #f57c00;
}

#togglePolygonsButton.toggled {
    background-color: #4caf50;
}

#togglePolygonsButton.toggled:hover {
    background-color: #45a049;
}

.slider-container {
    display: flex;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

.slider-container label {
    margin-right: 8px;
}

#wmsOpacitySlider {
    cursor: pointer;
    margin: 0;
}

.detail-actions {
    padding: 15px;
    border-top: 1px solid #eee;
    display: none;
}

.detail-actions-container {
    display: flex;
    gap: 10px;
}

.detail-actions-container button {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#shareButton {
    background-color: #4CAF50;
}

#shareButton:hover {
    background-color: #45a049;
}

#shareButton.copied {
    background-color: #ff9800;
}

#exportDetailButton {
    background-color: #0d6efd;
}

#exportDetailButton:hover {
    background-color: #0b5ed7;
}

#shareButton.copied,
#shareFiltersButton.copied {
    background-color: #ff9800; /* Oranžová pro "Copied!" */
}

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

.layers-table th.sortable:hover {
    background-color: #e9e9e9;
}

.sort-indicator {
    display: inline-block;
    margin-left: 5px;
    width: 10px;
    text-align: center;
}

.layers-table th.sortable:not(.sorted) .sort-indicator {
    color: #ccc;
}

.layers-table th.sorted.asc .sort-indicator::after {
    content: '▲';
}

.layers-table th.sorted.desc .sort-indicator::after {
    content: '▼';
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

.modal-body {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.export-choice-button {
    flex-grow: 1;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-choice-button:hover {
    background-color: #0b5ed7;
}

.filter-button, .filter-button-clear {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    transition: background-color 0.2s;
}

#uploadButton {
    background: #0d6efd; /* Blue */
}

#uploadButton:hover {
    background: #0b5ed7;
}

.filter-button-clear {
    background: #f44336; /* Red */
}

.filter-button-clear:hover {
    background: #da190b;
}

.filter-button-secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, border-color 0.2s;
}

.filter-button-secondary:hover {
    background: #e9ecef;
    border-color: #ccc;
}

.filter-button-secondary span {
    font-size: 10px;
    color: #666;
}

.filter-dropdown {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}

/* STYLY PRO ZÁLOŽKY FILTRŮ */
.filter-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    flex: 1;
    padding: 10px;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.2s, color 0.2s;
}

.tab-button:hover {
    background-color: #e7e7e7;
}

.tab-button.active {
    background-color: white;
    color: #000;
    border-color: #ccc;
    position: relative;
    bottom: -1px;
}

.tab-content {
    display: none;
}

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

.filter-description {
    font-size: 13px;
    color: #666;
    background-color: #f9f9f9;
    border-left: 3px solid #0d6efd;
    padding: 10px;
    margin: 15px 0;
}

#spatialMethod, #spatialDistance {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#spatialMethod:focus, #spatialDistance:focus {
    outline: none;
    border-color: #4CAF50;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.country-filter-btn {
    padding: 5px 12px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s, border-color 0.2s;
}

.country-filter-btn:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
}

.country-filter-btn.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
    font-weight: bold;
}

.filter-panel {
    display: flex;
    flex-direction: column;
}

/* Odebrání původního okraje z nadpisu */
.filter-panel h3 {
    margin: 0;
    padding: 0;
    border: none;
}

/* Nový kontejner pro titulek a obrázek letadla */
.title-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Mezera mezi textem a obrázkem */
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

/* Styl pro obrázek letadla */
.title-image {
    height: 35px;
    width: auto;
    vertical-align: middle;
}

/* Tento prvek se "roztáhne" a odsune kontakt na spodek panelu */
#filters {
    flex-grow: 1;
}

/* Styl pro kontaktní informace dole v panelu */
.contact-info {
    margin-top: 20px;
    padding-top: 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
    border-top: 1px solid #eee;
}

.contact-info a {
    color: #0d6efd;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Sjednocený ZÁKLADNÍ STYL pro OBĚ tlačítka v hlavičce */
#backToFilteredListButton, .layers-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: bold;

    /* Použití flexboxu pro dokonalé vertikální i horizontální zarovnání obsahu */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Specifický styl pro tlačítko "Zpět" */
#backToFilteredListButton {
    display: none; /* Skryté ve výchozím stavu */
    background-color: transparent;
    font-size: 24px;
}

/* Specifický styl pro tlačítko "Zavřít" */
.layers-close {
    background: none;
    font-size: 18px;
}

/* Sjednocený HOVER EFEKT pro OBĚ tlačítka */
#backToFilteredListButton:hover, .layers-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
#backToFilteredListButton span {
    position: relative;
    top: -3px;
    left: -1px;
}

/* --- DRAW TOOLS STYLING --- */
.draw-tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.draw-tool-btn {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fdfdfd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    transition: all 0.2s;
}

.draw-tool-btn:hover {
    background-color: #e3f2fd;
    border-color: #2196F3;
    color: #2196F3;
}

/* --- NEW POLYGON OPACITY CONTROLS --- */
.polygons-wrapper {
    position: relative;
    display: inline-block;
}

.polygons-sliders-panel {
    display: none;
    position: absolute;
    top: 100%; /* Position directly below the button */
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: 200px;
    z-index: 2000;
}

.polygons-wrapper:hover .polygons-sliders-panel {
    display: block;
}

.polygons-sliders-panel .slider-group {
    margin-bottom: 10px;
}

.polygons-sliders-panel .slider-group:last-child {
    margin-bottom: 0;
}

.polygons-sliders-panel label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.polygons-sliders-panel input[type=range] {
    width: 100%;
    cursor: pointer;
}

/* --- DRAWING TOOLS STYLES --- */
.first-draw-vertex {
    background-color: #ff9800 !important; /* Orange */
    border-color: #e65100 !important; /* Darker Orange */
}

/* --- LIST VIEW STYLES --- */
#toggleListViewButton, .list-nav-btn {
    background: none;
    border: 1px solid white;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

#toggleListViewButton:hover, .list-nav-btn:hover {
    background: rgba(255,255,255,0.2);
}

#toggleListViewButton.active {
    background: white !important;
    color: #2196F3 !important;
}

#listViewContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
    z-index: 1100; /* Above everything except maybe modals */
    display: flex;
    flex-direction: column;
}

.list-view-header {
    background: #2196F3;
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-main-actions, .header-list-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.list-view-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

#closeListViewButton, #exportListFromViewButton {
    background: #2196F3;
    border: 1px solid white;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    font-size: 14px;
}

#closeListViewButton:hover, #exportListFromViewButton:hover {
    background: #1976D2; /* Solid darker blue for hover, better than rgba replacement */
}

/* Action links in map detail panel */
.detail-content .action-link {
    display: inline-block;
    margin-top: 15px;
    color: #2196F3;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.detail-content .action-link:hover {
    text-decoration: underline;
}

#shareListFromViewButton {
    background: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    font-size: 14px;
}

#shareListFromViewButton:hover {
    background: #45a049;
}

#shareListFromViewButton.copied {
    background: #ff9800 !important; /* Orange */
}

/* Row interaction */
.campaign-table tbody tr:not(.detail-row) {
    cursor: pointer;
    transition: background-color 0.2s;
}

.campaign-table tbody tr:not(.detail-row):hover {
    background-color: #f0f7fe;
}

/* Expanded Detail inside List View */
.expanded-detail {
    margin: 5px 0 15px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.full-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}

.full-attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.full-attr-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.full-attr-table td:first-child {
    font-weight: bold;
    width: 45%;
    color: #666;
}

#listViewContent {
    padding: 20px;
    flex: 1;
}

/* Accordion Styles (Adapted from V2) */
.location-group {
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.location-header {
    background-color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.location-header:hover {
    background-color: #f9f9f9;
}

.location-header h2 {
    margin: 0;
    font-size: 18px;
    color: #444;
}

.location-count {
    background: #e3f2fd;
    color: #1976D2;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}

.location-content {
    display: none;
    padding: 0 20px 20px 20px;
    background-color: #fafafa;
}

.location-group.active > .location-content {
    display: block;
}

.location-group.active > .location-header {
    background-color: #f0f0f0;
    border-bottom: 2px solid #2196F3;
}

/* Year Sub-groups */
.year-group {
    margin-top: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
}

.year-header {
    padding: 10px 15px;
    background: #eee;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.year-header::before {
    content: '►';
    font-size: 10px;
    transition: transform 0.2s;
}

.year-group.active > .year-header::before {
    transform: rotate(90deg);
}

.year-content {
    display: none;
}

.year-group.active > .year-content {
    display: block;
}

/* Data Table in List View */
.campaign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.campaign-table th {
    background: #f8f8f8;
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #ddd;
    color: #555;
}

.campaign-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.campaign-table tr:hover {
    background-color: #f0f8ff;
}

.action-link {
    color: #2196F3;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.action-link:hover {
    text-decoration: underline;
}

.sensor-tag {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 4px;
    font-size: 11px;
    background: #e0e0e0;
    color: #555;
}

.sensor-tag.active {
    background: #4CAF50;
    color: white;
}

/* --- THEMATIC LAYERS STYLES --- */

/* Section header in detail panel */
.thematic-layers-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e0e0e0;
}

.thematic-layers-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.thematic-layers-header .tl-icon {
    font-size: 18px;
}

.thematic-layers-header .tl-count {
    background: #7c4dff;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

/* Thematic layer row (Accordion style) */
.tl-rows-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-row-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s;
}

.tl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    background: #f8f9fa;
    transition: background-color 0.2s;
}

.tl-row:hover {
    background: #e3f2fd;
}

.tl-row.active-row {
    background: #f3e5f5;
    border-left: 3px solid #7c4dff;
}

.tl-row-name {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.tl-row.active-row .tl-row-name {
    color: #7c4dff;
}

.tl-row-eye {
    font-size: 14px;
    color: #aaa;
}

.tl-row.active-row .tl-row-eye {
    color: #7c4dff;
}

/* Detail panel under the row */
.tl-row-detail {
    padding: 12px;
    background: #fff;
    border-top: 1px solid #eee;
}

.tl-row-desc {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.4;
}

.tl-row-actions {
    display: flex;
    margin-bottom: 10px;
}

.tl-btn.tl-share-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    color: #333;
    transition: all 0.2s;
    text-align: center;
}

.tl-btn.tl-share-btn:hover {
    background: #e8f5e9;
    border-color: #4CAF50;
    color: #2e7d32;
}

.tl-btn.tl-share-btn.copied {
    background: #ff9800;
    border-color: #f57c00;
    color: white;
}

/* Legend display */
.tl-legend {
    margin-top: 8px;
    text-align: center;
}

.tl-legend img {
    max-width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.tl-legend-toggle {
    font-size: 11px;
    color: #7c4dff;
    cursor: pointer;
    background: none;
    border: none;
    font-weight: bold;
    padding: 4px 0;
}

.tl-legend-toggle:hover {
    text-decoration: underline;
}

/* Badge for table/list views */
.tl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ede7f6;
    color: #7c4dff;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 4px;
}

/* Thematic layers in list view expanded detail */
.tl-list-section {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}

.tl-list-header {
    font-size: 13px;
    font-weight: bold;
    color: #7c4dff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

.tl-list-item:hover {
    background: #f3e5f5;
    border-color: #ce93d8;
}

.tl-list-item-name {
    font-weight: bold;
    color: #333;
}

.tl-list-item-type {
    color: #7c4dff;
    font-size: 11px;
    margin-left: 6px;
}