/* MoHESR / IQ LEARN branding for Metabase.
   Served as an external sheet: Metabase's CSP allows style-src 'self' but blocks
   un-nonced inline <style>. */

/* ==================================================================
   MOHESR theme typography  (theme.mohesr.com #typography / #arabic)
   ------------------------------------------------------------------
   --font-sans "Poppins", --font-arabic "Tajawal", --font-mono
   "JetBrains Mono". Metabase's CSP is `font-src 'self' data:`, so a
   Google Fonts <link> is blocked outright. Two same-origin sources:

     Poppins  400/700/900 already ship in the jar and are served by
              Metabase at /app/fonts/Poppins/*.woff2. The jar has no
              500/600, and synthesised medium/semibold render heavy on
              Poppins, so those two weights are self-hosted under /brand/
              (latin + latin-ext; devanagari is dropped - this UI is
              English and Arabic, and Arabic is Tajawal's job).
     Tajawal  not bundled, so it is self-hosted under /brand/ from
              nginx's `location /brand/` alias. Weights 400/500/700,
              arabic + latin subsets, ~57 KB total.

   Both are same-origin and satisfy the CSP without relaxing it.
   ================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/app/fonts/Poppins/Poppins-Regular.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/app/fonts/Poppins/Poppins-Bold.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;
  src:url("/app/fonts/Poppins/Poppins-Black.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/brand/Poppins-500-latin-ext.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:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/brand/Poppins-500-latin.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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/brand/Poppins-600-latin-ext.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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/brand/Poppins-600-latin.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:"Tajawal";font-style:normal;font-weight:400;font-display:swap;
  src:url("/brand/Tajawal-400-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;
  src:url("/brand/Tajawal-400-latin.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:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url("/brand/Tajawal-500-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url("/brand/Tajawal-500-latin.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:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url("/brand/Tajawal-700-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url("/brand/Tajawal-700-latin.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;}

/* Inter and JetBrains Mono (guide #typography / #arabic), added 2026-09-12.
   Google's variable builds, one file each covering weights 400-600, latin
   subset only: Inter is the Latin fallback inside Arabic copy and JetBrains
   Mono is for numerals and code, so neither ever has to set Arabic. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/brand/Inter-var-latin.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:400 600;font-display:swap;
  src:url("/brand/JetBrainsMono-var-latin.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;}
/* "Tajawal Body" is Tajawal's Arabic subset on its own. The guide sets Arabic
   body copy in Tajawal with Latin falling back to Inter ("Latin fallback in
   body text renders in Inter Regular for a consistent bilingual layout"); the
   plain "Tajawal" family above carries a Latin subset too, so used alone it
   would swallow the Latin. Headings keep plain Tajawal, as the guide says. */
@font-face{font-family:"Tajawal Body";font-style:normal;font-weight:400;font-display:swap;
  src:url("/brand/Tajawal-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal Body";font-style:normal;font-weight:500;font-display:swap;
  src:url("/brand/Tajawal-500-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Tajawal Body";font-style:normal;font-weight:700;font-display:swap;
  src:url("/brand/Tajawal-700-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}

/* Metabase paints type from these tokens, so moving them is durable. */
:root{
  --mb-default-font-family: "Poppins","Inter","Helvetica Neue",Arial,sans-serif !important;
  --mb-default-monospace-font-family: "JetBrains Mono","Roboto Mono",ui-monospace,monospace !important;
}
html[dir="rtl"]{
  --mb-default-font-family: "Tajawal Body","Inter","Tajawal",sans-serif !important;
}
/* Arabic headings: plain Tajawal, Latin subset included (guide #arabic,
   "Tajawal for headings; Tajawal Regular / Inter Regular for body"). */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] [data-testid="dashboard-name-heading"],
html[dir="rtl"] [data-testid="saved-question-header-title"],
html[dir="rtl"] [data-testid="legend-caption-title"],
html[dir="rtl"] .mb-mantine-Modal-title {
  font-family: "Tajawal", "Inter", sans-serif !important;
}

/* ---- nav bar: ministry emblem in place of Metabase's dot-grid glyph ---- */
svg[data-testid="main-logo"] {
  background: url("/brand/logo.png") center / contain no-repeat !important;
  width: 34px !important;
}
svg[data-testid="main-logo"] path {
  display: none !important;
}

/* ---- login page header (built by brand.js) ---- */
.mohesr-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.mohesr-ministry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.mohesr-ministry span {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #0a0a0b;
  text-align: center;
}

.mohesr-ministry img {
  height: 44px !important;
  width: auto !important;
  flex: none;
}

/* The wordmark is ~1626x370 (4.4:1), so height is the useful control here -
   width alone let it render at natural size. */
.mohesr-iqlearn {
  width: auto !important;
  max-width: 70% !important;
  height: 52px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.mohesr-rule {
  width: 100%;
  height: 1px;
  background: #e8eaed;
  margin: 4px 0 2px;
}

/* ==================================================================
   Arabic / RTL
   ------------------------------------------------------------------
   Metabase 0.63 ships no RTL support at all - the bundle never sets
   documentElement.dir, there is no Mantine DirectionProvider, and the app
   stylesheets carry no [dir=rtl] rules. brand.js sets dir="rtl" on <html>
   when the user's locale is Arabic; everything below is what that needs to
   actually look right.

   Note on the dashboard grid: react-grid-layout runs with useCSSTransforms,
   so tiles are placed with transform: translate() and do NOT mirror. That is
   deliberate - the dashboards were laid out on purpose and mirroring the tile
   order would scramble the reading order the authors intended. Text, tables,
   headers and controls inside each tile all flip normally.
   ================================================================== */

/* Neither Lato (Metabase's default) nor Poppins has Arabic coverage, so
   without help Arabic falls back to whatever the OS picks and the line height
   goes ragged. The guideline names Tajawal, which is now self-hosted under
   /brand/ (see the typography block at the top of this file) - the earlier
   "no webfont, system faces only" decision was reversed on 2026-09-07. The
   system faces stay behind it as the fallback chain. */
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: "Tajawal Body", "Inter", "Tajawal", "Segoe UI", "Noto Naskh Arabic",
               "Noto Sans Arabic", "Dubai", "Tahoma", "Arial", sans-serif;
}

/* Arabic needs a little more vertical room than Latin at the same px size. */
html[dir="rtl"] body {
  line-height: 1.6;
}

/* Tables: headers and cells read from the right.

   Numeric alignment in this build is applied inline by emotion, not through a
   stable class, so there is nothing to override per column. unicode-bidi:
   plaintext is the better tool anyway: each cell takes its direction from its
   own first strong character, so Arabic names read RTL while "25%", "2026-2027"
   and "2026-08-09 14:20:01" stay LTR and keep their sign and separator order.
   Without it, "25%" renders as "%25" and a year range reverses. */
html[dir="rtl"] table th,
html[dir="rtl"] table td,
html[dir="rtl"] [data-testid="cell-data"] {
  text-align: right;
  unicode-bidi: plaintext;
}

/* Chart text is SVG and never reflows, so isolate it outright. */
html[dir="rtl"] .ScalarValue,
html[dir="rtl"] svg text,
html[dir="rtl"] svg tspan {
  unicode-bidi: plaintext;
}

/* Markdown text/heading cards. */
html[dir="rtl"] .text-card-markdown {
  text-align: right;
  direction: rtl;
}

/* Filter widgets across the top of a dashboard. */
html[dir="rtl"] [data-testid="dashboard-parameters-widget-container"] {
  direction: rtl;
}
html[dir="rtl"] [data-testid="parameter-value-widget"] input,
html[dir="rtl"] [data-testid="parameter-widget"] input {
  text-align: right;
}

/* Popovers, dropdowns and tooltips are positioned by JS but their contents are
   plain flow, so they only need the text direction. */
html[dir="rtl"] [data-testid="popover"],
html[dir="rtl"] [role="tooltip"],
html[dir="rtl"] [role="menu"],
html[dir="rtl"] [role="listbox"] {
  direction: rtl;
  text-align: right;
}

/* Legends and chart axis labels. */
html[dir="rtl"] [data-testid="legend-caption"],
html[dir="rtl"] .LegendItem {
  direction: rtl;
}

/* Left-hand nav becomes the right-hand nav. It is a flex row, so dir alone
   reorders it; the border side has to be moved by hand. */
html[dir="rtl"] [data-testid="main-navbar-root"] {
  border-right: none;
  border-left: 1px solid var(--mb-color-border, #e8eaed);
}

/* Breadcrumb separators point the other way. */
html[dir="rtl"] [data-testid="breadcrumb"] svg {
  transform: scaleX(-1);
}

/* ---- language switcher (built by brand.js) ---- */
.mohesr-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  margin: 0 8px;
  border: 1px solid #d5dbe3;
  border-radius: 16px;
  background: #fff;
  color: #0a0a0b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}

.mohesr-lang:hover {
  background: #f2f5f9;
  border-color: #b9c3cf;
}

.mohesr-lang[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.mohesr-lang svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Bulk toggle injected into the multi-select filter dropdowns (brand.js).
   Metabase OSS has no "select all", and long lists (136 universities) are
   unusable without one. */
.mohesr-bulk {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mohesr-bulk button {
  flex: 1;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #1e89b7;
  background: transparent;
  border: 1px solid rgba(30, 137, 183, .35);
  border-radius: 5px;
  cursor: pointer;
}
.mohesr-bulk button:hover {
  color: #fff;
  background: #1e89b7;
  border-color: #1e89b7;
}

/* ==================================================================
   MOHESR theme palette
   ------------------------------------------------------------------
   Metabase paints itself from --mb-color-* custom properties, so setting
   them is far more durable than chasing hashed class names. Two things
   about 0.63.5 that are easy to get wrong:

   1. The names are NOT the ones in Metabase's older docs. There is no
      --mb-color-brand / -border / -bg-light here; verified against the
      running bundle (app-main.*.css) the live names are
      --mb-color-core-brand (302 uses), --mb-color-border-neutral (292),
      --mb-color-text-primary (187), and so on.

   2. Nothing defines them in the stylesheet - the theme provider injects
      them onto :root at runtime, after this sheet has loaded. At equal
      specificity the later rule wins, so these need !important to hold.
      Without it the whole block is a silent no-op.

   Reaches the embedded dashboards too: /embed/dashboard/... has no
   location of its own, so it falls through to `location / {}` and picks
   up this sheet from the same sub_filter as the rest of the app.

   Values are the MOHESR theme guideline (theme.mohesr.com #colors):
     Primary   #1E89B7  Actions, links, focus
     Secondary #2D4A6A  Headers, depth, charts
     Tertiary  #9B1944  Accents, highlights
     Success   #16a34a   Warning #d97706   Danger #dc2626   Ink #0a0a0b
   Tertiary has no hook in Metabase's chrome - it lands only through chart
   SERIES colours, which are not reachable from CSS (see the note below).
   ================================================================== */
:root {
  /* identity - Primary #1E89B7 "Actions, links, focus" (theme.mohesr.com
     #colors). Drives buttons, links, active nav, selected rows, pills. */
  --mb-color-core-brand: #1e89b7 !important;
  --mb-color-core-brand-hover: #14608a !important;
  --mb-color-text-brand: #1e89b7 !important;
  --mb-color-text-brand-hover: #14608a !important;
  --mb-color-text-brand-strong: #14608a !important;
  --mb-color-text-brand-strong-hover: #14556f !important;
  --mb-color-border-brand: #1e89b7 !important;
  --mb-color-icon-brand: #1e89b7 !important;

  /* the guideline focuses with the same primary (ring-accent), so the ring
     and the control it belongs to now agree. */
  --mb-color-input-focus: #1e89b7 !important;

  /* Ink #0a0a0b and muted #6b7280, straight from the guideline. */
  --mb-color-text-primary: #0a0a0b !important;
  --mb-color-text-secondary: #6b7280 !important;
  --mb-color-border-neutral: #e8eaed !important;

  /* dashboard ground = --color-muted #f4f5f7. --mb-color-background is still
     deliberately left alone: it backs 439 rules including the cards, and
     tinting it turns every white card grey. */
  --mb-color-bg-dashboard: #f4f5f7 !important;
  --mb-color-bg-dashboard-card: #ffffff !important;
  --mb-color-cartesian-grid-line: #e8eaed !important;

  /* Semantic states - Success / Warning / Danger from the guideline. */
  --mb-color-feedback-positive: #16a34a !important;
  --mb-color-feedback-warning: #d97706 !important;
  --mb-color-feedback-negative: #dc2626 !important;
}

/* Metabase's own filter/summarize hues (purple/green) are left untouched:
   they are a semantic language users already read, not decoration.

   Chart SERIES colours are not reachable from here. In 0.63.5 accent0-7
   are JS values, never emitted as custom properties, and application
   colours are a paid white-label feature. The OSS route is per-question
   visualization settings, which the API scripts in this directory can
   already set - it is a card-by-card change, not a stylesheet one. */

/* ---------------------------------------------------------------------------
   Replace the Metabase attribution in embedded dashboards.
   Added 2026-08-23.

   Targeted by HREF, not by class. The live markup carries
   `class="dXTXK HmrjF V6GFZ x6jdk"` -- those are CSS-module hashes that
   Metabase regenerates on every build, so a class selector would silently stop
   matching after the next upgrade. The utm_campaign in the link is stable.

   !important throughout: Metabase 0.63.5 injects its own values at runtime and
   ignores overrides without it.
--------------------------------------------------------------------------- */
a[href*="utm_campaign=powered_by_metabase"] {
    pointer-events: none !important;   /* it is no longer a link anywhere */
    text-decoration: none !important;
    cursor: default !important;
    font-size: 0 !important;           /* collapses the "Powered by" text node */
    line-height: normal !important;
}

/* The <span>Powered by</span> and the wordmark <svg> */
a[href*="utm_campaign=powered_by_metabase"] > * {
    display: none !important;
}

a[href*="utm_campaign=powered_by_metabase"]::after {
    content: "By Ministry of Higher Education" !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #5a6072 !important;
    white-space: nowrap !important;
    letter-spacing: .2px;
}

/* Arabic embeds get the Arabic wording. The gateway now passes locale= to
   match the UI language, so this follows the language toggle. */
html[lang="ar"] a[href*="utm_campaign=powered_by_metabase"]::after,
[dir="rtl"] a[href*="utm_campaign=powered_by_metabase"]::after {
    content: "وزارة التعليم العالي والبحث العلمي" !important;
}

/* ===========================================================================
   Component colours
   Added 2026-08-23 as "kbeam identity", retargeted 2026-09-07 to the MOHESR
   theme guideline (theme.mohesr.com).

   HISTORY / TRADE-OFF worth knowing before touching this again: the maroon
   below used to be the identity colour, chosen to match the LMS theme
   `kbeam` on iomad1 so staff crossing between the two systems saw one
   product. The guideline reassigns maroon to Tertiary ("Accents,
   highlights") and makes #1E89B7 the Primary, so analytics and the LMS no
   longer match. That divergence is intentional but unresolved - realigning
   means moving kbeam onto the same guideline.

   Superseded values, kept only so a future reader can identify them on
   sight in a screenshot or a stale cache:

       navy    #283E56   navbar ground      -> now Secondary #2D4A6A
       maroon  #970747   identity, figures  -> now Primary   #1E89B7
       deep    #7a053a   gradient end/hover -> now           #14608A

   They came from theme/kbeam/style/moodle.css and navbar.mustache, NOT from
   that theme's stored brandcolor setting (#8B0000), which it does not use.

   Selectors here are data-testid only. The class names in this build are
   CSS-module hashes (dXTXK, HmrjF...) that Metabase regenerates every
   release; a class selector would silently stop matching after an upgrade.
   =========================================================================== */

/* ---- top bar --------------------------------------------------------------
   REVERTED 2026-08-23 15:3x. Setting `background` on [data-testid="app-bar"]
   did not paint: the visible bar surface is drawn by some other element, so
   the background stayed white while the companion rule turned every icon in
   the bar white. Result was white-on-white -- search box, menu, language
   button and avatar all invisible. The icon rule is only safe once the navy
   is proven to land, so both are out until then.
   -------------------------------------------------------------------------- */

/* ---- KPI figures: kbeam's stat-card number ------------------------------
   .stat-card .number is #970747 at 2.5em bold. Metabase's scalar is the same
   object on this dashboard -- 137 universities, 1,179 faculties -- so it takes
   the same colour. Size is left alone: Metabase already scales it to the card. */
[data-testid="scalar-value"] {
  /* The guideline's stat figures carry no colour class - they inherit Ink,
     bold, tabular-nums (text-3xl font-bold tracking-tight tabular-nums).

     DECIDED 2026-09-07, do not re-litigate: these stay Ink. They were maroon
     #970747 under the kbeam identity and the change is the most visible one
     on Ministry Overview, so the pull to "put the colour back" is strong.
     If the figures read flat, the fix is a navy #2D4A6A label above the
     figure or a coloured delta beside it - never a coloured figure. */
  color: #0a0a0b !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---- dashboard ground --------------------------------------------------- */
[data-testid="dashboard-header"] {
  border-bottom-color: #e8eaed !important;
}

/* ---- top bar: kbeam navy ---------------------------------------------------
   Verified in a real headless Chrome against the live DOM, 2026-08-23.

   <header data-testid="app-bar"> is transparent; its single child div carries
   background-color: var(--mb-color-background_page-primary) and covers the
   bar. Painting the header does nothing. The token is not the lever either --
   background_page-primary has 137 uses across cards and panels -- so the child
   element is the correct target.
   -------------------------------------------------------------------------- */
[data-testid="app-bar"] > div {
  background-color: #2d4a6a !important;
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}
[data-testid="app-bar"] {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}

/* Everything in the bar goes light -- including descendants. The collection
   breadcrumb sets its own rgba(7,23,34,.44) on a leaf <div>, so whitening only
   the anchor leaves it dark-on-navy; the universal descendant is deliberate. */
[data-testid="app-bar"],
[data-testid="app-bar"] * {
  color: #ffffff !important;
}

/* ...with one exception. The search control is a Mantine button that keeps its
   own WHITE ground, so the rule above turns its label and magnifier white on
   white -- the control looks like an empty box. Matched on data-variant rather
   than aria-label="Search", which is localized and would stop matching the
   moment the interface is switched to Arabic. */
[data-testid="app-bar"] button[data-variant="default"],
[data-testid="app-bar"] button[data-variant="default"] * {
  color: #0a0a0b !important;
}

/* The "+ New" button survived every --mb-color-core-brand override because it
   does not read that token: Mantine sets --button-bg inline on the element,
   at hsla(208,72%,60%) -- Metabase blue. Overriding the custom property is
   what actually moves it. Scoped to the bar and to filled buttons, which is
   language-independent; "+ New" is the only filled button up there. */
[data-testid="app-bar"] button[data-variant="filled"] {
  --button-bg: #1e89b7 !important;
  --button-hover: #14608a !important;
  background-color: #1e89b7 !important;
}
[data-testid="app-bar"] button[data-variant="filled"]:hover {
  background-color: #14608a !important;
}

/* The language button brand.js injects: kbeam's translucent pill. */
[data-testid="app-bar"] .mohesr-lang {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}
[data-testid="app-bar"] .mohesr-lang:hover {
  background: rgba(255, 255, 255, .22) !important;
}

/* ===========================================================================
   Components - theme.mohesr.com #typography #buttons #fields #table #alerts
   Added 2026-09-12. The guide is Tailwind, so its classes translate to:
     rounded-md 6px   rounded-lg 8px   rounded-xl 12px
     h-8 32px   h-10 40px   h-11 44px   text-xs 12px   text-sm 14px
     border #e8eaed   muted #f4f5f7   muted-foreground #6b7280
     focus  = border Primary + 2px ring at 15%   (focus:ring-accent/15)
     error  = border Danger  + 2px ring red-100  (#fee2e2)
     hover:opacity-90 on Primary over white = #3595be
   Selectors are data-testid and Mantine's stable "mb-mantine-<Component>-<part>"
   classes (the configured classNamesPrefix - not the hashed module classes,
   which change every release). Mantine paints buttons and inputs from
   per-element custom properties (--button-bg, --input-bd ...) that Metabase
   sets INLINE, so overriding the property with !important is the only thing
   that moves them; a plain background-color loses to the inline var.
   Not covered because Metabase has no such component: the wizard, and pill
   status badges (table values are plain text here).
   =========================================================================== */

/* ---- type scale ---------------------------------------------------------- */
[data-testid="dashboard-name-heading"],
[data-testid="saved-question-header-title"] {
  font-weight: 700 !important;          /* Heading / 700, tracking-tight */
  letter-spacing: -0.025em;
}
[data-testid="legend-caption-title"] {
  font-weight: 600 !important;          /* Subheading / 600 */
}
code, kbd, pre, samp, .mb-mantine-Code-root {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace !important;
}

/* ---- buttons ------------------------------------------------------------- */
.mb-mantine-Button-root {
  --button-radius: 6px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
/* Primary. Matched on the inline brand token rather than [data-variant="filled"]
   alone: destructive buttons are "filled" too, in the error colour, and must
   stay red. */
.mb-mantine-Button-root[data-variant="filled"][style*="core-brand-filled"] {
  --button-bg: #1e89b7 !important;
  --button-hover: #3595be !important;
  --button-color: #ffffff !important;
  --button-bd: 1px solid transparent !important;
}
/* Outline */
.mb-mantine-Button-root[data-variant="default"],
.mb-mantine-Button-root[data-variant="outline"] {
  --button-bg: #ffffff !important;
  --button-hover: #f4f5f7 !important;
  --button-color: #0a0a0b !important;
  --button-bd: 1px solid #e8eaed !important;
  font-weight: 500 !important;
}
/* Ghost */
.mb-mantine-Button-root[data-variant="subtle"] {
  --button-bg: transparent !important;
  --button-hover: #f4f5f7 !important;
  --button-color: #1e89b7 !important;
  font-weight: 500 !important;
}
/* Disabled keeps the Primary at 50% (guide: opacity-50 cursor-not-allowed),
   instead of Metabase's grey. */
.mb-mantine-Button-root[data-variant="filled"]:disabled,
.mb-mantine-Button-root[data-variant="filled"][data-disabled="true"] {
  background-color: #1e89b7 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  opacity: .5 !important;
  cursor: not-allowed !important;
}
.mb-mantine-Button-root:focus-visible,
.mb-mantine-ActionIcon-root:focus-visible {
  outline: 2px solid #1e89b7 !important;
  outline-offset: 2px !important;
}
/* The Select all / Clear all pair brand.js adds to filter dropdowns = Small. */
.mohesr-bulk button {
  border-radius: 6px;
  font-weight: 600;
}

/* ---- text fields --------------------------------------------------------- */
.mb-mantine-Input-input,
[data-testid="list-field"] {
  --input-bd: #e8eaed !important;
  --input-bd-focus: #1e89b7 !important;
  --input-radius: 6px !important;
  --input-bg: #ffffff !important;
  --input-color: #0a0a0b !important;
  --input-placeholder-color: #6b7280 !important;
  border: 1px solid #e8eaed !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: #0a0a0b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input.mb-mantine-Input-input,
input[data-testid="list-field"] {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
}
textarea.mb-mantine-Input-input {
  padding: 10px 12px !important;
}
.mb-mantine-Input-input::placeholder,
[data-testid="list-field"]::placeholder {
  color: #6b7280 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.mb-mantine-Input-input:focus,
.mb-mantine-Input-input:focus-within,
[data-testid="list-field"]:focus {
  outline: none !important;
  border-color: #1e89b7 !important;
  box-shadow: 0 0 0 2px rgba(30, 137, 183, .15) !important;
}
.mb-mantine-Input-input[aria-invalid="true"],
.mb-mantine-Input-input[data-error="true"],
.mb-mantine-Input-input[data-error] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px #fee2e2 !important;
}
.mb-mantine-Input-input:disabled,
.mb-mantine-Input-input[data-disabled="true"] {
  background-color: #f4f5f7 !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}
.mb-mantine-InputWrapper-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0a0a0b !important;
  margin-bottom: 6px !important;
}
.mb-mantine-InputWrapper-description {
  font-size: 12px !important;
  color: #6b7280 !important;
}
.mb-mantine-InputWrapper-error {
  font-size: 12px !important;
  color: #dc2626 !important;
  margin-top: 4px !important;
}
/* Dashboard filter chips are the compact form of the Select: same border,
   radius and focus ring; the 32px height is kept so the filter bar stays one
   row. The selected value stays Primary - it is the "a filter is on" signal. */
[data-testid="parameter-value-widget-target"] {
  border: 1px solid #e8eaed !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  font-weight: 500 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-testid="parameter-value-widget-target"]:hover {
  border-color: #b9c3cf !important;
}
[data-testid="parameter-value-widget-target"]:focus-visible,
[data-testid="parameter-value-widget-target"][aria-expanded="true"] {
  outline: none !important;
  border-color: #1e89b7 !important;
  box-shadow: 0 0 0 2px rgba(30, 137, 183, .15) !important;
}
.mb-mantine-Checkbox-input {
  --checkbox-radius: 4px !important;
  --checkbox-color: #1e89b7 !important;
}

/* ---- data table ---------------------------------------------------------- */
/* Guide: zebra-free rows, mono for IDs and numbers, header = 11px mono
   uppercase tracking-widest muted. */
[data-testid="table-header"] {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e8eaed !important;
}
[data-testid="header-cell"] [data-testid="cell-data"] {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: #6b7280 !important;
  background-color: transparent !important;
}
[data-testid="header-cell"]:hover [data-testid="cell-data"] {
  color: #0a0a0b !important;
  background-color: #f4f5f7 !important;
}
/* Arabic column names: no uppercase, no tracking, and the heading face.
   brand.js tags these by script, so an English column on an Arabic dashboard
   keeps the mono treatment and an Arabic one never gets letter-spacing, which
   would break the cursive join. */
[data-testid="header-cell"] [data-testid="cell-data"][data-mohesr-ar] {
  font-family: "Tajawal", "Inter", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
[data-testid="body-cell-container"] {
  border-bottom: 1px solid #e8eaed !important;
  --cell-hover-bg-color: rgba(244, 245, 247, .7) !important;   /* hover:bg-muted/60 */
}
[data-testid="table-body"] [data-testid="cell-data"] {
  font-weight: 400 !important;
  font-size: 13px !important;
}
[data-testid="table-body"] .test-TableInteractive-cellWrapper--firstColumn [data-testid="cell-data"] {
  font-weight: 600 !important;          /* the row's name, font-semibold */
}
/* Numerals. No CSS selector can read a cell's text, so brand.js tags every
   numeric cell with data-mohesr-num and this rule does the rest. */
[data-testid="table-body"] [data-testid="cell-data"][data-mohesr-num] {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
[data-testid="table-footer"] {
  border-top: 1px solid #e8eaed !important;
  color: #6b7280;
}

/* ---- alerts & popups ----------------------------------------------------- */
/* Guide dialog: rounded-xl, border, shadow-2xl, p-6; title font-display
   text-lg bold; body text-sm muted; overlay bg-foreground/40 + blur. */
.mb-mantine-Modal-overlay,
[data-testid="modal-overlay"] {
  background-color: rgba(10, 10, 11, .4) !important;
  backdrop-filter: blur(4px);
}
.mb-mantine-Modal-content {
  border-radius: 12px !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
}
.mb-mantine-Modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: #0a0a0b !important;
}
.mb-mantine-Modal-body {
  font-size: 14px !important;
}
.mb-mantine-Modal-close {
  border-radius: 6px !important;
  color: #6b7280 !important;
}
.mb-mantine-Modal-close:hover {
  background-color: #f4f5f7 !important;
}
.mb-mantine-Popover-dropdown,
.mb-mantine-Menu-dropdown {
  border-radius: 8px !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08) !important;
}
.mb-mantine-Menu-item {
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.mb-mantine-Menu-item:hover,
.mb-mantine-Menu-item[data-hovered] {
  background-color: #f4f5f7 !important;
}
/* Toasts take Secondary navy ("headers, depth"), rounded-lg. */
[data-testid="toast-undo"] {
  background-color: #2d4a6a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18) !important;
}