/* Mapa de estações de recarga (componente Livewire oncharge.charge-points-map).
   Usado na página /mapa e embutido na home. Tudo escopado em .oc-map-wrap
   para não sofrer com o CSS do template da home. */

.oc-map-wrap {
    --oc-green: #71ca00;
    --oc-green-dark: #5fab00;
    --oc-text: #1f2937;
    --oc-muted: #6b7280;
    --oc-border: #e5e7eb;

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--oc-text);
    background: #e9eef2;
}
.oc-map-wrap *, .oc-map-wrap *::before, .oc-map-wrap *::after { box-sizing: border-box; }

/* Embutido na home */
.oc-map-wrap.oc-embedded {
    height: 600px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
/* Tela cheia (feita por CSS para funcionar igual em todos os navegadores, inclusive iOS) */
.oc-map-wrap.oc-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
}
body.oc-has-fullscreen { overflow: hidden; }

.oc-map-wrap .oc-map { position: absolute; inset: 0; z-index: 0; }

.oc-map-wrap .oc-panel {
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: var(--oc-text);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    padding: 12px 14px;
}
.oc-map-wrap .oc-filters { top: 12px; left: 12px; width: 260px; }
.oc-map-wrap .oc-filters label {
    display: block; font-weight: 600; font-size: 12px; margin: 6px 0 3px;
    color: var(--oc-muted); text-transform: none; letter-spacing: 0;
}
.oc-map-wrap .oc-filters select {
    width: 100%; padding: 6px 8px; border: 1px solid var(--oc-border);
    border-radius: 6px; background: #fff; color: var(--oc-text); font: inherit; height: auto;
}
.oc-map-wrap .oc-meta { margin-top: 10px; font-size: 12px; color: var(--oc-muted); }
.oc-map-wrap .oc-meta strong { color: var(--oc-text); }

.oc-map-wrap .oc-legend { bottom: 24px; right: 12px; padding: 10px 12px; }
.oc-map-wrap .oc-legend p { margin: 0 0 6px; font-weight: 700; color: var(--oc-text); }
.oc-map-wrap .oc-legend ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 14px; }
.oc-map-wrap .oc-legend li {
    display: flex; align-items: center; gap: 6px; margin: 3px 0;
    break-inside: avoid; white-space: nowrap; color: var(--oc-text); font-size: 13px;
}
.oc-map-wrap .oc-legend img { width: 16px; height: auto; }

/* Botões flutuantes (legenda no celular, tela cheia, fechar) */
.oc-map-wrap .oc-btn {
    position: absolute; z-index: 1001;
    background: #fff; color: var(--oc-text); border: 0; border-radius: 8px; padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font: inherit; font-weight: 600; cursor: pointer;
    line-height: 1.2;
}
.oc-map-wrap .oc-btn:hover { background: #f3f4f6; }
.oc-map-wrap .oc-legend-toggle { display: none; top: 12px; right: 12px; }
.oc-map-wrap .oc-fs-btn { top: 12px; right: 12px; }
.oc-map-wrap .oc-fs-close { display: none; top: 12px; right: 12px; background: var(--oc-green); color: #fff; font-size: 20px; padding: 4px 12px; }
.oc-map-wrap.oc-fullscreen .oc-fs-btn { display: none; }
.oc-map-wrap.oc-fullscreen .oc-fs-close { display: block; }

/* Popup */
.oc-map-wrap .leaflet-popup-content-wrapper { border-radius: 8px; color: var(--oc-text); }
.oc-map-wrap .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.4; color: var(--oc-text); }
.oc-map-wrap .oc-pop h3 {
    margin: 0 0 2px; font-size: 15px; line-height: 1.3; font-weight: 700;
    color: var(--oc-text); text-transform: none; letter-spacing: 0;
}
.oc-map-wrap .oc-pop .oc-desc { color: var(--oc-muted); margin-bottom: 6px; }
.oc-map-wrap .oc-pop .oc-row { margin: 3px 0; }
.oc-map-wrap .oc-pop .oc-label { color: var(--oc-muted); }
.oc-map-wrap .oc-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: #fff; vertical-align: middle; line-height: 1.4;
}
.oc-map-wrap .oc-badge.Available { background: #16a34a; }
.oc-map-wrap .oc-badge.Charging { background: #ea580c; }
.oc-map-wrap .oc-badge.Faulted { background: #dc2626; }
.oc-map-wrap .oc-badge.Maintenance { background: #2563eb; }
.oc-map-wrap .oc-badge.Unavailable { background: #6b7280; }
.oc-map-wrap .oc-badge.Offline { background: #111827; }
.oc-map-wrap .oc-conn { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.oc-map-wrap .oc-conn th {
    text-align: left; font-size: 11px; color: var(--oc-muted); font-weight: 600;
    padding: 2px 4px; border-bottom: 1px solid var(--oc-border); background: none;
}
.oc-map-wrap .oc-conn td { padding: 3px 4px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: var(--oc-text); }
.oc-map-wrap .oc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.oc-map-wrap .oc-dot.Available { background: #16a34a; }
.oc-map-wrap .oc-dot.Charging, .oc-map-wrap .oc-dot.Preparing, .oc-map-wrap .oc-dot.Finishing,
.oc-map-wrap .oc-dot.SuspendedEV, .oc-map-wrap .oc-dot.SuspendedEVSE, .oc-map-wrap .oc-dot.Reserved { background: #ea580c; }
.oc-map-wrap .oc-dot.Faulted { background: #dc2626; }
.oc-map-wrap .oc-dot.Maintenance { background: #2563eb; }
.oc-map-wrap .oc-dot.Unavailable, .oc-map-wrap .oc-dot.Unknown { background: #6b7280; }
.oc-map-wrap .oc-conn small { display: block; color: var(--oc-muted); font-size: 11px; line-height: 1.3; }
.oc-map-wrap .oc-conn .oc-err { color: #b91c1c; }
.oc-map-wrap .oc-pop a { color: var(--oc-green-dark); text-decoration: underline; }
.oc-map-wrap .oc-pop .oc-foot { margin-top: 6px; font-size: 11px; color: var(--oc-muted); }

@media (max-width: 640px) {
    .oc-map-wrap .oc-filters { width: calc(100% - 24px); }
    .oc-map-wrap .oc-legend { display: none; }
    .oc-map-wrap .oc-legend.open { display: block; bottom: auto; top: 56px; }
    .oc-map-wrap .oc-legend-toggle { display: block; right: auto; left: 12px; top: auto; bottom: 24px; }
    .oc-map-wrap.oc-embedded { height: 520px; }
    /* No celular a home já tem o botão grande "Tela Cheia" acima do mapa; o botão flutuante sobreporia os filtros. */
    .oc-map-wrap.oc-embedded:not(.oc-fullscreen) .oc-fs-btn { display: none; }
}