ui

frontend/src/styles.css

@@ -1883,6 +1883,12 @@ button.danger:hover:not([disabled]) {
   flex-grow: 1;
 }
 
+.documents-panel .documents-scroll:focus-visible {
+  outline: 2px solid var(--selection-ring);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
 .documents-panel table {
   max-width: 100%;
   border-collapse: collapse;
@@ -3129,6 +3135,19 @@ form.inline {
   min-width: 14rem;
 }
 
+fieldset.settings-form__field {
+  border: 1px solid var(--border-muted, var(--border));
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.9rem 0.85rem;
+  background: var(--surface-soft);
+}
+
+fieldset.settings-form__field legend {
+  padding: 0 0.35rem;
+  font-weight: 600;
+  color: var(--muted-strong, inherit);
+}
+
 .settings-form__field input[type='text'],
 .settings-form__field input[type='datetime-local'] {
   padding: 0.45rem 0.6rem;
@@ -3138,6 +3157,33 @@ form.inline {
   color: inherit;
 }
 
+.settings-form__choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  align-items: flex-start;
+}
+
+.settings-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: inherit;
+}
+
+.settings-choice input[type='checkbox'] {
+  width: 1.05rem;
+  height: 1.05rem;
+  cursor: pointer;
+  accent-color: var(--accent);
+}
+
+.settings-choice input[type='checkbox']:disabled + span {
+  color: var(--muted);
+}
+
 .settings-form__actions {
   display: flex;
   gap: 0.5rem;