/* Django Unfold Custom Styles for GIS & Inline Field Fixes */

/* Leaflet controls: Do NOT override z-index values.
   Leaflet's internal hierarchy (tiles=200, controls=800+) is correct by default.
   The .leaflet-container creates its own stacking context (position:relative),
   so internal z-indices don't interfere with Unfold's UI elements. */

/* Fix input field styling to match Unfold's design system */
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="datetime-local"],
.form-row textarea,
.form-row select {
    border-radius: 0.375rem;
    border: 1px solid rgb(229 231 235);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Dark mode input styling */
.dark .form-row input[type="text"],
.dark .form-row input[type="number"],
.dark .form-row input[type="email"],
.dark .form-row input[type="url"],
.dark .form-row input[type="date"],
.dark .form-row input[type="time"],
.dark .form-row input[type="datetime-local"],
.dark .form-row textarea,
.dark .form-row select {
    border-color: rgb(55 65 81);
    background-color: rgb(31 41 55);
    color: rgb(243 244 246);
}

/* Focus state for inputs - uses primary color from design tokens */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: 2px solid rgb(var(--color-primary-500));
    outline-offset: 0;
    border-color: rgb(var(--color-primary-500));
}

/* Fix inline field buttons (add/edit/view) */
.inline-related .related-widget-wrapper-link,
.related-widget-wrapper-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgb(243 244 246);
    border: 1px solid rgb(209 213 219);
    color: rgb(55 65 81);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    margin-left: 0.5rem;
}

.related-widget-wrapper-link:hover {
    background-color: rgb(229 231 235);
    border-color: rgb(156 163 175);
    text-decoration: none;
}

/* Dark mode for related widget buttons */
.dark .inline-related .related-widget-wrapper-link,
.dark .related-widget-wrapper-link {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(229 231 235);
}

.dark .related-widget-wrapper-link:hover {
    background-color: rgb(75 85 99);
    border-color: rgb(107 114 128);
}

/* Fix for foreign key raw id widget buttons */
.related-widget-wrapper a.related-lookup,
.related-widget-wrapper a.add-related,
.related-widget-wrapper a.change-related,
.related-widget-wrapper a.delete-related,
.related-widget-wrapper a.view-related {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: rgb(243 244 246);
    border: 1px solid rgb(209 213 219);
    margin-left: 0.25rem;
    transition: all 0.15s ease-in-out;
}

.related-widget-wrapper a.related-lookup:hover,
.related-widget-wrapper a.add-related:hover,
.related-widget-wrapper a.change-related:hover,
.related-widget-wrapper a.delete-related:hover,
.related-widget-wrapper a.view-related:hover {
    background-color: rgb(229 231 235);
    border-color: rgb(156 163 175);
}

/* Dark mode for FK buttons */
.dark .related-widget-wrapper a.related-lookup,
.dark .related-widget-wrapper a.add-related,
.dark .related-widget-wrapper a.change-related,
.dark .related-widget-wrapper a.delete-related,
.dark .related-widget-wrapper a.view-related {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
}

.dark .related-widget-wrapper a.related-lookup:hover,
.dark .related-widget-wrapper a.add-related:hover,
.dark .related-widget-wrapper a.change-related:hover,
.dark .related-widget-wrapper a.delete-related:hover,
.dark .related-widget-wrapper a.view-related:hover {
    background-color: rgb(75 85 99);
    border-color: rgb(107 114 128);
}

/* Fix inline tabular styling */
.inline-related table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.inline-related table th {
    background-color: rgb(249 250 251);
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.dark .inline-related table th {
    background-color: rgb(31 41 55);
}

/* Fix inline row spacing and borders */
.inline-related table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgb(229 231 235);
}

.dark .inline-related table td {
    border-color: rgb(55 65 81);
}

/* Fix select2/autocomplete dropdown z-index */
.select2-container--default .select2-dropdown,
.select2-container--default .select2-results {
    z-index: 10000 !important;
}

/* GIS widget container fixes */
.module {
    position: relative;
    z-index: 1;
}

.module.gis-module {
    z-index: 10;
}

/* Ensure map containers have proper positioning */
.leaflet-container {
    z-index: 50;
    position: relative;
}

/* =============================================================================
   OpenLayers (Django GIS widget) fixes for Unfold/Tailwind compatibility
   ============================================================================= */

/* Ensure OL map container has proper dimensions and accepts interactions */
.dj_map_wrapper {
    position: relative !important;
    float: none !important; /* Override Django's ol3.css float:left which collapses width */
    z-index: 10;
    width: 100%;
}

.dj_map {
    width: 100% !important;
    min-height: 400px;
    height: 400px;
    cursor: crosshair;
    position: relative;
    z-index: 10;
}

/* Ensure OL canvas receives pointer events (Tailwind preflight can interfere) */
.dj_map canvas {
    display: block;
    pointer-events: auto;
}

/* OpenLayers control buttons - reset Tailwind's border/button resets */
.ol-control {
    position: absolute;
    z-index: 100;
}

.ol-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin: 1px;
    padding: 0;
    background-color: rgba(var(--color-primary-700), 0.5);
    color: white;
    font-size: 1.14em;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1;
}

.ol-control button:hover,
.ol-control button:focus {
    background-color: rgba(var(--color-primary-700), 0.7);
    outline: none;
}

/* OL zoom controls */
.ol-zoom {
    top: 0.5em;
    left: 0.5em;
}

/* OL attribution */
.ol-attribution {
    right: 0.5em;
    bottom: 0.5em;
}

/* Geometry type switcher controls (for Geometry/GeometryCollection fields) */
.switch-type {
    z-index: 101;
    pointer-events: auto;
    cursor: pointer;
}

/* "Delete all Features" link styling */
.clear_features {
    display: block;
    margin-top: 0.5rem;
}

.clear_features a {
    color: rgb(220, 38, 38);
    text-decoration: underline;
    font-size: 0.875rem;
    cursor: pointer;
}

.clear_features a:hover {
    color: rgb(185, 28, 28);
}

.dark .clear_features a {
    color: rgb(248, 113, 113);
}

.dark .clear_features a:hover {
    color: rgb(252, 165, 165);
}

/* Ensure the parent fieldset doesn't clip the OL map viewport */
.form-row:has(.dj_map_wrapper) {
    overflow: visible;
}

/* OL overlay container (popups, tooltips) */
.ol-overlaycontainer-stopevent {
    z-index: 200;
    pointer-events: none;
}

.ol-overlaycontainer-stopevent > * {
    pointer-events: auto;
}

/* Fix for municipality dropdown in POI admin */
.field-municipality select,
.field-municipality .related-widget-wrapper {
    width: 100%;
}

.field-municipality .related-widget-wrapper select {
    max-width: calc(100% - 3rem);
}

/* Better spacing for related widget wrappers in inlines */
.inline-related .field-municipality .related-widget-wrapper,
.inline-related .related-widget-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fix for add/change/delete buttons in inline ForeignKey fields */
.inline-related .related-widget-wrapper a img {
    display: none;
}

.inline-related .related-widget-wrapper a::before {
    font-family: 'Material Symbols Outlined';
    font-size: 1.125rem;
}

.inline-related .related-widget-wrapper a.add-related::before {
    content: 'add';
}

.inline-related .related-widget-wrapper a.change-related::before {
    content: 'edit';
}

.inline-related .related-widget-wrapper a.view-related::before {
    content: 'visibility';
}

.inline-related .related-widget-wrapper a.delete-related::before {
    content: 'delete';
}

/* Improve overall inline field layout */
.inline-group {
    margin-top: 1rem;
}

.inline-related h3 {
    margin-bottom: 1rem;
}

/* Fix collapsible fieldset styling - use overflow:visible when containing GIS maps */
.collapse {
    border-radius: 0.5rem;
    overflow: hidden;
}
.collapse:has(.dj_map_wrapper) {
    overflow: visible;
}

/* =============================================================================
   UX badges (scan-friendly pills for status / SLA / etc)
   ============================================================================= */

.ux-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 600;
    border: 1px solid rgb(229 231 235);
    background-color: rgb(249 250 251);
    color: rgb(55 65 81);
    white-space: nowrap;
}

.ux-badge--green { background-color: rgb(236 253 245); border-color: rgb(167 243 208); color: rgb(6 95 70); }
.ux-badge--red { background-color: rgb(254 242 242); border-color: rgb(254 202 202); color: rgb(153 27 27); }
.ux-badge--amber { background-color: rgb(255 251 235); border-color: rgb(253 230 138); color: rgb(146 64 14); }
.ux-badge--blue { background-color: rgb(239 246 255); border-color: rgb(191 219 254); color: rgb(30 64 175); }
.ux-badge--violet { background-color: rgb(245 243 255); border-color: rgb(221 214 254); color: rgb(91 33 182); }
.ux-badge--slate { background-color: rgb(241 245 249); border-color: rgb(226 232 240); color: rgb(51 65 85); }

.dark .ux-badge {
    border-color: rgb(55 65 81);
    background-color: rgb(31 41 55);
    color: rgb(229 231 235);
}

.dark .ux-badge--green { background-color: rgb(6 78 59); border-color: rgb(16 185 129); color: rgb(209 250 229); }
.dark .ux-badge--red { background-color: rgb(127 29 29); border-color: rgb(239 68 68); color: rgb(254 226 226); }
.dark .ux-badge--amber { background-color: rgb(120 53 15); border-color: rgb(245 158 11); color: rgb(255 237 213); }
.dark .ux-badge--blue { background-color: rgb(30 58 138); border-color: rgb(59 130 246); color: rgb(219 234 254); }
.dark .ux-badge--violet { background-color: rgb(76 29 149); border-color: rgb(139 92 246); color: rgb(237 233 254); }
.dark .ux-badge--slate { background-color: rgb(15 23 42); border-color: rgb(71 85 105); color: rgb(226 232 240); }

/* Small helper table used in admin readonly fields */
.ux-mini-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 0.5rem;
}
.ux-mini-table th, .ux-mini-table td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgb(229 231 235);
    text-align: left;
    vertical-align: top;
}
.ux-mini-table th {
    background-color: rgb(249 250 251);
    font-weight: 700;
}
.dark .ux-mini-table th { background-color: rgb(31 41 55); }
.dark .ux-mini-table th, .dark .ux-mini-table td { border-color: rgb(55 65 81); }

/* Better form row spacing */
.form-row {
    margin-bottom: 1rem;
}

/* Fix for readonly fields in inlines */
.inline-related .readonly {
    padding: 0.5rem 0.75rem;
    background-color: rgb(249 250 251);
    border-radius: 0.375rem;
    color: rgb(107 114 128);
}

.dark .inline-related .readonly {
    background-color: rgb(31 41 55);
    color: rgb(156 163 175);
}

/* =============================================================================
   Changelist action bar vs sticky results bar overlap fix
   ============================================================================= */

/* Unfold's sticky result count bar (z-40, sticky, bottom-0) overlaps with the
   fixed action bar (z-50, fixed, bottom-0) when checkboxes are selected.
   The backdrop-filter on the sticky bar creates a stacking context that can
   visually obscure the action bar. Hide the sticky bar when actions are active. */
#main:has(input.action-select:checked) > .z-40[class*="lg:sticky"] {
    display: none !important;
}

/* === KPI Cards (Dashboard) === */
.ux-kpi-card {
    background: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
}
.dark .ux-kpi-card {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}
.ux-kpi-card__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(17 24 39);
}
.dark .ux-kpi-card__value {
    color: rgb(243 244 246);
}
.ux-kpi-card__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgb(107 114 128);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.dark .ux-kpi-card__label {
    color: rgb(156 163 175);
}