/* Zones page: builds on the clm-* map-page styles (customer-location-map.css) and the
   sam-* overlay column (service-assets.css). Global rather than a scoped .razor.css for the
   same reason those two are: the rules have to reach Mapbox's own chrome, which renders
   outside the component's scope attribute. Colours come from the --st-* tokens only.

   The panels speak the CreateTaskDialog vocabulary: .st-form + .st-section blocks, outlined
   dense fields, and vertical rhythm owned by the container's gap. */

/* The page fills exactly what is left under the sticky page header. .st-main is a 100vh
   flex column, so claiming the remainder as a flex child is exact; .clm-page's own
   height:calc(100vh - 60px) guesses at a 60px header, overshoots the real one and leaves
   the page with a permanent sliver of vertical scroll. */
.zn-page {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* ── Left column: the zone list ───────────────────────────────────────────── */
/* The shell, header, toolbar and rows are the Asset service map's panel (.sam-list-panel,
   .sam-panel-*, .sam-row in service-assets.css), so the two map pages read as one section. */
.zn-panel { width: 340px; }

/* A zone row is a real button (keyboard reachable), so the native chrome is reset. */
button.sam-row.zn-row {
    width: 100%; margin: 0; border: none; border-bottom: 1px solid var(--st-border-light);
    background: var(--st-white); text-align: left; font: inherit; color: inherit;
}
button.sam-row.zn-row:hover { background: var(--st-bg); }
button.sam-row.zn-row.active { background: var(--st-primary-light); box-shadow: inset 3px 0 0 var(--st-primary); }
button.sam-row.zn-row:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -2px; }
.zn-row.inactive .sam-row-main { opacity: 0.6; }
.zn-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.zn-row-badges { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
/* Loading placeholder rows in the list. */
.zn-swatch.st-skeleton { height: 12px; }
.zn-skel-count { width: 56px; height: 20px; flex-shrink: 0; }
.zn-list .st-empty-state { padding-left: 16px; padding-right: 16px; }

/* ── The editor panel shell ─────────────────────────────────────────────────── */
/* Solid surface, never translucent: the map underneath is busy and reading a form through it is
   what made the old panel feel unfinished. */
.zn-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-md);
    overflow: hidden;
    pointer-events: auto;
}

/* ── Right column: the zone editor ────────────────────────────────────────── */
.zn-editor {
    width: 360px;
    margin-left: auto;
}

.zn-editor-head {
    flex-shrink: 0;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid var(--st-border);
}
.zn-editor-head .st-dialog-title__text { flex: 1; min-width: 0; }
.zn-editor-head .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-editor-tile.icon-tile { background: var(--st-bg-alt); }
.zn-editor-swatch { width: 14px; height: 14px; border-radius: 4px; }

/* Sections are spaced like .st-dialog-col (24px between blocks, 10px inside one, from
   .st-dialog-grid .st-section). No per-field margins: .st-form neutralises those. */
.zn-editor-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-6);
    padding: var(--st-space-4);
}

/* Colour picker as a field row: same 38px box as an outlined dense input, so the swatch
   sits inline with its label and the row lines up with the fields above and below. */
.zn-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 8px 0 12px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    transition: border-color var(--st-duration-fast);
}
.zn-color-row:hover { border-color: var(--st-border-hover); }
.zn-color-row > label {
    flex: 1;
    min-width: 0;
    font-family: var(--st-font-body);
    font-size: 14px;
    color: var(--st-muted);
    cursor: pointer;
}
.zn-color-row input[type="color"] {
    width: 48px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background: var(--st-white);
    cursor: pointer;
}
.zn-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.zn-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

/* Boundary actions: equal-width outlined pair, one row, never clipped. */
.zn-editor-actions { display: flex; gap: var(--st-space-2); }
.zn-editor-actions > * { min-width: 0; }

.zn-editor-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--st-space-2);
    padding: 12px var(--st-space-4);
    border-top: 1px solid var(--st-border);
    background: var(--st-white);
}
/* The destructive action stays a quiet text button at the left of the footer, the way the
   task dialog keeps its low-frequency action out of the Cancel/Save pair. The .st-form
   prefix is what beats the adapter's own text-button colour. */
.st-form .zn-btn-delete.mud-button-root { color: var(--st-error); }
.st-form .zn-btn-delete.mud-button-root:hover { background: var(--st-error-light); }

.zn-hint { font-size: 12px; color: var(--st-muted); line-height: 1.45; }

/* Push the map zoom +/- controls below the floating toolbar, as the asset map does. */
.clm-map-area.zn-map-area .mapboxgl-ctrl-top-right { margin-top: 60px; }

/* The panels are the page's working surface and sit bottom-right, exactly where the global
   bug-report FAB floats (position:fixed, z-index 1000), which otherwise covers the editor
   footer's Save. .sam-overlay carries z-index 10 and so opens a stacking context, so the
   lift has to happen on the overlay itself, not on the panel inside it. */
.zn-map-area .sam-overlay { z-index: 1001; }

/* ── Import dialog ────────────────────────────────────────────────────────── */
/* Global, not scoped: a MudDialog's body is portaled out of the page component's scope. */
.zn-import-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.zn-import-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--st-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--st-border);
    position: sticky;
    top: 0;
    background: var(--st-white);
}
.zn-import-table td { padding: 7px 10px; border-bottom: 1px solid var(--st-border-light); color: var(--st-text); }
.zn-import-table tr:last-child td { border-bottom: none; }
.zn-import-scroll {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
}
.zn-import-samples { color: var(--st-subtle); font-size: 11px; }

/* Read-only "what we found in the file" facts, styled as the dialog styles a caption. */
.zn-import-facts { display: flex; flex-wrap: wrap; gap: var(--st-space-6); }
.zn-import-fact { min-width: 0; }
.zn-import-fact > .v { font-size: 13px; font-weight: 600; color: var(--st-text-strong); }

/* The dashed drop zone. Same 1.5px dashed token border as .st-attach in the design system,
   laid out as a tall target instead of a row. */
.zn-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 24px;
    border: 1.5px dashed var(--st-border-hover);
    border-radius: 10px;
    background: var(--st-white);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}
.zn-dropzone:hover { border-color: var(--st-primary); background: #F5F8FF; }
.zn-dropzone.dragover { border-color: var(--st-primary); background: var(--st-primary-light); }
.zn-dropzone.has-file { border-color: var(--st-success); }
/* The real <input type=file> stays in the DOM (the label targets it) but out of sight. */
.zn-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Small caption above a bare input, matching the .st-section-title label scale. */
.zn-field-label {
    font-family: var(--st-font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Zone overlay toggle on the service-asset map: its own pill under the cluster toggle,
   reusing the .sam-styletoggle chrome from service-assets.css. */
.sam-zonetoggle-group { top: 206px; }