/**
 * Admin modal — lateral tab layout.
 *
 * Mirrors the user-options features panel (.features-layout) for
 * visual consistency: a 200 px sidebar on the left listing the
 * categories, and the active panel on the right.
 *
 * All colors come from the --izi-* token set so the panel swaps
 * automatically under body.theme-dark / @media prefers-color-scheme.
 */

/* Make the admin modal body a flex column so .admin-layout can
   stretch to the available height instead of collapsing to its
   content. Matches the trick used by #viewSettings .modal-body in
   features-panel.css.
   `overflow: hidden` moves the scroll bar from the body to the
   right-hand .admin-tab-content so the sidebar stays full-height
   and the bottom-most tab remains visible regardless of panel
   content length. */
#viewAdmin .admin-modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-layout {
    display: flex;
    flex-direction: row;
    gap: var(--izi-space-md);
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.admin-tabs {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--izi-surface-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    padding: var(--izi-space-sm);
    /* No align-self override → inherits the layout's `align-items: stretch`
       so the sidebar runs the full height of the modal body. */
}

.admin-tab {
    background: none;
    border: none;
    padding: var(--izi-space-xs) var(--izi-space-sm);
    border-radius: var(--izi-radius-sm, 4px);
    cursor: pointer;
    color: var(--izi-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--izi-space-xs);
    font-size: var(--izi-font-size-base);
    text-align: left;
    width: 100%;
    transition: background-color 0.15s, color 0.15s;
}

.admin-tab:hover {
    color: var(--izi-text);
    background: var(--izi-surface-elevated, rgba(255, 255, 255, 0.04));
}

.admin-tab.active {
    background: var(--izi-primary-bg, rgba(99, 102, 241, 0.15));
    color: var(--izi-text);
    font-weight: 600;
}

.admin-tab-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-md);
    overflow-y: auto;
    padding-right: var(--izi-space-sm);
}

/* On narrow viewports collapse to the vertical-then-vertical
   stacking the old layout had, so a phone or split-pane still
   shows the full panel. */
@media (max-width: 720px) {
    .admin-layout {
        flex-direction: column;
    }
    .admin-tabs {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-self: stretch;
    }
    .admin-tab {
        width: auto;
    }
}