/**
 * MEYAR AI visual refinement — Modern Government & Enterprise.
 * This file intentionally changes presentation only. Existing content,
 * data bindings, role rules and placeholder behaviour remain untouched.
 */

:root {
  /* Official Meayar blue, supported by darker enterprise chrome shades. */
  --primary: #244ea2;
  --primary-soft: #edf1fb;
  --chrome: #1c4578;
  --chrome-2: #12345c;
  --chrome-hover: rgba(255, 255, 255, 0.11);
  --canvas: #f3f6f9;
  --surface: #f5f8fb;
  --line: #dbe4ec;
  --ink: #14263a;
  /* SD-9: harmonized with tokens.css --muted (WCAG AA on every surface). */
  --muted: #5A6472;
  --radius: 14px;
  --radius-md: 10px;
  --shadow: 0 1px 2px rgba(18, 52, 86, 0.04), 0 8px 24px rgba(18, 52, 86, 0.07);
  --shadow-lg: 0 22px 60px rgba(7, 35, 64, 0.16);
  --landing-navy: #102f55;
  --landing-navy-2: #244e8f;
}

body {
  letter-spacing: -0.005em;
}

/* Application shell */
.shell {
  background: var(--chrome);
}

.sidebar {
  padding: 18px 14px 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(91, 164, 215, 0.18), transparent 28%),
    linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand lockup: horizontal white logo (same mark as the landing topbar,
   recolored white for the navy frame). Sized by width — the artwork is wide. */
.brand {
  position: relative;
  min-height: 100px;
  justify-content: center;
  margin: 0 0 4px;
  padding: 8px 12px 10px;
  border-radius: 0;
  direction: ltr;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  overflow: visible;
}

.brand::before {
  content: none;
}

.brand img {
  width: 228px;
  max-width: 100%;
  height: auto;
  max-height: none;
  flex: none;
  object-fit: contain;
}

/* Symmetric stacked artwork: no optical offset needed in either direction. */
html[dir="ltr"] .brand img {
  transform: none;
}

.brand::after {
  content: none;
}

.nav {
  gap: 5px;
  margin-top: 0;
  padding-top: 12px;
}

.nav-link {
  min-height: 47px;
  padding: 11px 14px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  font-weight: 600;
}

.nav-link svg {
  width: 19px;
  height: 19px;
  opacity: 0.9;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.09);
}

.nav-link.is-active {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(5, 30, 55, 0.14);
}

.nav-link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: #b7d1f3;
}

.sidebar-user {
  border-top-color: rgba(255, 255, 255, 0.13);
}

/* Unified chrome frame: sidebar and top bar share ONE continuous navy
   surface (the original C-direction treatment). No two-tone seam; the
   only curve is the content sheet's own rounded corner below. */
.topbar {
  min-height: 70px;
  padding: 13px 30px;
  background:
    url("../assets/decor/pattern-khatam.svg") 0 0 / 132px 132px,
    linear-gradient(180deg, var(--chrome) 0%, var(--chrome) 100%);
  box-shadow: none;
}

.page-title {
  font-size: 23px;
  letter-spacing: -0.015em;
}

.main {
  /* Navy behind the curved notch at the chrome junction. */
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
}

.content {
  gap: 22px;
  padding: 30px 34px 42px;
  /* Intentional comfort detail (keep): the single arc that eases the
     dark frame into the light sheet — the frame (sidebar + top bar) is
     one continuous navy surface behind this rounded corner. */
  border-start-start-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    radial-gradient(circle at 88% 2%, #dceaf5, transparent 30%),
    var(--canvas);
}

.card {
  border-color: rgba(184, 201, 216, 0.72);
  box-shadow: var(--shadow);
}

.stat-card,
.info-card,
.gap-card,
.citation-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card:hover,
.info-card:hover,
.gap-card:hover,
.citation-card:hover {
  transform: translateY(-2px);
  border-color: #bad3e6;
  box-shadow: 0 14px 34px rgba(18, 71, 112, 0.1);
}

.stat-value {
  color: #183f78;
}

/* Dashboard overview cards: compact, aligned and free of the large blank
   area caused by the marketing-page .stat-row rule later in components.css. */
.dashboard-page .content {
  gap: 18px;
  padding-block-start: 22px;
}

.dashboard-page .content > .card-sub {
  margin-block: 0 -2px;
}

.dashboard-page #stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-page #stat-grid .stat-card {
  min-height: 132px;
  justify-content: center;
  gap: 5px;
  padding: 16px 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
}

.dashboard-page #stat-grid .stat-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.dashboard-page #stat-grid .stat-ico {
  width: 34px;
  height: 34px;
}

.dashboard-page #stat-grid .stat-label {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.35;
}

.dashboard-page #stat-grid .stat-value {
  font-size: 30px;
  line-height: 1;
}

.dashboard-page #stat-grid .stat-delta {
  font-size: 13.5px;
  line-height: 1.35;
}

/* User summary cards use the same compact application-card treatment.
   This also isolates them from the later marketing-page .stat-row grid. */
.users-page .content {
  padding-block-start: 22px;
}

.users-page .content-admin > .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.users-page .content-admin > .stat-grid .stat-card {
  min-height: 112px;
  justify-content: center;
  padding: 15px 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
}

.users-page .content-admin > .stat-grid .stat-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.users-page .content-admin > .stat-grid .stat-ico {
  width: 34px;
  height: 34px;
}

.users-page .content-admin > .stat-grid .stat-value {
  font-size: 30px;
  line-height: 1;
}

.users-page .content-admin > .stat-grid .stat-label {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.3;
}

/* Gap headline stats: same compact application-card treatment as the
   dashboard/users grids, isolating them from the marketing .stat-row rule. */
#gap-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#gap-stats .stat-card {
  min-height: 112px;
  justify-content: center;
  padding: 15px 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
}

#gap-stats .stat-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 12px;
  margin: 0;
}

#gap-stats .stat-ico {
  width: 34px;
  height: 34px;
}

#gap-stats .stat-value {
  font-size: 30px;
  line-height: 1;
}

#gap-stats .stat-label {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.3;
}

.btn {
  min-height: 38px;
  border-radius: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #244ea2, #3768b2);
  border-color: #244ea2;
  box-shadow: 0 6px 14px rgba(36, 78, 162, 0.22);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d428d, #2e5b9f);
  border-color: #1d428d;
}

table.data thead {
  background: #244ea2;
}

table.data th {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.topbar .role-switch-label,
.topbar .role-switch-group .btn,
.topbar .btn-ghost {
  color: rgba(255, 255, 255, 0.92);
}

.topbar .role-switch-group .btn.is-active {
  color: #244ea2;
}

table.data tbody tr:hover {
  background: #f5f9fc;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: #3787c3;
  box-shadow: 0 0 0 3px rgba(55, 135, 195, 0.13);
}

.citation,
.citation-card {
  border-inline-start: 3px solid #2f80bc;
  background: #f7fbfe;
}

/* Public landing page */
.site-topbar {
  border-bottom-color: rgba(202, 216, 228, 0.82);
  box-shadow: 0 5px 18px rgba(17, 54, 85, 0.06);
}

.site-topbar-inner {
  height: 128px;
}

/* Client-supplied stacked lockup, displayed unmodified at a size that
   keeps the wordmark clearly legible in the navbar (B-3, client letter
   084305: "make the logo more bigger" — desktop ~112px). */
.site-logo {
  height: 112px;
}

@media (max-width: 700px) {
  /* B-3 superseded this former 64px step (the ≤900 block's 80px wins). */
}

/* Typographic nav in the award-site manner: larger bare links, wide
   spacing, and a brand-gradient underline that slides in on hover — no
   icons, no chip backgrounds. The underline reuses the shell's signature
   blue-to-violet gradient (same as .brand::after / .page-title::before). */
.site-nav {
  gap: 10px;
}

.site-nav a {
  position: relative;
  padding: 14px 8px;
  color: #243d56;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: color 0.15s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-end: 8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2f6dc6 0%, #7447b8 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

html[dir="rtl"] .site-nav a::after {
  transform-origin: right;
}

.site-nav a:hover {
  color: #244ea2;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-actions .btn {
  padding: 12px 18px;
  font-size: 15px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background:
    linear-gradient(112deg, rgba(7, 39, 67, 0.98), rgba(16, 71, 112, 0.94)),
    radial-gradient(circle at 90% 10%, #3189c5, transparent 36%);
}

.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  inset: -240px -120px auto auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255,255,255,0.025), 0 0 0 180px rgba(255,255,255,0.018);
}

.hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: 1.14fr 0.86fr;
  gap: 72px;
}

.hero-title {
  max-width: 760px;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.hero-sub {
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.75;
}

.hero-tagline-en {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero-tagline-ar {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

.hero-visual {
  position: relative;
  min-height: 330px;
  padding: 34px;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  box-shadow: 0 30px 70px rgba(2, 25, 45, 0.24);
  backdrop-filter: blur(14px);
}

.hero-visual::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.42);
}

.section {
  padding: 88px 0;
}

.section-head h2 {
  color: #183b5d;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.025em;
}

.info-card {
  padding: 30px 26px;
  border-radius: 14px;
}

.card-ico {
  color: #1c6ea9;
  background: #e8f2f9;
  border: 1px solid #cfe3f1;
}

.stat-num {
  color: #1769aa;
  background: none;
}

.demo-form {
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(18, 61, 96, 0.1);
}

.site-footer {
  background: #0a2947;
  padding: 0;
}

/* Footer redesign 2026-08-13: the old single-row footer (logo + one link
   row + centered rights) left a large empty navy field. Now a four-column
   "sitemap-lite" footer — brand, platform, company, contact — plus a slim
   bottom bar, per common B2B/SaaS footer patterns. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 54px 0 42px;
  align-items: start;
}

.site-footer .footer-brand img {
  height: 132px;
  width: auto;
}

.site-footer .footer-col {
  display: block;
}

.footer-col h3 {
  margin: 8px 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.5);
}

.footer-col a,
.footer-contact span {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.58);
  font-size: 14.5px;
}

/* ================================================================ */
/* Areej review batch (2026-08) — landing refinements.                */
/* D-1 hero workflow, D-2 lang switch, D-3 anchor offsets,           */
/* G-1 why grid, G-2 journey strip, G-4 stat note, G-5 legal links   */
/* and the legal.html shell. Presentation only, same palette.        */
/* ================================================================ */

/* D-2: explicit AR | EN switch. The active side is highlighted purely
   from the document direction (ar => rtl, en => ltr), so the existing
   toggle-lang handler drives it with no extra script. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-switch:hover {
  background: #f7f9fc;
  border-color: #c9d4e2;
}

.lang-switch .lang-sep {
  color: #c3cdd9;
  font-weight: 400;
}

.lang-switch .lang-opt {
  /* SD-9: #8a99ab measured 2.91:1 on white — below WCAG AA. */
  color: #5F6C7D;
  transition: color 0.15s ease;
}

html[dir="rtl"] .lang-switch .lang-opt:first-child,
html[dir="ltr"] .lang-switch .lang-opt:last-child {
  color: #244ea2;
}

/* G-7: Evidence-Backed AI as the headline differentiator in the hero. */
.hero-evidence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
}

.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[lang="ar"] .evidence-badge {
  letter-spacing: 0;
  text-transform: none;
}

.evidence-line {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.7;
}

/* D-1: simplified MEYAR AI workflow in the hero panel — numbered stage
   cards connected by chevron arrows. The AI Analysis stage carries the
   light accent previously used by the middle hero chip. */
.workflow-title {
  margin: 10px 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

html[lang="ar"] .workflow-title {
  letter-spacing: 0;
  text-transform: none;
}

.hero-workflow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wf-step {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
}

.wf-num {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  font-size: 13.5px;
  font-weight: 700;
}

.wf-label {
  font-size: 16px;
  font-weight: 600;
}

.wf-step-ai {
  background: rgba(255, 255, 255, 0.96);
  border-color: #ffffff;
  color: #1d3f66;
  box-shadow: 0 10px 26px rgba(4, 31, 54, 0.24);
}

.wf-step-ai .wf-num {
  border-color: rgba(29, 63, 102, 0.25);
  background: rgba(36, 78, 162, 0.1);
  color: #244ea2;
}

/* G-1: four-differentiator grid. */
/* Three cards since R-C05 removed the bilingual card (2026-09-07) —
   the grid matches the card count so no slot renders empty. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.why-grid .info-card {
  gap: 10px;
  padding: 26px 22px;
}

.why-grid .info-card h3 {
  font-size: 17.5px;
}

.why-grid .info-card p {
  font-size: 14.5px;
}

@media (max-width: 1000px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* G-2: compact regulatory-intelligence journey strip. */
.journey-strip {
  margin: 0;
  padding: 20px 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.journey-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dce6f2;
  background: #f4f8fc;
  font-weight: 600;
  font-size: 15px;
  color: #23405e;
}

.journey-step .num {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-ai);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* G-4: honest-framing footnote under the landing stats. */
.stat-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* G-5: institutional legal links row inside the footer bottom bar. */
/* Legal links spread edge-to-edge across the bar (owner feedback
   2026-09-07); the copyright line centers beneath them. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 22px;
}

.footer-bar > [dir="auto"] {
  width: 100%;
  text-align: center;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.footer-legal a:hover {
  color: #ffffff;
}

/* G-5: legal.html — restrained single-column policy shell reusing the
   landing section rhythm. */
.legal-container {
  max-width: 780px;
}

.legal-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.5vw, 36px);
  letter-spacing: -0.02em;
  color: #1b3e67;
}

.legal-intro {
  margin: 0 0 8px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
}

.legal-section {
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin: 0 0 10px;
  font-size: 21px;
  color: #1b3e67;
}

/* IMPL-279: subsection headings and last-updated stamp for the
   restructured policy sections. */
.legal-section h3 {
  margin: 18px 0 6px;
  font-size: 16.5px;
  color: var(--ink);
}

.legal-updated {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.legal-section p {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

/* D-3: anchored sections must clear the sticky topbar after in-page
       jumps. Desktop topbar is 128px tall; the mobile single-row topbar
       (80px logo) is shorter and covered by the ≤900 offset below.
       N01 (mobile acceptance 2026-09-09): [id] (not just section[id]) so
       div anchors like #contact clear the bar too. */
.landing-page main [id] {
  scroll-margin-top: 128px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 40px 0 30px;
  }

  .footer-bar {
    justify-content: center;
    text-align: center;
  }
}

/* ≤640px: single-column stack — the brand block (lockup + tagline) spans
   the full page width instead of squeezing into a half-width column with
   dead space to its right (owner feedback 2026-09-07). R-FT01 (mobile
   acceptance 2026-09-09, M02): the compact 84px footer logo now covers
   the whole single-column phone zone so 360–640px stay continuous
   instead of snapping back to the 132px desktop height above 380px. */
@media (max-width: 640px) {
  .site-footer .footer-brand img {
    height: 84px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 40px 0 30px;
  }
}

/* Session role badge in the top chrome: an identity chip, not a switch —
   translucent outline + shield glyph instead of the toggle-like dot pill. */
.topbar [data-role-badge] {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  padding: 5px 12px;
  letter-spacing: 0.02em;
}

.topbar [data-role-badge]::before {
  width: 13px;
  height: 13px;
  border-radius: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6l7-3z'/><path d='M9 12l2 2 4-4'/></svg>") center / contain no-repeat;
}

/* Login */
.login-aside {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 28px;
  background:
    radial-gradient(circle at 78% 12%, rgba(82, 164, 220, 0.2), transparent 28%),
    linear-gradient(150deg, #102f55, #244e8f);
}

.login-form-panel {
  background: #fff;
}

.login-aside-content {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.login-aside-content > img {
  height: 240px;
  max-width: 315px;
  object-fit: contain;
  align-self: flex-start;
}

.login-aside-content h1,
.login-aside-content .sub {
  margin: 0;
}

.login-aside .aside-foot {
  margin-top: 0;
}

/* 901-1199px: one compact single-line row. The desktop row's sizing is
   trimmed (smaller lockup, nav type and buttons — overrides live in this
   later-loaded sheet so they win the cascade) so the nowrap labels fit on
   one line without the two-row whitespace; if a locale still overflows,
   the nav scrolls instead of ever wrapping. */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-topbar-inner {
    height: 72px;
    gap: 12px;
  }

  .site-logo {
    height: 56px;
  }

  .site-nav {
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    padding: 8px;
    font-size: 14.5px;
  }

  .site-nav a::after {
    inset-inline: 8px;
    inset-block-end: 2px;
  }

  .site-actions {
    gap: 8px;
    margin-inline-start: auto;
  }

  .site-actions .btn {
    padding: 9px 14px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .content {
    padding: 22px 18px 32px;
  }

  .site-topbar-inner {
    height: auto;
  }

  /* B-3: the lockup reads bigger on phones too (80px, single-row bar). */
  .site-logo {
    height: 80px;
  }

  /* B-1: legal.html has no landing-motion.css, so the bar's actions
     cluster gets its inline-end anchoring here (landing already sets it). */
  .site-actions {
    margin-inline-start: auto;
  }

  /* D-3: offset for the single-row mobile bar (80px logo + padding);
       [id] keeps div anchors (#contact) covered (N01). */
  .landing-page main [id] {
    scroll-margin-top: 96px;
  }

  .hero {
    padding: 68px 0 76px;
  }

  .hero-grid {
    /* The two-column hero stacks on small screens; this refresh layer
       loads after components.css, so the reset must be repeated here. */
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .hero-visual {
    min-height: 0;
    padding: 24px;
    /* Keep the workflow panel stacked: the base chip layout switched this
       container to a wrapping row on small screens. */
    flex-direction: column;
  }

  .login-aside {
    display: flex;
    gap: 18px;
  }

  .login-aside-content {
    gap: 16px;
  }

  .login-aside-content > img {
    height: 168px;
  }

  .users-page .content-admin > .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .dashboard-page #stat-grid,
  .users-page .content-admin > .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .users-page .content-admin > .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ */
/* Polish pass 2 — craft details (2026-08)                           */
/* Presentation only: palette harmonisation, refined icon chips,     */
/* quieter AI markers, geometric decor on dark surfaces.             */
/* ================================================================ */

:root {
  /* Retire the leftover electric blue/violet accents so every status
     surface speaks the same steel-blue government palette. */
  --st-processing: #244ea2;
  --st-processing-soft: #edf1fb;
  --violet: #6a53aa;
  --grad-ai: linear-gradient(90deg, #244ea2, #6a53aa);
  --chip-line: rgba(36, 78, 162, 0.14);
}

/* Geometric khatam lattice on the dark sidebar frame. */
.sidebar {
  background:
    url("../assets/decor/pattern-khatam.svg") 0 0 / 132px 132px,
    radial-gradient(circle at 18% 8%, rgba(91, 164, 215, 0.18), transparent 28%),
    linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
}

/* Quiet medallion emblem behind the login aside. */
.login-aside {
  background:
    url("../assets/decor/medallion-star.svg") center 38% / min(78%, 430px) no-repeat,
    radial-gradient(circle at 78% 12%, rgba(82, 164, 220, 0.2), transparent 28%),
    linear-gradient(150deg, #102f55, #244e8f);
}

.login-aside-content {
  position: relative;
  z-index: 1;
}

/* Landing hero carries the same faint lattice for brand continuity. */
.hero {
  background:
    url("../assets/decor/pattern-khatam.svg") 0 0 / 132px 132px,
    linear-gradient(112deg, rgba(7, 39, 67, 0.98), rgba(16, 71, 112, 0.94)),
    radial-gradient(circle at 90% 10%, #3189c5, transparent 36%);
}

/* Larger, bordered icon chips on the dashboard and user stat cards.
   Icons scale up with the chip and inherit its tone. */
.dashboard-page #stat-grid .stat-ico,
.users-page .content-admin > .stat-grid .stat-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--chip-line);
}

.dashboard-page #stat-grid .stat-ico svg,
.users-page .content-admin > .stat-grid .stat-ico svg {
  width: 22px;
  height: 22px;
}

.ico-blue { background: #e9f0fb; color: #244ea2; }
.ico-violet { background: #efebfa; color: #6a53aa; }

/* Avatar hues harmonised with the steel palette (first two were the
   old electric blue / bright violet). */
.avatar-a { background: #2f66b0; }
.avatar-b { background: #6a53aa; }

/* AI marker: calm outlined pill instead of the loud gradient chip.
   Reads cleanly on the blue topbar, white tables and tinted cards. */
.ai-pill {
  padding: 2px 9px;
  border: 1px solid #cfdaf6;
  background: linear-gradient(135deg, #eef3fc, #f1edfc);
  color: #34519e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgba(20, 60, 120, 0.08);
}

/* Donut legend: crisper swatches and spacing. */
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(16, 42, 80, 0.08);
}

.donut-legend {
  gap: 10px;
  font-size: 15px;
}

/* Numbers and dates never wrap mid-value anywhere in data tables. */
table.data .num {
  white-space: nowrap;
}

/* Help FAB in brand steel blue instead of near-black. */
.fab-help {
  background: linear-gradient(135deg, #244ea2, #3768b2);
  box-shadow: 0 10px 24px rgba(18, 52, 92, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab-help:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(18, 52, 92, 0.36);
}

/* ---------------------------------------------------------------- */
/* Coordinated slim scrollbars (shows up when the page is zoomed).   */
/* Light surfaces get a steel-grey thumb; the dark sidebar gets a    */
/* translucent white one. Firefox uses scrollbar-*, Blink/WebKit the */
/* ::-webkit-scrollbar pseudo-elements.                               */
/* ---------------------------------------------------------------- */

:root {
  scrollbar-width: thin;
  scrollbar-color: #b9c7d9 transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c3cfdd;
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #9fb0c4;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark chrome surfaces (the fixed sidebar scrolls when zoomed in). */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.36);
  border: 2px solid transparent;
  background-clip: padding-box;
}

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

/* ================================================================ */
/* Client refinement — Step 1: global visual system (2026-08-18)    */
/* Option C remains intact. This layer aligns the product with the    */
/* approved white canvas, blue-to-purple brand, and enterprise tone. */
/* ================================================================ */

:root {
  --primary: #315fb4;
  --primary-strong: #244b92;
  --primary-soft: #eef3fb;
  --violet: #7449b6;
  --violet-soft: #f4effa;
  --grad-ai: linear-gradient(105deg, #2f67bb 0%, #315fb4 54%, #7449b6 100%);
  --chrome: #173c69;
  --chrome-2: #102d50;
  --chrome-hover: rgba(255, 255, 255, 0.1);
  --canvas: #ffffff;
  --surface: #f7f9fc;
  --line: #dce3ec;
  --ink: #17283d;
  /* SD-9: #64758a measured 4.39:1 on the pill-neutral background — axe
     flagged the whole family. #5A6472 restores >=5.5:1 on both surfaces. */
  --muted: #5A6472;
  --radius: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(17, 40, 70, 0.035), 0 8px 24px rgba(17, 40, 70, 0.055);
  --shadow-lg: 0 24px 60px rgba(8, 30, 57, 0.16);
  --st-processing: #315fb4;
  --st-processing-soft: #eef3fb;
  --chip-line: rgba(49, 95, 180, 0.16);
}

body {
  color: var(--ink);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -0.003em;
}

html[lang="ar"] body {
  font-family: "Cairo", "IBM Plex Sans Arabic", "Rubik", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

.shell,
.main {
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
}

.sidebar {
  background:
    url("../assets/decor/pattern-khatam.svg") 0 0 / 144px 144px,
    radial-gradient(circle at 88% 2%, rgba(116, 73, 182, 0.13), transparent 24%),
    linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  border-inline-end-color: rgba(255, 255, 255, 0.1);
}

/* White brand panel + official colour logo: customer-requested treatment. */
.brand {
  min-height: 104px;
  margin: 0 4px 10px;
  padding: 13px 15px 15px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(5, 24, 48, 0.2);
  overflow: hidden;
}

.brand::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--grad-ai);
}

.brand img {
  width: 216px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.nav {
  padding-top: 6px;
  border-top: 0;
}

.nav-link {
  min-height: 46px;
  font-size: 16.5px;
  font-weight: 600;
}

.nav-link.is-active {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(4, 24, 48, 0.14);
}

.nav-link.is-active::before {
  width: 4px;
  background: linear-gradient(180deg, #7fb7ef 0%, #a57bd0 100%);
  box-shadow: 0 0 14px rgba(165, 123, 208, 0.28);
}

.topbar {
  min-height: 70px;
  background:
    radial-gradient(circle at 78% 0%, rgba(116, 73, 182, 0.1), transparent 22%),
    var(--chrome);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[lang="ar"] .page-title {
  letter-spacing: 0;
}

/* Pure-white work area; brand colour stays on key visual elements. */
.content,
.dashboard-page .content,
.users-page .content {
  padding: 28px 32px 40px;
  gap: 20px;
  background: #ffffff;
  border-start-start-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.card-pad {
  padding: 21px;
}

.card-title {
  color: #1b3556;
  font-size: 15px;
  font-weight: 700;
}

.stat-card,
.info-card,
.gap-card,
.citation-card {
  border-color: var(--line);
}

.stat-card:hover,
.info-card:hover,
.gap-card:hover,
.citation-card:hover {
  border-color: #c9d6e7;
  box-shadow: 0 14px 34px rgba(22, 58, 101, 0.085);
}

.stat-value,
.stat-num {
  color: #244b92;
}

.btn {
  min-height: 38px;
  border-color: #d8e0ea;
  background: #ffffff;
}

.btn:hover {
  background: #f7f9fc;
  border-color: #c9d4e2;
}

.btn-ghost,
.topbar .btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.topbar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.btn-primary {
  color: #ffffff;
  border-color: transparent;
  background: var(--grad-ai);
  box-shadow: 0 7px 18px rgba(64, 74, 164, 0.22);
}

.btn-primary:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(105deg, #285ba9 0%, #2b55a1 54%, #6840a5 100%);
  box-shadow: 0 9px 22px rgba(64, 74, 164, 0.28);
}

.input,
select,
textarea {
  border-color: #d7e0ea;
  background: #ffffff;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: #5575bd;
  box-shadow: 0 0 0 3px rgba(49, 95, 180, 0.12);
}

table.data thead {
  background: linear-gradient(100deg, #244b92 0%, #315fb4 78%, #6250a7 100%);
}

table.data th {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

html[lang="ar"] table.data th {
  letter-spacing: 0;
}

table.data td {
  border-bottom-color: #e7ecf2;
}

table.data tbody tr:hover {
  background: #f7f9fd;
}

.ai-pill {
  padding: 3px 9px;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad-ai) border-box;
  color: #55469b;
  box-shadow: 0 2px 7px rgba(67, 72, 154, 0.1);
}

.citation,
.citation-card,
.cite-item {
  border-color: #d8d9ef;
  border-inline-start-color: #6852ab;
  background: linear-gradient(105deg, #fbfcff 0%, #faf8fd 100%);
}

.citation-jump,
.citation-meta {
  color: #4f58a1;
}

.topbar [data-role-badge] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

.fab-help {
  background: var(--grad-ai);
  box-shadow: 0 11px 26px rgba(49, 67, 137, 0.3);
}

.login-aside {
  background:
    url("../assets/decor/medallion-star.svg") center 38% / min(78%, 430px) no-repeat,
    radial-gradient(circle at 82% 12%, rgba(137, 83, 187, 0.25), transparent 28%),
    linear-gradient(150deg, #102f55 0%, #244e8f 68%, #4c458d 100%);
}

.hero {
  background:
    url("../assets/decor/pattern-khatam.svg") 0 0 / 144px 144px,
    radial-gradient(circle at 86% 10%, rgba(139, 87, 188, 0.28), transparent 30%),
    linear-gradient(112deg, #0c2f53 0%, #154c7d 62%, #434887 100%);
}

.section {
  background: #ffffff;
}

.section-head h2 {
  color: #1b3e67;
}

.card-ico {
  color: #4656a5;
  background: linear-gradient(145deg, #eef4fc, #f4effa);
  border-color: #d9dff0;
}

.site-footer {
  background: linear-gradient(115deg, #0b2948 0%, #102f55 70%, #352f66 100%);
}

@media (max-width: 900px) {
  .sidebar {
    padding: 10px 12px;
  }

  .brand {
    width: 204px;
    min-height: 64px;
    margin: 0 6px 0 0;
    padding: 8px 12px 10px;
    flex: none;
  }

  html[dir="rtl"] .brand {
    margin: 0 0 0 6px;
  }

  .brand img {
    width: 176px;
    max-height: 47px;
  }

  .content,
  .dashboard-page .content,
  .users-page .content {
    padding: 22px 18px 32px;
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
  }
}

@media (max-width: 700px) {
  .dashboard-page .content > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    padding: 12px 16px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .page-title {
    font-size: 19px;
  }
}

@media (max-width: 560px) {
  .brand {
    width: 100%;
    min-height: 70px;
    margin: 0 0 7px;
  }

  html[dir="rtl"] .brand {
    margin: 0 0 7px;
  }

  .brand img {
    width: 190px;
    max-height: 52px;
  }

  .nav {
    width: 100%;
  }

  .content,
  .dashboard-page .content,
  .users-page .content {
    padding: 18px 14px 28px;
  }

  .card-pad {
    padding: 17px;
  }
}

/* IMPL-147 wave 1 (ui_feedback_2): A-21 hero tagline shows own language only;
   D-3 address renders as logical lines. */
html[lang="ar"] .hero-tagline-en { display: none; }
html[lang="en"] .hero-tagline-ar { display: none; }
.addr-line { display: block; }

/* Sub-380px pass: below the 390px walkthrough baseline the single-row
   marketing topbar overflows its container and collapses into a stray
   two-row bar, and the footer lockup keeps its desktop height beside a
   single column of links. Tighten the shared marketing shell so the
   topbar holds one row from 320px up and the footer stops wasting the
   right half of narrow screens. Selectors carry an extra class so they
   outrank the landing-motion.css <=560 rules regardless of sheet order
   (legal.html shares this shell but does not load landing-motion.css). */
@media (max-width: 380px) {
  .landing-page .site-container {
    padding-inline: 14px;
  }

  .landing-page .site-topbar .site-topbar-inner {
    flex-wrap: nowrap;
    gap: 5px;
  }

  .landing-page .site-topbar .site-logo {
    height: clamp(48px, 15vw, 60px);
  }

  .landing-page .site-topbar .site-actions {
    gap: 4px;
    min-width: 0;
  }

  .landing-page .site-topbar .lang-switch {
    gap: 4px;
    padding: 6px 7px;
    font-size: 12px;
    white-space: nowrap;
  }

  .landing-page .site-topbar .site-actions .btn {
    padding: 8px 10px;
    font-size: 12px;
  }

  .landing-page .site-topbar .site-actions .site-menu-btn {
    flex: none;
    width: 36px;
    height: 36px;
  }

  /* The journey panel bleeds to the screen edges by cancelling the
     container padding; keep the bleed matched to the narrower 14px
     padding so it stays inside the viewport (body prefix outranks the
     later-loaded landing-motion.css rule at equal depth). */
  body.landing-page .journey-strip {
    margin-inline: -14px;
    padding-inline: 16px;
  }

  .footer-grid {
    gap: 20px;
    padding: 32px 0 24px;
  }

  .footer-col a,
  .footer-contact span {
    font-size: 14px;
  }

  .footer-legal {
    gap: 6px 16px;
  }
}