/* Shared UI refinements. Loaded after the existing bundle; no bundle rebuild required. */
:root { --ui-focus: #176b86; --ui-action: #376d6d; }
[data-theme="dark"] { --ui-focus: #83d4ef; --ui-action: #a4d1d1; }
html { scroll-padding-top: 5rem; }
.app-skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 100000;
    transform: translateY(-180%); padding: .75rem 1rem;
    background: var(--panel); color: var(--text); border: 2px solid var(--ui-focus);
    border-radius: var(--radius); font-weight: 600;
}
.app-skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus); outline-offset: 3px;
}
#main-content:focus { outline: none; }
:where(input, select, textarea) { accent-color: var(--ui-action); }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
:where(input, select, textarea):user-invalid { border-color: var(--danger); }
textarea { resize: vertical; }
:where(button, .button, .page-btn, .icon-button) { touch-action: manipulation; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
.nav-right .icon-button, .nav-right .theme-toggle { min-width: 40px; min-height: 40px; }
.sidebar-nav a[aria-current] {
    background: var(--sidebar-hover); color: var(--text); font-weight: 700;
    box-shadow: inset 3px 0 var(--ui-action);
}
:where(.button-row, .form-actions, .panel-header.split-header) { flex-wrap: wrap; gap: .65rem; }
:where(.empty-state) { padding: clamp(1.25rem, 3vw, 2.5rem); text-align: center; }
.empty-state p { max-width: 58ch; margin-inline: auto; line-height: 1.6; }
:where(.table-responsive, .table-wrapper) {
    max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}
/* Undo conflicting shared rules which force every header to full width and remove row padding. */
.data-table th { width: auto; }
.data-table th, .data-table td { padding: .7rem .85rem; line-height: 1.5; }
.data-table th { font-weight: 650; }
.data-table tbody tr:focus-within { background: var(--hover-bg); }
.data-table td :where(.button, button) { margin-block: .15rem; }
.data-table td :where(code) { overflow-wrap: anywhere; }
:where(dialog) {
    box-sizing: border-box; max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--panel); color: var(--text);
}
dialog::backdrop { background: rgb(7 18 23 / .62); }
[role="dialog"][aria-modal="true"] {
    box-sizing: border-box; max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 768px) {
    .nav-right { flex-wrap: wrap; }
    .data-table th, .data-table td { width: auto; }
    .data-table.ui-labeled-table td { display: block; overflow-wrap: anywhere; }
    .data-table.ui-labeled-table td::before {
        display: block; content: attr(data-label); margin: 0 0 .25rem;
        font-size: .75rem; letter-spacing: .025em; font-weight: 700;
    }
    .data-table.ui-labeled-table td:empty { display: none; }
    .data-table.ui-labeled-table tr { box-sizing: border-box; }
    :where(.button-row, .form-actions) > :where(.button, button) { min-height: 44px; }
    :where(input, select, textarea) { font-size: max(1rem, 16px); max-width: 100%; }
    dialog, [role="dialog"][aria-modal="true"] { max-width: calc(100vw - 1rem); }
}
@media (forced-colors: active) {
    .sidebar-nav a[aria-current] { outline: 2px solid Highlight; }
}
@media print {
    .app-skip-link { display: none; }
    dialog:not([open]) { display: none; }
}
.ui-filter-label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; }
.ui-filter-label :where(input, select) { font-weight: 400; }