Merge: t-paliad-251 — Deadline form overhaul (m/paliad#82)

frontend/src/styles/global.css

@@ -7544,6 +7544,78 @@ dialog.modal::backdrop {
     border-left: 2px solid #b88800;
 }
 
+/* t-paliad-251 — Auto-derived hint variant. Lime-tint, sibling of the
+   yellow warning variant. Carries a small pill-badge in front (the
+   "Auto" label) followed by the derived rule name. */
+.form-hint--auto {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: var(--color-bg-lime-tint);
+    color: var(--color-text);
+    padding: 0.3rem 0.5rem;
+    border-radius: var(--radius-sm, 4px);
+    border-left: 2px solid var(--color-accent);
+}
+.form-hint-badge {
+    display: inline-block;
+    padding: 0.05rem 0.45rem;
+    border-radius: 999px;
+    background: var(--color-accent);
+    color: var(--color-text);
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+/* t-paliad-251 — label row that hosts both the form label and an
+   inline action (Standardtitel button, Rule-sort dropdown). The label
+   keeps growing to push the action to the right edge. */
+.form-field-label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+}
+.form-field-label-row > label {
+    margin: 0;
+}
+
+/* Inline action button rendered next to a form label (Standardtitel).
+   Text-link styling so it doesn't compete with the primary CTA. */
+.btn-link-action {
+    background: transparent;
+    border: none;
+    color: var(--color-link, var(--color-text));
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: 0.82rem;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.btn-link-action:hover {
+    color: var(--color-accent);
+}
+
+/* Small dropdown rendered alongside the Rule label to switch the
+   ordering. Tone-down sizing so it doesn't look like a co-equal
+   form field. Specificity-bumped to win over `.form-field select`'s
+   width: 100% baseline. */
+.form-field select.rule-sort-select,
+select.rule-sort-select {
+    width: auto;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.82rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+}
+
 /* Inline checkbox label inside the attach-unit form. */
 .form-checkbox {
     display: inline-flex;
@@ -12541,6 +12613,37 @@ dialog.quick-add-sheet::backdrop {
     transition: border-color 0.15s ease;
 }
 .event-type-browse-search:focus { border-color: var(--color-accent); }
+/* t-paliad-251 — jurisdiction filter chips inside the browse modal
+   header. Sits below the search input, between the search and the
+   results list. Active chip uses the lime-tint chip palette already
+   established by .event-type-collapsed* (t-paliad-165). */
+.event-type-browse-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+.event-type-browse-chip {
+    padding: 0.2rem 0.7rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-family: var(--font-sans);
+    font-size: 0.78rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+.event-type-browse-chip:hover {
+    background: var(--color-bg-subtle);
+    color: var(--color-text);
+}
+.event-type-browse-chip--active {
+    background: var(--color-bg-lime-tint);
+    border-color: var(--color-accent);
+    color: var(--color-text);
+    font-weight: 600;
+}
 .event-type-browse-list {
     flex: 1 1 auto;
     overflow-y: auto;