/* ============================================================
   MAPXER Portal — AppConfig Editor Styles
   Include via _Host.cshtml or add @import to portal.css
   ============================================================ */

/* ── Section cards ─────────────────────────────────────────────────────────── */
.ac-section {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.ac-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 24px;
    background: #f7f9fc;
    border-bottom: 1px solid #dde3ec;
}

.ac-section-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.ac-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e2a3a;
    margin-bottom: 2px;
}

.ac-section-sub {
    font-size: 12px;
    color: #6b7c93;
    line-height: 1.5;
}

.ac-section-body {
    padding: 20px 24px;
}

/* ── Form grids ────────────────────────────────────────────────────────────── */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Hints ─────────────────────────────────────────────────────────────────── */
.hint {
    font-size: 11px;
    color: #9aabbd;
    font-weight: 400;
    margin-left: 4px;
}

code.token-hint {
    background: #eef2f8;
    color: #3a6bc8;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* ── File path bar ─────────────────────────────────────────────────────────── */
.appconfig-filepath {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.filepath-ok {
    font-size: 12px;
    color: #3b6d11;
    background: #eaf3de;
    border: 1px solid #b8dba0;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: monospace;
}

.filepath-missing {
    font-size: 12px;
    color: #a32d2d;
    background: #fdecea;
    border: 1px solid #f5c6c6;
    padding: 2px 10px;
    border-radius: 20px;
}

.filepath-meta {
    font-size: 12px;
    color: #9aabbd;
}

/* ── Template blocks ───────────────────────────────────────────────────────── */
.template-block {
    background: #f7f9fc;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

    .template-block:last-child {
        margin-bottom: 0;
    }

.template-block-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.template-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.template-block-label strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1e2a3a;
    margin-bottom: 2px;
}

.template-block-label .hint {
    display: block;
    margin-left: 0;
    font-size: 11px;
    color: #9aabbd;
}

.template-textarea {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: #fff;
    color: #1e2a3a;
}

.template-preview-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aabbd;
    margin: 10px 0 6px;
}

/* ── Preview containers ────────────────────────────────────────────────────── */
.template-preview {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #333;
    min-height: 36px;
    line-height: 1.6;
}

/* Info window title — bold, slightly larger */
.template-preview-title {
    font-weight: 700;
    font-size: 14px;
    border-left: 3px solid #4a90e2;
    padding-left: 12px;
}

/* List card — mimics the rowBox style */
.template-preview-card {
    background: #f9f9f9;
    border-left: 3px solid #27ae60;
    padding-left: 12px;
}

/* Detail panel — mimics the slide-in panel */
.template-preview-detail {
    background: #fff;
    border-left: 3px solid #9b59b6;
    padding-left: 12px;
    max-height: 150px;
    overflow-y: auto;
}

/* Unresolved token highlight */
.token-unresolved {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 11px;
    font-family: monospace;
}

/* ── Column table ──────────────────────────────────────────────────────────── */
.ac-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

    .ac-table thead th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #6b7c93;
        padding: 8px 10px;
        border-bottom: 2px solid #dde3ec;
        text-align: left;
    }

    .ac-table tbody tr:hover {
        background: #f7f9fc;
    }

    .ac-table tbody td {
        padding: 6px 8px;
        border-bottom: 1px solid #eef1f5;
        vertical-align: middle;
    }

.ac-input {
    width: 100%;
    border: 1px solid #dde3ec;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    color: #1e2a3a;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

    .ac-input:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74,144,226,0.12);
    }

.btn-remove {
    background: none;
    border: 1px solid #e0c4c4;
    color: #c0392b;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-remove:hover {
        background: #fdecea;
    }

.btn-add-row {
    background: none;
    border: 1px dashed #9aabbd;
    color: #4a90e2;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background 0.15s, border-color 0.15s;
}

    .btn-add-row:hover {
        background: #eef2f8;
        border-color: #4a90e2;
    }

/* ── Filter cards ──────────────────────────────────────────────────────────── */
.filter-card {
    border: 1px solid #dde3ec;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
}

.filter-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f7f9fc;
    border-bottom: 1px solid #dde3ec;
}

.filter-card-title {
    font-size: 13px;
    color: #1e2a3a;
}

.filter-card-body {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.filter-col-map {
    grid-column: 1 / -1;
}

/* Filter type badges */
.filter-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.filter-badge-text {
    background: #e8f0fe;
    color: #3a6bc8;
}

.filter-badge-dropdown {
    background: #e8f8f0;
    color: #1e7d4a;
}

.filter-badge-checkbox {
    background: #f5eefe;
    color: #7c3aed;
}

/* Column chips */
.col-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.col-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #dde3ec;
    border-radius: 20px;
    font-size: 12px;
    color: #4a6080;
    background: #f7f9fc;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}

    .col-chip input[type=checkbox] {
        width: 12px;
        height: 12px;
        margin: 0;
        cursor: pointer;
    }

    .col-chip:hover {
        background: #eef2f8;
        border-color: #9aabbd;
    }

.col-chip-on {
    background: #e8f0fe;
    border-color: #4a90e2;
    color: #3a6bc8;
    font-weight: 600;
}

/* Filter add strip */
.filter-add-strip {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-add-filter {
    flex: 1;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px dashed;
    transition: background 0.15s;
}

.btn-add-text {
    border-color: #4a90e2;
    color: #3a6bc8;
    background: none;
}

.btn-add-dropdown {
    border-color: #27ae60;
    color: #1e7d4a;
    background: none;
}

.btn-add-checkbox {
    border-color: #9b59b6;
    color: #7c3aed;
    background: none;
}

.btn-add-text:hover {
    background: #e8f0fe;
}

.btn-add-dropdown:hover {
    background: #e8f8f0;
}

.btn-add-checkbox:hover {
    background: #f5eefe;
}

/* ── Save bar ───────────────────────────────────────────────────────────────── */
.ac-save-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    margin-bottom: 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.btn-save-large {
    padding: 10px 28px;
    font-size: 14px;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .form-grid-2,
    .form-grid-3,
    .filter-card-body {
        grid-template-columns: 1fr;
    }

    .filter-col-map {
        grid-column: 1;
    }

    .filter-add-strip {
        flex-direction: column;
    }

    .ac-save-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOCALIZATION  (AppConfig editor + Translations grid)
══════════════════════════════════════════════════════════════════════════ */

.ac-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}
.ac-check-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.loc-langlist { margin-top: 14px; }
.loc-langlist.loc-disabled { opacity: 0.55; pointer-events: none; }

.ac-input-sm { font-size: 12px; padding: 4px 6px; }

/* Per-language inline fields under a column row */
.loc-subrow > td { background: #f7fafd; border-top: none !important; padding-top: 4px !important; }
.loc-inline-fields {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 2px 0 6px;
}
.loc-inline-tag { font-size: 11px; font-weight: 700; color: #7a9ab8; text-transform: uppercase; }
.loc-inline-field { display: inline-flex; align-items: center; gap: 5px; }
.loc-inline-code {
    font-size: 10px; font-weight: 700; color: #4a90e2;
    background: #e6f1fb; border-radius: 4px; padding: 2px 6px;
    text-transform: uppercase; min-width: 24px; text-align: center;
}

/* Per-language label/placeholder block inside a filter card */
.loc-filter-fields { grid-column: 1 / -1; }
.loc-filter-langrow {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}

/* Per-language template variants */
.loc-templates {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px dashed #cdd9e5;
}
.loc-templates-head {
    font-weight: 700; color: #2c4a66; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.loc-lang-tplgroup {
    border: 1px solid #e1e9f1; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 12px; background: #fbfdff;
}
.loc-lang-tplgroup-title {
    font-weight: 700; color: #1e3a5a; margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid #eef3f8;
}

/* Translations grid add-row */
.tr-add-grid {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
}
.tr-add-grid .form-group { flex: 1; min-width: 140px; margin-bottom: 0; }

.btn-sm { font-size: 12px; padding: 4px 10px; }

@media (max-width: 768px) {
    .tr-add-grid { flex-direction: column; }
    .tr-add-grid .form-group { width: 100%; }
    .loc-inline-fields { flex-direction: column; align-items: flex-start; }
}

/* Pre-filter popup editor */
.popup-field-block {
    padding: 12px 0;
    border-bottom: 1px solid #eef3f8;
}
.popup-field-block:last-of-type { border-bottom: none; }
.popup-field-block > label {
    display: block;
    font-weight: 600;
    color: #2c4a66;
    margin-bottom: 6px;
}

/* ── Template editor (Pages/TemplateEditor.razor) ─────────────────────────── */
.tpl-editor {
    border: 1px solid #dbe4ed;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}
.tpl-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f7fafc;
    border-bottom: 1px solid #e3e9f0;
}
.tpl-editor-titles { display: flex; flex-direction: column; }
.tpl-editor-titles strong { color: #1e3a5f; font-size: 14px; }
.tpl-mode-switch { margin-left: auto; display: flex; gap: 2px; }
.tpl-mode-btn {
    border: 1px solid #d5e0ea;
    background: #fff;
    color: #5b7089;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
}
.tpl-mode-btn:first-child { border-radius: 5px 0 0 5px; }
.tpl-mode-btn:last-child  { border-radius: 0 5px 5px 0; }
.tpl-mode-btn:hover { background: #eef4fa; }
.tpl-mode-on, .tpl-mode-on:hover {
    background: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
    font-weight: 600;
}
.tpl-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border-bottom: 1px solid #eef3f8;
    background: #fcfdfe;
}
.tpl-tool {
    min-width: 30px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: #3c5872;
    font-size: 13px;
    cursor: pointer;
    padding: 0 7px;
}
.tpl-tool:hover { background: #e8f1fb; border-color: #cfe0f7; }
.tpl-tool-sep { width: 1px; height: 20px; background: #e3e9f0; margin: 0 4px; }
.tpl-tool-select {
    height: 28px;
    border: 1px solid #d5e0ea;
    border-radius: 4px;
    background: #fff;
    color: #3c5872;
    font-size: 12px;
    padding: 0 6px;
}
.tpl-token-select { color: #1a6f4a; }

/* The editing surface. Styled close to the client's detail panel so what the
   operator lays out here reads the same way in the app. */
.tpl-surface {
    min-height: 110px;
    max-height: 340px;
    overflow-y: auto;
    padding: 12px 14px;
    font-family: system-ui, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1e2a3a;
    outline: none;
}
.tpl-surface:focus { background: #fcfdff; }
.tpl-surface p  { margin: 0 0 8px; }
.tpl-surface h3 { margin: 0 0 6px; font-size: 17px; color: #1e3a5f; }
.tpl-surface h4 { margin: 0 0 6px; font-size: 15px; color: #2c4a66; }
.tpl-surface ul { margin: 0 0 8px 18px; }
.tpl-surface a  { color: #4a90e2; }
.tpl-surface:empty::before {
    content: "Type here, or use + Insert field to add a data column…";
    color: #a8b6c6;
    font-style: italic;
}
.tpl-html { border: none; border-radius: 0; width: 100%; box-sizing: border-box; }
.tpl-foot-hint {
    padding: 7px 12px;
    background: #f7fafc;
    border-top: 1px solid #eef3f8;
    font-size: 11.5px;
    color: #7a90a8;
}
.tpl-editor .template-preview { margin: 12px; }

/* Per-language template editors sit inside a labelled group. */
.tpl-lang-label {
    display: block;
    font-weight: 600;
    color: #2c4a66;
    margin: 12px 0 4px;
}

/* ── Template editor: inline card + modal ─────────────────────────────────── */
/* Editing happens in the modal below; inline is a read-only card, so nothing
   re-renders around the contenteditable surface while an operator is typing. */
.tpl-card {
    border: 1px solid #dbe4ed;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}
.tpl-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f7fafc;
    border-bottom: 1px solid #e3e9f0;
}
.tpl-edit-btn { margin-left: auto; white-space: nowrap; }
.tpl-card-body { padding: 10px 12px 12px; }
.tpl-card-previewlabel {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8fa3b8;
    margin-bottom: 4px;
}
.tpl-card-code { margin-top: 8px; }
.tpl-card-code summary {
    cursor: pointer;
    font-size: 11.5px;
    color: #6b7c93;
}
.tpl-card-code pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: #f6f8fb;
    border: 1px solid #e8eef5;
    border-radius: 5px;
    font-size: 11.5px;
    color: #40566e;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 140px;
    overflow: auto;
}

/* Modal */
.tpl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 34, 51, 0.45);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.tpl-modal {
    width: 100%;
    max-width: 940px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(15, 30, 50, 0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tpl-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f4f8fc;
    border-bottom: 1px solid #e3e9f0;
}
.tpl-modal-head strong { color: #1e3a5f; font-size: 15px; }
.tpl-modal-head .tpl-mode-switch { margin-left: auto; }
.tpl-modal-x {
    border: none;
    background: none;
    color: #8fa3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
}
.tpl-modal-x:hover { color: #b00020; }
.tpl-surface-modal {
    min-height: 320px;
    max-height: 52vh;
}
.tpl-html-modal {
    min-height: 320px;
    max-height: 52vh;
    border: none;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 12.5px;
}
.tpl-preview-pane {
    padding: 16px;
    min-height: 320px;
    max-height: 52vh;
    overflow-y: auto;
    background: #fbfcfe;
}
.tpl-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f7fafc;
    border-top: 1px solid #e3e9f0;
}
.tpl-modal-foot .hint { margin-left: auto; text-align: right; max-width: 420px; }

/* Colour pickers: a swatch button that hides the native colour input. */
.tpl-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.tpl-color:hover { background: #e8f1fb; border-color: #cfe0f7; }
.tpl-color input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
}
.tpl-color-swatch {
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    border-bottom: 3px solid currentColor;
    pointer-events: none;
}
.tpl-color-hl {
    border-bottom: none;
    color: #1e2a3a;
    padding: 1px 3px;
    border-radius: 2px;
}
.tpl-size-select { min-width: 74px; }

@media (max-width: 860px) {
    .tpl-modal-overlay { padding: 12px; }
    .tpl-modal-foot .hint { display: none; }
}

.tpl-style-note {
    margin: 0 12px 8px;
    padding: 7px 10px;
    background: #fff8e1;
    border: 1px solid #f5d78a;
    border-radius: 5px;
    font-size: 11.5px;
    color: #7a5c00;
}

/* Blazor-owned strip above the TinyMCE toolbar (field picker). */
.tpl-tokenbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef3f8;
    background: #fcfdfe;
}
/* TinyMCE builds its own toolbar + iframe inside here. Blazor renders one empty
   child and never touches it again. */
.tpl-mce-host { padding: 0 12px 12px; }
.tpl-mce-host .tox-tinymce { border-color: #dbe4ed; border-radius: 6px; }

/* ── TinyMCE inside the template modal ────────────────────────────────────── */
/* Belt and braces alongside ui_mode:'split'. Anything TinyMCE still attaches to
   document.body (dialogs, colour pickers, context menus) defaults to z-index 1300,
   which is BEHIND .tpl-modal-overlay at 2000 — the menu opens, you just can't see
   it, and the toolbar looks unresponsive. */
.tox-tinymce-aux,
.tox .tox-silver-sink,
body > .tox.tox-silver-sink {
    z-index: 3000 !important;
}
/* The wrapped toolbar needs a little more room before the iframe starts. */
.tpl-mce-host .tox .tox-toolbar__group { flex-wrap: wrap; }

/* ── Navigation Menu: one row per item ────────────────────────────────────── */
.ac-table-menu td { padding: 4px 6px; vertical-align: middle; }
.ac-table-menu th { white-space: nowrap; }
.ac-table-menu .ac-input { width: 100%; box-sizing: border-box; margin: 0; }
.ac-table-menu select.ac-input { padding: 5px 6px; }
/* Emoji glyphs are wider than the text they sit next to — centre them so a short
   icon column still reads as a column. */
.ac-input-icon { text-align: center; }

/* ── Sort columns picker ──────────────────────────────────────────────────── */
.sortcol-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 30px;
    margin-bottom: 6px;
}
.sortcol-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    background: #eef4fb;
    border: 1px solid #cfe0f7;
    border-radius: 14px;
    font-size: 12px;
    color: #1e3a5f;
}
.sortcol-ord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4a90e2;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.sortcol-name { font-weight: 600; }
.sortcol-btn {
    border: none;
    background: none;
    color: #5b7089;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
}
.sortcol-btn:hover:not(:disabled) { background: #dbe9fa; color: #1e3a5f; }
.sortcol-btn:disabled { opacity: 0.3; cursor: default; }
.sortcol-x:hover { background: #fde8e8 !important; color: #b00020 !important; }
.sortcol-add { max-width: 260px; }

/* Menu editor: child rows read as belonging to the row above. */
.ac-menu-child td { background: #fbfcfe; }
.ac-menu-child td:first-child { box-shadow: inset 3px 0 0 #cfe0f7; }
.ac-menu-branch { color: #8fa3b8; margin-right: 4px; }
.ac-menu-childlabel { width: calc(100% - 18px) !important; }
.loc-menu-child {
    margin: 8px 0 0 18px;
    padding-left: 10px;
    border-left: 2px solid #e3e9f0;
}

/* ── Menu icon picker ─────────────────────────────────────────────────────── */
.icon-cell-btn {
    width: 100%;
    height: 30px;
    border: 1px solid #d5e0ea;
    border-radius: 4px;
    background: #fff;
    color: #3c5872;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.icon-cell-btn:hover { background: #eef4fb; border-color: #cfe0f7; }

.icon-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 34, 51, 0.4);
    z-index: 2100;          /* above the template modal's 2000 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
}
.icon-picker {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(15, 30, 50, 0.32);
    overflow: hidden;
}
.icon-picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f4f8fc;
    border-bottom: 1px solid #e3e9f0;
}
.icon-picker-search { flex: 1; max-width: 220px; margin-left: auto; }
/* One scroll container for both groups, so the group headings scroll with their
   icons instead of each grid scrolling on its own. */
.icon-picker-body {
    max-height: 52vh;
    overflow-y: auto;
}
.icon-picker-groupname {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7c93;
}
.icon-picker-groupname .hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    padding: 8px 14px 14px;
}
/* Emoji are drawn by the OS in its own colours; the hover tint that works for the
   monochrome Tabler glyphs would only muddy them, so only the frame reacts. */
.icon-picker-cell-emoji {
    font-size: 20px;
    line-height: 1;
}
.icon-picker-cell-emoji:hover { color: inherit; }
.icon-picker-cell {
    height: 42px;
    border: 1px solid #e8eef5;
    border-radius: 5px;
    background: #fff;
    color: #3c5872;
    font-size: 18px;
    cursor: pointer;
}
.icon-picker-cell:hover { background: #eef4fb; border-color: #4a90e2; color: #185fa5; }
.icon-picker-foot {
    padding: 12px 14px;
    background: #f7fafc;
    border-top: 1px solid #e3e9f0;
}
.icon-picker-foot label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #5b7089;
    margin-bottom: 4px;
}