@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Outfit', sans-serif; background: #faf9f7; }

/* ── Dash dropdown light theme ─────────────────────────────────────────────── */
.Select-control {
    background-color: #f0ede8 !important;
    border-color: #ddd9d2 !important;
    color: #433f36 !important;
}
.Select-menu-outer {
    background: #ffffff !important;
    border: 1px solid #ddd9d2 !important;
    z-index: 9999 !important;
}
.Select-option { background: #ffffff !important; color: #433f36 !important; }
.Select-option:hover, .Select-option.is-focused { background: #f0ede8 !important; color: #433f36 !important; }
.Select-option.is-selected { background: #e8e4de !important; color: #433f36 !important; }
.Select-value-label { color: #433f36 !important; }
.Select-placeholder { color: #9e9890 !important; }
.Select-input > input { color: #433f36 !important; background: transparent !important; }
.Select-arrow { border-color: #7a756c transparent transparent !important; }
.Select-clear { color: #7a756c !important; }
.Select--multi .Select-value {
    background: #e8e4de !important; border-color: #ddd9d2 !important;
    color: #433f36 !important; border-radius: 6px !important;
}
.Select--multi .Select-value-icon { border-right-color: #ddd9d2 !important; color: #7a756c !important; }
.Select--multi .Select-value-icon:hover { color: #c0392b !important; background: transparent !important; }
.dash-filter input { color: #433f36 !important; background: transparent !important; }
.dash-checklist label { color: #433f36; cursor: pointer; }
.dash-cell a { color: #2563eb !important; text-decoration: underline !important; font-weight: 600 !important; }
.dash-cell a:hover { color: #1d4ed8 !important; text-decoration: underline; }
.previous-page, .next-page, .last-page, .first-page, .page-number {
    color: #433f36 !important; background: #ffffff !important; border-color: #ddd9d2 !important;
}
.page-number.current { background: #f0ede8 !important; }
.dash-table-container input[type=number] {
    background: #ffffff !important; color: #433f36 !important;
    border: 1px solid #ddd9d2 !important; border-radius: 6px !important;
    outline: none !important; padding: 2px 6px !important;
}

/* ── Responsive header ─────────────────────────────────────────────────────── */
.saf-header {
    padding: 20px 16px 16px !important;
}
@media (min-width: 768px) {
    .saf-header { padding: 30px 40px 26px !important; }
}

/* ── Search bar: stack on mobile, row on desktop ───────────────────────────── */
.saf-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.saf-search-row input {
    flex: 1 1 140px;
    min-width: 0;
}
.saf-search-title {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .saf-search-title { width: 100%; margin-bottom: 2px; }
    .saf-search-row { gap: 6px; }
}

/* ── Map height: shorter on mobile ────────────────────────────────────────── */
.saf-map-wrap .leaflet-container {
    height: 260px !important;
}
@media (min-width: 576px) {
    .saf-map-wrap .leaflet-container { height: 340px !important; }
}
@media (min-width: 992px) {
    .saf-map-wrap .leaflet-container { height: 100% !important; min-height: 460px !important; }
}

/* ── Outer content padding ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .saf-content { padding: 28px 20px !important; }
}

/* ── Region/Access dropdowns: stack on small screens ──────────────────────── */
.saf-filter-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.saf-filter-row > div {
    flex: 1 1 140px;
    min-width: 0;
}
/* ── DataTable cell tooltip ────────────────────────────────────────────────── */
.dash-tooltip {
    background: #ffffff !important;
    border: 1px solid #ddd9d2 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    color: #433f36 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    max-width: 320px !important;
}