/* ==========================================================================
   Meshtastic Node Registry — registry.css
   Theme-aware: uses currentColor / inherit so it works on light + dark themes.
   ========================================================================== */

/* ── Table: row hover, long-name overflow ────────────────────────────────── */
.mesh-node-row:hover td { background: rgba(128,128,128,.05); }

.mesh-col-long {
    max-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .mesh-col-nodeid { display: none; }
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.mesh-alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin: 0 0 16px;
    font-size: .9em;
}
.mesh-alert--error   { border-left: 4px solid #dc3232; background: rgba(220,50,50,.06); }
.mesh-alert--success { border-left: 4px solid #46b450; background: rgba(70,180,80,.06); }

/* ── Form wrapper ────────────────────────────────────────────────────────── */
.mesh-form-wrap {
    width: 100%;
    overflow: visible !important; /* never clip autocomplete */
}

.mesh-form {
    width: 100%;
}

/* ── Fieldsets ───────────────────────────────────────────────────────────── */
.mesh-fieldset {
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 6px;
    padding: 20px 20px 16px;
    margin: 0 0 20px;
    overflow: visible !important; /* never clip autocomplete dropdown */
    min-width: 0; /* fix fieldset flex/grid overflow bug */
}

.mesh-legend {
    padding: 0 8px;
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
}

/* ── Responsive grids ────────────────────────────────────────────────────── */
.mesh-grid {
    display: grid;
    gap: 14px 20px;
    margin-bottom: 14px;
}

/* 2-column: Node ID + Short, Hardware + Role */
.mesh-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* City / State / ZIP: city wide, state medium, zip narrow */
.mesh-grid--city {
    grid-template-columns: 2fr 1.2fr 1fr;
}

@media (max-width: 640px) {
    .mesh-grid--2    { grid-template-columns: 1fr; }
    .mesh-grid--city { grid-template-columns: 1fr 1fr; }
    /* ZIP wraps to second row, full span */
    .mesh-grid--city .mesh-field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
    .mesh-grid--city { grid-template-columns: 1fr; }
    .mesh-grid--city .mesh-field:last-child { grid-column: auto; }
}

/* ── Individual field ────────────────────────────────────────────────────── */
.mesh-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.mesh-field:last-child { margin-bottom: 0; }

/* Fields inside a grid don't need extra bottom margin */
.mesh-grid .mesh-field { margin-bottom: 0; }

/* ── Labels ──────────────────────────────────────────────────────────────── */
.mesh-label {
    display: block;
    font-size: .85em;
    font-weight: 600;
    opacity: .8;
    margin-bottom: 2px;
}

.mesh-required {
    color: #dc3232;
    margin-left: 2px;
}

.mesh-optional {
    font-weight: normal;
    opacity: .55;
    font-size: .9em;
}

/* ── Inputs, selects, textareas ──────────────────────────────────────────── */
.mesh-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(128,128,128,.35);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: .92em;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.mesh-input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34,113,177,.18);
}

.mesh-input[readonly] {
    opacity: .55;
    cursor: not-allowed;
}

.mesh-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.mesh-textarea {
    resize: vertical;
    min-height: 90px;
}

/* ── Hint text ───────────────────────────────────────────────────────────── */
.mesh-hint {
    font-size: .78em;
    opacity: .6;
    margin: 0;
    line-height: 1.5;
}

.mesh-hint--inline {
    display: block;
    margin-top: 2px;
}

/* ── Checkbox fields ─────────────────────────────────────────────────────── */
.mesh-check-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: .9em;
    line-height: 1.5;
}

.mesh-check-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.mesh-check-label--inline {
    align-items: center;
    font-size: .9em;
    gap: 8px;
}

.mesh-field--check {
    margin-top: 4px;
    margin-bottom: 0;
}

.mesh-field--check-block {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(128,128,128,.15);
}

/* ── Autocomplete wrapper ────────────────────────────────────────────────── */
.mesh-field--autocomplete { overflow: visible; }

.mesh-autocomplete-wrap {
    position: relative;
    width: 100%;
}

/* The suggestions <ul> injected by address-autocomplete.js */
#mesh-addr-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    /* theme-aware background: fallback for themes that set CSS vars */
    background: var(--wp--preset--color--base, var(--color-background, #fff));
    border: 1px solid rgba(128,128,128,.3);
    border-top: none;
    font-size: .9em;
    max-height: 260px;
    overflow-y: auto;
}

#mesh-addr-suggestions li {
    padding: 9px 13px;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,.1);
    color: inherit;
    line-height: 1.4;
    transition: background .1s;
}

#mesh-addr-suggestions li:last-child { border-bottom: none; }

#mesh-addr-suggestions li:hover,
#mesh-addr-suggestions li.mesh-ac-active {
    /* Use a subtle highlight that works on both light and dark */
    background: rgba(34,113,177,.12);
    outline: none;
}

/* ── Submit row ──────────────────────────────────────────────────────────── */
.mesh-form__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mesh-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border: 1px solid rgba(128,128,128,.4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: .9em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}
.mesh-btn:hover { opacity: .75; }

.mesh-btn--primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
.mesh-btn--primary:hover { background: #135e96; border-color: #135e96; opacity: 1; color: #fff; }

/* ── Privacy notice ──────────────────────────────────────────────────────── */
.mesh-privacy-notice {
    margin-top: 14px;
    margin-bottom: 0;
    padding: 10px 14px;
    border-left: 3px solid rgba(128,128,128,.3);
    font-size: .8em;
    opacity: .7;
    line-height: 1.7;
}

/* ── Ensure page/content wrappers never clip autocomplete ────────────────── */
.mesh-form-wrap,
.entry-content,
.post-content,
.page-content,
.site-content,
.wp-site-blocks,
.is-layout-constrained {
    overflow: visible !important;
}

/* ==========================================================================
   DROPDOWN THEME FIX
   Browsers paint native <select> option lists and custom dropdown panels
   with system/browser defaults (white bg, black text) regardless of the
   page theme. We override with CSS custom properties so they always match
   the active theme's background and foreground.
   ========================================================================== */

/*
  Detect the page background via a CSS variable chain:
  - Block themes expose --wp--preset--color--base  (e.g. Twenty Twenty-Four dark = #0a0a0a)
  - Some themes use --color-background or --global-palette1
  - Final fallback: we read the computed background-color of <body> via JS (see registry.js)
  - Hard fallback in CSS: inherit (transparent shows through to body)
*/

/* ── <select> element — the visible box ─────────────────────────────────── */
.mesh-input.mesh-select,
.mesh-registry select,
.mesh-my-nodes select,
.mesh-groups-wrap select,
.mesh-single-node select,
.mesh-form-wrap select,
.mesh-vn-page select {
    background-color: var(--mesh-bg, var(--wp--preset--color--base, var(--color-background, transparent)));
    color: var(--mesh-fg, inherit);
    /* Remove browser-default arrow so only one arrow shows */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom arrow via inline SVG background image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px !important;
}

/* ── <select> <option> items — painted by browser chrome ────────────────── */
.mesh-input.mesh-select option,
.mesh-registry select option,
.mesh-my-nodes select option,
.mesh-groups-wrap select option,
.mesh-single-node select option,
.mesh-form-wrap select option,
.mesh-vn-page select option {
    background-color: var(--mesh-bg, var(--wp--preset--color--base, var(--color-background, #1a1a1a)));
    color: var(--mesh-fg, inherit);
}

/* ── Registry filter multi-select panels (.mesh-ms-panel) ───────────────── */
/* These are the State / Role / Device dropdowns in the filter bar.
   The inline styles in registry.php hardcode #fff — we override here. */
.mesh-registry .mesh-ms-panel,
.mesh-groups-wrap .mesh-ms-panel,
.mesh-single-node .mesh-ms-panel {
    background-color: var(--mesh-bg, var(--wp--preset--color--base, var(--color-background, #1a1a1a))) !important;
    color: var(--mesh-fg, inherit) !important;
    border-color: rgba(128,128,128,.3) !important;
}

.mesh-registry .mesh-ms-panel label,
.mesh-registry .mesh-ms-panel .mesh-ms-opt,
.mesh-groups-wrap .mesh-ms-panel label,
.mesh-groups-wrap .mesh-ms-panel .mesh-ms-opt,
.mesh-single-node .mesh-ms-panel label,
.mesh-single-node .mesh-ms-panel .mesh-ms-opt {
    color: var(--mesh-fg, inherit) !important;
    background-color: transparent;
}

.mesh-registry .mesh-ms-panel label:hover,
.mesh-registry .mesh-ms-panel .mesh-ms-opt:hover,
.mesh-groups-wrap .mesh-ms-panel label:hover,
.mesh-groups-wrap .mesh-ms-panel .mesh-ms-opt:hover,
.mesh-single-node .mesh-ms-panel label:hover,
.mesh-single-node .mesh-ms-panel .mesh-ms-opt:hover {
    background: rgba(34,113,177,.15) !important;
}

/* ── Filter toggle button + dropdown trigger buttons ─────────────────────── */
.mesh-registry .mesh-ms-btn,
.mesh-groups-wrap .mesh-ms-btn,
.mesh-single-node .mesh-ms-btn {
    background-color: var(--mesh-bg, var(--wp--preset--color--base, transparent)) !important;
    color: inherit !important;
}

/* ── Address autocomplete suggestions ────────────────────────────────────── */
#mesh-addr-suggestions {
    background-color: var(--mesh-bg, var(--wp--preset--color--base, var(--color-background, #1a1a1a))) !important;
    color: var(--mesh-fg, inherit) !important;
}

#mesh-addr-suggestions li {
    color: var(--mesh-fg, inherit) !important;
    border-bottom-color: rgba(128,128,128,.15) !important;
}

#mesh-addr-suggestions li:hover,
#mesh-addr-suggestions li.mesh-ac-active {
    background: rgba(34,113,177,.2) !important;
}

/* ── Filter option hover (replaces inline onmouseenter) ──────────────────── */
.mesh-ms-opt.mesh-ms-hover:hover {
    background: rgba(34,113,177,.2) !important;
}

/* ==========================================================================
   GROUPS & CHANNELS
   ========================================================================== */

/* ── Group cards hover ───────────────────────────────────────────────────── */
.mesh-group-card {
    transition: border-color .15s, box-shadow .15s;
}
.mesh-group-card:hover {
    border-color: rgba(34,113,177,.4) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* ── Channel cards ───────────────────────────────────────────────────────── */
.mesh-channel-card {
    transition: border-color .15s;
}
.mesh-channel-card:hover {
    border-color: rgba(128,128,128,.35) !important;
}

/* ── Message board ───────────────────────────────────────────────────────── */
.mesh-post {
    transition: border-color .15s;
}
.mesh-post--pinned {
    box-shadow: 0 1px 6px rgba(240,192,64,.08);
}

/* ── Tab nav active indicator ────────────────────────────────────────────── */
.mesh-tab-active {
    border-bottom-color: currentColor !important;
    opacity: 1 !important;
}

/* ── Autocomplete suggestions (multi-instance) ───────────────────────────── */
.mesh-addr-suggestions li:hover,
.mesh-addr-suggestions li.mesh-ac-active {
    background: rgba(34,113,177,.2) !important;
}