/* EasyLims design tokens: the EasyMedical brand (easymedical.ro) on the bench — navy rail, ocean-blue action, Inter.
   Loaded after bootstrap.min.css and site.css. The per-client accent overrides --el-accent / --el-on-accent from the layout
   (ThemeAccent). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../lib/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../lib/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../lib/fonts/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../lib/fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --el-rail: #102F42;
  --el-rail-text: #C9D8E0;
  --el-rail-muted: #8FA9B8;
  --el-rail-active: #46CCE9;
  --el-on-rail-active: #102F42;
  --el-ground: #F3F7F9;
  --el-surface: #FFFFFF;
  --el-border: #DBE6EC;
  --el-border-soft: #E9F1F5;
  --el-text: #153246;
  --el-heading: #164F6C;
  --el-muted: #5A6E7E;
  --el-link: #176286;
  --el-link-hover: #12506D;
  --el-accent: #176286;
  --el-on-accent: #FFFFFF;
  --el-danger: #B42318;
  --el-danger-bg: #FDECEA;
  --el-danger-hover: #8F1C13;
  --el-danger-border: #F2C4BF;
  --el-font: "Inter", system-ui, sans-serif;
  --el-mono: "JetBrains Mono", ui-monospace, monospace;
  --el-radius: 10px;
  --el-radius-lg: 16px;
  --el-shadow-card: 0 8px 28px rgb(16 69 95 / 5%);
  --el-brand-1: #8C70D9;
  --el-brand-2: #29B5D6;
  --el-brand-3: #EF5D78;
  --el-hero-start: #102F42;
  --el-hero-end: #176286;
  --el-hero: linear-gradient(110deg, var(--el-hero-start) 0%, #154F6D 55%, var(--el-hero-end) 100%);
  --el-on-hero: #FFFFFF;
  --el-on-hero-muted: #C9D8E0;
  --el-rail-width: 76px;
  --el-topbar-height: 56px;
  --el-badge-neutral-bg: #E6EEF3;  --el-badge-neutral-fg: #2D4A5C;
  --el-badge-pending-bg: #FFF0CC;  --el-badge-pending-fg: #6B4400;
  --el-badge-step-bg: #C8DCFA;     --el-badge-step-fg: #17448A;
  --el-badge-progress-bg: #DDD3FF; --el-badge-progress-fg: #40289A;
  --el-badge-partial-bg: #FFE2CF;  --el-badge-partial-fg: #7E3505;
  --el-badge-approved-bg: #B9E8D2; --el-badge-approved-fg: #0B553C;
  --el-badge-final-bg: #102F42;    --el-badge-final-fg: #FFFFFF;
  /* Q-39 (2026-10-07): danger = rejected, QC failed; warning = missing, accepted with remarks */
  --el-badge-danger-bg: #B42318;   --el-badge-danger-fg: #FFFFFF;
  --el-badge-warning-bg: #F6C452;  --el-badge-warning-fg: #4A2E00;
  /* ANAR design-system layer (2026-10-08, docs/design-proposals/anar-ecrane-2026-10-08 §1.1) */
  --el-row-selected: #E6F0F5;      /* selected table row (pale ocean tint) */
  --el-step-halo: #CBE1EC;         /* halo of the current timeline step, focus halo of grid cells */
  --el-ok: #0B553C;                /* ECA-RO "registered" (= badge-approved-fg) */
  --el-shadow-float: 0 18px 48px rgb(16 47 66 / 18%);   /* modals, menus: layers that float */
  --el-note-info-bg: #EEF5F9;      --el-note-info-border: #CFE0EA;
  --el-note-warn-bg: #FFF6DE;      --el-note-warn-border: #F0D58A;   --el-note-warn-fg: #4A2E00;
  --el-note-danger-border: #F2C4BF; --el-note-danger-fg: #7A1A12;   /* ground: --el-danger-bg */
  /* AI-agent proposals: a plum violet ~41 degrees away from the progress badge, so the two never read alike */
  --el-agent-bg: #FBF2FC;          --el-agent-border: #DDB6E3;       --el-agent-fg: #7A1786;
  --el-warn-edge: #B07A00;         /* "accepted with remarks" timeline dot, overlapping plan card */

  /* Bootstrap 5.3 mapping */
  --bs-body-font-family: var(--el-font);
  --bs-font-monospace: var(--el-mono);
  --bs-body-bg: var(--el-ground);
  --bs-body-color: var(--el-text);
  --bs-body-color-rgb: 21, 50, 70;
  --bs-heading-color: var(--el-heading);
  --bs-emphasis-color: var(--el-heading);
  --bs-emphasis-color-rgb: 22, 79, 108;
  --bs-secondary-color: var(--el-muted);
  --bs-border-color: var(--el-border);
  --bs-border-radius: var(--el-radius);
  --bs-border-radius-lg: var(--el-radius-lg);
  --bs-link-color: var(--el-link);
  --bs-link-color-rgb: 23, 98, 134;
  --bs-link-hover-color: var(--el-link-hover);
  --bs-link-hover-color-rgb: 18, 80, 109;
  --bs-tertiary-bg: var(--el-border-soft);
  /* Bootstrap's semantic colours (.text-danger, .text-secondary, .bg-*): theme tokens, readable on the paper ground */
  --bs-danger: var(--el-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-secondary-rgb: 90, 110, 126;
  /* .alert-danger, .text-danger-emphasis, .bg-danger-subtle (Bootstrap 5.3 subtle/emphasis variables) */
  --bs-danger-text-emphasis: var(--el-danger);
  --bs-danger-bg-subtle: var(--el-danger-bg);
  --bs-danger-border-subtle: var(--el-danger-border);
  --bs-form-invalid-color: var(--el-danger);
  --bs-form-invalid-border-color: var(--el-danger);
}

/* hover of the accent: 18 % towards the rail, so it also follows a client accent */
:root { --el-accent-hover: color-mix(in srgb, var(--el-accent) 82%, var(--el-rail)); }
/* the EasyMedical mark: three rounded bars (logo of the site), used on the rail and the login */
.el-mark-bar1 { fill: var(--el-brand-1); }
.el-mark-bar2 { fill: var(--el-brand-2); }
.el-mark-bar3 { fill: var(--el-brand-3); }
body { font-family: var(--el-font); background-color: var(--el-ground) !important; color: var(--el-text); }
code, kbd, pre, .el-mono { font-family: var(--el-mono); }

.btn-primary {
  --bs-btn-bg: var(--el-accent); --bs-btn-border-color: var(--el-accent); --bs-btn-color: var(--el-on-accent);
  --bs-btn-hover-bg: var(--el-accent-hover); --bs-btn-hover-border-color: var(--el-accent-hover); --bs-btn-hover-color: var(--el-on-accent);
  --bs-btn-active-bg: var(--el-accent-hover); --bs-btn-active-border-color: var(--el-accent-hover); --bs-btn-active-color: var(--el-on-accent);
  --bs-btn-disabled-bg: var(--el-border); --bs-btn-disabled-border-color: var(--el-border); --bs-btn-disabled-color: var(--el-muted);
  font-weight: 700;
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: var(--el-surface); --bs-btn-color: var(--el-text); --bs-btn-border-color: var(--el-border);
  --bs-btn-hover-bg: var(--el-border-soft); --bs-btn-hover-color: var(--el-text); --bs-btn-hover-border-color: var(--el-border);
}
.btn-danger { --bs-btn-bg: var(--el-danger); --bs-btn-border-color: var(--el-danger); --bs-btn-color: var(--el-surface);
  --bs-btn-hover-bg: var(--el-danger-hover); --bs-btn-hover-border-color: var(--el-danger-hover); --bs-btn-hover-color: var(--el-surface);
  --bs-btn-active-bg: var(--el-danger-hover); --bs-btn-active-border-color: var(--el-danger-hover); --bs-btn-active-color: var(--el-surface);
  --bs-btn-disabled-bg: var(--el-border); --bs-btn-disabled-border-color: var(--el-border); --bs-btn-disabled-color: var(--el-muted); }
.btn-outline-danger { --bs-btn-color: var(--el-danger); --bs-btn-border-color: var(--el-danger); --bs-btn-hover-bg: var(--el-danger);
  --bs-btn-hover-border-color: var(--el-danger); --bs-btn-hover-color: var(--el-surface); }
.text-bg-secondary { color: var(--el-surface) !important; background-color: var(--el-muted) !important; }
.btn { min-height: 36px; border-radius: var(--el-radius); }

.el-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.el-badge--neutral { background: var(--el-badge-neutral-bg); color: var(--el-badge-neutral-fg); }
.el-badge--pending { background: var(--el-badge-pending-bg); color: var(--el-badge-pending-fg); }
.el-badge--step { background: var(--el-badge-step-bg); color: var(--el-badge-step-fg); }
.el-badge--progress { background: var(--el-badge-progress-bg); color: var(--el-badge-progress-fg); }
.el-badge--partial { background: var(--el-badge-partial-bg); color: var(--el-badge-partial-fg); }
.el-badge--approved { background: var(--el-badge-approved-bg); color: var(--el-badge-approved-fg); }
.el-badge--final { background: var(--el-badge-final-bg); color: var(--el-badge-final-fg); }
.el-badge--danger { background: var(--el-badge-danger-bg); color: var(--el-badge-danger-fg); }
.el-badge--warning { background: var(--el-badge-warning-bg); color: var(--el-badge-warning-fg); }
/* every status badge carries an icon before its label (Q-39: never colour alone); the icon is aria-hidden */
.el-badge > .fa-solid { margin-right: 4px; font-size: 11px; }