/* ═══════════════════════════════════════════════════════════════════════════
   AtlasLO — Design System v2
   ────────────────────────────────────────────────────────────────────────────
   Pass 1 foundation: refined tokens, light page header, deterministic tables,
   semantic status pills, sentence-case buttons, dark mode parity. Loaded
   AFTER components/atlas-lo.css so it overrides the v1 sketches cleanly.

   Scope: only :root[data-entity="1000"]. Other entities untouched.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────── 1. TOKENS — LIGHT ──────────────────────────── */
:root[data-entity="1000"] {
	/* Surfaces */
	--al-paper:           #FAF8F3;
	--al-paper-2:         #F4F1EA;
	--al-paper-3:         #EDE9DF;
	--al-card:            #FFFFFF;
	--al-card-2:          #FCFAF5;

	/* Ink */
	--al-ink:             #1A1614;
	--al-ink-2:           #4A4540;
	--al-ink-3:           #7A736A;
	--al-ink-4:           #A39B91;

	/* Hairlines */
	--al-hairline:        rgba(26, 22, 20, 0.08);
	--al-hairline-strong: rgba(26, 22, 20, 0.16);
	--al-hairline-soft:   rgba(26, 22, 20, 0.04);

	/* Accent (oxblood) */
	--al-accent:          #6B1F1F;
	--al-accent-hover:    #872828;
	--al-accent-deep:     #4A1414;
	--al-accent-soft:     rgba(107, 31, 31, 0.08);
	--al-accent-line:     rgba(107, 31, 31, 0.24);
	--al-accent-fg:       #FAF8F3;

	/* Status palette (5 semantic states) */
	--al-status-intake-bg:    #FEF3E2;
	--al-status-intake-fg:    #92400E;
	--al-status-intake-line:  #FDE4BD;

	--al-status-active-bg:    #E8F1EA;
	--al-status-active-fg:    #1B5E32;
	--al-status-active-line:  #C9E0CE;

	--al-status-pending-bg:   #FEF6E2;
	--al-status-pending-fg:   #7C5E07;
	--al-status-pending-line: #F7E2A1;

	--al-status-closed-bg:    #EEEDEA;
	--al-status-closed-fg:    #565148;
	--al-status-closed-line:  #DBD8D2;

	--al-status-archived-bg:  #F0EEEA;
	--al-status-archived-fg:  #7A736A;
	--al-status-archived-line: #DDD9D2;

	/* Type */
	--al-font-display:    'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	--al-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--al-font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Type scale */
	--al-text-xxs:        10.5px;
	--al-text-xs:         11.5px;
	--al-text-sm:         12.5px;
	--al-text-base:       13.5px;
	--al-text-md:         14.5px;
	--al-text-lg:         16px;
	--al-text-xl:         19px;
	--al-text-2xl:        24px;
	--al-text-3xl:        30px;
	--al-text-4xl:        36px;

	/* Spacing */
	--al-s-1:  4px;
	--al-s-2:  8px;
	--al-s-3:  12px;
	--al-s-4:  16px;
	--al-s-5:  20px;
	--al-s-6:  24px;
	--al-s-7:  32px;
	--al-s-8:  40px;
	--al-s-9:  56px;
	--al-s-10: 72px;

	/* Radii — sharp by design, with a single soft option for pills */
	--al-r-0:    0;
	--al-r-pill: 999px;

	/* Shadows — subtle, layered */
	--al-shadow-1: 0 1px 2px rgba(26, 22, 20, 0.04);
	--al-shadow-2: 0 2px 8px rgba(26, 22, 20, 0.06), 0 1px 2px rgba(26, 22, 20, 0.04);
	--al-shadow-3: 0 8px 24px rgba(26, 22, 20, 0.08), 0 2px 6px rgba(26, 22, 20, 0.04);
	--al-shadow-overlay: 0 24px 64px rgba(26, 22, 20, 0.18), 0 8px 24px rgba(26, 22, 20, 0.10);
	--al-ring:    0 0 0 3px rgba(107, 31, 31, 0.18);

	/* Motion */
	--al-ease:    cubic-bezier(0.4, 0, 0.2, 1);
	--al-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--al-t-fast:  120ms var(--al-ease);
	--al-t-base:  180ms var(--al-ease);
	--al-t-slow:  280ms var(--al-ease);
}


/* ──────────────────────────── 2. TOKENS — DARK ──────────────────────────── */
:root[data-entity="1000"][data-theme-mode="dark"] {
	--al-paper:           #18181B;
	--al-paper-2:         #1F1F23;
	--al-paper-3:         #27272A;
	--al-card:            #1F1F23;
	--al-card-2:          #232328;

	--al-ink:             #FAFAFA;
	--al-ink-2:           #C4C4C8;
	--al-ink-3:           #8E8E92;
	--al-ink-4:           #5F5F63;

	--al-hairline:        rgba(250, 250, 250, 0.08);
	--al-hairline-strong: rgba(250, 250, 250, 0.16);
	--al-hairline-soft:   rgba(250, 250, 250, 0.04);

	--al-accent:          #D87575;
	--al-accent-hover:    #E48A8A;
	--al-accent-deep:     #B85D5D;
	--al-accent-soft:     rgba(216, 117, 117, 0.14);
	--al-accent-line:     rgba(216, 117, 117, 0.32);
	--al-accent-fg:       #18181B;

	--al-status-intake-bg:    rgba(217, 119, 6, 0.16);
	--al-status-intake-fg:    #FCD34D;
	--al-status-intake-line:  rgba(217, 119, 6, 0.32);

	--al-status-active-bg:    rgba(34, 197, 94, 0.14);
	--al-status-active-fg:    #B5C5A8;
	--al-status-active-line:  rgba(34, 197, 94, 0.32);

	--al-status-pending-bg:   rgba(234, 179, 8, 0.14);
	--al-status-pending-fg:   #FDE68A;
	--al-status-pending-line: rgba(234, 179, 8, 0.32);

	--al-status-closed-bg:    rgba(161, 161, 170, 0.10);
	--al-status-closed-fg:    #A1A1AA;
	--al-status-closed-line:  rgba(161, 161, 170, 0.24);

	--al-status-archived-bg:  rgba(82, 82, 91, 0.16);
	--al-status-archived-fg:  #71717A;
	--al-status-archived-line: rgba(82, 82, 91, 0.28);

	--al-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--al-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
	--al-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
	--al-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.40);
	--al-ring:    0 0 0 3px rgba(216, 117, 117, 0.32);
}


/* ──────────────────────────── 3. PAGE WRAPPER ───────────────────────────── */
:root[data-entity="1000"] body { background: var(--al-paper); }

:root[data-entity="1000"] .al-page {
	background: var(--al-paper);
	color: var(--al-ink);
	font-family: var(--al-font-body);
	font-size: var(--al-text-base);
	line-height: 1.55;
	padding: var(--al-s-6) var(--al-s-7);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 768px) {
	:root[data-entity="1000"] .al-page {
		padding: var(--al-s-4) var(--al-s-4);
	}
}

:root[data-entity="1000"] .al-page a:not(.al-btn):not(.side-menu__item) {
	color: var(--al-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--al-hairline);
	transition: color var(--al-t-fast), border-color var(--al-t-fast);
}
:root[data-entity="1000"] .al-page a:not(.al-btn):not(.side-menu__item):hover {
	color: var(--al-accent);
	border-bottom-color: var(--al-accent);
}

:root[data-entity="1000"] .al-page ::selection {
	background: var(--al-accent);
	color: var(--al-accent-fg);
}


/* ───────────────────── 4. PAGE HEADER — light, editorial ─────────────────
   Drops the dark brown strip entirely. AtlasLO now uses a clean title block
   that lives inside the content area, like Stripe / Linear / NetDocuments.

   The base theme's .page-header-breadcrumb has several rules we must beat:
     - background: var(--sa-primary-color)   → tints it brown
     - color: #fff                            → invisible on light bg
     - padding-inline-start: 16.4rem          → pushes content off-screen
     - top: 4rem                              → unwanted offset
     - margin: 0px 0px -24px 0px              → causes content overlap
   We override all of them explicitly, then build the new layout.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .page-header-breadcrumb {
	background: var(--al-paper) !important;
	background-image: none !important;
	color: var(--al-ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--al-hairline) !important;
	border-radius: 0 !important;
	/* PRESERVE the sidebar/header clearance — the base theme sets these to
	   position content beyond the fixed sidebar (16.4rem) and below the
	   fixed top bar (top:4rem). We KEEP that clearance, only restyle. */
	padding-inline-start: 16.4rem !important;
	padding-inline-end: 1.75rem !important;
	padding-block-start: 1.5rem !important;
	padding-block-end: 1.25rem !important;
	margin: 0 0 var(--al-s-5) 0 !important;
	min-height: 0 !important;
	gap: var(--al-s-4) !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
}
@media (max-width: 991.98px) {
	:root[data-entity="1000"] .page-header-breadcrumb {
		padding-inline-start: 1rem !important;
		padding-inline-end: 1rem !important;
		padding-block-start: 1rem !important;
		padding-block-end: 1rem !important;
		top: 0 !important;
	}
}

:root[data-entity="1000"] .page-header-breadcrumb,
:root[data-entity="1000"] .page-header-breadcrumb * {
	color: var(--al-ink);
}

:root[data-entity="1000"] .page-header-breadcrumb h4,
:root[data-entity="1000"] .page-header-breadcrumb .h4 {
	font-family: var(--al-font-display) !important;
	font-weight: 600 !important;
	font-size: var(--al-text-3xl) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--al-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--al-s-3) !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	min-width: 0;
	flex: 1 1 auto;
}

:root[data-entity="1000"] .page-header-breadcrumb .al-subtitle {
	display: block !important;
	font-family: var(--al-font-body) !important;
	font-size: var(--al-text-sm) !important;
	font-weight: 400 !important;
	color: var(--al-ink-3) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-top: var(--al-s-2) !important;
	width: 100%;
	flex-basis: 100%;
}

:root[data-entity="1000"] .page-header-breadcrumb .al-pill {
	background: var(--al-paper-2) !important;
	color: var(--al-ink-2) !important;
	border: 1px solid var(--al-hairline) !important;
	font-family: var(--al-font-body) !important;
	font-size: var(--al-text-xs) !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 3px 8px !important;
	border-radius: var(--al-r-pill) !important;
	margin-left: var(--al-s-2) !important;
	vertical-align: middle !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

/* Actions cluster on the right */
:root[data-entity="1000"] .page-header-breadcrumb > .d-flex,
:root[data-entity="1000"] .page-header-breadcrumb > div:last-child {
	flex: 0 0 auto;
	align-items: center;
}


/* ────────────────────────── 5. BUTTONS — sentence case ─────────────────── */
:root[data-entity="1000"] .al-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--al-s-2);
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: 8px 14px;
	height: 36px;
	background: var(--al-card);
	color: var(--al-ink);
	border: 1px solid var(--al-hairline-strong);
	border-radius: var(--al-r-0);
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: background var(--al-t-fast), border-color var(--al-t-fast), color var(--al-t-fast), box-shadow var(--al-t-fast);
	white-space: nowrap;
	user-select: none;
}
:root[data-entity="1000"] .al-btn:hover {
	background: var(--al-paper-2);
	border-color: var(--al-ink-3);
	color: var(--al-ink);
}
:root[data-entity="1000"] .al-btn:focus-visible {
	outline: none;
	box-shadow: var(--al-ring);
	border-color: var(--al-accent);
}
:root[data-entity="1000"] .al-btn:disabled,
:root[data-entity="1000"] .al-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

:root[data-entity="1000"] .al-btn--primary {
	background: var(--al-accent);
	color: var(--al-accent-fg);
	border-color: var(--al-accent);
}
:root[data-entity="1000"] .al-btn--primary:hover {
	background: var(--al-accent-hover);
	border-color: var(--al-accent-hover);
	color: var(--al-accent-fg);
}

:root[data-entity="1000"] .al-btn--ghost {
	background: transparent;
	color: var(--al-ink-2);
	border-color: transparent;
}
:root[data-entity="1000"] .al-btn--ghost:hover {
	background: var(--al-paper-2);
	color: var(--al-ink);
	border-color: var(--al-hairline);
}

:root[data-entity="1000"] .al-btn--sm {
	height: 28px;
	padding: 4px 10px;
	font-size: var(--al-text-xs);
}
:root[data-entity="1000"] .al-btn--lg {
	height: 44px;
	padding: 12px 20px;
	font-size: var(--al-text-base);
}

/* Icons sit inline, inherit color */
:root[data-entity="1000"] .al-btn i,
:root[data-entity="1000"] .al-btn svg {
	color: inherit;
	flex-shrink: 0;
}


/* ────────────────────────── 6. STATUS PILLS — semantic ──────────────────
   One pill component. Five semantic states. Override .al-pill where used.
   ───────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .al-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--al-font-body);
	font-size: var(--al-text-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: var(--al-r-pill);
	border: 1px solid transparent;
	line-height: 1.5;
	text-transform: capitalize;
	white-space: nowrap;
}
:root[data-entity="1000"] .al-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--al-r-pill);
	background: currentColor;
	flex-shrink: 0;
}

:root[data-entity="1000"] .al-status--intake {
	background: var(--al-status-intake-bg);
	color: var(--al-status-intake-fg);
	border-color: var(--al-status-intake-line);
}
:root[data-entity="1000"] .al-status--open,
:root[data-entity="1000"] .al-status--active {
	background: var(--al-status-active-bg);
	color: var(--al-status-active-fg);
	border-color: var(--al-status-active-line);
}
:root[data-entity="1000"] .al-status--pending {
	background: var(--al-status-pending-bg);
	color: var(--al-status-pending-fg);
	border-color: var(--al-status-pending-line);
}
:root[data-entity="1000"] .al-status--closed {
	background: var(--al-status-closed-bg);
	color: var(--al-status-closed-fg);
	border-color: var(--al-status-closed-line);
}
:root[data-entity="1000"] .al-status--archived {
	background: var(--al-status-archived-bg);
	color: var(--al-status-archived-fg);
	border-color: var(--al-status-archived-line);
}

/* Generic .al-pill (non-status) — neutral chip */
:root[data-entity="1000"] .al-pill:not(.al-status) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--al-paper-2);
	color: var(--al-ink-2);
	border: 1px solid var(--al-hairline);
	font-family: var(--al-font-body);
	font-size: var(--al-text-xs);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: 3px 8px;
	border-radius: var(--al-r-pill);
	line-height: 1.4;
}


/* ──────────────────────────── 7. TABLES — deterministic ─────────────────
   The base theme has aggressive global table rules:
     - table tbody tr:nth-child(even) { background: #f8fafb !important }
     - table tbody tr:hover { background: #e9ecef !important; cursor: pointer }
   These bleed into .al-table and create the "boxed cells" look. We neutralize
   them and re-apply our own restrained striping and hover.
   ───────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .al-table {
	width: 100% !important;
	border-collapse: collapse;
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-variant-numeric: tabular-nums;
	background: var(--al-card);
	border: 1px solid var(--al-hairline);
	table-layout: auto;
}
:root[data-entity="1000"] .al-card .table-responsive {
	width: 100%;
	display: block;
	overflow-x: auto;
}

/* Kill the platform's global striping for AtlasLO tables */
:root[data-entity="1000"] .al-table tbody tr,
:root[data-entity="1000"] .al-table tbody tr.odd,
:root[data-entity="1000"] .al-table tbody tr.even,
:root[data-entity="1000"] .al-table tbody tr:nth-child(odd),
:root[data-entity="1000"] .al-table tbody tr:nth-child(even) {
	background-color: transparent !important;
}

/* Safety net: `.al-row` (defined in atlas-lo.css with display:flex) was being
   applied to <tr> elements by the JS row renderer, which converted the row
   into a flex container and broke table column alignment. Force any <tr>
   inside an .al-table back to table-row display. */
:root[data-entity="1000"] .al-table tr,
:root[data-entity="1000"] .al-table tr.al-row {
	display: table-row !important;
}
:root[data-entity="1000"] .al-table thead {
	display: table-header-group !important;
}
:root[data-entity="1000"] .al-table tbody {
	display: table-row-group !important;
}

:root[data-entity="1000"] .al-table thead th {
	background: var(--al-paper-2);
	color: var(--al-ink-3);
	font-family: var(--al-font-body);
	font-weight: 600;
	font-size: var(--al-text-xxs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: var(--al-s-3) var(--al-s-4);
	border-bottom: 1px solid var(--al-hairline-strong);
	white-space: nowrap;
	vertical-align: middle;
}

:root[data-entity="1000"] .al-table tbody td {
	padding: var(--al-s-4) var(--al-s-4);
	border-bottom: 1px solid var(--al-hairline);
	color: var(--al-ink);
	vertical-align: middle;
	font-size: var(--al-text-base);
}

:root[data-entity="1000"] .al-table tbody tr {
	transition: background var(--al-t-fast);
}
:root[data-entity="1000"] .al-table tbody tr:hover,
:root[data-entity="1000"] .al-table tbody tr.odd:hover,
:root[data-entity="1000"] .al-table tbody tr.even:hover {
	background-color: var(--al-paper-2) !important;
	cursor: pointer;
}
:root[data-entity="1000"] .al-table tbody tr:last-child td {
	border-bottom: 0;
}
/* Strip aggressive borders applied by the platform's sa-table rules */
:root[data-entity="1000"] .al-table td,
:root[data-entity="1000"] .al-table th {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
}

:root[data-entity="1000"] .al-table .text-end,
:root[data-entity="1000"] .al-table th.text-end,
:root[data-entity="1000"] .al-table td.text-end { text-align: right; }
:root[data-entity="1000"] .al-table .text-center { text-align: center; }
:root[data-entity="1000"] .al-table .text-nowrap { white-space: nowrap; }

/* Numeric / monospace cells */
:root[data-entity="1000"] .al-table td.al-text-mono,
:root[data-entity="1000"] .al-table td .al-text-mono {
	font-family: var(--al-font-mono);
	font-size: var(--al-text-xs);
	color: var(--al-ink-2);
}

:root[data-entity="1000"] .al-table td.al-meta,
:root[data-entity="1000"] .al-table td .al-meta {
	color: var(--al-ink-3);
	font-size: var(--al-text-sm);
}

/* Strong / primary cell (case number, name) */
:root[data-entity="1000"] .al-table td.fw-semibold,
:root[data-entity="1000"] .al-table td.fw-bold {
	color: var(--al-ink);
	font-weight: 600;
}

/* Responsive column hiding — applied to BOTH th and td identically */
@media (max-width: 1280px) {
	:root[data-entity="1000"] .al-table .al-col-secondary { display: none; }
}
@media (max-width: 992px) {
	:root[data-entity="1000"] .al-table .al-col-tertiary { display: none; }
}

/* Wrapper for tables — gives them air + shadow */
:root[data-entity="1000"] .al-table-wrap,
:root[data-entity="1000"] .table-responsive {
	background: var(--al-card);
	border: 1px solid var(--al-hairline);
	border-radius: var(--al-r-0);
	overflow-x: auto;
}
:root[data-entity="1000"] .al-card .table-responsive {
	border: 0;
	margin: 0 calc(var(--al-s-5) * -1) calc(var(--al-s-5) * -1) calc(var(--al-s-5) * -1);
}
:root[data-entity="1000"] .al-card .table-responsive .al-table {
	border: 0;
	border-top: 1px solid var(--al-hairline);
}


/* ──────────────────────────── 8. CARDS ──────────────────────────────────── */
:root[data-entity="1000"] .al-card {
	background: var(--al-card);
	border: 1px solid var(--al-hairline);
	padding: var(--al-s-6);
	margin-bottom: var(--al-s-5);
	box-shadow: var(--al-shadow-1);
	position: relative;
}

:root[data-entity="1000"] .al-card--quiet {
	background: transparent;
	border-color: var(--al-hairline);
	box-shadow: none;
}
:root[data-entity="1000"] .al-card--inset {
	background: var(--al-paper-2);
	border-color: var(--al-hairline);
	box-shadow: none;
}


/* ──────────────────────────── 9. HERO — flatter ─────────────────────────
   Drops the dramatic 52px italic serif. Editorial but conventional now.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .al-hero {
	background: var(--al-card);
	border: 1px solid var(--al-hairline);
	border-top: 0;
	padding: var(--al-s-6) var(--al-s-7);
	margin: 0 0 var(--al-s-5) 0;
	overflow: hidden;
	box-shadow: var(--al-shadow-1);
}
:root[data-entity="1000"] .al-hero::before { display: none; } /* drop paper grain */

:root[data-entity="1000"] .al-hero__caption {
	font-family: var(--al-font-body);
	font-size: var(--al-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--al-ink-3);
	margin-bottom: var(--al-s-3);
	font-weight: 600;
}
:root[data-entity="1000"] .al-hero__caption strong {
	color: var(--al-ink-2);
	font-weight: 600;
	margin-right: var(--al-s-2);
}

:root[data-entity="1000"] .al-hero__title {
	font-family: var(--al-font-display);
	font-weight: 600;
	font-size: var(--al-text-3xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--al-ink);
	margin: 0 0 var(--al-s-2) 0;
	max-width: 100%;
}
:root[data-entity="1000"] .al-hero__title em {
	font-style: normal;
	font-weight: 600;
	color: var(--al-accent);
}

:root[data-entity="1000"] .al-hero__court {
	font-family: var(--al-font-body);
	font-style: normal;
	font-size: var(--al-text-sm);
	color: var(--al-ink-3);
	margin-bottom: var(--al-s-4);
}

:root[data-entity="1000"] .al-hero--dash {
	border-top-width: 0;
	padding: var(--al-s-6) var(--al-s-7);
}
:root[data-entity="1000"] .al-hero--dash .al-hero__title { font-size: var(--al-text-2xl); }


/* ──────────────────────────── 10. EYEBROW / META ────────────────────────── */
:root[data-entity="1000"] .al-eyebrow {
	font-family: var(--al-font-body);
	font-size: var(--al-text-xxs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--al-ink-3);
	margin: 0 0 var(--al-s-2) 0;
	display: inline-block;
}
:root[data-entity="1000"] .al-eyebrow--accent { color: var(--al-accent); }

:root[data-entity="1000"] .al-meta {
	font-size: var(--al-text-sm);
	color: var(--al-ink-3);
	letter-spacing: 0;
}


/* ──────────────────────────── 11. KPI STAT TILES ────────────────────────── */
:root[data-entity="1000"] .al-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--al-s-3);
	background: transparent;
	border: 0;
	margin-bottom: var(--al-s-5);
}
:root[data-entity="1000"] .al-stat {
	background: var(--al-card);
	border: 1px solid var(--al-hairline);
	padding: var(--al-s-5);
	display: flex;
	flex-direction: column;
	gap: var(--al-s-1);
	box-shadow: var(--al-shadow-1);
	transition: box-shadow var(--al-t-fast), transform var(--al-t-fast);
}
:root[data-entity="1000"] .al-stat:hover {
	box-shadow: var(--al-shadow-2);
}
:root[data-entity="1000"] .al-stat__label {
	font-family: var(--al-font-body);
	font-size: var(--al-text-xxs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--al-ink-3);
	margin-bottom: var(--al-s-1);
}
:root[data-entity="1000"] .al-stat__value {
	font-family: var(--al-font-display);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.1;
	color: var(--al-ink);
	letter-spacing: -0.01em;
	font-variant-numeric: lining-nums tabular-nums;
}
:root[data-entity="1000"] .al-stat__delta {
	font-size: var(--al-text-sm);
	color: var(--al-ink-3);
	margin-top: var(--al-s-1);
}
:root[data-entity="1000"] .al-stat--accent::before { display: none; }


/* ──────────────────────────── 12. FORM CONTROLS ────────────────────────── */
:root[data-entity="1000"] .al-input,
:root[data-entity="1000"] .al-select,
:root[data-entity="1000"] .al-textarea {
	width: 100%;
	height: 38px;
	padding: 8px 12px;
	background: var(--al-card);
	color: var(--al-ink);
	font-family: var(--al-font-body);
	font-size: var(--al-text-base);
	border: 1px solid var(--al-hairline-strong);
	border-radius: var(--al-r-0);
	transition: border-color var(--al-t-fast), box-shadow var(--al-t-fast);
	line-height: 1.4;
}
:root[data-entity="1000"] .al-textarea {
	height: auto;
	min-height: 80px;
	resize: vertical;
}
:root[data-entity="1000"] .al-input:focus,
:root[data-entity="1000"] .al-select:focus,
:root[data-entity="1000"] .al-textarea:focus {
	outline: none;
	border-color: var(--al-accent);
	box-shadow: var(--al-ring);
}
:root[data-entity="1000"] .al-input::placeholder,
:root[data-entity="1000"] .al-textarea::placeholder {
	color: var(--al-ink-4);
}

/* Form label conventions: keep eyebrow uppercase for SECTIONS, but use
   sentence case for field labels. Section is .al-eyebrow, field label is
   .al-form-label. */
:root[data-entity="1000"] .al-form-label {
	display: block;
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	color: var(--al-ink-2);
	margin-bottom: var(--al-s-2);
	letter-spacing: 0;
	text-transform: none;
}


/* ──────────────────────────── 13. EMPTY STATES ──────────────────────────── */
:root[data-entity="1000"] .al-empty {
	padding: var(--al-s-8) var(--al-s-5);
	text-align: center;
	background: transparent;
	border: 1px dashed var(--al-hairline-strong);
}
:root[data-entity="1000"] .al-empty__title {
	font-family: var(--al-font-body);
	font-weight: 600;
	font-size: var(--al-text-md);
	color: var(--al-ink);
	margin-bottom: var(--al-s-2);
}
:root[data-entity="1000"] .al-empty__body {
	font-size: var(--al-text-sm);
	color: var(--al-ink-3);
	max-width: 420px;
	margin: 0 auto;
}


/* ──────────────────────────── 14. TAB BAR ───────────────────────────────── */
:root[data-entity="1000"] .al-tab-bar {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--al-hairline-strong);
	margin: 0 0 var(--al-s-5) 0;
	overflow-x: auto;
	scrollbar-width: thin;
}
:root[data-entity="1000"] .al-tab {
	appearance: none;
	background: transparent;
	border: 0;
	padding: var(--al-s-3) var(--al-s-5);
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--al-ink-3);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: color var(--al-t-fast);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
:root[data-entity="1000"] .al-tab:hover { color: var(--al-ink); }
:root[data-entity="1000"] .al-tab.is-active,
:root[data-entity="1000"] .al-tab.active {
	color: var(--al-ink);
	border-bottom-color: var(--al-accent);
}


/* ──────────────────────────── 15. FILTER CHIPS ──────────────────────────── */
:root[data-entity="1000"] .al-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	color: var(--al-ink-2);
	border: 1px solid var(--al-hairline-strong);
	border-radius: var(--al-r-pill);
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--al-t-fast), color var(--al-t-fast), border-color var(--al-t-fast);
	white-space: nowrap;
}
:root[data-entity="1000"] .al-chip:hover {
	background: var(--al-paper-2);
	color: var(--al-ink);
}
:root[data-entity="1000"] .al-chip.is-active {
	background: var(--al-ink);
	color: var(--al-card);
	border-color: var(--al-ink);
}
:root[data-entity="1000"][data-theme-mode="dark"] .al-chip.is-active {
	background: var(--al-ink);
	color: var(--al-paper);
}


/* ──────────────────────────── 16. SCROLLBARS ─────────────────────────────
   Subtle, branded.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .al-page *::-webkit-scrollbar { width: 8px; height: 8px; }
:root[data-entity="1000"] .al-page *::-webkit-scrollbar-track { background: transparent; }
:root[data-entity="1000"] .al-page *::-webkit-scrollbar-thumb {
	background: var(--al-hairline-strong);
	border-radius: var(--al-r-pill);
}
:root[data-entity="1000"] .al-page *::-webkit-scrollbar-thumb:hover {
	background: var(--al-ink-4);
}


/* ──────────────────────────── 17. CONTENT AREA OVERRIDES ─────────────────
   The platform applies a few global styles to .app-content & friends that
   need adjustment for AtlasLO's editorial layout.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .main-content.app-content {
	background: var(--al-paper);
}

/* The platform's <h4 class="fw-medium"> used in page-header — already covered
   by the .page-header-breadcrumb h4 rule above, but ensure no left-over
   color from default theme leaks through. */


/* ──────────────────────────── 18. DARK MODE — refinements ───────────────── */
:root[data-entity="1000"][data-theme-mode="dark"] body { background: var(--al-paper); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-page { background: var(--al-paper); color: var(--al-ink); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-card { background: var(--al-card); border-color: var(--al-hairline); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-table { background: var(--al-card); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-table thead th { background: var(--al-paper-2); color: var(--al-ink-3); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-input,
:root[data-entity="1000"][data-theme-mode="dark"] .al-select,
:root[data-entity="1000"][data-theme-mode="dark"] .al-textarea {
	background: var(--al-paper-2);
	color: var(--al-ink);
	border-color: var(--al-hairline-strong);
}
:root[data-entity="1000"][data-theme-mode="dark"] .al-stat { background: var(--al-card); }
:root[data-entity="1000"][data-theme-mode="dark"] .al-hero { background: var(--al-card); }


/* ──────────────────────────── 19. FOCUS RINGS — accessibility ──────────── */
:root[data-entity="1000"] :focus-visible {
	outline: none;
	box-shadow: var(--al-ring);
	border-radius: var(--al-r-0);
}


/* ──────────────────────────── 20. MOTION — prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce) {
	:root[data-entity="1000"] *,
	:root[data-entity="1000"] *::before,
	:root[data-entity="1000"] *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ────────────────────────────── 21. MODALS ─────────────────────────────── */
:root[data-entity="1000"] .modal-content {
	background: var(--al-card) !important;
	border: 1px solid var(--al-hairline-strong) !important;
	border-radius: var(--al-r-0) !important;
	box-shadow: var(--al-shadow-overlay) !important;
	color: var(--al-ink) !important;
}
:root[data-entity="1000"] .modal-header {
	background: var(--al-card) !important;
	border-bottom: 1px solid var(--al-hairline) !important;
	padding: var(--al-s-5) var(--al-s-6) !important;
	align-items: center !important;
}
:root[data-entity="1000"] .modal-title {
	font-family: var(--al-font-display) !important;
	font-size: var(--al-text-xl) !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em !important;
	color: var(--al-ink) !important;
	margin: 0 !important;
}
:root[data-entity="1000"] .modal-body {
	background: var(--al-card) !important;
	color: var(--al-ink) !important;
	padding: var(--al-s-6) !important;
	font-size: var(--al-text-base) !important;
}
:root[data-entity="1000"] .modal-footer {
	background: var(--al-paper) !important;
	border-top: 1px solid var(--al-hairline) !important;
	padding: var(--al-s-4) var(--al-s-6) !important;
	gap: var(--al-s-2) !important;
}
:root[data-entity="1000"] .modal-footer > * { margin: 0 !important; }
:root[data-entity="1000"] .btn-close {
	opacity: 0.6;
	transition: opacity var(--al-t-fast);
	background-size: 12px;
}
:root[data-entity="1000"] .btn-close:hover { opacity: 1; }
:root[data-entity="1000"] .modal-backdrop {
	background-color: rgba(26, 22, 20, 0.55) !important;
}
:root[data-entity="1000"][data-theme-mode="dark"] .modal-backdrop {
	background-color: rgba(0, 0, 0, 0.72) !important;
}
:root[data-entity="1000"][data-theme-mode="dark"] .modal-content {
	background: var(--al-card) !important;
	border-color: var(--al-hairline-strong) !important;
}
:root[data-entity="1000"][data-theme-mode="dark"] .modal-header,
:root[data-entity="1000"][data-theme-mode="dark"] .modal-body { background: var(--al-card) !important; }
:root[data-entity="1000"][data-theme-mode="dark"] .modal-footer { background: var(--al-paper-2) !important; }
:root[data-entity="1000"][data-theme-mode="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}


/* ────────────────────────────── 22. CALLOUTS / BANNERS ─────────────────── */
:root[data-entity="1000"] .al-callout,
:root[data-entity="1000"] .al-callout-info {
	display: flex;
	align-items: flex-start;
	gap: var(--al-s-3);
	padding: var(--al-s-4) var(--al-s-5);
	background: var(--al-paper-2);
	border: 1px solid var(--al-hairline);
	border-left: 3px solid var(--al-accent);
	color: var(--al-ink);
	font-size: var(--al-text-sm);
	line-height: 1.55;
	margin-bottom: var(--al-s-5);
}
:root[data-entity="1000"] .al-callout > i,
:root[data-entity="1000"] .al-callout-info > i,
:root[data-entity="1000"] .al-callout-info .al-icon {
	color: var(--al-accent);
	font-size: var(--al-text-md);
	flex-shrink: 0;
	margin-top: 2px;
}

:root[data-entity="1000"] .al-warn-block {
	padding: var(--al-s-4) var(--al-s-5);
	background: var(--al-status-pending-bg);
	border: 1px solid var(--al-status-pending-line);
	border-left: 3px solid var(--al-status-pending-fg);
	color: var(--al-status-pending-fg);
	font-size: var(--al-text-sm);
}

:root[data-entity="1000"] .al-cc-banner {
	display: flex;
	align-items: center;
	gap: var(--al-s-3);
	padding: var(--al-s-4) var(--al-s-5);
	border-radius: var(--al-r-0);
	margin-top: var(--al-s-4);
}
:root[data-entity="1000"] .al-cc-banner--cleared {
	background: var(--al-status-active-bg);
	border: 1px solid var(--al-status-active-line);
	color: var(--al-status-active-fg);
}
:root[data-entity="1000"] .al-cc-banner--required {
	background: var(--al-status-pending-bg);
	border: 1px solid var(--al-status-pending-line);
	color: var(--al-status-pending-fg);
}
:root[data-entity="1000"] .al-cc-banner__icon {
	font-size: var(--al-text-lg);
	flex-shrink: 0;
}
:root[data-entity="1000"] .al-cc-banner__body {
	flex: 1 1 auto;
	min-width: 0;
}


/* ────────────────────────────── 23. SEARCH HERO ────────────────────────── */
:root[data-entity="1000"] .al-search {
	display: block;
	width: 100%;
}
:root[data-entity="1000"] .al-search__row {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--al-card);
	border: 1px solid var(--al-hairline-strong);
	transition: border-color var(--al-t-fast), box-shadow var(--al-t-fast);
}
:root[data-entity="1000"] .al-search__row:focus-within {
	border-color: var(--al-accent);
	box-shadow: var(--al-ring);
}
:root[data-entity="1000"] .al-search__icon {
	padding: 0 var(--al-s-3) 0 var(--al-s-4);
	color: var(--al-ink-3);
	font-size: var(--al-text-md);
}
:root[data-entity="1000"] .al-search__input {
	flex: 1 1 auto;
	height: 44px;
	border: 0 !important;
	background: transparent;
	color: var(--al-ink);
	font-family: var(--al-font-body);
	font-size: var(--al-text-md);
	padding: 0 var(--al-s-3) 0 0;
	outline: none;
}
:root[data-entity="1000"] .al-search__input:focus { outline: none; box-shadow: none; }
:root[data-entity="1000"] .al-search__input::placeholder { color: var(--al-ink-4); }
:root[data-entity="1000"] .al-search__clear {
	background: transparent;
	border: 0;
	color: var(--al-ink-3);
	padding: 0 var(--al-s-3);
	cursor: pointer;
	transition: color var(--al-t-fast);
}
:root[data-entity="1000"] .al-search__clear:hover { color: var(--al-ink); }
:root[data-entity="1000"] .al-search__menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--al-card);
	border: 1px solid var(--al-hairline-strong);
	box-shadow: var(--al-shadow-3);
	z-index: 50;
	max-height: 360px;
	overflow-y: auto;
}
:root[data-entity="1000"] .al-search__empty,
:root[data-entity="1000"] .al-search__menu .al-search__result {
	padding: var(--al-s-3) var(--al-s-4);
	border-bottom: 1px solid var(--al-hairline);
	color: var(--al-ink-2);
	font-size: var(--al-text-sm);
	cursor: pointer;
	transition: background var(--al-t-fast);
}
:root[data-entity="1000"] .al-search__menu .al-search__result:hover {
	background: var(--al-paper-2);
}


/* ────────────────────────────── 24. ROSTER / MODE SWITCH ───────────────── */
:root[data-entity="1000"] .al-roster-mode {
	display: inline-flex;
	gap: 0;
	background: var(--al-paper-2);
	border: 1px solid var(--al-hairline);
	padding: 3px;
	border-radius: var(--al-r-pill);
}
:root[data-entity="1000"] .al-roster-mode__btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--al-ink-2);
	padding: 6px 14px;
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--al-t-fast), color var(--al-t-fast);
	border-radius: var(--al-r-pill);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
:root[data-entity="1000"] .al-roster-mode__btn:hover { color: var(--al-ink); }
:root[data-entity="1000"] .al-roster-mode__btn.is-active {
	background: var(--al-card);
	color: var(--al-ink);
	box-shadow: var(--al-shadow-1);
}
:root[data-entity="1000"] .al-roster-caption {
	padding: var(--al-s-4) var(--al-s-5);
	background: var(--al-paper-2);
	border: 1px solid var(--al-hairline);
	margin-bottom: var(--al-s-4);
}


/* ────────────────────────────── 25. CASE COVER / OVERVIEW ──────────────── */
:root[data-entity="1000"] .al-party__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--al-paper-2);
	color: var(--al-ink-2);
	font-family: var(--al-font-body);
	font-size: var(--al-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
:root[data-entity="1000"] .al-party__avatar--opposing {
	background: var(--al-accent-soft);
	color: var(--al-accent);
}


/* ─────────────────────────── 26. ACTIVITY FEED ─────────────────────────── */
:root[data-entity="1000"] .al-activity {
	list-style: none;
	margin: 0;
	padding: 0;
}
:root[data-entity="1000"] .al-activity__item {
	display: flex;
	gap: var(--al-s-3);
	padding: var(--al-s-3) 0;
	border-bottom: 1px solid var(--al-hairline);
}
:root[data-entity="1000"] .al-activity__item:last-child { border-bottom: 0; }
:root[data-entity="1000"] .al-activity__icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--al-paper-2);
	color: var(--al-ink-3);
	font-size: var(--al-text-sm);
	flex-shrink: 0;
}
:root[data-entity="1000"] .al-activity__body { flex: 1 1 auto; min-width: 0; }
:root[data-entity="1000"] .al-activity__case {
	font-weight: 600;
	font-size: var(--al-text-base);
	color: var(--al-ink);
	margin-bottom: 2px;
}
:root[data-entity="1000"] .al-activity__summary {
	font-size: var(--al-text-sm);
	color: var(--al-ink-2);
	line-height: 1.5;
	margin-bottom: 2px;
}
:root[data-entity="1000"] .al-activity__when {
	font-size: var(--al-text-xs);
	color: var(--al-ink-4);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}


/* ─────────────────────────── 27. CONTACT / DOCKET ROW ─────────────────── */
:root[data-entity="1000"] .al-docket { padding: 0; }
:root[data-entity="1000"] .al-docket__row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--al-s-4);
	row-gap: 2px;
	align-items: center;
	padding: var(--al-s-3) var(--al-s-4);
	border-bottom: 1px solid var(--al-hairline);
	background: transparent;
	cursor: pointer;
	transition: background var(--al-t-fast);
	text-decoration: none;
	color: inherit;
	border-left: 3px solid transparent;
}
:root[data-entity="1000"] .al-docket__row:last-child { border-bottom: 0; }
:root[data-entity="1000"] .al-docket__row:hover {
	background: var(--al-paper-2);
	border-left-color: var(--al-accent);
	color: inherit;
	text-decoration: none;
}
:root[data-entity="1000"] .al-docket__primary {
	min-width: 0;
}
:root[data-entity="1000"] .al-docket__caption {
	font-family: var(--al-font-body);
	font-size: var(--al-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--al-ink-3);
	margin-bottom: 2px;
}
:root[data-entity="1000"] .al-docket__matter {
	font-family: var(--al-font-body);
	font-size: var(--al-text-md);
	font-weight: 600;
	color: var(--al-ink);
	line-height: 1.3;
	margin-bottom: 2px;
}
:root[data-entity="1000"] .al-docket__client {
	font-size: var(--al-text-sm);
	color: var(--al-ink-3);
}
:root[data-entity="1000"] .al-docket__aside {
	display: flex;
	align-items: center;
	gap: var(--al-s-3);
	flex-shrink: 0;
}
:root[data-entity="1000"] .al-docket__when {
	font-size: var(--al-text-xs);
	font-weight: 500;
	color: var(--al-ink-3);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ─────────────────────────── 28. INFO ICON / TOOLTIP ───────────────────── */
:root[data-entity="1000"] .al-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: var(--al-r-pill);
	border: 1px solid var(--al-hairline-strong);
	color: var(--al-ink-3);
	font-size: 11px;
	font-family: var(--al-font-body);
	font-weight: 600;
	margin-left: var(--al-s-2);
	cursor: help;
	vertical-align: middle;
	background: transparent;
	transition: background var(--al-t-fast), border-color var(--al-t-fast), color var(--al-t-fast);
}
:root[data-entity="1000"] .al-info-icon:hover {
	background: var(--al-paper-2);
	border-color: var(--al-accent);
	color: var(--al-accent);
}


/* ─────────────────────────── 29. STAFF DIRECTORY LAYOUT ────────────────── */
:root[data-entity="1000"] .al-staff-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--al-s-4);
	margin-bottom: var(--al-s-4);
	flex-wrap: wrap;
}
:root[data-entity="1000"] .al-filter-chips {
	display: inline-flex;
	gap: var(--al-s-2);
	flex-wrap: wrap;
}
:root[data-entity="1000"] .al-staff-person {
	display: flex;
	align-items: center;
	gap: var(--al-s-3);
}
:root[data-entity="1000"] .al-staff-person__text { min-width: 0; }
:root[data-entity="1000"] .al-staff-person__name {
	font-weight: 600;
	color: var(--al-ink);
	font-size: var(--al-text-base);
}
:root[data-entity="1000"] .al-staff-person__role {
	font-size: var(--al-text-xs);
	color: var(--al-ink-3);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
:root[data-entity="1000"] .al-chip-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}


/* ─────────────────────────── 30. TIME ENTRY ROW ────────────────────────── */
:root[data-entity="1000"] .al-time-entry,
:root[data-entity="1000"] .al-tt-actionbar,
:root[data-entity="1000"] .al-tt-actionbar__group {
	display: flex;
	align-items: center;
	gap: var(--al-s-3);
	flex-wrap: wrap;
}


/* ─────────────────────────── 31. FILE UPLOAD ───────────────────────────── */
:root[data-entity="1000"] input[type="file"].al-input {
	padding: 7px 12px;
	cursor: pointer;
}
:root[data-entity="1000"] input[type="file"].al-input::-webkit-file-upload-button {
	background: var(--al-paper-2);
	color: var(--al-ink-2);
	border: 1px solid var(--al-hairline-strong);
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 500;
	padding: 5px 10px;
	margin-right: var(--al-s-3);
	cursor: pointer;
	transition: background var(--al-t-fast);
}
:root[data-entity="1000"] input[type="file"].al-input::-webkit-file-upload-button:hover {
	background: var(--al-paper-3);
}


/* ─────────────────────────── 32. CHECKBOX / RADIO ──────────────────────── */
:root[data-entity="1000"] input[type="checkbox"],
:root[data-entity="1000"] input[type="radio"] {
	accent-color: var(--al-accent);
	width: 16px;
	height: 16px;
	cursor: pointer;
}


/* ─────────────────────────── 33. EXPLAINER (details/summary) ───────────── */
:root[data-entity="1000"] details.al-card,
:root[data-entity="1000"] details.al-explainer {
	padding: 0;
}
:root[data-entity="1000"] details.al-card > summary,
:root[data-entity="1000"] details.al-explainer > summary {
	cursor: pointer;
	padding: var(--al-s-4) var(--al-s-5);
	font-family: var(--al-font-body);
	font-size: var(--al-text-sm);
	font-weight: 600;
	color: var(--al-ink-2);
	letter-spacing: 0.02em;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--al-s-2);
	transition: color var(--al-t-fast);
}
:root[data-entity="1000"] details.al-card > summary::before,
:root[data-entity="1000"] details.al-explainer > summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--al-accent);
	font-family: var(--al-font-mono);
	font-size: var(--al-text-md);
	transition: transform var(--al-t-base);
}
:root[data-entity="1000"] details[open].al-card > summary::before,
:root[data-entity="1000"] details[open].al-explainer > summary::before {
	transform: rotate(45deg);
}
:root[data-entity="1000"] details.al-card > summary::-webkit-details-marker,
:root[data-entity="1000"] details.al-explainer > summary::-webkit-details-marker { display: none; }
:root[data-entity="1000"] details.al-card > summary:hover,
:root[data-entity="1000"] details.al-explainer > summary:hover { color: var(--al-ink); }
:root[data-entity="1000"] .al-explainer__body {
	padding: 0 var(--al-s-5) var(--al-s-5) var(--al-s-5);
	border-top: 1px solid var(--al-hairline);
	padding-top: var(--al-s-4);
	font-size: var(--al-text-sm);
	color: var(--al-ink-2);
	line-height: 1.6;
}


/* ─────────────────────────── 34. CASE STATUS BANNER ────────────────────── */
:root[data-entity="1000"] .al-context-card {
	padding: var(--al-s-4) var(--al-s-5);
	background: var(--al-paper-2);
	border: 1px solid var(--al-hairline);
	border-left: 3px solid var(--al-accent);
	margin-bottom: var(--al-s-4);
}


/* ─────────────────────────── 35. PRINT-FRIENDLY ────────────────────────── */
@media print {
	:root[data-entity="1000"] .page-header-breadcrumb { display: none !important; }
	:root[data-entity="1000"] .al-card {
		box-shadow: none !important;
		border-color: #000 !important;
		break-inside: avoid;
	}
	:root[data-entity="1000"] .al-btn { display: none !important; }
}


/* ─────────────────────────── 36. SIDEBAR REFINEMENT ────────────────────
   The AtlasLO sidebar should feel premium. Active item gets a clear
   oxblood accent on the left edge plus a subtle background tint. Hover
   gets a softer feedback. Sub-items inherit the same restraint.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-entity="1000"] .app-sidebar {
	border-right: 1px solid var(--al-hairline);
}
:root[data-entity="1000"] .app-sidebar .main-sidebar-header {
	border-bottom: 1px solid var(--al-hairline);
	background: var(--al-card);
}
:root[data-entity="1000"] .app-sidebar .side-menu__item {
	transition: background var(--al-t-fast), color var(--al-t-fast), border-left-color var(--al-t-fast);
	border-left: 2px solid transparent !important;
}
:root[data-entity="1000"] .app-sidebar .side-menu__item:hover {
	background: var(--al-accent-soft) !important;
	color: var(--al-ink) !important;
}
:root[data-entity="1000"] .app-sidebar .side-menu__item.active {
	background: var(--al-accent-soft) !important;
	color: var(--al-accent) !important;
	border-left-color: var(--al-accent) !important;
	font-weight: 600;
}
:root[data-entity="1000"] .app-sidebar .side-menu__item.active .side-menu__icon,
:root[data-entity="1000"] .app-sidebar .side-menu__item.active .side-menu__label {
	color: var(--al-accent) !important;
}
:root[data-entity="1000"] .app-sidebar .slide__category {
	font-family: var(--al-font-body);
	font-size: var(--al-text-xxs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--al-ink-3);
	opacity: 1;
}


/* ─────────────────────────── 37. APP HEADER REFINEMENT ──────────────────
   The platform applies the entity's primary color (oxblood for AtlasLO)
   to the top app-header via [data-header-styles="gradient"]. That's fine —
   it gives AtlasLO a strong brand strip. We only refine text contrast:
   ensure all header text reads cream-on-oxblood, not the platform's
   default dark/grey which becomes invisible against the dark surface. */
:root[data-entity="1000"] .app-header,
:root[data-entity="1000"] .app-header .header-element,
:root[data-entity="1000"] .app-header .header-link,
:root[data-entity="1000"] .app-header .user-name,
:root[data-entity="1000"] .app-header h6,
:root[data-entity="1000"] .app-header span,
:root[data-entity="1000"] .app-header a {
	color: #FAF8F3 !important;
}
:root[data-entity="1000"] .app-header i,
:root[data-entity="1000"] .app-header svg {
	color: #FAF8F3 !important;
	fill: #FAF8F3 !important;
}
/* Dropdown menus that pop out of the header — restore dark text inside */
:root[data-entity="1000"] .app-header .dropdown-menu,
:root[data-entity="1000"] .app-header .dropdown-menu * {
	color: var(--al-ink) !important;
}
:root[data-entity="1000"] .app-header .dropdown-menu i,
:root[data-entity="1000"] .app-header .dropdown-menu svg {
	fill: var(--al-ink-2) !important;
}


/* ─────────────────────────── 38. PARTIAL CARDS — case tabs ─────────────── */
:root[data-entity="1000"] .al-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--al-s-3);
	margin: 0 0 var(--al-s-4) 0;
	padding-bottom: var(--al-s-3);
	border-bottom: 1px solid var(--al-hairline);
}
:root[data-entity="1000"] .al-card__title {
	font-family: var(--al-font-display);
	font-weight: 600;
	font-size: var(--al-text-lg);
	line-height: 1.2;
	color: var(--al-ink);
	margin: 0;
	letter-spacing: -0.005em;
}


/* ─────────────────────────── 39. DATA STRIP / METADATA ─────────────────── */
:root[data-entity="1000"] .al-meta-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--al-s-7);
	align-items: baseline;
}
:root[data-entity="1000"] .al-meta-strip > div {
	min-width: 0;
}


/* ─────────────────────────── 40. DATEPICKER / FORM RANGE ───────────────── */
:root[data-entity="1000"] .al-daterange {
	display: flex;
	gap: var(--al-s-3);
	align-items: flex-end;
	flex-wrap: wrap;
}


/* ─────────────────────────── 41. INPUT EXTRA — variable hints ──────────── */
:root[data-entity="1000"] .al-form-label .al-meta {
	font-size: var(--al-text-xs);
	color: var(--al-ink-4);
	font-weight: 400;
	margin-left: 4px;
}