/* HIVE-467 — Claim create/edit form density toggle. Business asked for a compact button like the claims-list density toggle so the whole claim form can be tightened to the smaller spacing the cargo/vehicle sections already use, and each user's choice becomes their default (per-user localStorage, like the list toggle). State lives on so the pre-paint head script applies it before first render (no flash). "comfortable"/absent = today's spacing. Desktop-focused; the presets only touch vertical rhythm + control padding, never widths, so column alignment and financial rows are unchanged. */ /* ── 1) Toggle UI (mirrors .table-density) ─────────────────────────────────── */ .claim-form-density { position: relative; display: inline-flex; } .claim-form-density-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 13px; } .claim-form-density-btn:hover { background: var(--hover-bg); color: var(--text); } .claim-form-density-btn[aria-expanded="true"] { background: var(--hover-bg); color: var(--text); } .claim-form-density-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px; z-index: 60; } .claim-form-density-menu[hidden] { display: none; } .claim-form-density-menu button { display: block; width: 100%; text-align: left; font-size: 13px; padding: 7px 10px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text); } .claim-form-density-menu button:hover { background: var(--hover-bg); } .claim-form-density-menu button.on { /* brand orange fill + readable ink — --primary keeps its hue in dark. */ background: var(--primary); color: var(--accent-brown-button, #fff); } /* ── 2) Density presets ──────────────────────────────────────────────────── comfortable = no rule (today's spacing). compact ≈ the cargo-section feel; dense = tighter still. Scoped to the claim wizard so nothing else shifts. */ /* compact */ html[data-claim-form-density="compact"] .claims-wizard-form { gap: 10px; } html[data-claim-form-density="compact"] .claims-wizard-form-row { gap: 10px; } html[data-claim-form-density="compact"] .claims-wizard-form-row > label { padding-top: 7px; } html[data-claim-form-density="compact"] .claims-wizard-form-row input, html[data-claim-form-density="compact"] .claims-wizard-form-row select, html[data-claim-form-density="compact"] .claims-wizard-form-row textarea { padding: 6px 10px; } html[data-claim-form-density="compact"] .claims-wizard-section-body { padding-top: 12px; padding-bottom: 12px; } html[data-claim-form-density="compact"] .claims-wizard-subsection-title { margin-top: 10px; } /* dense */ html[data-claim-form-density="dense"] .claims-wizard-form { gap: 6px; } html[data-claim-form-density="dense"] .claims-wizard-form-row { gap: 8px; align-items: center; } html[data-claim-form-density="dense"] .claims-wizard-form-row > label { padding-top: 0; font-size: 12.5px; } html[data-claim-form-density="dense"] .claims-wizard-form-row input, html[data-claim-form-density="dense"] .claims-wizard-form-row select, html[data-claim-form-density="dense"] .claims-wizard-form-row textarea { padding: 5px 9px; font-size: 13px; } html[data-claim-form-density="dense"] .claims-wizard-section-body { padding-top: 9px; padding-bottom: 9px; } html[data-claim-form-density="dense"] .claims-wizard-subsection-title { margin-top: 8px; } /* Mobile: the sidebar action row already wraps; the toggle stays usable but the presets are desktop-oriented — keep them on so a user's choice still applies. */