:root {
  /* Color system */
  --erms-primary: #0b4f43;
  --erms-primary-dark: #07352e;
  --erms-accent: #12705f;
  --erms-bg: #f3f5f4;
  --erms-surface: #f8faf9;
  --erms-card: #ffffff;
  --erms-text: #1f2a27;
  --erms-muted: #5f706b;
  --erms-border: #d5e0dc;
  --erms-critical: #d64545;
  --erms-high: #e67a2e;
  --erms-medium: #c9a227;
  --erms-low: #2f9e6b;
  --erms-radius: 10px;
  --erms-shadow: 0 1px 2px rgba(16, 40, 35, 0.04), 0 8px 20px rgba(16, 40, 35, 0.05);

  /* Typography scale (Arabic-first, readable hierarchy) */
  --erms-font: "Cairo", Tahoma, "Segoe UI", sans-serif;
  --erms-fs-xs: 0.75rem;    /* 12px — labels / meta */
  --erms-fs-sm: 0.8125rem;  /* 13px — helper / muted */
  --erms-fs: 0.9375rem;     /* 15px — body / inputs / table */
  --erms-fs-md: 0.875rem;   /* 14px — nav / buttons */
  --erms-fs-lg: 1rem;       /* 16px — card titles */
  --erms-fs-xl: 1.25rem;    /* 20px — page title */
  --erms-fs-2xl: 1.5rem;    /* 24px — KPI numbers */
  --erms-lh: 1.65;
  --erms-lh-tight: 1.35;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* —— Custom smooth scrollbars (site-wide) —— */
.erms-shell,
.erms-shell *,
.erms-login-page,
.erms-login-page *,
.erms-modal-backdrop,
.erms-modal-backdrop *,
.erms-select__panel--portal,
html:has(body.erms-dossier),
body.erms-dossier,
body.erms-dossier * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--erms-primary) 42%, #9aabb0) transparent;
}

.erms-shell::-webkit-scrollbar,
.erms-shell *::-webkit-scrollbar,
.erms-login-page::-webkit-scrollbar,
.erms-login-page *::-webkit-scrollbar,
.erms-modal-backdrop::-webkit-scrollbar,
.erms-modal-backdrop *::-webkit-scrollbar,
.erms-select__panel--portal::-webkit-scrollbar,
html:has(body.erms-dossier)::-webkit-scrollbar,
body.erms-dossier::-webkit-scrollbar,
body.erms-dossier *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.erms-shell::-webkit-scrollbar-track,
.erms-shell *::-webkit-scrollbar-track,
.erms-login-page::-webkit-scrollbar-track,
.erms-login-page *::-webkit-scrollbar-track,
.erms-modal-backdrop::-webkit-scrollbar-track,
.erms-modal-backdrop *::-webkit-scrollbar-track,
.erms-select__panel--portal::-webkit-scrollbar-track,
html:has(body.erms-dossier)::-webkit-scrollbar-track,
body.erms-dossier::-webkit-scrollbar-track,
body.erms-dossier *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin: 2px;
}

.erms-shell::-webkit-scrollbar-thumb,
.erms-shell *::-webkit-scrollbar-thumb,
.erms-login-page::-webkit-scrollbar-thumb,
.erms-login-page *::-webkit-scrollbar-thumb,
.erms-modal-backdrop::-webkit-scrollbar-thumb,
.erms-modal-backdrop *::-webkit-scrollbar-thumb,
.erms-select__panel--portal::-webkit-scrollbar-thumb,
html:has(body.erms-dossier)::-webkit-scrollbar-thumb,
body.erms-dossier::-webkit-scrollbar-thumb,
body.erms-dossier *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--erms-primary) 38%, #a8b8b2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}

.erms-shell::-webkit-scrollbar-thumb:hover,
.erms-shell *::-webkit-scrollbar-thumb:hover,
.erms-login-page::-webkit-scrollbar-thumb:hover,
.erms-login-page *::-webkit-scrollbar-thumb:hover,
.erms-modal-backdrop::-webkit-scrollbar-thumb:hover,
.erms-modal-backdrop *::-webkit-scrollbar-thumb:hover,
.erms-select__panel--portal::-webkit-scrollbar-thumb:hover,
html:has(body.erms-dossier)::-webkit-scrollbar-thumb:hover,
body.erms-dossier::-webkit-scrollbar-thumb:hover,
body.erms-dossier *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--erms-primary) 62%, #7a8f88);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.erms-shell::-webkit-scrollbar-corner,
.erms-shell *::-webkit-scrollbar-corner,
.erms-modal-backdrop *::-webkit-scrollbar-corner,
html:has(body.erms-dossier)::-webkit-scrollbar-corner,
body.erms-dossier::-webkit-scrollbar-corner {
  background: transparent;
}

.erms-modal__body,
.erms-select__list,
.erms-page-tabs__scroller,
.erms-notify__panel,
.erms-main {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

html,
body,
.erms-body,
.erms-shell,
.erms-login-page {
  margin: 0;
  padding: 0;
  background: var(--erms-bg);
  color: var(--erms-text);
  font-family: var(--erms-font);
  font-size: var(--erms-fs);
  font-weight: 400;
  line-height: var(--erms-lh);
}

/* Force Cairo against theme leftovers inside the portal */
.erms-shell,
.erms-shell *,
.erms-login-page,
.erms-login-page *,
.erms-body,
.erms-body * {
  font-family: var(--erms-font) !important;
}

a {
  color: var(--erms-primary);
  text-decoration: none !important;
}
a:hover,
a:focus {
  color: var(--erms-primary-dark, #0b5c4d);
  text-decoration: none !important;
}

.erms-shell a,
.erms-shell a:hover,
.erms-shell a:focus,
.erms-shell a:active,
.erms-shell a:visited,
.erms-login-page a,
.erms-login-page a:hover,
.erms-login-page a:active,
.erms-login-page a:visited {
  text-decoration: none !important;
}

h1, h2, h3, h4 {
  margin: 0 0 0.55rem;
  font-weight: 700;
  line-height: var(--erms-lh-tight);
  color: var(--erms-text);
}

h1 { font-size: var(--erms-fs-xl); }
h2 { font-size: 1.125rem; } /* 18px */
h3 { font-size: var(--erms-fs-lg); }
h4 { font-size: var(--erms-fs-md); }

p { margin: 0 0 0.7rem; }

.erms-app,
.erms-shell {
  min-height: 100vh;
}

.erms-muted {
  color: var(--erms-muted);
  font-size: var(--erms-fs-sm);
  line-height: 1.55;
}

.erms-hidden { display: none !important; }

small { font-size: var(--erms-fs-xs); }
code { font-size: 0.85em; }