/* ==========================================================================
   OpZone - SiteAdmin / My Sites dashboard
   Role: address map picker, sites table, site details, social links + logo,
         opening hours, site admin toolbar, tokens (NFC) + tag / category rows.
         (The site boundary editor moved to the Designer's layout builder -
         opz-layout-builder.css - and its rules are gone from here.)
   Load position: 6 of 8 in the website opz-*.css chain.
   ========================================================================== */

/* ==========================================================================
   Map surfaces (dark — screens only)
   ========================================================================== */

/* Reusable map surface. Dark while tiles load; framed like the site's other
   screen surfaces. */
.opz-map {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    border: 1px solid var(--opz-screen-frame);
    background-color: var(--opz-screen);
    overflow: hidden;
}

/* MapPickerDialog body — the map fills the dialog width at a fixed height. */
.opz-map-picker {
    width: 100%;
}

.opz-map-picker .opz-map {
    height: 400px;
}

/* "Select from map" trigger under the address autocomplete. */
.opz-map-pick-btn {
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Site admin toolbar (site dropdown + New Site, shared by the three SiteAdmin
   pages)
   ========================================================================== */

.opz-sites-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sites-placeholder {
    color: var(--opz-panel-text-soft);
}

/* The selector is the primary control of these pages — it replaced the old
   avatar rail — so the bar gets its own band: one hairline under it separates
   "which site am I looking at" from that site's content. Flex-wrap means the
   field takes the whole row and the button drops beneath it before anything
   can overflow. */
.opz-siteadmin-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--opz-panel-border);
}

.opz-siteadmin-toolbar-select {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
}

/* One control height for the bar. MudBlazor's dense outlined field box is ~37px
   (its line box plus the value slot's own padding), a visible 5px short of the
   42px icon button, so the field is pinned to the button's height and its value
   is centred by the input's own align-items. The long selector is needed to
   out-specify MudBlazor's padding on the select's value slot. */
.opz-siteadmin-toolbar .opz-siteadmin-toolbar-select .mud-input.mud-input-outlined {
    height: 42px;
}

.opz-siteadmin-toolbar .opz-siteadmin-toolbar-select .mud-input .mud-input-slot {
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 600;
    color: var(--opz-panel-text);
}

/* Pinned rather than left to the icon's line box, so the 42px above is a fact
   and not a guess about the start icon's size. */
.opz-siteadmin-toolbar .mud-button-root.mud-button {
    flex: 0 0 auto;
    height: 42px;
    white-space: nowrap;
}

/* Row inside a MudSelectItem: name + status hint. MudBlazor 9 ignores Text when
   ChildContent is set, so the row is drawn here. */
.opz-siteadmin-toolbar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.opz-siteadmin-toolbar-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Suspended is a state, not a footnote — warning tone instead of silent grey. */
.opz-siteadmin-toolbar-item-hint {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-warning);
}

@media (max-width: 560px) {
    /* In-app browser panel and phones: full-width field, button beneath it. */
    .opz-siteadmin-toolbar-select {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ==========================================================================
   Site info panel (read-only information surface)
   ========================================================================== */

.opz-siteinfo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 6px;
}

/* Access and state sit at opposite ends of the header: "can I change this?" and
   "is it live?" are two different facts and neither should drown the other. */
.opz-siteinfo-head-start {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.opz-siteinfo-viewonly {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-siteinfo-viewonly .mud-icon-size-small {
    font-size: 1rem;
}

/* Edit and Suspend share one full-width column because they are the two real
   operations on this site; Delete deliberately breaks that pattern (text
   weight, behind a rule) so the stack cannot be mistaken for a menu. */
.opz-siteinfo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.opz-siteinfo-danger {
    display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--opz-panel-border);
}

/* Social links read as a small key/value list instead of one long sentence. */
.opz-siteinfo-social {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.opz-siteinfo-social-platform {
    min-width: 84px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-siteinfo-social-url {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Opening times: a read-only timetable, not a disabled editor. Two columns
   (day / hours) so a week scans vertically like a sign on the gate. */
.opz-siteinfo-hours {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.opz-siteinfo-hours-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 4px 10px;
    padding: 2px 0;
    align-items: baseline;
}

.opz-siteinfo-hours-day {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-siteinfo-hours-time {
    font-variant-numeric: tabular-nums;
}

.opz-siteinfo-hours-row--closed .opz-siteinfo-hours-time {
    color: var(--opz-panel-text-soft);
}

/* ==========================================================================
   Site details
   ========================================================================== */

.opz-sitedetails-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sitedetails-hint {
    color: var(--opz-panel-text-soft);
}

/* Information, not a form: micro-capped labels in a fixed left column, values in
   ink on the right, one hairline per pair. Values carry the contrast so the eye
   can run down that column; labels step back to a quiet key. */
.opz-sitedetails-fields {
    display: flex;
    flex-direction: column;
}

.opz-sitedetails-field {
    display: grid;
    grid-template-columns: minmax(0, 11.25rem) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 3px;
    padding: 6px 0;
    border-bottom: 1px solid var(--opz-panel-border);
}

.opz-sitedetails-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.opz-sitedetails-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-sitedetails-value {
    display: block;
    min-width: 0;
    color: var(--opz-panel-text);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* A row that holds a control (opening times) rather than a single value. */
.opz-sitedetails-field--wide {
    display: block;
}

.opz-sitedetails-field--wide .opz-sitedetails-label {
    margin-bottom: 6px;
}

/* The COLUMN's width decides whether a label/value pair can sit side by side; the
   viewport cannot know that, because the info panel is a narrow grid cell on a wide
   screen (lg=3). Without this, a 180px label column leaves ~30px for every value and
   the text wraps one character per line. */
.opz-siteinfo {
    container-type: inline-size;
}

@container (max-width: 460px) {
    .opz-sitedetails-field {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }
}

@media (max-width: 560px) {
    .opz-sitedetails-field {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }
}

/* Status chip. Nothing here is red — a suspended site is off, not broken, and
   red stays reserved for Delete. */
.opz-sitedetails-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--opz-panel-text-soft);
    background: color-mix(in srgb, var(--opz-ink) 5%, transparent);
}

.opz-sitedetails-badge::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.opz-sitedetails-badge--active {
    color: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 32%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 9%, transparent);
}

.opz-sitedetails-badge--suspended {
    color: var(--mud-palette-warning);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 32%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

/* ==========================================================================
   Site edit dialog
   ========================================================================== */

/* The form is a single column, so it is held to a readable measure inside the
   MaxWidth.Large dialog (1280px) and centred in FullScreen. The footer takes the
   same measure, so Cancel / Save land under the fields rather than under the
   dialog edge. */
.opz-dialog-form {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 4px 0 8px;
}

.opz-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 4px 0 6px;
}

/* The dialog title is the one part of the frame MudBlazor renders for us, and it
   sits at the dialog's edge by default — which reads as a different axis from a
   centred form. Same measure plus the title's own 24px padding puts the heading
   exactly on the form's left edge, in both Large and FullScreen. */
.mud-dialog:has(.opz-dialog-form) .mud-dialog-title {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
}

/* One fixed width, and the spinner laid over the button's left padding instead
   of being inserted before the label: starting a save changes nothing about the
   footer's geometry. Ink keeps the spinner legible on the disabled fill. */
.opz-dialog-save.mud-button-root {
    position: relative;
    min-width: 11rem;
    justify-content: center;
}

.opz-dialog-save.mud-button-root .mud-progress-circular {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--opz-panel-text);
}

.opz-dialog-save-text {
    white-space: nowrap;
}

/* The edit form is no longer a card — the dialog is the surface, so the panel's
   border and padding are gone and only the bottom rhythm is left to set. */
.opz-sitedetails-form {
    padding-bottom: 6px;
}

/* ==========================================================================
   Logo + social links
   ========================================================================== */

.opz-logo-box {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--opz-paper-2);
    border: 1px dashed var(--opz-panel-border-strong);
}

.opz-logo-icon {
    font-size: 40px;
    color: var(--opz-panel-text-soft);
}

.opz-logo-icon-sm {
    font-size: 18px;
    color: var(--opz-panel-text-soft);
    vertical-align: middle;
    margin-right: 6px;
}

.opz-sitelinks-platform {
    min-width: 160px;
    max-width: 220px;
}

.opz-sitelinks-url {
    flex: 1 1 auto;
    min-width: 220px;
}

.opz-sitelinks-url-invalid .mud-input-helper-text {
    color: var(--mud-palette-error) !important;
}

.opz-sitelinks-remove {
    align-self: center;
    margin-top: 4px;
}

/* ==========================================================================
   Opening hours editor
   ========================================================================== */

.opz-hours-section-title {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--opz-panel-text-soft);
}

.opz-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opz-hours-empty {
    color: var(--opz-panel-text-soft);
    font-style: italic;
}

.opz-hours-row {
    display: grid;
    grid-template-columns: 150px 1fr 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-hours-row-closed {
    background: color-mix(in srgb, var(--mud-palette-error) 5%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

.opz-hours-day {
    min-width: 0;
}

.opz-hours-time {
    min-width: 0;
}

.opz-hours-closed-label {
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    font-weight: 600;
    grid-column: 2 / 4;
}

.opz-hours-closed-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.opz-hours-remove {
    color: var(--mud-palette-error);
}

.opz-hours-add {
    align-self: flex-start;
}

/* ==========================================================================
   Tokens panel
   ========================================================================== */

.opz-tokens-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.opz-tokens-heading {
    color: var(--opz-panel-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-tokens-hint {
    color: var(--opz-panel-text-soft);
}

.opz-tokens-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--opz-signal-deep);
    background: color-mix(in srgb, var(--opz-signal-deep) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-signal-deep) 30%, transparent);
}

.opz-tokens-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 28px 12px;
    border: 1px dashed var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-tokens-empty-icon {
    color: var(--opz-panel-text-soft);
    font-size: 34px;
    margin-bottom: 6px;
}

.opz-tokens-empty-title {
    color: var(--opz-panel-text-soft);
}

/* ---- Tag rows ---- */

.opz-tags-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.opz-tag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opz-tag-row:hover {
    border-color: var(--opz-panel-border-strong);
    background: var(--opz-paper-3);
}

/* View-only rows have no action column — keep the meta right-aligned. */
.opz-tag-row-readonly {
    grid-template-columns: minmax(0, 1fr) auto;
}

.opz-tag-main {
    min-width: 0;
}

.opz-tag-keyline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.opz-tag-nfc-icon {
    color: var(--opz-signal-deep);
    flex-shrink: 0;
}

.opz-tag-key {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--opz-panel-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opz-tag-lock {
    display: inline-flex;
    align-items: center;
    color: var(--opz-alert-warning);
    flex-shrink: 0;
}

.opz-tag-value {
    margin-top: 2px;
    color: var(--opz-panel-text-soft);
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.opz-tag-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 320px;
}

.opz-tag-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.opz-tag-type-entry {
    color: var(--opz-signal-deep);
    background: color-mix(in srgb, var(--opz-signal-deep) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-signal-deep) 30%, transparent);
}

.opz-tag-type-event {
    color: var(--opz-cyan);
    background: color-mix(in srgb, var(--opz-cyan) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-cyan) 30%, transparent);
}

.opz-tag-type-custom {
    color: var(--opz-hazard);
    background: color-mix(in srgb, var(--opz-hazard) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-hazard) 30%, transparent);
}

.opz-tag-type-data {
    color: var(--opz-olive);
    background: color-mix(in srgb, var(--opz-olive) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-olive) 30%, transparent);
}

.opz-tag-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--opz-panel-text-soft);
    background: color-mix(in srgb, var(--opz-ink) 5%, transparent);
    border: 1px solid var(--opz-panel-border);
    white-space: nowrap;
}

.opz-tag-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ---- Category rows ---- */

.opz-cats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.opz-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
}

.opz-cat-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--opz-panel-text-soft);
    font-size: 0.9rem;
}

.opz-cat-icon {
    color: var(--opz-panel-text-soft);
    flex-shrink: 0;
}

.opz-cat-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opz-cat-count {
    color: var(--opz-panel-text-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

.opz-cat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.opz-cat-edit-field {
    flex: 1 1 auto;
}

.opz-cat-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.opz-cat-add-field {
    flex: 1 1 auto;
}

.opz-cats-empty {
    padding: 16px 12px;
    border: 1px dashed var(--opz-panel-border);
    border-radius: 10px;
    background: var(--opz-paper-2);
    margin-top: 12px;
    text-align: center;
}


.opz-admin-page{
    width: 90vw;
}

/* Navigation editor: area columns become a single tree column on compact screens. */
.opz-nav-editor-areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.opz-nav-editor-area { min-width: 0; }

.opz-nav-editor-area-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.opz-nav-editor-tree { min-width: 0; }

.opz-nav-editor-row {
    min-width: 0;
    padding: 10px 0;
    border-top: 1px solid var(--opz-panel-border);
}

.opz-nav-editor-row:first-child { border-top: 0; }
.opz-nav-editor-row-disabled { opacity: 0.68; }

.opz-nav-editor-row-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.opz-nav-editor-link { flex: 1 1 220px; min-width: 0; }

.opz-nav-editor-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    min-width: 0;
}

.opz-nav-editor-glyph { flex: 0 0 auto; color: var(--opz-ink-3); }
.opz-nav-editor-label { min-width: 0; overflow-wrap: anywhere; }
.opz-nav-editor-state { height: 21px; }

.opz-nav-editor-href {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: var(--opz-ink-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opz-nav-editor-markers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
}

.opz-nav-editor-marker,
.opz-nav-editor-role {
    color: var(--opz-ink-3);
    font-size: 0.68rem;
    line-height: 1.35;
}

.opz-nav-editor-marker {
    padding: 2px 6px;
    border-radius: var(--opz-panel-radius);
    background: color-mix(in srgb, var(--opz-ink-3) 9%, transparent);
}

.opz-nav-editor-role { height: 20px; }

.opz-nav-editor-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
    max-width: 190px;
}

.opz-nav-editor-children {
    margin: 7px 0 0 10px;
    padding-left: 13px;
    border-left: 1px solid var(--opz-panel-border-strong);
}

.opz-nav-editor-empty {
    padding: 18px 12px;
    border-radius: var(--opz-panel-radius);
    background: var(--opz-paper-2);
    text-align: center;
}

.opz-nav-editor-loading,
.opz-nav-editor-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.opz-nav-editor-error { flex-wrap: wrap; }

.opz-nav-editor-reload-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: var(--opz-panel-radius);
    background: color-mix(in srgb, var(--opz-signal-deep) 8%, transparent);
    color: var(--opz-panel-text);
    font-size: 0.875rem;
}

.opz-nav-editor-dialog { width: 100%; max-width: 700px; padding: 4px 2px; }

.opz-nav-editor-form-grid,
.opz-nav-editor-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    margin-top: 10px;
}

.opz-nav-editor-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    margin: 12px 0 4px;
}

.opz-nav-editor-note { display: block; margin: 2px 2px 8px; }

.opz-nav-editor-role-label { margin: 0 0 5px 2px; font-weight: 600; }

.opz-nav-editor-icon-option { display: inline-flex; align-items: center; gap: 9px; }

.opz-nav-editor-validation {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--opz-panel-radius);
    background: color-mix(in srgb, var(--opz-ink-3) 8%, transparent);
    color: var(--opz-panel-text);
}

.opz-nav-editor-validation ul { margin: 4px 0 0; padding-left: 20px; }

@media (max-width: 900px) {
    .opz-nav-editor-areas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .opz-nav-editor-form-grid,
    .opz-nav-editor-role-grid,
    .opz-nav-editor-checks { grid-template-columns: minmax(0, 1fr); }

    .opz-nav-editor-area-heading { align-items: flex-start; }
    .opz-nav-editor-row-main { flex-direction: column; }
    .opz-nav-editor-actions { justify-content: flex-start; max-width: none; }
}



/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .opz-hours-row {
        grid-template-columns: 1fr 1fr;
    }

    .opz-hours-day {
        grid-column: 1 / -1;
    }

    .opz-hours-closed-label {
        grid-column: 1 / -1;
    }

    .opz-tag-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .opz-tag-meta {
        justify-content: flex-start;
        max-width: none;
    }

    .opz-tag-actions {
        justify-content: flex-end;
    }
}