:root {
    --ink: #12324a;
    --muted: #607b8c;
    --line: #d7e7ee;
    --surface: #ffffff;
    --canvas: #f1f7fa;
    --teal: #078b9c;
    --teal-dark: #086879;
    --teal-soft: #e0f5f6;
    --aqua: #42c9c1;
    --blue: #2677b8;
    --amber: #c37a16;
    --amber-soft: #fff2d9;
    --coral: #c85e56;
    --danger: #ae3f46;
    --danger-soft: #fff0f1;
    --success: #247a63;
    --success-soft: #e6f5ef;
    --shadow-sm: 0 7px 22px rgba(24, 75, 105, .075);
    --shadow-lg: 0 26px 80px rgba(11, 70, 101, .18);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); }
.app-body { background: linear-gradient(145deg,#eef7fa 0%,#f8fbfc 48%,#edf6f8 100%); }
.app-body::before { content: ""; position: fixed; z-index: -1; inset: 70px 0 auto 255px; height: 300px; opacity: .34; pointer-events: none; background:
    radial-gradient(circle at 78% 14%,rgba(54,177,200,.18) 0 4px,transparent 5px) 0 0/42px 42px,
    radial-gradient(circle at 80% 18%,rgba(38,119,184,.09) 0 2px,transparent 3px) 0 0/42px 42px,
    linear-gradient(110deg,transparent 66%,rgba(255,255,255,.7));
    mask-image: linear-gradient(90deg,transparent 25%,#000 75%); }
body.menu-lock { overflow: hidden; }
button, input, select { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(8, 127, 140, .28); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -4rem; background: var(--ink); color: white; padding: .75rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

/* Brand and CSS-only DNA motif: no external image or inline SVG required. */
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-size: 1.2rem; letter-spacing: -.04em; }
.brand > span:last-child { color: var(--aqua); }
.brand strong { color: #fff; }
.brand--large { font-size: 1.55rem; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 11px; background: white; box-shadow: 0 7px 18px rgba(4,55,81,.22); }
.brand-logo--large { width: 48px; height: 48px; border-radius: 14px; }
.product-brand-logo { flex: 0 0 auto; width: 35px; height: 35px; object-fit: contain; transform: scale(1.6); transform-origin: center; filter: drop-shadow(0 7px 12px rgba(1,24,50,.28)); }
.product-brand-logo--large { width: 48px; height: 48px; }
.product-brand-copy { display: grid; min-width: 0; gap: .14rem; line-height: 1; letter-spacing: 0; }
.product-brand-copy strong { color: white; font-size: 1.02rem; font-weight: 900; letter-spacing: .025em; white-space: nowrap; }
.product-brand-copy small { color: #86e8e0; font-size: .52rem; font-weight: 800; letter-spacing: .065em; white-space: nowrap; }
.brand--large .product-brand-copy strong { font-size: 1.38rem; }
.brand--large .product-brand-copy small { font-size: .64rem; }
.brand-mark { position: relative; display: inline-block; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, var(--aqua), var(--teal)); box-shadow: 0 7px 16px rgba(8, 127, 140, .24); overflow: hidden; transform: rotate(-4deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 8px; width: 18px; height: 2px; background: rgba(255,255,255,.92); transform: rotate(30deg); }
.brand-mark::before { top: 10px; box-shadow: 0 7px 0 rgba(255,255,255,.92), 0 14px 0 rgba(255,255,255,.92); }
.brand-mark i, .brand-mark b { position: absolute; top: 4px; bottom: 4px; width: 7px; border: 2px solid white; border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.brand-mark i { left: 5px; transform: rotate(-18deg); }
.brand-mark b { right: 5px; transform: rotate(-18deg); }

.eyebrow { display: block; color: var(--teal); font-size: .7rem; font-weight: 800; letter-spacing: .11em; line-height: 1.4; text-transform: uppercase; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: .5rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 10px; font-weight: 750; font-size: .86rem; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { background: linear-gradient(135deg, var(--teal), #0797a1); color: white; box-shadow: 0 8px 20px rgba(8, 127, 140, .19); }
.button--primary:hover { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); box-shadow: 0 10px 26px rgba(8, 127, 140, .26); }
.button--secondary { color: var(--teal-dark); background: var(--teal-soft); border-color: #c5e5e5; }
.button--ghost { color: var(--muted); background: transparent; border-color: var(--line); }
.button--compact { min-height: 36px; padding: .5rem .75rem; font-size: .78rem; }
.button--wide { width: 100%; min-height: 48px; }
.icon-button { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; cursor: pointer; }

/* Authentication */
.auth-body { overflow-x: hidden; background: linear-gradient(120deg, #063e5e 0%, #08768a 48%, #eff8fb 48%); }
.dna-background { position: fixed; inset: 0 52% 0 0; opacity: .32; overflow: hidden; pointer-events: none; }
.dna-background::before, .dna-background::after { content: ""; position: absolute; width: 720px; height: 160px; left: -90px; background:
    radial-gradient(circle at 8px 10px, rgba(137, 237, 221, .85) 0 4px, transparent 5px) 0 0/38px 38px,
    radial-gradient(circle at 27px 28px, rgba(255,255,255,.65) 0 4px, transparent 5px) 0 0/38px 38px,
    repeating-linear-gradient(28deg, transparent 0 18px, rgba(255,255,255,.16) 19px 21px, transparent 22px 38px);
    border-top: 2px solid rgba(119, 222, 209, .22); border-bottom: 2px solid rgba(255,255,255,.16); border-radius: 50%; transform: rotate(-38deg); }
.dna-background::before { top: 15%; }
.dna-background::after { bottom: 13%; left: -20px; transform: rotate(32deg) scale(.8); }
.auth-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr); min-height: 100vh; }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); color: white; overflow: hidden; }
.auth-brand::after { content: ""; position: absolute; right: -90px; bottom: 9%; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.12); border-radius: 42% 58% 61% 39%; box-shadow: 0 0 0 28px rgba(255,255,255,.025),0 0 0 60px rgba(65,201,193,.035); transform: rotate(28deg); pointer-events: none; }
.auth-copy { max-width: 620px; margin: auto 0; }
.auth-copy .eyebrow { color: #83e6d8; }
.auth-copy h1 { max-width: 580px; margin: .7rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.055em; }
.auth-copy p { max-width: 560px; margin: 0; color: #d4e9ea; font-size: 1.08rem; line-height: 1.7; }
.trust-list { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; padding: 0; margin: 2rem 0 0; list-style: none; color: #d7eeee; font-size: .82rem; }
.trust-list li { display: flex; align-items: center; gap: .45rem; }
.trust-list span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #84e8da; }
.auth-panel { display: grid; place-items: center; padding: 2rem; background: rgba(245, 251, 250, .96); }
.auth-card { width: min(100%, 430px); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(17, 104, 112, .12); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-lg); }
.auth-card-heading { margin-bottom: 1.6rem; }
.auth-card h2 { margin: .35rem 0 .35rem; font-size: 2rem; letter-spacing: -.04em; }
.auth-card-heading p { margin: 0; color: var(--muted); }
.stack-form { display: grid; gap: 1rem; }
.form-meta { color: var(--muted); font-size: .75rem; }
.security-note { display: flex; align-items: center; gap: .75rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.security-note p { margin: 0; line-height: 1.5; }
.shield { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 12px 12px 16px 16px; background: var(--success-soft); color: var(--success); font-weight: 900; }

/* Application shell */
.app-shell { display: grid; grid-template-columns: 255px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 255px; flex-direction: column; padding: 1.15rem; color: white; background:
    radial-gradient(circle at 92% 3%, rgba(77, 214, 207, .28), transparent 25%),
    radial-gradient(circle at 7% 72%, rgba(27, 122, 173, .28), transparent 28%),
    linear-gradient(180deg, #08425f, #07394f 60%, #062d42); }
.sidebar::after { content: ""; position: absolute; inset: auto 0 6% 0; height: 150px; opacity: .13; background:
    radial-gradient(circle at 8px 8px, #8fe6d8 0 3px, transparent 4px) 0 0/30px 30px,
    radial-gradient(circle at 22px 22px, white 0 3px, transparent 4px) 0 0/30px 30px;
    transform: skewY(-14deg); pointer-events: none; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: .3rem .35rem 1.2rem; }
.sidebar-close { display: none; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: white; }
.main-nav { position: relative; z-index: 1; display: grid; gap: .22rem; overflow-y: auto; padding-right: .1rem; }
.nav-label { margin: 1.1rem .7rem .35rem; color: #8cb2bb; font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-link { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; min-height: 43px; padding: .55rem .65rem; border-radius: 10px; color: #cfe0e4; font-size: .84rem; text-decoration: none; transition: background .17s ease, color .17s ease; }
.nav-link:hover { color: white; background: rgba(255,255,255,.07); }
.nav-link.is-active { color: white; background: linear-gradient(90deg, rgba(59, 193, 179, .25), rgba(59, 193, 179, .08)); box-shadow: inset 3px 0 var(--aqua); }
.nav-link.is-disabled { color: #89a5ad; cursor: not-allowed; }
.nav-link small { padding: .17rem .36rem; border-radius: 99px; color: #8fb3ba; background: rgba(255,255,255,.05); font-size: .55rem; text-transform: uppercase; }
.nav-icon { color: #7fd8ce; font-size: 1.05rem; text-align: center; }
.sidebar-footer { position: relative; z-index: 1; margin-top: auto; padding: 1rem .5rem .25rem; color: #7f9fa7; font-size: .68rem; }
.sidebar-footer p { margin: .65rem 0 0; }
.security-chip { display: flex; align-items: center; gap: .45rem; color: #c6dedf; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #69dbc2; box-shadow: 0 0 0 4px rgba(105,219,194,.12); }
.sidebar-scrim { display: none; }
.workspace { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 72px; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(178, 211, 225, .78); background: rgba(255,255,255,.9); box-shadow: 0 5px 22px rgba(32,91,121,.045); backdrop-filter: blur(16px); }
.mobile-menu { display: none; }
.topbar-title { display: grid; gap: .08rem; }
.topbar-title strong { font-size: .95rem; }
.topbar-actions { display: flex; align-items: center; gap: .85rem; margin-left: auto; }
.notification-button { position: relative; color: var(--muted); }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--coral); }
.profile { display: flex; align-items: center; gap: .65rem; }
.avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--teal-dark); background: var(--teal-soft); font-size: .75rem; font-weight: 850; }
.profile-copy { display: grid; gap: .1rem; }
.profile-copy strong { font-size: .78rem; }
.profile-copy small { color: var(--muted); font-size: .68rem; }
.page-content { width: min(1480px, 100%); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.2rem); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading--compact { align-items: center; }
.page-heading h1 { margin: .25rem 0 .3rem; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.1; letter-spacing: -.045em; }
.page-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.heading-actions { display: flex; gap: .6rem; }
.product-heading-actions { position: relative; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.product-import-menu { position: relative; }
.product-import-menu > summary { list-style: none; cursor: pointer; }
.product-import-menu > summary::-webkit-details-marker { display: none; }
.product-import-menu[open] > summary { border-color: #0b93a3; color: #087986; background: #e9f9f8; }
.product-import-popover { position: absolute; z-index: 12; top: calc(100% + .65rem); right: 0; width: min(620px, calc(100vw - 2rem)); padding: 1rem; text-align: left; box-shadow: 0 24px 60px rgba(7,46,66,.22); }
.product-import-title { display: flex; align-items: center; gap: .75rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.product-import-title > div { display: grid; gap: .14rem; }
.product-import-title strong { font-size: .86rem; }
.product-import-title small { color: var(--muted); font-size: .68rem; }
.import-file-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg,var(--teal),var(--aqua)); font-size: .6rem; font-weight: 900; letter-spacing: .04em; }
.import-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; padding: 0; margin: .85rem 0; counter-reset: import-step; list-style: none; }
.import-steps li { position: relative; min-height: 55px; padding: .65rem .6rem .6rem 2rem; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #f7fbfc; font-size: .64rem; line-height: 1.45; counter-increment: import-step; }
.import-steps li::before { content: counter(import-step); position: absolute; top: .62rem; left: .55rem; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; color: var(--teal); background: #dff6f4; font-weight: 900; }
.product-import-form { display: grid; gap: .75rem; }
.product-import-form input[type="file"] { padding: .48rem; background: #f8fbfc; }
.product-import-form .field small { color: var(--muted); font-size: .62rem; }
.product-import-form > div { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.import-report { display: grid; gap: .3rem; max-height: 210px; overflow: auto; padding: .7rem .8rem; margin: 0 0 .8rem; border: 1px solid #b9e2d3; border-radius: 11px; color: #17664a; background: #eefaf5; font-size: .66rem; }
.import-report--error { border-color: #efc5c5; color: #923737; background: #fff5f5; }
.import-report ul { display: grid; gap: .2rem; padding-left: 1.1rem; margin: .2rem 0 0; }
.back-link { display: inline-block; margin-bottom: .7rem; color: var(--teal); font-size: .78rem; font-weight: 750; text-decoration: none; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { display: flex; min-height: 142px; align-items: flex-start; gap: 1rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.metric-card > div { display: grid; gap: .17rem; }
.metric-card span:not(.metric-icon) { color: var(--muted); font-size: .78rem; font-weight: 700; }
.metric-card strong { margin-top: .1rem; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.metric-card small { margin-top: .3rem; color: var(--muted); font-size: .68rem; }
.metric-icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 13px; font-weight: 850; }
.metric-card--teal .metric-icon { color: var(--teal); background: var(--teal-soft); }
.metric-card--amber .metric-icon { color: var(--amber); background: var(--amber-soft); }
.metric-card--coral .metric-icon { color: var(--coral); background: #fff0ed; }
.metric-card--blue .metric-icon { color: var(--blue); background: #eaf3fa; }
.panel { border: 1px solid rgba(203,224,233,.95); border-radius: var(--radius); background: linear-gradient(155deg,#fff 0%,#fff 72%,#fafeff 100%); box-shadow: var(--shadow-sm); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, .7fr); gap: 1rem; }
.dashboard-heading { margin-bottom: 1rem; }
.system-health { display: grid; grid-template-columns: auto minmax(240px,1fr) auto auto; align-items: center; gap: 1.2rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid #b8ddd7; border-radius: var(--radius); background: linear-gradient(135deg,#f4fcfa,#fff); box-shadow: var(--shadow-sm); }
.system-health--watch { border-color: #ecd39a; background: linear-gradient(135deg,#fff9e9,#fff); }
.system-health--critical { border-color: #efc1c3; background: linear-gradient(135deg,#fff4f2,#fff); }
.system-health-score { display: flex; width: 74px; height: 74px; align-items: baseline; justify-content: center; padding-top: 18px; border-radius: 50%; color: white; background: var(--success); box-shadow: inset 0 0 0 7px rgba(255,255,255,.22); }
.system-health--watch .system-health-score { background: var(--amber); }
.system-health--critical .system-health-score { background: var(--danger); }
.system-health-score strong { font-size: 1.45rem; line-height: 1; }
.system-health-score span { font-size: .6rem; font-weight: 800; }
.system-health-copy h2 { margin: .16rem 0; font-size: 1.2rem; }
.system-health-copy p { margin: 0; color: var(--muted); font-size: .67rem; }
.system-health-signals { display: grid; grid-template-columns: repeat(2,auto); gap: .55rem 1rem; }
.system-health-signals span { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .66rem; font-weight: 750; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.signal-dot.is-watch { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.signal-dot.is-critical { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.system-health-link { color: var(--teal); font-size: .68rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.executive-metrics .metric-card { color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.executive-metrics .metric-card:hover { z-index: 1; border-color: #a8d5d1; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7,57,67,.09); }
.dashboard-command-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(310px,.75fr); gap: 1rem; margin-bottom: 1rem; }
.decision-chart-panel, .decision-center, .analysis-card { overflow: hidden; }
.chart-legend { display: flex; gap: 1rem; }
.chart-legend span { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .62rem; font-weight: 750; }
.chart-legend i { width: 17px; height: 3px; border-radius: 9px; background: var(--teal); }
.chart-legend i.is-outflow { background: var(--coral); }
.financial-chart { padding: 1rem 1.2rem .7rem; }
.chart-summary { display: flex; gap: 2rem; margin-bottom: .4rem; }
.chart-summary div { display: grid; gap: .1rem; }
.chart-summary span { color: var(--muted); font-size: .61rem; }
.chart-summary strong { font-size: .84rem; }
.financial-chart svg { display: block; width: 100%; min-height: 220px; overflow: visible; }
.chart-grid line { stroke: #e3eded; stroke-width: 1; stroke-dasharray: 4 5; }
.chart-axis-labels text { fill: var(--muted); font-size: 9px; font-weight: 650; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-line--commitment { stroke: var(--teal); }
.chart-line--outflow { stroke: var(--coral); }
.chart-dot { stroke: white; stroke-width: 2; }
.chart-dot--commitment { fill: var(--teal); }
.chart-dot--outflow { fill: var(--coral); }
.decision-list { display: grid; padding: .5rem; }
.decision-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .72rem; border-radius: 10px; color: inherit; text-decoration: none; transition: background .15s ease; }
.decision-item:hover { background: #f5fafa; }
.decision-item > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--teal); background: var(--teal-soft); font-size: .65rem; font-weight: 900; }
.decision-item--warning > span { color: #9a6810; background: var(--amber-soft); }
.decision-item--critical > span { color: var(--danger); background: var(--danger-soft); }
.decision-item--healthy > span { color: var(--success); background: var(--success-soft); }
.decision-item > div { display: grid; gap: .12rem; }
.decision-item strong { font-size: .71rem; }
.decision-item small { color: var(--muted); font-size: .59rem; line-height: 1.35; }
.decision-item > b { color: var(--teal); }
.dashboard-analysis-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.donut-layout { display: grid; grid-template-columns: 145px minmax(0,1fr); align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
.donut-chart { display: grid; width: 132px; height: 132px; place-items: center; }
.donut-chart svg { grid-area: 1/1; width: 100%; height: 100%; }
.donut-track,.donut-segment { fill: none; stroke-width: 14; }
.donut-track { stroke: #edf3f3; }
.donut-segment--healthy { stroke: var(--success); }
.donut-segment--low { stroke: var(--amber); }
.donut-segment--out { stroke: var(--danger); }
.donut-chart > div { z-index: 1; grid-area: 1/1; display: grid; justify-items: center; }
.donut-chart strong { font-size: 1.25rem; }
.donut-chart span { color: var(--muted); font-size: .56rem; font-weight: 750; }
.donut-legend { display: grid; gap: .65rem; }
.donut-legend > div { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: .4rem; }
.donut-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.donut-legend i.is-low { background: var(--amber); }
.donut-legend i.is-out { background: var(--danger); }
.donut-legend span { color: var(--muted); font-size: .62rem; }
.donut-legend strong { font-size: .72rem; }
.donut-legend small { grid-column: 2/-1; color: var(--muted); font-size: .54rem; }
.funnel-list { display: grid; gap: .72rem; padding: 1rem 1.15rem; }
.funnel-list > div { display: grid; grid-template-columns: 82px minmax(0,1fr) 24px; align-items: center; gap: .55rem; }
.funnel-list span { color: var(--muted); font-size: .61rem; }
.funnel-list progress { height: 8px; }
.funnel-list strong { text-align: right; font-size: .7rem; }
.funnel-list progress,.consumption-bars progress,.report-horizontal-chart progress { width: 100%; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: #edf3f3; }
.funnel-list progress::-webkit-progress-bar,.consumption-bars progress::-webkit-progress-bar,.report-horizontal-chart progress::-webkit-progress-bar { border-radius: 99px; background: #edf3f3; }
.funnel-list progress::-webkit-progress-value,.report-horizontal-chart progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg,var(--teal),var(--aqua)); }
.consumption-bars progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg,var(--blue),var(--teal)); }
.funnel-list progress::-moz-progress-bar,.report-horizontal-chart progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg,var(--teal),var(--aqua)); }
.consumption-bars progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg,var(--blue),var(--teal)); }
.analysis-footer { display: flex; gap: 1rem; justify-content: space-around; padding: .75rem 1rem; border-top: 1px solid var(--line); background: #fbfdfd; }
.analysis-footer span { color: var(--muted); font-size: .59rem; }
.analysis-footer strong { color: var(--ink); }
.quality-gauge { display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
.quality-gauge-value { display: grid; width: 110px; height: 110px; place-items: center; }
.quality-gauge-value svg { grid-area: 1/1; width: 100%; height: 100%; }
.quality-track,.quality-progress { fill: none; stroke-width: 14; }
.quality-track { stroke: #e8f0f0; }
.quality-progress { stroke: var(--teal); stroke-linecap: round; }
.quality-gauge-value > div { z-index: 1; grid-area: 1/1; display: grid; place-items: center; }
.quality-gauge-value strong { font-size: 1.25rem; }
.quality-gauge-value span { color: var(--muted); font-size: .55rem; }
.quality-breakdown { display: grid; gap: .65rem; }
.quality-breakdown span { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: .4rem; color: var(--muted); font-size: .61rem; }
.quality-breakdown i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.quality-breakdown i.is-pending { background: var(--amber); }
.quality-breakdown i.is-rejected { background: var(--danger); }
.quality-breakdown b { color: var(--ink); }
.dashboard-risk-grid, .dashboard-activity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.dashboard-risk-grid > .panel, .dashboard-activity-grid > .panel { overflow: hidden; }
.risk-list, .expiry-list { display: grid; }
.risk-list > a { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .72rem 1rem; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.risk-list > a:first-child, .expiry-list > article:first-child { border-top: 0; }
.risk-list > a:hover { background: #fbfdfd; }
.risk-rank { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #9a6810; background: var(--amber-soft); font-weight: 900; }
.risk-rank--out { color: var(--danger); background: var(--danger-soft); }
.risk-list div { display: grid; gap: .1rem; }
.risk-list strong, .expiry-list strong { font-size: .69rem; }
.risk-list small, .expiry-list small { color: var(--muted); font-size: .58rem; }
.risk-list > a > b { font-size: .72rem; }
.expiry-list > article { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .68rem 1rem; border-top: 1px solid var(--line); }
.expiry-date { display: grid; width: 48px; height: 43px; place-items: center; align-content: center; border-radius: 9px; color: var(--teal); background: var(--teal-soft); }
.is-urgent .expiry-date { color: var(--danger); background: var(--danger-soft); }
.expiry-date strong { font-size: .72rem; line-height: 1; }
.expiry-date span { font-size: .5rem; font-weight: 750; }
.expiry-list > article > div:nth-child(2) { display: grid; gap: .1rem; }
.expiry-list > article > b { font-size: .66rem; }
.consumption-bars { display: grid; padding: .55rem 1rem .8rem; }
.consumption-bars > a { display: grid; grid-template-columns: minmax(130px,1fr) minmax(100px,1.4fr) auto; align-items: center; gap: .7rem; padding: .55rem 0; color: inherit; text-decoration: none; }
.consumption-bars > a > div { display: grid; gap: .08rem; }
.consumption-bars strong { font-size: .66rem; }
.consumption-bars small { color: var(--muted); font-size: .55rem; }
.consumption-bars progress { height: 7px; }
.consumption-bars b { font-size: .62rem; white-space: nowrap; }
.dashboard-movements article { padding-block: .62rem; }
.report-heading { margin-bottom: 1rem; }
.report-catalog { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .7rem; margin-bottom: 1rem; }
.report-type-card { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: .65rem; min-height: 96px; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; background: white; box-shadow: var(--shadow-sm); text-decoration: none; }
.report-type-card:hover { border-color: #91ceca; background: #fbfefe; }
.report-type-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(10,151,156,.08); }
.report-type-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--teal); background: var(--teal-soft); font-size: .66rem; font-weight: 900; }
.report-type-card > div { display: grid; gap: .15rem; }
.report-type-card strong { font-size: .7rem; }
.report-type-card small { color: var(--muted); font-size: .56rem; line-height: 1.35; }
.report-type-card > b { position: absolute; top: .45rem; right: .5rem; padding: .18rem .38rem; border-radius: 99px; color: var(--teal); background: var(--teal-soft); font-size: .48rem; text-transform: uppercase; }
.report-filter-panel { overflow: hidden; margin-bottom: 1rem; }
.report-filter-grid { display: grid; grid-template-columns: repeat(6,minmax(120px,1fr)); align-items: end; gap: .7rem; padding: 1rem 1.15rem; }
.report-filter-grid .field > span { font-size: .57rem; }
.report-search-field { grid-column: span 3; }
.report-filter-grid > .button { min-height: 40px; grid-column: span 3; }
.report-title-block { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .8rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg,#f4fbfa,#fff); }
.report-title-block > div { display: flex; align-items: center; gap: .8rem; }
.report-document-mark { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 13px; color: white; background: var(--teal); font-size: .72rem; font-weight: 900; }
.report-title-block h2 { margin: .16rem 0; font-size: 1.2rem; }
.report-title-block p { margin: 0; color: var(--muted); font-size: .67rem; }
.report-title-block aside { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.report-title-block aside span,.report-title-block aside small { color: var(--muted); font-size: .56rem; }
.report-title-block aside strong { font-size: .7rem; }
.report-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.report-summary-card { display: grid; gap: .18rem; min-height: 105px; padding: 1rem; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 12px; background: white; box-shadow: var(--shadow-sm); }
.report-summary-card--1 { border-top-color: var(--blue); }
.report-summary-card--2 { border-top-color: var(--amber); }
.report-summary-card--3 { border-top-color: var(--coral); }
.report-summary-card span { color: var(--muted); font-size: .61rem; font-weight: 750; text-transform: uppercase; }
.report-summary-card strong { margin-top: auto; font-size: 1.35rem; letter-spacing: -.03em; }
.report-summary-card small { color: var(--muted); font-size: .56rem; }
.report-chart-panel,.report-table-panel { overflow: hidden; margin-bottom: 1rem; }
.report-horizontal-chart { display: grid; gap: .68rem; padding: 1rem 1.15rem; }
.report-horizontal-chart > div { display: grid; grid-template-columns: minmax(130px,1.1fr) minmax(180px,3fr) 70px; align-items: center; gap: .7rem; }
.report-horizontal-chart span { overflow: hidden; font-size: .63rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.report-horizontal-chart progress { height: 9px; }
.report-horizontal-chart strong { text-align: right; font-size: .65rem; }
.report-timeline-chart { display: flex; min-height: 190px; align-items: flex-end; gap: .35rem; overflow-x: auto; padding: 1rem 1.15rem; }
.report-timeline-chart > div { display: grid; flex: 1 0 34px; min-width: 34px; height: 155px; grid-template-rows: 1fr auto auto; justify-items: center; gap: .2rem; }
.report-timeline-chart > div > span { display: flex; width: 20px; height: 100%; align-items: flex-end; }
.report-timeline-chart svg { width: 100%; height: 100%; }
.report-timeline-chart rect { fill: var(--teal); }
.report-timeline-chart strong { font-size: .58rem; }
.report-timeline-chart small { color: var(--muted); font-size: .49rem; white-space: nowrap; }
.report-data-table { min-width: 1050px; }
.report-data-table th { white-space: nowrap; }
.report-data-table td { max-width: 260px; font-size: .63rem; }
.report-data-table td strong { font-size: .66rem; }
.report-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; color: var(--muted); font-size: .55rem; }

/* Security, profiles and granular permissions */
.badge--danger { color: var(--danger); background: var(--danger-soft); }
.security-heading { margin-bottom: 1rem; }
.security-metrics .metric-card { min-height: 118px; }
.security-section-nav { display: flex; gap: .4rem; margin: 0 0 1rem; padding: .45rem; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.security-section-nav a { display: flex; align-items: center; gap: .5rem; padding: .62rem .8rem; border-radius: 9px; color: var(--ink); font-size: .7rem; font-weight: 800; text-decoration: none; }
.security-section-nav a:hover { color: var(--teal); background: var(--teal-soft); }
.security-section-nav a.is-active { color: white; background: linear-gradient(135deg,var(--blue),var(--teal)); box-shadow: 0 6px 16px rgba(24,111,150,.18); }
.security-section-nav b { display: grid; min-width: 20px; height: 20px; padding: 0 .25rem; place-items: center; border-radius: 99px; color: var(--teal); background: #edf5f4; font-size: .57rem; }
.security-section { overflow: hidden; margin-bottom: 1rem; scroll-margin-top: 1rem; }
.security-toolbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: none; }
.security-table { min-width: 900px; }
.security-table .security-profile-copy { color: var(--muted); font-size: .68rem; font-weight: 700; }
.security-table .table-action { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--teal); text-decoration: none; }
.security-profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; padding: 1rem; }
.security-profile-card { position: relative; display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfd; }
.security-profile-card.is-inactive { opacity: .65; filter: grayscale(.65); }
.security-profile-card header { display: flex; align-items: center; gap: .6rem; }
.security-profile-card header > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--teal); background: var(--teal-soft); font-size: .68rem; font-weight: 900; }
.security-profile-card header > div { display: grid; flex: 1; gap: .12rem; }
.security-profile-card header strong { font-size: .76rem; }
.security-profile-card header small,.security-profile-card p { color: var(--muted); font-size: .61rem; }
.security-profile-card p { min-height: 34px; margin: 0; line-height: 1.45; }
.security-profile-card footer { display: flex; align-items: center; gap: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.security-profile-card footer span { color: var(--muted); font-size: .58rem; }
.security-profile-card footer a { display: grid; width: 30px; height: 30px; margin-left: auto; place-items: center; border-radius: 8px; color: var(--teal); background: var(--teal-soft); text-decoration: none; }
.security-profile-card > form { margin: 0; }
.security-profile-toggle { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: .59rem; font-weight: 750; cursor: pointer; }
.security-profile-toggle:hover { color: var(--danger); }
.audit-list { display: grid; }
.audit-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: .7rem; padding: .72rem 1rem; border-top: 1px solid var(--line); }
.audit-list article:first-child { border-top: 0; }
.audit-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--teal); background: var(--teal-soft); }
.audit-list article > div { display: grid; gap: .12rem; }
.audit-list strong { font-size: .68rem; }
.audit-list small { color: var(--muted); font-size: .57rem; }
.audit-list code { overflow: hidden; max-width: 760px; margin-top: .2rem; color: #526a70; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.audit-list aside { display: grid; justify-items: end; gap: .12rem; }
.security-form { display: grid; gap: 1rem; }
.field textarea { width: 100%; padding: .64rem .72rem; border: 1px solid #cbdcdf; border-radius: 9px; outline: 0; color: var(--ink); background: white; font: inherit; font-weight: 500; resize: vertical; }
.field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.profile-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.profile-picker label { display: flex; min-height: 78px; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; cursor: pointer; }
.profile-picker label:has(input:checked) { border-color: #8fcfc9; background: var(--teal-soft); }
.profile-picker input { margin-top: .15rem; accent-color: var(--teal); }
.profile-picker span { display: grid; gap: .18rem; }
.profile-picker strong { font-size: .72rem; }
.profile-picker small { color: var(--muted); font-size: .59rem; line-height: 1.4; }
.permission-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.permission-groups fieldset { min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; }
.permission-groups legend { padding: 0 .35rem; color: var(--teal); font-size: .68rem; font-weight: 850; }
.permission-groups label { display: flex; align-items: center; gap: .55rem; padding: .5rem; border-radius: 8px; cursor: pointer; }
.permission-groups label:hover { background: white; }
.permission-groups input { flex: 0 0 auto; accent-color: var(--teal); }
.permission-groups label > span { display: grid; min-width: 0; gap: .08rem; }
.permission-groups strong { font-size: .66rem; }
.permission-groups small { overflow: hidden; color: var(--muted); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: .51rem; text-overflow: ellipsis; }
.user-overrides label { justify-content: space-between; cursor: default; }
.user-overrides select { flex: 0 0 105px; min-height: 32px; padding: .35rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: .58rem; }
.sticky-actions { position: sticky; z-index: 4; bottom: 0; display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 0; background: linear-gradient(180deg,rgba(243,248,248,0),var(--canvas) 35%); }
.laboratory-heading { margin-bottom: 1rem; }
.laboratory-identity-preview { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr) auto; align-items: center; gap: 1.2rem; overflow: hidden; margin-bottom: 1rem; padding: 1.3rem; color: white; border-color: transparent; background:
    radial-gradient(circle at 80% 25%,rgba(255,255,255,.18) 0 3px,transparent 4px) 0 0/34px 34px,
    linear-gradient(125deg,#0a496a,#087f93 58%,#38b9bc); box-shadow: 0 18px 45px rgba(7,73,105,.17); }
.laboratory-identity-preview::after { content: ""; position: absolute; right: 7%; width: 230px; height: 76px; opacity: .2; border-top: 2px solid white; border-bottom: 2px solid white; border-radius: 50%; transform: rotate(-22deg); }
.laboratory-logo-preview { position: relative; z-index: 1; display: grid; width: 82px; height: 82px; place-items: center; padding: .55rem; border: 1px solid rgba(255,255,255,.38); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 12px 28px rgba(4,55,77,.2); }
.laboratory-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.laboratory-default-mark { width: 52px; height: 52px; }
.laboratory-identity-preview > div:nth-child(2) { position: relative; z-index: 1; }
.laboratory-identity-preview .eyebrow { color: #a9f1eb; }
.laboratory-identity-preview h2 { margin: .2rem 0 .25rem; font-size: 1.35rem; }
.laboratory-identity-preview p { margin: 0 0 .35rem; color: #e1f4f6; font-size: .78rem; }
.laboratory-identity-preview small { color: #c1e6e9; font-size: .62rem; }
.laboratory-science-mark { position: relative; z-index: 1; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: rgba(255,255,255,.09); font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.laboratory-logo-field { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 1rem; }
.laboratory-logo-field input[type="file"] { padding: .5rem; }
.logo-remove { display: flex; min-height: 43px; align-items: center; gap: .45rem; padding: .6rem .8rem; border: 1px solid #f0cdd0; border-radius: 9px; color: var(--danger); background: var(--danger-soft); font-size: .68rem; font-weight: 750; }
.logo-remove input { accent-color: var(--danger); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-heading h2, .roadmap-card h2 { margin: .18rem 0 0; font-size: 1.12rem; letter-spacing: -.02em; }
.collapsible-list-heading { position: relative; }
.collapsible-list-heading > :first-child { margin-right: auto; }
.roadmap-card h2.collapsible-list-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-collapse-toggle { display: inline-grid; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--teal); background: white; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.list-collapse-toggle:hover { border-color: #91ceca; background: var(--teal-soft); }
.list-collapse-toggle:focus-visible { outline: 3px solid rgba(10,151,156,.22); outline-offset: 2px; }
.list-collapse-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .2s ease; }
.collapsible-list-block.is-collapsed > :not(.collapsible-list-heading) { display: none !important; }
.collapsible-list-block.is-collapsed .list-collapse-toggle svg { transform: rotate(0); }
.collapsible-list { overflow: hidden; }
.collapsible-list > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink); background: #fbfdfd; cursor: pointer; list-style: none; }
.collapsible-list > summary::-webkit-details-marker { display: none; }
.collapsible-list > summary > div { display: grid; gap: .16rem; }
.collapsible-list > summary strong { font-size: .78rem; }
.collapsible-list > summary > span { color: var(--teal); font-size: .66rem; font-weight: 800; }
.collapsible-list:not([open]) > summary { border-bottom: 0; }
.finance-link-card { display: block; margin-top: 1rem; padding: 1.1rem; color: inherit; text-decoration: none; }
.finance-link-card h2 { margin: .2rem 0; font-size: 1rem; }
.finance-link-card p { margin: 0; color: var(--muted); font-size: .74rem; }
.text-danger { color: var(--danger) !important; }
.table-actions { white-space: nowrap; }
.text-link { color: var(--teal); font-size: .76rem; font-weight: 750; text-decoration: none; }
.roadmap-card { padding: 1.2rem; }
.roadmap { display: grid; gap: 0; padding: 0; margin: 1.1rem 0 0; list-style: none; }
.roadmap li { position: relative; display: flex; min-height: 59px; align-items: flex-start; gap: .8rem; }
.roadmap li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: var(--line); }
.roadmap li > span { z-index: 1; display: grid; flex: 0 0 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: white; font-size: .7rem; font-weight: 800; }
.roadmap li div { display: grid; gap: .12rem; padding-top: .18rem; }
.roadmap strong { font-size: .8rem; }
.roadmap small { color: var(--muted); font-size: .68rem; }
.roadmap .is-done > span { color: white; border-color: var(--success); background: var(--success); }
.roadmap .is-next > span { color: var(--teal); border-color: var(--aqua); background: var(--teal-soft); }

.alert { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid; border-radius: 11px; font-size: .82rem; }
.alert > span { display: grid; flex: 0 0 23px; height: 23px; place-items: center; border-radius: 50%; font-weight: 900; }
.alert--success { color: var(--success); border-color: #bfe3d6; background: var(--success-soft); }
.alert--success > span { color: white; background: var(--success); }
.alert--error { color: var(--danger); border-color: #f1c6ca; background: var(--danger-soft); }
.alert--error > span { color: white; background: var(--danger); }
.alert--details { align-items: flex-start; }
.alert--details strong { display: block; margin-bottom: .25rem; }
.alert--details ul { display: grid; gap: .16rem; padding-left: 1.1rem; margin: 0; font-size: .75rem; }
.toolbar { display: flex; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.search-field { display: flex; flex: 1; min-width: 180px; align-items: center; gap: .55rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfd; }
.search-field span { color: var(--muted); font-size: 1.1rem; }
.search-field input { width: 100%; min-height: 40px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.smart-filter-panel { margin-bottom: 1rem; }
.smart-filter-bar { align-items: end; flex-wrap: wrap; border-bottom: 0; }
.smart-filter-bar .search-field { min-height: 42px; }
.filter-field { display: grid; min-width: 150px; gap: .25rem; }
.filter-field > span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.filter-field select, .filter-field input { min-height: 42px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfdfd; }
.filter-field--date { min-width: 138px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .79rem; }
th { padding: .75rem 1rem; color: var(--muted); background: #f9fbfb; font-size: .65rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
td { padding: .9rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
td strong, td small { display: block; }
td small { margin-top: .18rem; color: var(--muted); font-size: .68rem; }
.table-action { text-align: right; }
.table-action a { color: var(--teal); font-weight: 750; text-decoration: none; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .5rem; border-radius: 99px; font-size: .66rem; font-weight: 750; white-space: nowrap; }
.badge--success { color: var(--success); background: var(--success-soft); }
.badge--warning { color: #96600e; background: var(--amber-soft); }
.badge--neutral { color: #536971; background: #edf2f3; }
.trace-pills { display: flex; flex-wrap: wrap; gap: .25rem; }
.trace-pills small { margin: 0; padding: .2rem .38rem; border-radius: 5px; color: var(--teal-dark); background: var(--teal-soft); }
.empty-state { display: grid; min-height: 250px; place-items: center; align-content: center; padding: 2rem; text-align: center; }
.empty-state > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: var(--teal); background: var(--teal-soft); font-size: 1.15rem; font-weight: 900; }
.empty-state h3 { margin: .9rem 0 .25rem; }
.empty-state p { margin: 0; color: var(--muted); font-size: .82rem; }
.empty-state--small { min-height: 170px; }
.pagination { display: flex; justify-content: flex-end; gap: .35rem; padding: 1rem; border-top: 1px solid var(--line); }
.pagination a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-size: .75rem; }
.pagination .is-current { color: white; border-color: var(--teal); background: var(--teal); }

/* Forms */
.product-form { display: grid; gap: 1rem; }
.form-section { padding: 1.25rem; }
.form-section-heading { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.25rem; }
.form-section-heading > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--teal); background: var(--teal-soft); font-size: .7rem; font-weight: 850; }
.form-section-heading h2 { margin: 0; font-size: 1rem; }
.form-section-heading p { margin: .18rem 0 0; color: var(--muted); font-size: .73rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { display: grid; gap: .42rem; color: var(--ink); font-size: .76rem; font-weight: 700; }
.field--wide { grid-column: span 2; }
.field input, .field select { width: 100%; min-height: 43px; padding: .64rem .72rem; border: 1px solid #cbdcdf; border-radius: 9px; outline: 0; color: var(--ink); background: white; font-weight: 500; transition: border-color .17s ease, box-shadow .17s ease; }
.field input:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.field small { color: var(--danger); font-weight: 600; line-height: 1.35; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 5.3rem; }
.password-field button { position: absolute; top: 50%; right: .65rem; padding: .3rem; border: 0; transform: translateY(-50%); color: var(--teal); background: transparent; font-size: .72rem; font-weight: 750; cursor: pointer; }
.toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.toggle-card { display: flex; align-items: center; gap: .7rem; padding: .9rem; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { position: relative; flex: 0 0 38px; height: 22px; border-radius: 99px; background: #cedbdd; transition: background .17s ease; }
.toggle-control::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .17s ease; }
.toggle-card input:checked + .toggle-control { background: var(--teal); }
.toggle-card input:checked + .toggle-control::after { transform: translateX(16px); }
.toggle-card input:focus-visible + .toggle-control { outline: 3px solid rgba(8,127,140,.25); outline-offset: 3px; }
.toggle-card.is-locked { cursor: default; background: #f8fbfb; }
.toggle-control.is-on { background: var(--teal); }
.toggle-control.is-on::after { transform: translateX(16px); }
.toggle-card > span:last-child { display: grid; gap: .15rem; }
.toggle-card strong { font-size: .76rem; }
.toggle-card small { color: var(--muted); font-size: .65rem; }
.form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 0; background: linear-gradient(180deg, rgba(243,248,248,0), var(--canvas) 35%); }

/* Stock and quality module */
.stock-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; margin-bottom: 1rem; }
.location-panel { align-self: start; overflow: hidden; }
.location-list { display: grid; gap: 0; padding: 0 1rem; margin: 0; list-style: none; }
.location-list li { display: flex; align-items: center; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.location-list li:last-child { border-bottom: 0; }
.location-icon { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--teal); background: var(--teal-soft); }
.location-list li > div { display: grid; gap: .12rem; }
.location-list strong { font-size: .76rem; }
.location-list small { color: var(--muted); font-size: .65rem; }
.inline-disclosure { margin: .8rem 1rem 1rem; border: 1px dashed #bcd8da; border-radius: 10px; }
.inline-disclosure summary { padding: .7rem .8rem; color: var(--teal); font-size: .74rem; font-weight: 800; cursor: pointer; }
.compact-form { display: grid; gap: .65rem; padding: 0 .8rem .8rem; }
.module-section { margin-top: 1rem; overflow: hidden; }
.movement-list { display: grid; }
.movement-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); }
.movement-list article:first-child { border-top: 0; }
.movement-list article > div { display: grid; gap: .15rem; }
.movement-list strong { font-size: .76rem; }
.movement-list small { color: var(--muted); font-size: .65rem; }
.movement-list b { font-size: .78rem; }
.movement-sign { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; font-size: .9rem; font-weight: 900; }
.movement-sign.is-positive { color: var(--success); background: var(--success-soft); }
.movement-sign.is-negative { color: var(--coral); background: #fff0ed; }
.receipt-list { display: grid; gap: 1rem; }
.receipt-card { overflow: hidden; }
.receipt-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.receipt-card h2 { margin: .2rem 0 .15rem; font-size: 1.02rem; }
.receipt-card header p { margin: 0; color: var(--muted); font-size: .7rem; }
.receipt-facts { display: grid; grid-template-columns: 1.35fr .8fr 1fr 1fr; gap: 1rem; padding: 1rem 1.15rem; }
.receipt-facts > div { display: grid; align-content: start; gap: .16rem; }
.receipt-facts span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.receipt-facts strong { font-size: .78rem; }
.receipt-facts small { color: var(--muted); font-size: .67rem; }
.quality-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.15rem; border-top: 1px solid #f0d9ad; background: #fffaf0; }
.quality-strip > div { display: flex; align-items: center; gap: .7rem; }
.quality-strip p { display: grid; gap: .1rem; margin: 0; }
.quality-strip strong { color: #8b5c14; font-size: .75rem; }
.quality-strip small { color: #8d7650; font-size: .65rem; }
.quality-strip .status-dot { background: #e6a539; box-shadow: 0 0 0 4px rgba(230,165,57,.14); }
.quality-form { display: flex; align-items: center; gap: .45rem; }
.quality-form input { min-width: 220px; min-height: 36px; padding: .5rem .65rem; border: 1px solid #e8d6b3; border-radius: 8px; outline: 0; background: white; font-size: .72rem; }
.quality-form input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(195,122,22,.1); }
.receipt-product-list { display: grid; }
.receipt-product { display: grid; grid-template-columns: 1.45fr .8fr 1fr .65fr; gap: 1rem; padding: .9rem 1.15rem; border-top: 1px solid var(--line); }
.receipt-product:first-child { border-top: 0; }
.receipt-product > div { display: grid; align-content: start; gap: .13rem; }
.receipt-product span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.receipt-product strong { font-size: .74rem; }
.receipt-product small { color: var(--muted); font-size: .64rem; }

/* Purchase cycle and shared references */
.purchase-list { display: grid; gap: 1rem; }
.purchase-card { overflow: hidden; }
.purchase-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.purchase-card h2 { margin: .2rem 0 .15rem; font-size: 1.04rem; }
.purchase-card header p { margin: 0; color: var(--muted); font-size: .7rem; }
.purchase-flow { display: grid; grid-template-columns: repeat(5, 1fr); padding: .9rem 1.15rem; background: #f9fbfb; }
.flow-step { position: relative; display: grid; justify-items: center; gap: .28rem; color: #82969b; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 17px); width: calc(100% - 34px); height: 2px; background: #dbe6e8; }
.flow-step span { z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #d5e2e4; border-radius: 50%; background: white; font-size: .66rem; font-weight: 850; }
.flow-step small { font-size: .62rem; font-weight: 750; }
.flow-step.is-complete { color: var(--teal); }
.flow-step.is-complete span { color: white; border-color: var(--teal); background: var(--teal); }
.flow-step.is-complete:not(:last-child)::after { background: var(--aqua); }
.purchase-facts { display: grid; grid-template-columns: 1.35fr .75fr 1fr 1fr; gap: 1rem; padding: 1rem 1.15rem; }
.purchase-facts > div { display: grid; align-content: start; gap: .15rem; }
.purchase-facts span { color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.purchase-facts strong { font-size: .76rem; }
.purchase-facts small { color: var(--muted); font-size: .66rem; }
.workflow-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .8rem 1.15rem; border-top: 1px solid var(--line); background: #fbfdfd; color: var(--muted); font-size: .72rem; }
.workflow-actions form { display: flex; align-items: center; gap: .5rem; }
.workflow-actions input { min-height: 36px; padding: .48rem .62rem; border: 1px solid #cbdcdf; border-radius: 8px; }
.workflow-actions label { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.reference-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 1rem; align-items: start; }
.reference-list { display: grid; }
.reference-list > div { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); }
.reference-list > div:first-child { border-top: 0; }
.reference-avatar { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--teal); background: var(--teal-soft); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.reference-list p { display: grid; flex: 1; gap: .15rem; margin: 0; }
.reference-list strong { font-size: .76rem; }
.reference-list small { color: var(--muted); font-size: .65rem; }
.reference-create { border-top: 1px solid var(--line); }
.reference-create summary { padding: .85rem 1.1rem; color: var(--teal); font-size: .74rem; font-weight: 800; cursor: pointer; }
.reference-create .compact-form { padding: 0 1.1rem 1.1rem; }
.unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; padding: 1rem; }
.unit-grid > div { display: grid; gap: .12rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfd; }
.unit-grid strong { color: var(--teal); font-size: .76rem; }
.unit-grid span { font-size: .72rem; font-weight: 700; }
.unit-grid small { color: var(--muted); font-size: .61rem; }
.reference-unit-card > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .35rem; }
.reference-status-form { flex: 0 0 auto; margin: 0; }
.reference-status-action { display: inline-grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; cursor: pointer; }
.reference-status-action.is-active { color: var(--success); }
.reference-status-action:hover { border-color: var(--teal); background: var(--teal-soft); }
.reference-status-action:focus-visible { outline: 3px solid rgba(10,151,156,.22); outline-offset: 2px; }
.reference-status-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.trace-section { border-left: 4px solid var(--teal); }
.purchase-lines { display: grid; gap: .7rem; margin-bottom: .8rem; }
.purchase-line { position: relative; display: grid; grid-template-columns: 1.5fr .55fr .65fr 1fr; gap: .7rem; padding: .85rem 2.8rem .85rem .85rem; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; }
.line-remove { position: absolute; top: .75rem; right: .75rem; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 8px; color: var(--danger); background: var(--danger-soft); font-size: 1rem; cursor: pointer; }
.inline-error { margin: 0 1rem 1rem; padding: .65rem .8rem; border-radius: 9px; color: var(--danger); background: var(--danger-soft); font-size: .74rem; font-weight: 700; }
.purchase-facts--multi { grid-template-columns: minmax(0,2fr) 1fr 1fr; }
.purchase-products p { display: grid; gap: .12rem; margin: .5rem 0 0; }
.purchase-products p + p { padding-top: .45rem; border-top: 1px solid var(--line); }
.order-picker { margin-bottom: 1rem; overflow: hidden; }
.order-select-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .7rem; padding: 1rem 1.15rem; }
.delivery-header { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); gap: 1.5rem; align-items: end; padding: 1.15rem; }
.delivery-header h2 { margin: .2rem 0; font-size: 1.2rem; }
.delivery-header p { margin: 0; color: var(--muted); font-size: .72rem; }
.ordered-products { overflow: hidden; }
.component-editor { margin: 1rem 0 1.25rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.component-editor.is-hidden { display: none; }
.component-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.component-editor-heading h3, .component-editor-heading p { margin: 0; }
.component-editor-heading p { margin-top: .2rem; color: var(--muted); }
.component-lines { display: grid; gap: .8rem; }
.component-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: .8rem; align-items: end; }
.component-remove { margin-bottom: .15rem; }
.field-error { margin-bottom: .8rem; color: var(--danger); font-weight: 700; }
.receipt-components { display: grid; gap: .15rem; margin-top: .45rem; padding-left: .55rem; border-left: 2px solid var(--teal); }
.receipt-components small { display: block; }
.ordered-line-list { display: grid; }
.ordered-line { padding: 1rem 1.15rem; border-top: 1px solid var(--line); }
.ordered-line:first-child { border-top: 0; }
.ordered-line > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.ordered-line header > div { display: grid; gap: .16rem; }
.ordered-line header strong { font-size: .82rem; }
.ordered-line header small { color: var(--muted); font-size: .66rem; }
.ordered-line.is-complete { opacity: .72; background: #f8fbfb; }
.quantity-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.quantity-progress > div { display: grid; gap: .18rem; padding: .7rem; border-radius: 9px; background: #f5f9f9; }
.quantity-progress span { color: var(--muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.quantity-progress strong { font-size: .76rem; }
.quantity-progress .deliver-now { background: var(--teal-soft); }
.deliver-now input { width: 100%; min-height: 35px; padding: .4rem .5rem; border: 1px solid #acd7d5; border-radius: 7px; background: white; font-weight: 750; }
.trace-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #c8dddf; }
.auto-id-note { display: block; margin-top: .45rem; color: var(--teal); font-size: .66rem; font-weight: 750; }
.quantity-progress .unit-cost-now { background: #fff8e8; }
.unit-cost-now input { width: 100%; min-height: 35px; padding: .4rem .5rem; border: 1px solid #e5c57d; border-radius: 7px; background: white; font-weight: 750; }
.unit-cost-now small { color: #94600c; font-size: .58rem; }
.receipt-heading-meta { display: flex; align-items: center; gap: .65rem; }
.receipt-total-preview { display: grid; min-width: 105px; gap: .08rem; padding: .45rem .65rem; border-radius: 9px; color: var(--teal); background: var(--teal-soft); text-align: right; }
.receipt-total-preview small { color: var(--muted); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.receipt-total-preview strong { font-size: .82rem; }
.trace-allocation-wrap { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #c8dddf; }
.trace-allocation-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.trace-allocation-heading strong { font-size: .73rem; }
.trace-allocation-heading span { padding: .24rem .5rem; border-radius: 99px; color: var(--teal); background: var(--teal-soft); font-size: .63rem; font-weight: 800; }
.trace-allocations { display: grid; gap: .55rem; }
.trace-allocation { display: grid; grid-template-columns: 30px repeat(3,minmax(0,1fr)); align-items: end; gap: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfd; }
.trace-number { display: grid; width: 28px; height: 28px; place-items: center; align-self: center; border-radius: 9px; color: white; background: var(--teal); font-size: .67rem; font-weight: 850; }
.trace-help { display: block; margin-top: .5rem; color: var(--muted); font-size: .63rem; }
.document-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.document-summary article { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.document-summary article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--teal); background: var(--teal-soft); font-size: .7rem; font-weight: 900; }
.document-summary article > div { display: grid; gap: .1rem; }
.document-summary strong { font-size: 1.35rem; }
.document-summary small { color: var(--muted); font-size: .68rem; }
.document-columns { display: grid; gap: 1rem; }
.document-register { overflow: hidden; }
.document-list { display: grid; }
.document-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-top: 1px solid var(--line); }
.document-row:first-child { border-top: 0; }
.doc-type { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #94600c; background: var(--amber-soft); font-size: .65rem; font-weight: 900; }
.doc-type--order { color: var(--blue); background: #eaf3fa; }
.doc-type--receipt { color: var(--success); background: var(--success-soft); }
.doc-type--invoice { color: #7b4bb7; background: #f1eafb; }
.document-row > div:nth-child(2) { display: grid; gap: .12rem; }
.document-row strong { font-size: .76rem; }
.document-row p { margin: 0; font-size: .7rem; }
.document-row small { color: var(--muted); font-size: .64rem; }
.document-row > div:last-child { display: grid; justify-items: end; gap: .3rem; }
.document-row b { font-size: .72rem; }
.document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .42rem; }
.document-actions a { padding: .28rem .55rem; border: 1px solid var(--line); border-radius: 7px; color: var(--teal); background: white; font-size: .62rem; font-weight: 800; text-decoration: none; }
.document-actions a:hover { border-color: var(--teal); background: var(--teal-soft); }
.document-actions .document-view-action, .document-view-action { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--teal); background: white; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.document-view-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.document-view-action:hover { border-color: var(--teal); background: var(--teal-soft); transform: translateY(-1px); }
.document-view-action:focus-visible { outline: 3px solid rgba(14, 116, 112, .22); outline-offset: 2px; }
.document-empty { padding: 1rem; margin: 0; color: var(--muted); font-size: .75rem; }
.document-tabs-shell { overflow: hidden; }
.document-tabs { display: flex; gap: .35rem; padding: .7rem .8rem 0; border-bottom: 1px solid var(--line); background: #f8fbfb; }
.document-tabs button { display: flex; align-items: center; gap: .45rem; padding: .7rem .85rem; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.document-tabs button > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--teal); background: var(--teal-soft); font-size: .6rem; }
.document-tabs button > b { display: grid; min-width: 20px; height: 20px; padding: 0 .3rem; place-items: center; border-radius: 99px; background: #e9eeee; font-size: .6rem; }
.document-tabs button.is-active { border-bottom-color: var(--teal); color: var(--ink); background: white; }
.document-table { min-width: 820px; }
.document-table td:first-child { min-width: 200px; }
.document-table td:first-child small { display: block; margin-top: .16rem; color: var(--muted); }
.document-action-set { display: flex; align-items: center; gap: .35rem; }
.document-action-set form { margin: 0; }
.document-icon-action { display: inline-grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--teal); background: white; cursor: pointer; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.document-icon-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.document-icon-action:hover { border-color: var(--teal); background: var(--teal-soft); transform: translateY(-1px); }
.document-icon-action--danger { color: var(--danger); }
.document-icon-action--danger:hover { border-color: var(--danger); background: #fff1f0; }
.document-icon-action.is-disabled { color: #aebbbb; background: #f5f7f7; cursor: not-allowed; opacity: .72; }
.document-icon-action.is-disabled:hover { border-color: var(--line); background: #f5f7f7; transform: none; }
.issue-stock-preview { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,2fr); gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.issue-stock-preview[hidden] { display: none; }
.issue-stock-preview.is-untracked { grid-template-columns: minmax(220px,430px); }
.issue-available-card { display: grid; align-content: center; gap: .3rem; padding: 1rem; border-radius: 12px; color: var(--teal); background: var(--teal-soft); }
.issue-available-card > span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.issue-available-card > strong { font-size: 1.25rem; }
.issue-available-card > strong small { font-size: .72rem; }
.issue-available-card p { margin: 0; color: var(--muted); font-size: .66rem; }
.issue-fefo-state { display: grid; gap: .65rem; }
.issue-fefo-callout, .issue-normal-state { display: flex; align-items: center; gap: .7rem; min-height: 100%; padding: .85rem; border: 1px solid #bfe2e0; border-radius: 11px; background: #f8fdfd; }
.issue-fefo-callout > span, .issue-normal-state > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 10px; color: white; background: var(--teal); font-size: .65rem; font-weight: 900; }
.issue-fefo-callout > div, .issue-normal-state > div { display: grid; gap: .15rem; }
.issue-fefo-callout small, .issue-normal-state small { color: var(--muted); font-size: .64rem; }
.issue-lots-collapse { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.issue-lots-collapse summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; color: var(--ink); background: #fbfdfd; font-size: .7rem; font-weight: 800; cursor: pointer; }
.issue-lots-collapse summary b { color: var(--teal); font-size: .63rem; }
.issue-lot-list { display: grid; border-top: 1px solid var(--line); }
.issue-lot-row { display: grid; grid-template-columns: 28px minmax(120px,1.4fr) minmax(100px,1fr) minmax(100px,1fr) auto; align-items: center; gap: .65rem; padding: .7rem .8rem; border-top: 1px solid var(--line); }
.issue-lot-row:first-child { border-top: 0; }
.issue-lot-row.is-fefo-first { background: #fbfefe; }
.issue-lot-row.is-selected { background: var(--teal-soft); }
.issue-lot-rank { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: var(--teal); background: #e4f4f3; font-size: .62rem; font-weight: 900; }
.issue-lot-row > div { display: grid; gap: .1rem; }
.issue-lot-row > div > span, .issue-lot-row small { color: var(--muted); font-size: .59rem; }
.issue-lot-row strong { font-size: .68rem; }
.issue-lot-allocation { padding: .3rem .5rem; border-radius: 99px; color: var(--muted); background: #edf1f1; font-size: .58rem; white-space: nowrap; }
.issue-lot-row.is-selected .issue-lot-allocation { color: var(--teal); background: white; }
.issue-mode-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-bottom: .75rem; }
.issue-mode-option { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.issue-mode-option:has(input:checked) { border-color: #84cbc7; background: var(--teal-soft); box-shadow: 0 0 0 2px rgba(10,151,156,.08); }
.issue-mode-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.issue-mode-option input { width: 17px; height: 17px; margin-top: .12rem; accent-color: var(--teal); }
.issue-mode-option span { display: grid; gap: .12rem; }
.issue-mode-option strong { font-size: .72rem; }
.issue-mode-option small { color: var(--muted); font-size: .61rem; line-height: 1.35; }
.issue-components-state { display: grid; gap: .65rem; }
.issue-components-state[hidden] { display: none; }
.issue-component-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border: 1px solid #bfe2e0; border-radius: 11px; background: #f8fdfd; }
.issue-component-heading > div { display: grid; gap: .12rem; }
.issue-component-heading strong { font-size: .76rem; }
.issue-component-heading small { color: var(--muted); font-size: .62rem; }
.issue-component-heading > span { padding: .28rem .55rem; border-radius: 99px; color: var(--teal); background: var(--teal-soft); font-size: .61rem; font-weight: 850; white-space: nowrap; }
.issue-component-list { display: grid; gap: .6rem; }
.issue-component-card { display: grid; grid-template-columns: minmax(150px,1.2fr) minmax(120px,.8fr) minmax(155px,.8fr); align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; }
.issue-component-card.is-selected { border-color: #84cbc7; background: var(--teal-soft); }
.issue-component-select { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.issue-component-select input { width: 18px; height: 18px; accent-color: var(--teal); }
.issue-component-select span, .issue-component-available { display: grid; gap: .12rem; }
.issue-component-select strong { color: var(--teal); font-size: .75rem; }
.issue-component-select small, .issue-component-available span { color: var(--muted); font-size: .59rem; }
.issue-component-available strong { font-size: .7rem; }
.issue-component-quantity input { min-height: 38px; }
.issue-component-lots { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; }
.issue-component-lots summary { display: flex; align-items: center; justify-content: space-between; padding: .55rem .7rem; color: var(--muted); font-size: .62rem; font-weight: 800; cursor: pointer; }
.issue-component-lots summary b { color: var(--teal); }
.issue-component-lot-list { display: grid; border-top: 1px solid var(--line); }
.issue-component-lot-list > div { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .55rem .7rem; border-top: 1px solid var(--line); }
.issue-component-lot-list > div:first-child { border-top: 0; }
.issue-component-lot-list > div.is-selected { background: var(--teal-soft); }
.issue-component-lot-list > div > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: var(--teal); background: #e4f4f3; font-size: .58rem; font-weight: 900; }
.issue-component-lot-list p { display: grid; gap: .08rem; margin: 0; }
.issue-component-lot-list p strong { font-size: .65rem; }
.issue-component-lot-list p small { color: var(--muted); font-size: .57rem; }
.issue-component-lot-list > div > b { color: var(--muted); font-size: .58rem; }
.issue-component-lot-list > div.is-selected > b { color: var(--teal); }
.detail-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.document-paper { overflow: hidden; }
.document-paper-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: #fbfdfd; }
.document-paper-header > div { display: flex; align-items: center; gap: .75rem; }
.document-paper-header > div:last-child { justify-content: flex-end; flex-wrap: wrap; }
.document-paper-header div div { display: grid; gap: .08rem; }
.document-paper-header small { color: var(--muted); font-size: .62rem; }
.document-brand-logo { width: 46px; height: 46px; padding: .25rem; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: white; }
.document-meta-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.document-meta-grid div { display: grid; gap: .18rem; }
.document-meta-grid span { color: var(--muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.document-meta-grid strong, .document-meta-grid a { font-size: .73rem; }
.document-title-block { padding: 1rem 1.15rem 0; }
.document-title-block h2 { margin: .15rem 0; }
.document-title-block p { margin: .2rem 0 0; color: var(--muted); }
.document-lines-table tfoot td { border-top: 2px solid var(--line); font-weight: 850; }
.expense-register { overflow: hidden; margin-bottom: 1rem; }
.expense-toolbar select { min-width: 190px; border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem; background: white; }
.expense-table td:first-child { min-width: 190px; }
.expense-table td small { display: block; margin-top: .12rem; color: var(--muted); font-size: .61rem; }
.expense-total-card { display: grid; align-content: center; gap: .2rem; padding: .8rem 1rem; border-radius: 11px; color: var(--teal); background: var(--teal-soft); }
.expense-total-card > span { color: var(--muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.expense-total-card strong { font-size: 1.12rem; }
.expense-total-card small { font-size: .7rem; }
.field-with-suffix { display: flex; align-items: stretch; }
.field-with-suffix input { min-width: 0; border-radius: 9px 0 0 9px; }
.field-with-suffix b { display: grid; place-items: center; padding: 0 .9rem; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; color: var(--teal); background: var(--teal-soft); }
.expense-ht-choice { display: flex; align-items: center; gap: .8rem; min-height: 74px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; background: #fff; }
.expense-ht-choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.expense-ht-choice input { width: 20px; height: 20px; accent-color: var(--teal); }
.expense-ht-choice span { display: grid; gap: .15rem; }
.expense-ht-choice strong { color: var(--ink); }
.expense-ht-choice small { color: var(--muted); font-size: .72rem; }
.expense-detail-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,.8fr); gap: 1rem; margin-bottom: 1rem; }
.expense-detail-main, .expense-cost-card { overflow: hidden; }
.expense-notes { padding: 1rem 1.15rem; border-top: 1px solid var(--line); }
.expense-notes > span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.expense-notes p { margin: .35rem 0 0; font-size: .73rem; line-height: 1.55; }
.expense-cost-lines { display: grid; padding: .7rem 1rem 1rem; }
.expense-cost-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .2rem; border-bottom: 1px solid var(--line); }
.expense-cost-lines span { color: var(--muted); font-size: .66rem; }
.expense-cost-lines strong { font-size: .75rem; }
.expense-cost-lines .is-total { margin-top: .2rem; border-bottom: 0; color: var(--ink); }
.expense-cost-lines .is-total strong { font-size: 1rem; }
.expense-cost-lines .is-paid strong { color: var(--success); }
.expense-cost-lines .is-outstanding { border: 0; border-radius: 9px; padding: .75rem; background: var(--amber-soft); }
.expense-cost-lines .is-outstanding strong { color: #94600c; font-size: .9rem; }
.expense-workflow { margin-bottom: 1rem; }
.expense-payment-columns { align-items: start; }
.expense-payment-form { border-top: 0; }
.expense-delete-form { display: flex; justify-content: flex-end; margin-top: 1rem; }

.error-page { display: grid; place-items: center; padding: 2rem; background: var(--canvas); }
.error-page main { max-width: 500px; text-align: center; }
.error-code { display: block; color: var(--teal); font-size: 5rem; font-weight: 900; letter-spacing: -.08em; }
.error-page h1 { margin: 0; }
.error-page p { margin: .7rem 0 1.4rem; color: var(--muted); }

@media (max-width: 1120px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-layout { grid-template-columns: 1fr; }
    .location-panel { order: -1; }
    .location-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
    .reference-grid { grid-template-columns: 1fr; }
    .security-profile-grid,.profile-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .purchase-line { grid-template-columns: 1fr 1fr; }
    .purchase-line-product { grid-column: span 2; }
    .delivery-header { grid-template-columns: 1fr; }
    .system-health { grid-template-columns: auto minmax(0,1fr) auto; }
    .system-health-signals { display: none; }
    .dashboard-command-grid { grid-template-columns: 1fr; }
    .dashboard-analysis-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-analysis-grid > :last-child { grid-column: 1 / -1; }
    .report-catalog { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .report-filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .report-search-field,.report-filter-grid > .button { grid-column: span 3; }
}

@media (max-width: 860px) {
    .auth-body { background: #edf8f7; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { min-height: 300px; padding: 1.5rem; background: linear-gradient(145deg, #073b49, #08737b); }
    .auth-copy { margin: 3rem 0 1rem; }
    .auth-copy h1 { font-size: 2.3rem; }
    .trust-list { display: none; }
    .auth-panel { padding: 1.2rem; }
    .app-shell { display: block; }
    .sidebar { width: min(84vw, 290px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 15px 0 50px rgba(4,34,45,.25); }
    .sidebar-close, .mobile-menu { display: inline-grid; }
    .app-shell.is-menu-open .sidebar { transform: translateX(0); }
    .sidebar-scrim { position: fixed; z-index: 25; inset: 0; background: rgba(6, 35, 45, .44); }
    .app-shell.is-menu-open .sidebar-scrim { display: block; }
    .workspace { grid-column: auto; }
    .profile-copy, .topbar-actions form { display: none; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .system-health { grid-template-columns: auto minmax(0,1fr); }
    .system-health-link { display: none; }
    .dashboard-risk-grid, .dashboard-activity-grid { grid-template-columns: 1fr; }
    .report-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .receipt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quality-strip { align-items: stretch; flex-direction: column; }
    .quality-form { flex-wrap: wrap; }
    .quality-form input { min-width: 100%; flex-basis: 100%; }
    .purchase-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .receipt-product { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workflow-actions, .workflow-actions form { align-items: stretch; flex-direction: column; }
    .quantity-progress { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .trace-allocation { grid-template-columns: 30px repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
    .topbar { min-height: 64px; padding: .65rem .8rem; }
    .topbar-title .eyebrow { display: none; }
    .topbar-actions { gap: .4rem; }
    .page-content { padding: 1rem .8rem 5rem; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading > .button { width: 100%; }
    .security-section-nav { overflow-x: auto; }
    .security-section-nav a { flex: 0 0 auto; }
    .security-profile-grid,.profile-picker,.permission-groups { grid-template-columns: 1fr; }
    .audit-list article { grid-template-columns: 30px minmax(0,1fr); }
    .audit-list aside { grid-column: 2; justify-items: start; }
    .laboratory-identity-preview { grid-template-columns: 70px minmax(0,1fr); padding: 1rem; }
    .laboratory-logo-preview { width: 66px; height: 66px; border-radius: 17px; }
    .laboratory-science-mark { display: none; }
    .laboratory-logo-field { grid-template-columns: 1fr; }
    .heading-actions { flex-direction: column; }
    .heading-actions .button { width: 100%; }
    .product-heading-actions, .product-import-menu { width: 100%; }
    .product-import-popover { position: static; width: 100%; margin-top: .55rem; }
    .import-steps { grid-template-columns: 1fr; }
    .product-import-form > div { align-items: stretch; flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .metric-card { min-height: 132px; flex-direction: column; gap: .65rem; padding: .9rem; }
    .metric-card strong { font-size: 1.65rem; }
    .metric-card small { display: none; }
    .system-health { align-items: center; gap: .8rem; padding: .85rem; }
    .system-health-score { width: 58px; height: 58px; padding-top: 14px; }
    .system-health-score strong { font-size: 1.15rem; }
    .system-health-copy h2 { font-size: .95rem; }
    .system-health-copy p { display: none; }
    .dashboard-analysis-grid { grid-template-columns: 1fr; }
    .dashboard-analysis-grid > :last-child { grid-column: auto; }
    .chart-summary { gap: 1rem; justify-content: space-between; }
    .financial-chart { padding-inline: .65rem; overflow-x: auto; }
    .financial-chart svg { min-width: 520px; }
    .donut-layout { grid-template-columns: 125px minmax(0,1fr); padding-inline: .8rem; }
    .donut-chart { width: 116px; height: 116px; }
    .quality-gauge { grid-template-columns: 105px minmax(0,1fr); padding-inline: .8rem; }
    .quality-gauge-value { width: 98px; height: 98px; }
    .consumption-bars > a { grid-template-columns: minmax(110px,1fr) auto; }
    .consumption-bars > a > progress { grid-column: 1 / -1; grid-row: 2; }
    .report-catalog { grid-template-columns: 1fr; }
    .report-type-card { min-height: 80px; }
    .report-filter-grid { grid-template-columns: 1fr; }
    .report-search-field,.report-filter-grid > .button { grid-column: auto; }
    .report-title-block { align-items: flex-start; flex-direction: column; }
    .report-title-block aside { justify-items: start; text-align: left; }
    .report-summary-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .report-summary-card { min-height: 95px; padding: .8rem; }
    .report-horizontal-chart > div { grid-template-columns: minmax(95px,1fr) 2fr auto; gap: .45rem; }
    .report-footer { flex-direction: column; }
    .toolbar { flex-wrap: wrap; }
    .search-field { flex-basis: 100%; }
    .toolbar .button { flex: 1; }
    .product-table thead { display: none; }
    .product-table, .product-table tbody, .product-table tr, .product-table td,
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table thead { display: none; }
    .product-table tr, .responsive-table tr { position: relative; padding: .8rem; border-top: 1px solid var(--line); }
    .product-table td, .responsive-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .42rem 0; border: 0; text-align: right; }
    .product-table td:first-child, .responsive-table td:first-child { display: block; padding-right: 4rem; text-align: left; }
    .product-table td[data-label]::before, .responsive-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .66rem; font-weight: 750; text-transform: uppercase; }
    .product-table .table-action { position: absolute; top: .8rem; right: .8rem; width: auto; }
    .form-grid--2, .form-grid--3, .form-grid--4, .toggle-grid { grid-template-columns: 1fr; }
    .field--wide { grid-column: auto; }
    .form-section { padding: 1rem; }
    .form-actions { padding: .75rem .1rem; }
    .form-actions .button { flex: 1; }
    .component-editor-heading { align-items: stretch; flex-direction: column; }
    .component-line { grid-template-columns: 1fr auto; }
    .component-line .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .location-list { grid-template-columns: 1fr; }
    .receipt-facts { grid-template-columns: 1fr 1fr; }
    .quality-form .button { flex: 1; }
    .purchase-flow { padding-inline: .45rem; }
    .flow-step small { font-size: .54rem; }
    .purchase-facts { grid-template-columns: 1fr; }
    .unit-grid { grid-template-columns: 1fr 1fr; }
    .workflow-actions .button { width: 100%; }
    .purchase-line { grid-template-columns: 1fr; padding-right: 2.8rem; }
    .purchase-line-product { grid-column: auto; }
    .order-select-form { grid-template-columns: 1fr; }
    .trace-inputs { grid-template-columns: 1fr; }
    .trace-allocation { grid-template-columns: 30px minmax(0,1fr); }
    .document-summary { grid-template-columns: 1fr; }
    .document-tabs { overflow-x: auto; }
    .document-tabs button { flex: 0 0 auto; }
    .issue-stock-preview { grid-template-columns: 1fr; }
    .issue-mode-picker { grid-template-columns: 1fr; }
    .issue-component-card { grid-template-columns: 1fr 1fr; }
    .issue-component-select { grid-column: 1 / -1; }
    .issue-component-quantity { grid-column: 2; }
    .issue-lot-row { grid-template-columns: 28px minmax(0,1fr) auto; }
    .issue-lot-row > div:nth-of-type(2), .issue-lot-row > div:nth-of-type(3) { grid-column: 2; }
    .issue-lot-allocation { grid-column: 3; grid-row: 1 / span 2; }
    .document-row { grid-template-columns: 36px minmax(0,1fr); }
    .document-row > div:last-child { grid-column: 2; justify-items: start; grid-template-columns: auto auto; align-items: center; }
    .document-actions { justify-content: flex-start; grid-column: 1 / -1; }
    .detail-columns, .document-meta-grid { grid-template-columns: 1fr; }
    .expense-detail-grid { grid-template-columns: 1fr; }
    .expense-toolbar select { width: 100%; }
    .receipt-product { grid-template-columns: 1fr; }
}

@media print {
    @page { size: landscape; margin: 10mm; }
    body { background: white; }
    .sidebar, .topbar, .sidebar-scrim, .document-detail-heading, .skip-link, .list-collapse-toggle { display: none !important; }
    .app-shell, .workspace, .page-content { display: block; width: 100%; margin: 0; padding: 0; }
    .document-paper { border: 0; box-shadow: none; }
    .collapsible-list-block.is-collapsed > :not(.collapsible-list-heading) { display: revert !important; }
    .report-heading,.report-catalog,.report-filter-panel,.report-chart-panel,.report-table-panel .list-collapse-toggle { display: none !important; }
    .report-title-block { margin-top: 0; border-color: #bbb; box-shadow: none; }
    .report-summary-grid { grid-template-columns: repeat(4,1fr); }
    .report-summary-card { min-height: 70px; padding: .55rem; box-shadow: none; break-inside: avoid; }
    .report-summary-card strong { font-size: 1rem; }
    .report-table-panel { display: block !important; border: 0; box-shadow: none; }
    .report-table-panel .panel-heading { padding: .55rem 0; }
    .report-table-panel details,.report-table-panel details:not([open]) { display: block !important; }
    .report-table-panel summary { display: none; }
    .report-data-table { width: 100%; min-width: 0; table-layout: auto; }
    .report-data-table th,.report-data-table td { padding: .25rem .3rem; border: 1px solid #ddd; font-size: 6.5pt; }
    .report-data-table .badge { padding: .1rem .25rem; font-size: 6pt; }
    .report-footer { border-top: 1px solid #ccc; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}