/* =====================================================================
   leave-register.css — Leave Register UI pieces (.lr-*), design tokens only.
   spec: docs/specs/ui/leave-register-ui-spec.md (approved mockups are the
   visual design); plan: leave-register-ui-build-plan-2026-10-06.md §1.
   Ported from docs/specs/mockups/leave-register/_mockup.css (.lr-* only;
   the mockup's .mk-* annotation and .lr-m-* phone classes are not ported,
   phone layout is out of scope per spec §17).
   ===================================================================== */

.lr-popover { position: relative; display: inline-block; max-width: 420px; margin-top: 6px; padding: 10px 12px; background: var(--surface, #fff); border: 1px solid var(--border-strong, #e2e8f0); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font-size: 13px; line-height: 1.5; color: var(--text-primary); text-align: left; white-space: normal; }
.lr-popover-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.lr-popover-muted { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
/* clickable number in a table cell (opens the popover) */
.lr-num-link { background: none; border: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
/* grey, non-balance-affecting leave rows on the Leave tab (UI spec 4.1) */
.lr-pending-days { color: var(--text-muted); font-style: italic; }
/* read-only summary line at the top of the Edit Line modal (UI spec 6.3) */
.lr-summary-line { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; margin-bottom: 16px; background: var(--content-bg, #f8fafc); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.lr-summary-line b { font-weight: 700; }
/* live count line in the Add Leave modal (UI spec 3.5) */
.lr-count-line { margin: -6px 0 14px; font-size: 13px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
/* stat tiles row (balance card) – same layout as the ledger summary card */
.lr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.lr-stat-label { font-size: 12px; color: var(--text-muted); }
.lr-stat-value { font-size: 20px; font-weight: 700; }
/* warnings panel rows: one employee group, items with actions */
.lr-warn-group { font-weight: 600; font-size: 13px; margin: 6px 0 2px; }
.lr-warn-item { align-items: center; gap: 12px; font-size: 13px; }
.lr-warn-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.lr-accepted { color: var(--text-muted); font-size: 12px; }
/* payslip Days block (UI spec 8) */
.lr-days-block { margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.lr-days-block-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.lr-days-extra { margin-top: 4px; color: var(--text-secondary); }

/* --- Phase 4 additions (owner-accepted resolutions, 2026-10-04) --- */
/* "Before you can finalize" checklist under the run header actions (P4-4, B4).
   Same family as .completion-warning-box; replaces the disabled-button tooltip. */
.lr-finalize-check { margin: 0 0 16px; padding: 12px 16px; background: var(--warning-bg); border: 1px solid #fcd34d; border-radius: 8px; font-size: 13px; color: var(--warning-text); }
.lr-finalize-check-title { font-weight: 600; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.lr-finalize-check ul { margin: 0; padding-left: 22px; }
.lr-finalize-check li { padding: 2px 0; }
.lr-finalize-check a { color: var(--primary); font-weight: 600; }
/* Non-blocking notice (unpaid previous month), neutral info styling */
.lr-notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--border-strong); background: var(--info-bg); color: var(--info-text); border-radius: 6px; font-size: 13px; }
/* Sticky Employee column on the run table (P4-19, B8) */
.lr-sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border-strong), 4px 0 8px -6px rgba(15, 23, 42, .25); min-width: 190px; }
thead .lr-sticky-col { z-index: 2; background: var(--surface); }
.lr-leave-cell { white-space: nowrap; }
.lr-leave-cell small { color: var(--text-muted); font-size: 12px; }
/* Register Status: wraps, muted parts (P4-25) */
.lr-status { font-size: 13px; line-height: 1.5; }
.lr-status-muted { color: var(--text-muted); font-size: 12px; display: block; }
.lr-tag-muted { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-muted); vertical-align: 1px; }
/* Stale banner causes list (P4-1, B1) */
.lr-causes { margin: 4px 0 0; padding-left: 20px; font-weight: 400; }

/* [hidden] must win over these classes' own display rules (same reason as
   design-system.css .form-row[hidden]); used by the slice-2 leave fields. */
.lr-count-line[hidden], .edit-warning[hidden], .btn[hidden], .form-error-banner[hidden],
.field-hint[hidden], .form-group[hidden] { display: none; }

/* Leave Register Status: muted "· Needs recalculation" inline after the split (§3.4, slice 3) */
.lr-status-muted.lr-status-inline { display: inline; }

/* Payroll Run (slice 5): stale banner layout, floating popover (§6.4, §6.7) */
.lr-stale-banner { display: flex; }
.lr-stale-banner[hidden] { display: none; }
.lr-popover-float { position: fixed; z-index: 1000; margin: 0; width: max-content; max-width: 420px; }
.lr-leave-pay-note { font-size: 11px; color: var(--text-muted); }

/* spec: §3.2 — keep room for the search icon; .form-input's padding otherwise wins over .search-input */
.search-wrap.autocomplete-wrap .search-input { padding-left: 34px; }