{# Modern, self-contained styling for the Site Menu admin screens.
   Everything is scoped under .siteMenuAdmin so it never affects other admin
   pages, and the legacy .manage-items / .tabnav hooks are overridden rather
   than removed (the reorder sortable and confirm dialogs still rely on them). #}
<style>
    .siteMenuAdmin {
        --sm-bg: #f1f5f9;
        --sm-card: #ffffff;
        --sm-border: #e5e9f0;
        --sm-text: #1e293b;
        --sm-muted: #64748b;
        --sm-primary: #2563eb;
        --sm-primary-dark: #1d4ed8;
        --sm-green: #16a34a;
        --sm-green-bg: #dcfce7;
        --sm-red: #dc2626;
        --sm-red-bg: #fee2e2;
        --sm-slate-bg: #f1f5f9;
        --sm-radius: 12px;
        --sm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);

        color: var(--sm-text);
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .siteMenuAdmin * { box-sizing: border-box; }
    /* Keep the app from being shrink-wrapped by the admin content column and
       contain a wide table inside its card rather than blowing out the width. */
    .siteMenuAdmin__header { width: 100%; }
    .siteMenuAdmin__card { overflow-x: auto; }
    .siteMenuAdmin__table { min-width: 640px; }

    /* Breadcrumbs */
    .siteMenuAdmin__breadcrumbs {
        font-size: 12.5px;
        color: var(--sm-muted);
        margin: 0 0 18px;
    }
    .siteMenuAdmin__breadcrumbs a { color: var(--sm-muted); text-decoration: none; }
    .siteMenuAdmin__breadcrumbs a:hover { color: var(--sm-primary); }
    .siteMenuAdmin__crumbSep { margin: 0 8px; color: #cbd5e1; }

    /* Header */
    .siteMenuAdmin__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 20px;
    }
    .siteMenuAdmin__title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #0f172a;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Buttons */
    .siteMenuAdmin__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 13.5px;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        font-family: inherit;
        transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
        white-space: nowrap;
    }
    .siteMenuAdmin__btn--primary {
        background: var(--sm-primary);
        color: #fff !important;
        box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
    }
    .siteMenuAdmin__btn--primary:hover { background: var(--sm-primary-dark); }
    .siteMenuAdmin__btn--primary:active { transform: translateY(1px); }

    /* Tab navigation (overrides legacy .tabnav) */
    .siteMenuAdmin .tabnav {
        display: flex;
        gap: 4px;
        list-style: none;
        margin: 0 0 22px;
        padding: 4px;
        background: #e8edf4;
        border-radius: 10px;
        border: 0;
        width: fit-content;
    }
    .siteMenuAdmin .tabnav:before,
    .siteMenuAdmin .tabnav:after { display: none; }
    .siteMenuAdmin .tabnav li { margin: 0; padding: 0; background: none; border: 0; float: none; list-style: none; }
    .siteMenuAdmin .tabnav li a {
        display: block;
        padding: 8px 16px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        color: var(--sm-muted);
        text-decoration: none;
        border: 0;
        background: transparent;
        transition: background .15s ease, color .15s ease;
    }
    .siteMenuAdmin .tabnav li a:hover { color: var(--sm-text); background: rgba(255,255,255,.6); }
    .siteMenuAdmin .tabnav li.selected a {
        background: var(--sm-card);
        color: var(--sm-primary);
        box-shadow: 0 1px 2px rgba(15,23,42,.08);
    }

    /* Flash messages */
    .siteMenuAdmin__flash {
        padding: 12px 16px;
        border-radius: 10px;
        margin: 0 0 18px;
        font-size: 13.5px;
        font-weight: 500;
    }
    .siteMenuAdmin__flash--success { background: var(--sm-green-bg); color: #166534; }
    .siteMenuAdmin__flash--error { background: var(--sm-red-bg); color: #991b1b; }

    /* Card + table */
    .siteMenuAdmin__card {
        background: var(--sm-card);
        border: 1px solid var(--sm-border);
        border-radius: var(--sm-radius);
        box-shadow: var(--sm-shadow);
        overflow: hidden;
    }

    .siteMenuAdmin table.manage-items,
    .siteMenuAdmin__table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        background: none;
    }
    .siteMenuAdmin__table thead th {
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--sm-muted);
        background: #f8fafc;
        padding: 13px 18px;
        border: 0;
        border-bottom: 1px solid var(--sm-border);
    }
    .siteMenuAdmin__table tbody td {
        padding: 16px 18px;
        border: 0;
        border-bottom: 1px solid #eef2f7;
        vertical-align: top;
        background: none;
    }
    .siteMenuAdmin__table tbody tr { transition: background .12s ease; }
    .siteMenuAdmin__table tbody tr:hover { background: #f8fafc; }
    .siteMenuAdmin__table tbody tr:last-child td { border-bottom: 0; }

    .siteMenuAdmin__col-order { width: 64px; }
    .siteMenuAdmin__col-id { width: 76px; }
    .siteMenuAdmin__col-status { width: 120px; }
    .siteMenuAdmin__col-actions { width: 140px; }

    /* Drag handle */
    .siteMenuAdmin__drag {
        color: #cbd5e1;
        cursor: grab;
        text-align: center;
    }
    .siteMenuAdmin__drag:hover { color: var(--sm-muted); }
    .siteMenuAdmin__table tbody tr.ui-sortable-helper {
        box-shadow: var(--sm-shadow);
        background: #fff;
        display: table;
    }
    .siteMenuAdmin .ui-state-highlight {
        height: 56px;
        background: #eff6ff;
        border: 1px dashed #bfdbfe;
    }

    /* ID badge */
    .siteMenuAdmin__idBadge {
        display: inline-block;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 12px;
        color: var(--sm-muted);
        background: var(--sm-slate-bg);
        border-radius: 6px;
        padding: 3px 8px;
        text-decoration: none;
    }
    .siteMenuAdmin__idBadge:hover { color: var(--sm-primary); }

    /* Name */
    .siteMenuAdmin__name {
        font-weight: 600;
        font-size: 14.5px;
        color: #0f172a;
        text-decoration: none;
    }
    .siteMenuAdmin__name:hover { color: var(--sm-primary); }

    /* Sub items */
    .siteMenuAdmin__subLink {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 600;
        color: var(--sm-primary);
        text-decoration: none;
    }
    .siteMenuAdmin__subLink:hover { color: var(--sm-primary-dark); }
    .siteMenuAdmin__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #eff6ff;
        color: var(--sm-primary);
        font-size: 11px;
        font-weight: 700;
    }
    .siteMenuAdmin__subList {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .siteMenuAdmin__subList li {
        font-size: 12px;
        color: var(--sm-muted);
        background: var(--sm-slate-bg);
        border-radius: 6px;
        padding: 3px 9px;
        list-style: none;
    }
    .siteMenuAdmin__subMore { color: var(--sm-primary) !important; background: #eff6ff !important; font-weight: 600; }
    .siteMenuAdmin__empty { font-size: 12.5px; color: #94a3b8; font-style: italic; }

    /* Status pill */
    .siteMenuAdmin__status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 12px 5px 10px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid transparent;
        transition: filter .15s ease;
    }
    .siteMenuAdmin__status:hover { filter: brightness(.96); }
    .siteMenuAdmin__status .siteMenuAdmin__dot { width: 8px; height: 8px; border-radius: 50%; }
    .siteMenuAdmin__status--active { background: var(--sm-green-bg); color: #166534; }
    .siteMenuAdmin__status--active .siteMenuAdmin__dot { background: var(--sm-green); }
    .siteMenuAdmin__status--inactive { background: var(--sm-slate-bg); color: var(--sm-muted); }
    .siteMenuAdmin__status--inactive .siteMenuAdmin__dot { background: #cbd5e1; }

    /* Action icon buttons */
    .siteMenuAdmin__actions { display: flex; gap: 6px; }
    .siteMenuAdmin__iconBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: var(--sm-slate-bg);
        color: var(--sm-muted);
        text-decoration: none;
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .siteMenuAdmin__iconBtn:disabled { opacity: .55; cursor: default; }
    .siteMenuAdmin__iconBtn--edit:hover { background: #eff6ff; color: var(--sm-primary); }
    .siteMenuAdmin__iconBtn--dup:hover { background: #f1f5f9; color: var(--sm-text); }
    .siteMenuAdmin__iconBtn--del:hover { background: var(--sm-red-bg); color: var(--sm-red); }
    .siteMenuAdmin__iconBtn--confirming { background: #fef3c7; color: #b45309; }
    .siteMenuAdmin__iconBtn--confirming:hover { background: #fde68a; color: #b45309; }

    /* Empty state */
    .siteMenuAdmin__empty-state {
        text-align: center;
        padding: 56px 24px;
        color: var(--sm-muted);
    }
    .siteMenuAdmin__empty-state .fa { font-size: 34px; color: #cbd5e1; margin-bottom: 14px; }
    .siteMenuAdmin__empty-state p { font-size: 15px; margin: 0 0 18px; }

    /* ---------- SPA tabs / chrome ---------- */
    .siteMenuAdmin__tabs {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        background: #e8edf4;
        border-radius: 10px;
        margin: 0 0 22px;
    }
    .siteMenuAdmin__tab {
        border: 0;
        background: transparent;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--sm-muted);
        padding: 8px 16px;
        border-radius: 7px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .siteMenuAdmin__tab:hover { color: var(--sm-text); background: rgba(255, 255, 255, .6); }
    .siteMenuAdmin__tab--active {
        background: var(--sm-card);
        color: var(--sm-primary);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    }
    .siteMenuAdmin__toolbar { margin: 0 0 16px; }
    .siteMenuAdmin__loading { padding: 44px; text-align: center; color: var(--sm-muted); font-size: 14px; }
    .siteMenuAdmin__rowGhost { opacity: .5; }
    .siteMenuAdmin__rowGhost td { background: #eff6ff; }

    /* ---------- Form ---------- */
    /* Advanced source fields are hidden unless the page is opened with ?debug
       (the class is added server-side); values still submit via FormData. */
    .siteMenuAdmin .keepHidden { display: none; }
    .siteMenuAdmin__form { max-width: 720px; }
    .siteMenuAdmin__formCard {
        background: var(--sm-card);
        border: 1px solid var(--sm-border);
        border-radius: var(--sm-radius);
        box-shadow: var(--sm-shadow);
        padding: 26px 28px 8px;
        margin: 0 0 18px;
    }
    .siteMenuAdmin__formCard-title {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--sm-muted);
        margin: 0 0 20px;
        padding: 0 0 12px;
        border-bottom: 1px solid #eef2f7;
    }

    .siteMenuAdmin__field { margin: 0 0 20px; }
    .siteMenuAdmin__label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--sm-text);
        margin: 0 0 7px;
    }
    .siteMenuAdmin__control {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        font-family: inherit;
        color: var(--sm-text);
        background: #fff;
        border: 1px solid #d7dee8;
        border-radius: 9px;
        transition: border-color .15s ease, box-shadow .15s ease;
        appearance: none;
    }
    .siteMenuAdmin__control:focus {
        outline: 0;
        border-color: var(--sm-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }
    .siteMenuAdmin__control:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
    select.siteMenuAdmin__control {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 34px;
    }
    .siteMenuAdmin__control--error { border-color: var(--sm-red); }
    .siteMenuAdmin__control--error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
    .siteMenuAdmin__fieldError { color: var(--sm-red); font-size: 12.5px; margin: 6px 0 0; font-weight: 500; }
    .siteMenuAdmin__hint { color: var(--sm-muted); font-size: 12.5px; margin: 6px 0 0; }

    /* Toggle switch */
    .siteMenuAdmin__switch {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
        user-select: none;
    }
    .siteMenuAdmin__switch-track {
        position: relative;
        width: 44px;
        height: 24px;
        border-radius: 999px;
        background: #cbd5e1;
        transition: background .18s ease;
        flex: 0 0 auto;
    }
    .siteMenuAdmin__switch-track:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15,23,42,.25);
        transition: transform .18s ease;
    }
    .siteMenuAdmin__switch--on .siteMenuAdmin__switch-track { background: var(--sm-green); }
    .siteMenuAdmin__switch--on .siteMenuAdmin__switch-track:after { transform: translateX(20px); }
    .siteMenuAdmin__switch-label { font-size: 13.5px; font-weight: 600; color: var(--sm-text); }

    /* Mega menu picker */
    .siteMenuAdmin__pickerSearch { position: relative; }
    .siteMenuAdmin__pickerResults {
        list-style: none;
        margin: 4px 0 0;
        padding: 4px;
        position: absolute;
        z-index: 20;
        left: 0;
        right: 0;
        max-height: 280px;
        overflow-y: auto;
        background: var(--sm-card);
        border: 1px solid var(--sm-border);
        border-radius: 10px;
        box-shadow: var(--sm-shadow);
    }
    .siteMenuAdmin__pickerHint { padding: 10px 12px; font-size: 12.5px; color: var(--sm-muted); list-style: none; }
    .siteMenuAdmin__pickerResult {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 7px;
        cursor: pointer;
        list-style: none;
    }
    .siteMenuAdmin__pickerResult:hover { background: #f1f5f9; }
    .siteMenuAdmin__pickerResult--added { opacity: .55; cursor: default; }
    .siteMenuAdmin__pickerResult-name,
    .siteMenuAdmin__pickerItem-name { flex: 1 1 auto; font-size: 13.5px; color: var(--sm-text); }
    .siteMenuAdmin__pickerAdded { color: var(--sm-green); font-size: 12px; }
    .siteMenuAdmin__pickerTag {
        flex: 0 0 auto;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .siteMenuAdmin__pickerTag--category { background: #eff6ff; color: var(--sm-primary); }
    .siteMenuAdmin__pickerTag--product { background: var(--sm-green-bg); color: #166534; }

    .siteMenuAdmin__pickerSelected { list-style: none; margin: 12px 0 0; padding: 0; }
    .siteMenuAdmin__pickerItem {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        margin: 0 0 6px;
        background: #f8fafc;
        border: 1px solid var(--sm-border);
        border-radius: 9px;
        list-style: none;
    }
    .siteMenuAdmin__pickerItem-actions { flex: 0 0 auto; display: flex; gap: 4px; }
    .siteMenuAdmin__pickerBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: var(--sm-slate-bg);
        color: var(--sm-muted);
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .siteMenuAdmin__pickerBtn:hover:not(:disabled) { background: #e2e8f0; color: var(--sm-text); }
    .siteMenuAdmin__pickerBtn:disabled { opacity: .4; cursor: default; }
    .siteMenuAdmin__pickerBtn--remove:hover:not(:disabled) { background: var(--sm-red-bg); color: var(--sm-red); }

    /* Save bar */
    .siteMenuAdmin__formActions {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 0 8px;
    }
    .siteMenuAdmin__btn--ghost {
        background: var(--sm-card);
        color: var(--sm-muted) !important;
        border: 1px solid var(--sm-border);
    }
    .siteMenuAdmin__btn--ghost:hover { background: var(--sm-slate-bg); color: var(--sm-text) !important; }
    .siteMenuAdmin__btn:disabled { opacity: .6; cursor: default; }
    .siteMenuAdmin__saveNote { font-size: 13px; font-weight: 600; }
    .siteMenuAdmin__saveNote--ok { color: var(--sm-green); }
    .siteMenuAdmin__saveNote--err { color: var(--sm-red); }
</style>
