/*
 * OneLab admin design system (framework-web-admin), served at /styles/onelab-admin.css.
 *
 * One look for every admin panel: neutral surfaces, the product accent from
 * /onelab-admin/brand.css (onelab.site-admin.brand.accent / accent-dark), light and dark
 * (prefers-color-scheme, or data-theme="light|dark" on <html>), RTL through logical
 * properties, no inline styles (admin CSPs allow style-src 'self' only).
 *
 * Classes are prefixed "oa-" so the sheet can sit next to an app's own stylesheet without
 * touching it. Building blocks: oa-auth (login / TOTP enrolment), oa-shell + oa-side + oa-main
 * (layout with a mobile drawer), oa-card, oa-kpis, oa-table-wrap + oa-table (horizontal
 * scroll on small screens), oa-form, oa-field, oa-btn, oa-badge, oa-alert.
 */
:root {
  --oa-accent: #1f6f5c;
  --oa-accent-dark: #5cc8a8;
  --oa-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  --oa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --oa-radius: 14px;
  --oa-radius-sm: 9px;
  color-scheme: light dark;
}

:root, :root[data-theme="light"] {
  --oa-brand: var(--oa-accent);
  --oa-bg: #f5f6f4;
  --oa-bg-glow: color-mix(in oklab, var(--oa-brand) 10%, #f5f6f4);
  --oa-surface: #ffffff;
  --oa-surface-2: #f0f2ef;
  --oa-ink: #17201c;
  --oa-ink-2: #46524c;
  --oa-ink-3: #6d7872;
  --oa-line: #e1e5e1;
  --oa-line-strong: #c9d0cb;
  --oa-on-brand: #ffffff;
  --oa-focus: color-mix(in oklab, var(--oa-brand) 35%, transparent);
  --oa-danger: #b42318;
  --oa-danger-bg: #fdecea;
  --oa-warn: #8a5a00;
  --oa-warn-bg: #fff4dc;
  --oa-good: #1d7a46;
  --oa-good-bg: #e6f5ec;
  --oa-shadow: 0 1px 2px rgb(16 24 20 / 6%), 0 8px 28px rgb(16 24 20 / 7%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oa-brand: var(--oa-accent-dark);
    --oa-bg: #0f1412;
    --oa-bg-glow: color-mix(in oklab, var(--oa-brand) 12%, #0f1412);
    --oa-surface: #161d1a;
    --oa-surface-2: #1d2622;
    --oa-ink: #e8eeea;
    --oa-ink-2: #b6c2bb;
    --oa-ink-3: #8a968f;
    --oa-line: #26302b;
    --oa-line-strong: #34403a;
    --oa-on-brand: #08110d;
    --oa-danger: #ff8a80;
    --oa-danger-bg: #3a1714;
    --oa-warn: #f5c76b;
    --oa-warn-bg: #3a2d10;
    --oa-good: #7fd9a3;
    --oa-good-bg: #12301f;
    --oa-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
  }
}

:root[data-theme="dark"] {
  --oa-brand: var(--oa-accent-dark);
  --oa-bg: #0f1412;
  --oa-bg-glow: color-mix(in oklab, var(--oa-brand) 12%, #0f1412);
  --oa-surface: #161d1a;
  --oa-surface-2: #1d2622;
  --oa-ink: #e8eeea;
  --oa-ink-2: #b6c2bb;
  --oa-ink-3: #8a968f;
  --oa-line: #26302b;
  --oa-line-strong: #34403a;
  --oa-on-brand: #08110d;
  --oa-danger: #ff8a80;
  --oa-danger-bg: #3a1714;
  --oa-warn: #f5c76b;
  --oa-warn-bg: #3a2d10;
  --oa-good: #7fd9a3;
  --oa-good-bg: #12301f;
  --oa-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
}

/* ---------- base (only on pages that opt in with class="oa") ---------- */
.oa, .oa body { margin: 0; }
body.oa {
  min-block-size: 100dvh;
  background: var(--oa-bg);
  color: var(--oa-ink);
  font: 15px/1.5 var(--oa-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.oa *, .oa *::before, .oa *::after { box-sizing: border-box; }
.oa a { color: var(--oa-brand); text-underline-offset: 3px; }
.oa :focus-visible { outline: 3px solid var(--oa-focus); outline-offset: 2px; }
.oa-skip { position: absolute; inset-inline-start: -999px; }
.oa-skip:focus { inset-inline-start: 1rem; inset-block-start: 1rem; z-index: 100;
  background: var(--oa-surface); padding: .5rem .8rem; border-radius: var(--oa-radius-sm); }

/* ---------- buttons, fields, badges, alerts ---------- */
.oa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 2.6rem; padding: .55rem 1.1rem; border-radius: var(--oa-radius-sm);
  border: 1px solid var(--oa-line-strong); background: var(--oa-surface); color: var(--oa-ink);
  font: 600 .95rem/1.2 var(--oa-font); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.oa-btn:hover { background: var(--oa-surface-2); }
.oa-btn:active { transform: translateY(1px); }
.oa-btn-primary { background: var(--oa-brand); border-color: var(--oa-brand); color: var(--oa-on-brand); }
.oa-btn-primary:hover { background: color-mix(in oklab, var(--oa-brand) 88%, var(--oa-ink)); }
.oa-btn-block { inline-size: 100%; }
.oa-btn-quiet { border-color: transparent; background: transparent; }

.oa-field { display: grid; gap: .35rem; margin-block-end: 1rem; }
.oa-field > span, .oa-label { font-size: .82rem; font-weight: 600; color: var(--oa-ink-2); }
.oa-input, .oa-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.oa-field select, .oa-field textarea {
  inline-size: 100%; min-block-size: 2.75rem; padding: .6rem .8rem;
  border: 1px solid var(--oa-line-strong); border-radius: var(--oa-radius-sm);
  background: var(--oa-surface); color: var(--oa-ink); font: 1rem/1.3 var(--oa-font);
  transition: border-color .15s, box-shadow .15s;
}
.oa-field input:focus, .oa-field select:focus, .oa-field textarea:focus, .oa-input:focus {
  outline: none; border-color: var(--oa-brand); box-shadow: 0 0 0 4px var(--oa-focus);
}
.oa-hint { font-size: .82rem; color: var(--oa-ink-3); margin: 0 0 1rem; }

.oa-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem;
  border-radius: 999px; font-size: .74rem; font-weight: 650; background: var(--oa-surface-2);
  color: var(--oa-ink-2); border: 1px solid var(--oa-line); }
.oa-badge-good { background: var(--oa-good-bg); color: var(--oa-good); border-color: transparent; }
.oa-badge-warn { background: var(--oa-warn-bg); color: var(--oa-warn); border-color: transparent; }
.oa-badge-danger { background: var(--oa-danger-bg); color: var(--oa-danger); border-color: transparent; }

.oa-alert { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--oa-radius-sm);
  font-size: .9rem; background: var(--oa-surface-2); color: var(--oa-ink-2);
  border-inline-start: 3px solid var(--oa-line-strong); }
.oa-alert-danger { background: var(--oa-danger-bg); color: var(--oa-danger); border-inline-start-color: var(--oa-danger); }
.oa-alert-good { background: var(--oa-good-bg); color: var(--oa-good); border-inline-start-color: var(--oa-good); }

/* ---------- sign-in and TOTP enrolment ---------- */
body.oa-auth {
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem) 1rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--oa-bg-glow), transparent 70%),
    radial-gradient(40rem 26rem at -10% 110%, var(--oa-bg-glow), transparent 70%),
    var(--oa-bg);
}
.oa-auth-card {
  inline-size: min(100%, 25rem); padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--oa-surface); border: 1px solid var(--oa-line); border-radius: 20px;
  box-shadow: var(--oa-shadow);
}
.oa-auth-card.oa-wide { inline-size: min(100%, 31rem); }
.oa-auth-brand { display: flex; align-items: center; gap: .75rem; margin-block-end: 1.5rem; }
.oa-mark {
  display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; flex: none;
  border-radius: 12px; background: var(--oa-brand); color: var(--oa-on-brand);
  font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
}
.oa-auth-brand strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.oa-auth-brand small { display: block; font-size: .72rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oa-brand); }
.oa-auth h1 { margin: 0 0 .35rem; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; }
.oa-auth .oa-lead { margin: 0 0 1.5rem; color: var(--oa-ink-3); font-size: .92rem; }
.oa-auth form { margin: 0; }
.oa-auth .oa-otp input { font-family: var(--oa-mono); letter-spacing: .35em; font-size: 1.1rem;
  direction: ltr; text-align: start; }
.oa-secret { direction: ltr; }
.oa-auth-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-block-start: 1.25rem; padding-block-start: 1rem;
  border-block-start: 1px solid var(--oa-line); font-size: .82rem; color: var(--oa-ink-3); }
.oa-auth-foot a { color: var(--oa-ink-2); text-decoration: none; }
.oa-auth-foot a:hover { color: var(--oa-brand); }
.oa-lock { display: inline-flex; align-items: center; gap: .35rem; }
.oa-lock::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%;
  background: var(--oa-good); box-shadow: 0 0 0 3px var(--oa-good-bg); }
.oa-steps { margin: 0 0 1.25rem; padding-inline-start: 1.2rem; color: var(--oa-ink-2); font-size: .9rem; }
.oa-steps li { margin-block-end: .35rem; }
.oa-qr { display: grid; place-items: center; margin: 0 auto 1rem; padding: .75rem;
  inline-size: fit-content; background: #fff; border-radius: 14px; border: 1px solid var(--oa-line); }
.oa-qr svg { display: block; inline-size: 200px; block-size: 200px; }
.oa-secret { display: block; margin: .35rem 0 1.25rem; padding: .6rem .75rem; text-align: center;
  font: 600 .95rem/1.4 var(--oa-mono); letter-spacing: .08em; word-break: break-all;
  background: var(--oa-surface-2); border-radius: var(--oa-radius-sm); color: var(--oa-ink); }

/* ---------- application shell (opt-in building blocks) ---------- */
.oa-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-block-size: 100dvh;
  align-content: start; }
.oa-side { position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem .9rem;
  background: var(--oa-surface); border-inline-end: 1px solid var(--oa-line); }
.oa-nav { display: grid; gap: .1rem; }
.oa-nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--oa-radius-sm); color: var(--oa-ink-2);
  text-decoration: none; font-size: .92rem; font-weight: 550; }
.oa-nav a:hover { background: var(--oa-surface-2); color: var(--oa-ink); }
.oa-nav a[aria-current="page"], .oa-nav a.active {
  background: color-mix(in oklab, var(--oa-brand) 13%, transparent); color: var(--oa-ink); font-weight: 650; }
.oa-nav-group { margin: 1rem .75rem .25rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--oa-ink-3); }
.oa-main { padding: clamp(1rem, 3vw, 2.25rem); min-inline-size: 0; }
.oa-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: .75rem 1.5rem; margin-block-end: 1.5rem; }
.oa-head h1 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); letter-spacing: -.02em; }
.oa-kicker { margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oa-brand); }
.oa-card { background: var(--oa-surface); border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius); padding: 1.1rem 1.25rem; box-shadow: var(--oa-shadow); }
.oa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.oa-kpi b { display: block; font-size: 1.7rem; letter-spacing: -.02em; }
.oa-kpi span { color: var(--oa-ink-3); font-size: .85rem; }
.oa-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.oa-links a { display: grid; gap: .15rem; padding: .9rem 1rem; border-radius: var(--oa-radius-sm);
  background: var(--oa-surface-2); color: var(--oa-ink-3); text-decoration: none; font-size: .85rem; }
.oa-links a strong { color: var(--oa-ink); font-size: .95rem; }
.oa-links a:hover { background: color-mix(in oklab, var(--oa-brand) 10%, var(--oa-surface-2)); }
.oa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--oa-radius);
  border: 1px solid var(--oa-line); background: var(--oa-surface); }
.oa-table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
.oa-table th { text-align: start; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--oa-ink-3); background: var(--oa-surface-2); }
.oa-table th, .oa-table td { padding: .65rem .9rem; border-block-end: 1px solid var(--oa-line);
  white-space: nowrap; }
.oa-table tr:last-child td { border-block-end: 0; }
.oa-table tbody tr:hover td { background: color-mix(in oklab, var(--oa-brand) 4%, transparent); }
.oa-menu { display: none; }

@media (max-width: 900px) {
  .oa-shell { grid-template-columns: 1fr; }
  .oa-side { position: sticky; z-index: 30; block-size: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between; padding: .6rem 1rem;
    border-inline-end: 0; border-block-end: 1px solid var(--oa-line); }
  .oa-menu { display: block; }
  .oa-menu > summary { list-style: none; cursor: pointer; }
  .oa-menu > summary::-webkit-details-marker { display: none; }
  .oa-side > .oa-nav { display: none; }
  .oa-menu[open] + .oa-nav, .oa-menu[open] ~ .oa-nav { display: grid; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .oa * { transition: none !important; }
}