/* ============================================================================
 * Design System — Utilities
 * Helpers que Bootstrap no cubre y aliases para uso interno.
 * ============================================================================ */

/* Surface variants */
.ds-surface       { background-color: var(--ds-bg-surface); }
.ds-surface-muted { background-color: var(--ds-bg-muted); }
.ds-surface-page  { background-color: var(--ds-bg-page); }

/* Borders */
.ds-border        { border: 1px solid var(--ds-border); }
.ds-border-top    { border-top: 1px solid var(--ds-border); }
.ds-border-bottom { border-bottom: 1px solid var(--ds-border); }

/* Radius */
.ds-rounded-sm { border-radius: var(--ds-radius-sm); }
.ds-rounded-md { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }

/* Shadow */
.ds-shadow-xs { box-shadow: var(--ds-shadow-xs); }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }

/* Stack helpers (vertical and horizontal flex with gap) */
.ds-stack    { display: flex; flex-direction: column; }
.ds-stack-h  { display: flex; align-items: center; }
.ds-gap-1 { gap: 4px; }
.ds-gap-2 { gap: 8px; }
.ds-gap-3 { gap: 12px; }
.ds-gap-4 { gap: 16px; }
.ds-gap-5 { gap: 20px; }
.ds-gap-6 { gap: 24px; }

/* Semantic aliases — mirror Tailwind's t-shirt scale so templates can use
   names instead of magic numbers. ``xs`` is intentionally smaller than the
   numeric range starts at. */
.ds-gap-xs { gap: 4px; }
.ds-gap-sm { gap: 8px; }
.ds-gap-md { gap: 16px; }
.ds-gap-lg { gap: 24px; }
.ds-gap-xl { gap: 32px; }

/* Visually hidden but accessible */
.ds-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icon sizing helper (for <svg> rendered by template tag) */
.ds-icon-12 { width: 12px; height: 12px; }
.ds-icon-14 { width: 14px; height: 14px; }
.ds-icon-16 { width: 16px; height: 16px; }
.ds-icon-18 { width: 18px; height: 18px; }
.ds-icon-20 { width: 20px; height: 20px; }
.ds-icon-24 { width: 24px; height: 24px; }
.ds-icon-32 { width: 32px; height: 32px; }

/* Map (Leaflet) container — /sites/ map + create/edit map-picker.
   ``isolation: isolate`` + ``z-index: 0`` box Leaflet's internal pane/control
   z-indexes into their own stacking context so popups/controls never bleed over
   the app sidebar or topbar. Height is a local custom prop so a media query can
   shrink it on small screens. */
.ds-map {
    height: var(--ds-map-h, 520px);
    width: 100%;
    position: relative;
    z-index: 0;
    isolation: isolate;
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-bg-muted);
}
.ds-map--sm { --ds-map-h: 340px; }
@media (max-width: 991.98px) {
    .ds-map { --ds-map-h: 360px; }
    .ds-map--sm { --ds-map-h: 300px; }
}

/* Building marker glyph rendered inside a Leaflet divIcon. */
.ds-map-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--bs-primary);
    background-color: var(--ds-bg-surface);
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: var(--ds-shadow-sm);
}
.ds-map-marker svg { transform: rotate(45deg); }

/* Geofence radius circle (Leaflet path). CSS wins over Leaflet's inline stroke
   attribute, so the circle tracks the theme-aware brand color. */
.ds-map-geofence {
    stroke: var(--bs-primary);
    fill: var(--bs-primary);
}

/* Rows that pan the sites map when clicked. */
.ds-row-clickable { cursor: pointer; }

/* Column that stays pinned while the sibling list scrolls (e.g. the sites map).
   Only sticky on wide screens where the split layout is side-by-side. */
@media (min-width: 1200px) {
    .ds-sticky-col { position: sticky; top: 16px; }
}

/* Section divider for grouped content */
.ds-section-title {
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
    margin: 24px 0 8px;
}