/* ========================================================================
	 Utility & Helper Classes
	 ------------------------------------------------------------------------
	 Spacing Scale (tokens.css):
		 1:4px  2:8px  3:12px  4:16px  5:20px  6:24px  8:32px  10:40px
	 Core naming:
		 m|p{side?}-{step}  -> margin/padding (t=top, b=bottom, x=left+right, y=top+bottom)
		 gap-{step}         -> flex/grid gap
	 Extended legacy helpers (mb-xs, mb-sm, mb-md, mt-neg-xs) retained temporarily
	 for values between scale steps or negative offsets. Prefer core scale for
	 new code. When refactoring unusual inline values (e.g. 28px, 6px) we round
	 to nearest scale step unless visual regression is material.
	 ======================================================================== */
/* Utility extensions & small component badges */

.status { font:600 10px/1 var(--font-sans); letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:4px; background:var(--color-bg-alt); color:var(--color-text-dim); }
.status-accepted { background:rgba(16,185,129,.15); color:var(--color-ok); }
.status-pending { background:var(--color-accent-soft); color:var(--color-accent); }
.status-expiring { background:rgba(245,158,11,.15); color:var(--color-warn); } /* legacy alias - kept to avoid break if referenced */
.status-warning { background:rgba(245,158,11,.18); color:var(--color-warn); }
.status-critical { background:rgba(239,68,68,.22); color:var(--color-danger); }
.status-expired { background:rgba(239,68,68,.18); color:var(--color-danger); }
.status svg { width:12px; height:12px; }

.role-hint-toggle { cursor:pointer; font-size:11px; color:var(--color-accent); text-decoration:none; }
.role-hint-box { margin-top:6px; padding:8px 10px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:11px; display:none; }
.role-hint-box.active { display:block; }

/* Transition helpers */
.fade-in { animation:fade-in .35s var(--ease-standard); }
@keyframes fade-in { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }

/* Spacing / layout utilities (used to strip inline styles) */
.m-0 { margin:0 !important; }
.mt-1 { margin-top:var(--space-1)!important; }
.mt-2 { margin-top:var(--space-2)!important; }
.mt-3 { margin-top:var(--space-3)!important; }
.mt-4 { margin-top:var(--space-4)!important; }
.mt-5 { margin-top:var(--space-5)!important; }
.mt-6 { margin-top:var(--space-6)!important; }
.mt-8 { margin-top:var(--space-8)!important; }
.mb-0 { margin-bottom:0!important; }
.mb-1 { margin-bottom:var(--space-1)!important; }
.mb-2 { margin-bottom:var(--space-2)!important; }
.mb-3 { margin-bottom:var(--space-3)!important; }
.mb-4 { margin-bottom:var(--space-4)!important; }
.mb-5 { margin-bottom:var(--space-5)!important; }
.mb-6 { margin-bottom:var(--space-6)!important; }
.mb-8 { margin-bottom:var(--space-8)!important; }
.ml-0 { margin-left:0!important; }
.ml-1 { margin-left:var(--space-1)!important; }
.ml-2 { margin-left:var(--space-2)!important; }
.ml-3 { margin-left:var(--space-3)!important; }
.ml-4 { margin-left:var(--space-4)!important; }
/* Fine-grain spacing (legacy bridge) */
.mt-fine-1 { margin-top:6px!important; }
.mt-fine-2 { margin-top:28px!important; }
.mb-fine-1 { margin-bottom:1.1rem!important; }
.my-1 { margin-top:var(--space-1)!important; margin-bottom:var(--space-1)!important; }
.my-2 { margin-top:var(--space-2)!important; margin-bottom:var(--space-2)!important; }
.my-3 { margin-top:var(--space-3)!important; margin-bottom:var(--space-3)!important; }
.my-4 { margin-top:var(--space-4)!important; margin-bottom:var(--space-4)!important; }
.mx-auto { margin-left:auto!important; margin-right:auto!important; }
.ml-auto { margin-left:auto!important; }
.mr-auto { margin-right:auto!important; }
.pt-1 { padding-top:var(--space-1)!important; }
.pt-2 { padding-top:var(--space-2)!important; }
.pt-3 { padding-top:var(--space-3)!important; }
.pt-4 { padding-top:var(--space-4)!important; }
.pb-1 { padding-bottom:var(--space-1)!important; }
.pb-2 { padding-bottom:var(--space-2)!important; }
.pb-3 { padding-bottom:var(--space-3)!important; }
.pb-4 { padding-bottom:var(--space-4)!important; }
.py-1 { padding-top:var(--space-1)!important; padding-bottom:var(--space-1)!important; }
.py-2 { padding-top:var(--space-2)!important; padding-bottom:var(--space-2)!important; }
.py-3 { padding-top:var(--space-3)!important; padding-bottom:var(--space-3)!important; }
.py-4 { padding-top:var(--space-4)!important; padding-bottom:var(--space-4)!important; }
.px-1 { padding-left:var(--space-1)!important; padding-right:var(--space-1)!important; }
.px-2 { padding-left:var(--space-2)!important; padding-right:var(--space-2)!important; }
.px-3 { padding-left:var(--space-3)!important; padding-right:var(--space-3)!important; }
.px-4 { padding-left:var(--space-4)!important; padding-right:var(--space-4)!important; }
.p-1 { padding:var(--space-1)!important; }
.p-2 { padding:var(--space-2)!important; }
.p-3 { padding:var(--space-3)!important; }
.p-4 { padding:var(--space-4)!important; }
.gap-1 { gap:var(--space-1)!important; }
.gap-2 { gap:var(--space-2)!important; }
.gap-3 { gap:var(--space-3)!important; }
.gap-4 { gap:var(--space-4)!important; }
.mt-0 { margin-top:0 !important; }
.mt-neg-xs { margin-top:-.5rem !important; }
.mb-md { margin-bottom:1.25rem !important; }
.mb-xs { margin-bottom:.4rem !important; }
.mb-sm { margin-bottom:.5rem !important; }
.w-210 { min-width:210px !important; }
.w-180 { min-width:180px !important; }
.w-230 { width:230px !important; }
.fs-11 { font-size:11px !important; }
.fs-mini { font-size:.7rem !important; }
.flex { display:flex !important; }
.flex-col { flex-direction:column !important; }
.flex-wrap { flex-wrap:wrap !important; }
.ai-center { align-items:center !important; }
.ai-end { align-items:flex-end !important; }
.gap-xs { gap:.25rem !important; }
.gap-sm { gap:.4rem !important; }
.gap-md { gap:.5rem !important; }
.gap-base { gap:.5rem !important; }

/* Width & alignment compound helpers */
.row-actions { white-space:nowrap !important; }

/* User menu */
.site-nav .nav-right { position:relative; }
.user-menu-panel { position:absolute; top:100%; right:0; margin-top:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:6px 0; min-width:220px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:2px; animation:fade-in .15s var(--ease-standard); z-index:120; }
.user-menu-panel[hidden] { display:none !important; }
.menu-item { background:none; border:0; width:100%; text-align:left; padding:8px 14px; font:500 12px/1.2 var(--font-sans); color:var(--color-text); cursor:pointer; display:block; }
.menu-item:hover, .menu-item:focus { background:var(--color-bg-alt); outline:none; }
.menu-section:not(:last-child) { border-bottom:1px solid var(--color-border); }

/* (Toast styles introduced in later step) */

/* Accessibility helpers */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* ---------------------------------------------------------------------
	Theme Unification Utilities (Cards, Stacks, Badges, Status Chips)
	------------------------------------------------------------------ */
/* Vertical stacking rhythm: replaces ad-hoc margin-top inline styles */
.stack > * + * { margin-top: var(--space-5); }
.stack-tight > * + * { margin-top: var(--space-3); }

/* Form layout standardization */
.form { display:flex; flex-direction:column; }
.form-row { display:flex; flex-direction:column; }
.form-row-inline { display:flex; flex-wrap:wrap; gap:var(--space-4); }
.form-row + .form-row { margin-top: var(--space-4); }
.form-row-inline + .form-row-inline { margin-top: var(--space-4); }
.form-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-top: var(--space-5); }
.form-row label.label, .form-row > .label { margin-bottom: var(--space-2); }
.input-small { padding:6px 10px; font-size:12px; }
.input-inline { width:auto; min-width:200px; }

/* Card flow variants (Access Planner steps) */
.card-flow { background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3); }
.card-flow h2 { margin:0; font-size:14px; font-weight:600; display:flex; gap: var(--space-2); align-items:center; }

/* Badges (step, warn, accent) */
.badge { display:inline-flex; align-items:center; font:600 10px/1 var(--font-sans); letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius-pill); background:var(--color-bg-alt); color:var(--color-text-dim); }
.badge-step { background: var(--color-accent); color:#fff; }
.badge-warn { background: var(--color-warn); color:#fff; }
.badge-accent { background: var(--color-accent); color:#fff; }

/* Status chips for diff tables */
.status-chip { display:inline-flex; align-items:center; gap:4px; font:500 11px/1 var(--font-sans); padding:4px 8px; border-radius: var(--radius-md); background: var(--color-bg-alt); color: var(--color-text-dim); border:1px solid var(--color-border); }
.status-chip svg { width:12px; height:12px; }
.status-chip-ok { background: rgba(16,185,129,.15); color: var(--color-ok); }
.status-chip-change { background: var(--color-accent-soft); color: var(--color-accent); }
.status-chip-warn { background: rgba(245,158,11,.18); color: var(--color-warn); }
.status-chip-muted { background: var(--color-bg-alt); color: var(--color-text-dim); }

/* Diff table compact variant using unified table styling */
table.diff { width:100%; border-collapse:collapse; font-size:13px; }
table.diff th, table.diff td { padding:6px 10px; border-bottom:1px solid var(--color-border); vertical-align:top; }
table.diff th { background: var(--color-surface-alt); font-weight:600; font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
table.diff .is-ok td { background: rgba(16,185,129,.03); }
table.diff .is-changed td { background: var(--color-accent-soft); }
table.diff .is-warning td { background: rgba(245,158,11,.06); }