/* Entry Selection Cards */
.entry-selection-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
}

.entry-selection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-color: var(--isr-primary);
}

.entry-selection-card.border-primary {
    border-width: 2px;
    background-color: #f8f9fa;
}

/* Entry badges (legacy horizontal list support) */
.entry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background-color: #f1f3f5;
    color: #212529;
    border: 1px solid #dee2e6;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.entry-badge:hover {
    background-color: #e7f1ff;
    border-color: var(--isr-primary);
    color: var(--isr-primary);
}

.entry-badge.active {
    background-color: var(--isr-primary);
    border-color: var(--isr-primary);
    color: #ffffff;
}

.entry-badge-selected {
    background-color: var(--isr-primary);
    border-color: var(--isr-primary);
    color: #ffffff;
}

/* Mapping Areas Panel */
.mapping-areas-panel {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 400px;
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    z-index: 1000;
}

.mapping-area-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.mapping-area-item:hover {
    background-color: #f8f9fa;
    border-color: var(--isr-primary);
}

.mapping-area-item.active {
    background-color: #e7f1ff;
    border-color: var(--isr-primary);
    border-width: 2px;
}

/* Headline field - display-only subheadline in data input form */
.headline-field {
    letter-spacing: 0.05em;
}

/* Map Controls Styling */
.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999; /* Below geometry details panel */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Goto location button - hidden on mobile, visible on larger screens */
.goto-location-btn {
    display: none;
}

@media (min-width: 768px) {
    .goto-location-btn {
        display: block;
    }
}

.map-controls .btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: none;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.map-controls .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Zoom Controls Styling */
.zoom-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zoom-controls .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: none;
    font-size: 1rem;
    font-weight: bold;
}

.zoom-controls .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Fullscreen map */
#mapColumn {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#mapColumn > .position-relative {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.map-fullscreen {
    width: 100%;
    height: 100%;
    min-height: 400px;
    flex: 1 0 auto;
    /* border: 1px solid #ddd;
    border-radius: 8px; */
}

/* Geometry Details Styling */
.geometry-details {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 10px; /* visible below map on small screens */
    transition: all 0.2s ease;
    z-index: 1100 !important; /* Well above map controls */
    position: relative; /* Ensure stacking context */
}

/* Ensure dropdowns and form elements in geometry details are above map controls */
.geometry-details select,
.geometry-details .form-select,
.geometry-details .dropdown-menu {
    z-index: 1101 !important;
}

.geometry-details.active { display: block; }
.geometry-details:not(.active) { display: none; }

/* Overlay on medium and larger screens */
@media (min-width: 768px) {
    .geometry-details {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 600px;
        max-height: calc(100vh - 170px);
        overflow: auto;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        margin-top: 0; /* no extra margin in overlay mode */
        z-index: 1100 !important; /* Well above map controls (z-index: 1000) */
    }
    /* When details are visible, shift map controls to sit next to the box */
    .geometry-details.active ~ .map-controls {
        right: 620px; /* width + spacing */
    }
}

/* Entries Table Styling */
.entries-table .table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entries-table .table td { vertical-align: middle; font-size: 0.875rem; }
.entries-table .table tbody tr:hover { background-color: #f8f9fa; }
.entries-table .badge { font-size: 0.75rem; }
.entries-table .btn-group-sm .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.entries-table .pagination .page-link { color: var(--isr-primary); border-color: #dee2e6; }
.entries-table .pagination .page-item.active .page-link { background-color: var(--isr-primary); border-color: var(--isr-primary); }
.entries-table .search-form .form-control:focus { border-color: var(--isr-primary); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--isr-primary) 25%, transparent); }

/* Responsive Design */
@media (max-width: 767px) {
    /* Remove container padding for map on small screens */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container-fluid .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .container-fluid .row #mapColumn {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Map styling for small screens */
    .map-fullscreen {
        height: 500px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .map-controls { top: 5px; right: 5px; }
    .zoom-controls { top: 5px; left: 5px; }
    .map-controls .btn, .zoom-controls .btn { font-size: 0.875rem; padding: 0.5rem 0.75rem; }
    .zoom-controls .btn { width: 36px; height: 36px; }
}

/* Form & UI misc (trimmed to essentials) */
.form-control-sm,.form-select-sm{font-size:0.875rem;padding:0.25rem 0.5rem}
.entry-form{background:#fff;border-radius:0.375rem}
.entry-form .form-label{font-weight:600;color:#495057;margin-bottom:0.5rem}
.entry-form .form-control,.entry-form .form-select{border:1px solid #ced4da;border-radius:0.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.entry-form .form-control:focus,.entry-form .form-select:focus{border-color:var(--isr-primary);box-shadow:0 0 0 .2rem color-mix(in srgb, var(--isr-primary) 25%, transparent)}
.entry-form .form-text{font-size:.875rem;color:#6c757d;margin-top:.25rem}
.new-entry-form{border:2px dashed var(--isr-primary);background:linear-gradient(135deg,#f8f9ff 0%,#e6f3ff 100%)}
.new-entry-form .card-header{background:linear-gradient(135deg,var(--isr-primary) 0%,var(--isr-primary-light) 100%);color:#fff;border-bottom:none}
.new-entry-form .card-header h6{color:#fff;margin:0}

/* Form Field Groups */
.form-field-group {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}

.form-field-group .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

/* Required Field Indicator */
.form-label .text-danger {
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* Form Validation Styling */
.form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #198754;
}

/* Button Styling */
.btn-sm {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Table Styling */
.table-sm th,
.table-sm td {
    padding: 0.25rem 0.5rem;
}

/* Text Styling */
.text-muted {
    color: #6c757d !important;
}

.text-center {
    text-align: center !important;
}

/* Utility Classes */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.align-items-center {
    align-items: center !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.w-100 {
    width: 100% !important;
}

/* Card Styling */
.card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

.card-body {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Badge Styling */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

.bg-secondary {
    background-color: #6c757d !important;
}

/* Pagination Styling */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.375rem;
}

.page-item {
    margin: 0 0.125rem;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--isr-primary);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
    z-index: 2;
    color: #0a58ca;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--isr-primary);
    border-color: var(--isr-primary);
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Multiple choice field styling */
.multiple-choice-group {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
    background-color: #fff;
}

.multiple-choice-group .form-check {
    margin-bottom: 0.5rem;
}

.multiple-choice-group .form-check:last-child {
    margin-bottom: 0;
}

.multiple-choice-group .form-check-input {
    margin-top: 0.25rem;
}

.multiple-choice-group .form-check-label {
    margin-left: 0.25rem;
    cursor: pointer;
}

/* Read-only mapping area names: fill matches mapping outline (--mapping-area-outline-color from JS). */
.leaflet-tooltip.leaflet-mapping-area-name-tooltip {
    background: var(--mapping-area-outline-color, #ffc107) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 5px 10px;
    margin: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    white-space: normal;
    max-width: min(28rem, 90vw);
    text-align: center;
    pointer-events: none;
}

.leaflet-tooltip.leaflet-mapping-area-name-tooltip::before {
    display: none !important;
}

.leaflet-tooltip.leaflet-mapping-area-name-tooltip .leaflet-tooltip-tip {
    display: none !important;
}

/* ===== In-browser audio recorder: input level meter + toggle ===== */
.entry-audio-meter {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Single slim vertical bar, inline next to the record button */
.entry-audio-meter--compact {
    flex-shrink: 0;
    width: 6px;
    height: 1.625rem;
    min-height: 1.625rem;
    padding: 2px 1px;
}

.entry-audio-meter-bar {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.07);
}

.entry-audio-meter-bar-fill {
    width: 100%;
    height: 10%;
    min-height: 8%;
    border-radius: 1px;
    background: linear-gradient(180deg, #ffb547 0%, #fd7e14 35%, #dc3545 100%);
    transition: height 0.048s linear;
    align-self: flex-end;
}

.entry-audio-starting-spinner {
    vertical-align: -0.125em;
}

@keyframes entry-audio-recording-pulse {
    50% {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.22);
    }
}

.btn.entry-audio-toggle-recording.btn-danger {
    animation: entry-audio-recording-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .entry-audio-meter-bar-fill {
        transition: none;
    }

    .btn.entry-audio-toggle-recording.btn-danger {
        animation: none;
        box-shadow: none;
    }
}