/**
 * UI Modes — feature bridge convention.
 *
 * Each element bound to a feature carries `class="feat feat-<id>"` (or
 * `feat-not-<id>` for inverse logic). At boot, index-features.js injects
 * one rule per feature of the form
 *     body.f-<id>      .feat-<id>      { display: flex !important; }
 *     body:not(.f-<id>) .feat-not-<id> { display: flex !important; }
 *
 * Override the display per-element with the modifier classes feat-inline
 * (inline-flex), feat-block (block), or feat-inline-text (inline).
 *
 *     <button class="feat feat-filterImportant">…</button>           → flex
 *     <span   class="feat feat-filterLocked feat-inline">…</span>    → inline-flex
 *     <div    class="feat feat-versioningDiff feat-block">…</div>    → block
 *     <span   class="feat feat-not-viewDatesFull feat-inline">…</span>
 *
 * The legacy ui-X-only / ui-standard-exclusive rails were removed once
 * every call site was migrated; the legacy applyUILevel() still adds
 * body.ui-{simple,standard,advanced} classes for back-compat consumers
 * (no CSS rules depend on them anymore).
 */

/* Default state — any feature-bound element is hidden until activated. */
.feat {
    display: none !important;
}

/* ========== Hidden by setting (overrides any feature visibility) ========== */

/* When an element is explicitly hidden by a user setting, it must win
   over the feature bridge's display rules. The body-prefixed selector
   gives this rule specificity (0,2,1) which beats both the bridge's
   feature-on rules (0,2,1, won by source order) and feat default. */
body .hidden-by-setting {
    display: none !important;
}

/* ========== Legacy UI Level Selector Styles ========== */
/* Still used by the existing settings dropdown (settingsUiLevel). */

.ui-level-selector {
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-md);
    margin-top: var(--izi-space-sm);
}

.ui-level-option {
    display: flex;
    align-items: flex-start;
    gap: var(--izi-space-md);
    padding: var(--izi-space-md);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid var(--border-color, #e0e0e0);
}

.ui-level-option:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.ui-level-option input[type="radio"] {
    margin-top: var(--izi-space-xs);
    cursor: pointer;
}

.ui-level-option-content {
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-xs);
}

.ui-level-option-title {
    font-weight: 600;
    color: var(--text-color, #333);
}

.ui-level-option-desc {
    font-size: var(--izi-font-size-sm);
    color: var(--text-secondary, #666);
}

@media (prefers-color-scheme: dark) {
    body.theme-auto .ui-level-option {
        border-color: var(--border-color, #444);
    }
    body.theme-auto .ui-level-option:hover {
        background-color: var(--hover-bg, rgba(255, 255, 255, 0.05));
    }
}

body.theme-dark .ui-level-option {
    border-color: var(--border-color, #444);
}

body.theme-dark .ui-level-option:hover {
    background-color: var(--hover-bg, rgba(255, 255, 255, 0.05));
}