/*
 * mapwidgets_unfold.css
 * Overrides do widget de mapa para seguir o padrão visual do Unfold admin.
 *
 * Paleta primária (roxa/violeta) do Unfold:
 *   primary-500  oklch(62.7% .265 303.9)   → cor de ação/destaque
 *   primary-600  oklch(55.8% .288 302.321) → hover/foco
 *   primary-700  oklch(49.6% .265 301.924) → active
 *   base-200     oklch(92.8% .006 264.531) → bordas suaves
 *   base-600     oklch(44.6% .03  256.802) → texto padrão modo claro
 *
 * Carregado via UNFOLD["STYLES"] para garantir precedência sobre
 * os estilos base do pacote.
 */

/* ───────────────────────────────────────────────
   Container geral
─────────────────────────────────────────────── */
.mw-wrap {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    width: 100%;
    min-width: 0;
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 12px;
}

.mw-wrap * {
    border-radius: 6px !important;
    box-sizing: border-box;
}

/* ───────────────────────────────────────────────
   Campo de input / geocoder
─────────────────────────────────────────────── */
.mw-wrap .form-control,
.mw-wrap .mapboxgl-ctrl-geocoder--input {
    border: 1px solid oklch(87.2% .01 258.338);  /* base-300 */
    background-color: #fff;
    color: oklch(27.8% .033 256.848);              /* base-800 */
    font-size: 13px;
    height: 34px;
    padding: 5px 10px;
    border-radius: 6px !important;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mw-wrap .form-control:focus,
.mw-wrap .mapboxgl-ctrl-geocoder--input:focus {
    border-color: oklch(62.7% .265 303.9);         /* primary-500 */
    box-shadow: 0 0 0 3px oklch(90.2% .063 306.703 / 0.35); /* primary-200 */
    outline: none;
}

/* ───────────────────────────────────────────────
   Header e footer
─────────────────────────────────────────────── */
.mw-header {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.mw-footer {
    padding: 8px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mw-help-text.help-text {
    font-size: 11.5px;
    color: oklch(55.1% .027 264.364);  /* base-500 */
    font-style: italic;
}

/* ───────────────────────────────────────────────
   Botões — reset completo do estilo Bootstrap antigo
─────────────────────────────────────────────── */
.mw-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    border-radius: 6px !important;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: none;
    text-shadow: none;
    background-image: none !important;
}

.mw-btn:active,
.mw-btn.active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12) !important;
}

/* — default (cinza neutro Unfold) */
.mw-btn-default {
    color: oklch(37.3% .034 259.733);           /* base-700 */
    background-color: oklch(96.7% .003 264.542); /* base-100 */
    border-color: oklch(87.2% .01 258.338);      /* base-300 */
}
.mw-btn-default:hover {
    background-color: oklch(92.8% .006 264.531); /* base-200 */
    border-color: oklch(70.7% .022 261.325);     /* base-400 */
    color: oklch(27.8% .033 256.848);            /* base-800 */
}
.mw-btn-default:focus {
    box-shadow: 0 0 0 3px oklch(90.2% .063 306.703 / 0.30);
}
.mw-btn-default.active {
    background-color: oklch(82.7% .119 306.383); /* primary-300 */
    border-color: oklch(62.7% .265 303.9);
    color: #fff;
}

/* — warning → "Marcar no Mapa" (primário Unfold) */
.mw-btn-warning {
    color: #fff;
    background-color: oklch(62.7% .265 303.9);   /* primary-500 */
    border-color: oklch(55.8% .288 302.321);      /* primary-600 */
}
.mw-btn-warning:hover,
.mw-btn-warning:focus {
    background-color: oklch(55.8% .288 302.321);  /* primary-600 */
    border-color: oklch(49.6% .265 301.924);       /* primary-700 */
}
.mw-btn-warning.active {
    background-color: oklch(49.6% .265 301.924);   /* primary-700 */
    border-color: oklch(43.8% .218 303.724);
}

/* — info → "Minha Localização" (primary mais claro) */
.mw-btn-info {
    color: #fff;
    background-color: oklch(71.4% .203 305.504);  /* primary-400 */
    border-color: oklch(62.7% .265 303.9);         /* primary-500 */
}
.mw-btn-info:hover,
.mw-btn-info:focus {
    background-color: oklch(62.7% .265 303.9);
    border-color: oklch(55.8% .288 302.321);
}

/* — success → "Confirmar" coordenadas (verde suave) */
.mw-btn-success {
    color: #fff;
    background-color: oklch(52% .17 145);         /* verde medium */
    border-color: oklch(45% .18 145);
}
.mw-btn-success:hover,
.mw-btn-success:focus {
    background-color: oklch(45% .18 145);
}

/* — danger → "Excluir" */
.mw-btn-danger {
    color: #fff;
    background-color: oklch(55% .22 27);          /* vermelho Unfold */
    border-color: oklch(48% .23 27);
}
.mw-btn-danger:hover,
.mw-btn-danger:focus {
    background-color: oklch(48% .23 27);
}

.mw-btn.disabled,
.mw-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none !important;
    pointer-events: none;
}

/* ───────────────────────────────────────────────
   Painel de overlay de coordenadas
─────────────────────────────────────────────── */
.mw-coordinates-overlay {
    background: oklch(98.5% .002 247.839);   /* base-50 */
    border: 1px solid oklch(87.2% .01 258.338);
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 10000;
}

.mw-coordinates-overlay label {
    font-size: 12px;
    font-weight: 500;
    color: oklch(44.6% .03 256.802);   /* base-600 */
}

/* ───────────────────────────────────────────────
   Mapa
─────────────────────────────────────────────── */
.mw-map,
.mw-map-wrapper {
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid oklch(87.2% .01 258.338); /* base-300 */
}

/* ───────────────────────────────────────────────
   Geocoder Mapbox inline
─────────────────────────────────────────────── */
.mw-wrap .mapboxgl-ctrl-geocoder {
    border: 1px solid oklch(87.2% .01 258.338);
    border-radius: 6px !important;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
}
.mw-wrap .mapboxgl-ctrl-geocoder--input {
    height: 34px;
    padding: 5px 10px 5px 32px;
}

/* ───────────────────────────────────────────────
   Loader
─────────────────────────────────────────────── */
.mw-loader-overlay {
    background: oklch(98.5% .002 247.839 / 0.80);
    border-radius: 8px !important;
}

/* ───────────────────────────────────────────────
   Modo escuro (dark mode Unfold via prefers-color-scheme
   ou classe .dark aplicada pelo Unfold no <html>)
─────────────────────────────────────────────── */
html.dark .mw-wrap .form-control,
html.dark .mw-wrap .mapboxgl-ctrl-geocoder--input {
    background-color: oklch(21% .034 264.665);   /* base-900 */
    border-color: oklch(37.3% .034 259.733);     /* base-700 */
    color: oklch(92.8% .006 264.531);            /* base-200 */
}

html.dark .mw-btn-default {
    background-color: oklch(27.8% .033 256.848);  /* base-800 */
    border-color: oklch(37.3% .034 259.733);      /* base-700 */
    color: oklch(87.2% .01 258.338);              /* base-300 */
}
html.dark .mw-btn-default:hover {
    background-color: oklch(37.3% .034 259.733);
}

html.dark .mw-coordinates-overlay {
    background: oklch(21% .034 264.665);
    border-color: oklch(37.3% .034 259.733);
    color: oklch(87.2% .01 258.338);
}

html.dark .mw-map,
html.dark .mw-map-wrapper {
    border-color: oklch(37.3% .034 259.733);
}

html.dark .mw-help-text.help-text {
    color: oklch(70.7% .022 261.325);
}