/* View-level user preferences from the Settings page, keyed on root data-* attributes set by
   js/appearance-settings.js. Each rule only fires in the NON-default state, so the app's default
   appearance is unchanged until the user opts in. */

/* ── Appearance ▸ Sidebar Compact Mode ───────────────────────────────────────
   Narrow the expandable sidebar panel (the module tree). ActivityBar.razor.css sizes that panel
   from --n360-sidebar-panel-width (default 280px), so overriding it here reflows the panel and the
   content beside it. The icon rail itself is already compact, so it is left untouched. */
html[data-compact-sidebar="true"] {
    --n360-sidebar-panel-width: 210px;
    --n360-sidebar-width-expanded: 210px;
}

/* ── Appearance ▸ Dense Tables ───────────────────────────────────────────────
   Tighten row height across Syncfusion grids, N360 grids, and plain Bootstrap tables. */
html[data-dense-tables="true"] .e-grid .e-rowcell,
html[data-dense-tables="true"] .e-grid .e-headercell,
html[data-dense-tables="true"] .e-grid .e-summarycell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
html[data-dense-tables="true"] .n360-grid td,
html[data-dense-tables="true"] .n360-grid th,
html[data-dense-tables="true"] table.table > :not(caption) > * > * {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* ── Accessibility ▸ Focus Indicators ────────────────────────────────────────
   ON  → a clear, consistent keyboard-focus ring on interactive elements.
   OFF → suppress focus outlines. */
html[data-focus-indicators="true"] a:focus-visible,
html[data-focus-indicators="true"] button:focus-visible,
html[data-focus-indicators="true"] input:focus-visible,
html[data-focus-indicators="true"] select:focus-visible,
html[data-focus-indicators="true"] textarea:focus-visible,
html[data-focus-indicators="true"] [tabindex]:focus-visible {
    outline: 2px solid var(--n360-color-primary, #2563eb) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}
html[data-focus-indicators="false"] *:focus,
html[data-focus-indicators="false"] *:focus-visible {
    outline: none !important;
}