/* plan.css — "Plan a dive" screen: depth map, drawing toolbar, side panel. */

.plan-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 16.8px;
    align-items: start;
}
/* Grid items default to min-width:auto, so one wide child (the hourly
   table) would stretch the whole column — and the map card — past the
   screen. Let them shrink; wide content scrolls inside its own box. */
.plan-screen > * { min-width: 0; }

/* ── Map card ──────────────────────────────────────────────────────────── */
.plan-map-card { display: flex; flex-direction: column; }
#plan-map {
    width: 100%;
    height: min(72vh, 640px);
    min-height: 360px;
    background: radial-gradient(120% 100% at 30% 20%, #1d2136, #0f111c);
    touch-action: none;
}
#plan-map.is-drawing { cursor: crosshair; }
/* While drawing, clicks pass through existing shapes to the map. */
#plan-map.is-drawing path.leaflet-interactive { pointer-events: none; }

.plan-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5.6px;
    padding: 8.4px;
    border-bottom: 1px solid var(--color-divider);
}
.plan-toolbar-spacer { flex: 1; }
.plan-tool {
    display: inline-flex;
    align-items: center;
    gap: 5.6px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.plan-tool:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.plan-tool:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.plan-tool[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.plan-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.plan-tool[hidden] { display: none; }
.plan-tool-finish { color: #5fd39a; border-color: #5fd39a; }

.plan-map-status {
    position: absolute;
    left: 50%;
    top: 62px;
    transform: translateX(-50%);
    z-index: 500;
    max-width: calc(100% - 24px);
    padding: 5.6px 11.2px;
    border-radius: 999px;
    background: rgba(22, 24, 38, 0.88);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    text-align: center;
}
.plan-map-status[hidden] { display: none; }

.plan-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 16.8px;
    padding: 8.4px 11.2px;
    border-top: 1px solid var(--color-divider);
    font-size: 12px;
    color: var(--color-neutral-300);
}
.plan-layers label { display: inline-flex; align-items: center; gap: 5.6px; cursor: pointer; }
.plan-layers input { accent-color: var(--color-accent); }

/* Map overlays */
.depth-readout {
    padding: 4px 8.4px;
    border-radius: 6px;
    background: rgba(22, 24, 38, 0.85);
    box-shadow: var(--shadow-sm);
    color: var(--color-neutral-200);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
/* Colour + halo come inline from the active depth palette. */
.leaflet-marker-icon.depth-label {
    background: none;
    border: 0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transform-origin: center;
}

.depth-legend {
    padding: 6px 8.4px 4px;
    border-radius: 8px;
    background: rgba(22, 24, 38, 0.85);
    box-shadow: var(--shadow-sm);
    color: var(--color-neutral-300);
    font-size: 10px;
}
.depth-legend-title { margin-bottom: 4px; letter-spacing: 0.04em; }
.depth-legend-scale { display: flex; }
.depth-legend-scale span { position: relative; display: block; width: 14px; padding-bottom: 12px; }
.depth-legend-scale i { display: block; height: 9px; }
.depth-legend-scale span:first-child i { border-radius: 3px 0 0 3px; }
.depth-legend-scale span:last-child i { border-radius: 0 3px 3px 0; }
.depth-legend-scale em {
    position: absolute;
    left: 0;
    bottom: 0;
    font-style: normal;
    color: var(--color-neutral-400);
    font-variant-numeric: tabular-nums;
}
.leaflet-marker-icon.plan-point-wrap { background: none; border: 0; }
.plan-point {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #161826;
    border: 2px solid var(--c);
    color: var(--c);
    font-size: 15px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
}
/* Custom divIcons are targeted as .leaflet-marker-icon.<class>: passing a
   className to L.divIcon *replaces* the default .leaflet-div-icon class, so
   .leaflet-div-icon.<class> selectors never match. */
/* Vertex handles: the marker itself is the 18 px dot (centred by Leaflet's
   iconAnchor); ::before extends the grab area by 12 px all round (≈42 px touch target). Colours
   match ROLE_STYLE in dive-plan-map.js. No transforms here — Leaflet
   positions markers with transform, so scaling would fight it. */
.leaflet-marker-icon.plan-vertex {
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--c);
    border: 3px solid #161826;
    box-shadow: 0 0 0 1.5px var(--c), 0 1px 4px rgba(0, 0, 0, 0.6);
    cursor: grab;
    touch-action: none;
}
.leaflet-marker-icon.plan-vertex.is-route { --c: #c7b8ff; }
.leaflet-marker-icon.plan-vertex.is-zone { --c: #f6d860; }
.leaflet-marker-icon.plan-vertex::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
}
.leaflet-marker-icon.plan-vertex:hover,
.leaflet-marker-icon.plan-vertex.leaflet-drag-target {
    box-shadow: 0 0 0 2px var(--c), 0 0 0 5px rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.6);
}
.leaflet-marker-icon.plan-vertex:active { cursor: grabbing; }
/* The point that finishes the draft: white centre + pulsing ring. */
.leaflet-marker-icon.plan-vertex.is-finish {
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--c), 0 0 0 5px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.6);
    animation: vertex-pulse 1.4s ease-in-out infinite;
}
@keyframes vertex-pulse {
    50% { box-shadow: 0 0 0 2px var(--c), 0 0 0 8px rgba(255, 255, 255, 0.12), 0 1px 4px rgba(0, 0, 0, 0.6); }
}
.plan-popup { display: grid; gap: 5.6px; min-width: 120px; }
.plan-popup-info { font-size: 12px; color: var(--color-neutral-300); }
.plan-popup-delete { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
}
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--color-neutral-400); }

/* ── Side panel ────────────────────────────────────────────────────────── */
.plan-panel {
    display: grid;
    /* Explicit shrinkable column: an implicit `auto` column grows to the
       widest child, so when the hourly table loads (a few seconds in) it
       would widen the column and push the 100%-wide inputs out of the card. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16.8px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.plan-panel > * { min-width: 0; }
.plan-panel .field { margin: 0; }
.plan-panel .input { max-width: 100%; }
.plan-when {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8.4px;
}
/* Native date/select controls have a wide intrinsic size; don't let it
   push the row wider than the card. */
.plan-when .input { min-width: 0; }
.plan-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8.4px;
    padding: 8.4px 11.2px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    font-size: 13px;
}
.plan-banner[hidden] { display: none; }
.plan-banner .btn { margin-left: auto; }

.plan-block h3 {
    margin: 0 0 8.4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
}
.plan-block .hint { margin: 6px 0 0; }
.plan-best { margin: 0 0 6px; font-size: 13px; color: #5fd39a; }

.plan-hours-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.plan-hours {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.plan-hours th,
.plan-hours td {
    padding: 5px 6px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-divider);
}
.plan-hours th { font-weight: 500; color: var(--color-neutral-500); font-size: 11px; }
.plan-hours tr.is-best td { background: rgba(95, 211, 154, 0.09); }
.plan-hours tr.is-best td:first-child { box-shadow: inset 2px 0 0 #5fd39a; }

.plan-depth-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    margin: 0;
    font-size: 13px;
}
.plan-depth-list dt { color: var(--color-neutral-500); }
.plan-depth-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.plan-profile { position: relative; height: 160px; margin-top: 10px; min-width: 0; overflow: hidden; }
.plan-profile[hidden] { display: none; }

.plan-actions { display: flex; flex-wrap: wrap; gap: 8.4px; }
.plan-actions .btn[hidden] { display: none; }
.plan-feedback { margin: 0; }
.plan-feedback.is-error { color: #f08a8a; }
.plan-panel > .hint { margin: 0; }

@media (max-width: 900px) {
    .plan-screen { grid-template-columns: minmax(0, 1fr); }
    #plan-map { height: 60vh; height: 60svh; min-height: 300px; }
}
@media (max-width: 700px) {
    .plan-screen { gap: 11.2px; }
    .plan-toolbar { gap: 4px; padding: 6px; }
    .plan-tool { min-height: 36px; padding: 4px 8px; font-size: 12px; gap: 4px; }
    .plan-layers { padding: 6px 11.2px; }
    .plan-panel { padding: 14px; gap: 12px; }
    .plan-hours { font-size: 12px; }
    .plan-hours th, .plan-hours td { padding: 4px 5px; }
    .plan-actions .btn { flex: 1 1 auto; justify-content: center; }
    /* Map overlays: keep the readout and legend from colliding. */
    .depth-readout { max-width: 52vw; font-size: 11px; }
    .depth-legend-scale span { width: 11px; }
}
@media (max-width: 420px) {
    .plan-when { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .plan-when .field:first-child { grid-column: 1 / -1; }
    .plan-tool span { display: none; }
    .plan-tool-finish span { display: inline; }
    .plan-tool { min-width: 40px; justify-content: center; }
}