/* Design tokens: the Figma variables (same values as the Angular portal's tailwind.config.css / variables.css).
   Layout uses logical properties only (margin-inline-start, inset-inline-end…) so the same
   rules serve both dir="rtl" (Arabic, default) and dir="ltr" (English). */
:root {
  /* Brand */
  --color-primary: #1b8354;
  --color-primary-hover: #166a44;
  --color-primary-800: #14573a;
  --color-primary-25: #f7fdf9;
  --color-primary-light: #88d8ad;
  --color-brand-light: #f3fcf6;

  /* Surfaces and text */
  --color-body: #f9fafb;
  --color-white: #fff;
  --color-default: #161616;
  --color-display: #1f2a37;
  --color-paragraph: #384250;
  --color-secondary-paragraph: #6c737f;
  --color-neutral: #f3f4f6;
  --color-neutral-50: #f9fafb;
  --color-neutral-primary: #d2d6db;
  --color-disabled: #e5e7eb;
  --color-field-border: #9da4ae;
  --color-scrollbar: #c1c1c1;
  --color-primary-focus-ring: rgba(27, 131, 84, 0.2);

  /* Feedback */
  --color-error: #b42318;
  --color-error-light: #fef3f2;
  --color-error-focus-ring: rgba(180, 35, 24, 0.2);
  --color-success: #079455;
  --color-success-light: #ecfdf3;
  --color-success-dark: #085d3a;
  --color-icon-success: #067647;
  --color-warning: #dc6803;
  --color-warning-light: #fffaeb;
  --color-warning-dark: #b54708;
  --color-info: #175cd3;
  --color-info-light: #eff8ff;

  /* Old names, kept as aliases so pages that are not restyled yet keep working. */
  --color-muted: var(--color-secondary-paragraph);
  --color-border: var(--color-neutral-primary);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  /* Spacing scale (Figma spacing-*) */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 48px;

  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.12);
  --shadow-drawer-footer: 0 -2px 4px -2px rgb(16 24 40 / 0.06), 0 -4px 8px -2px rgb(16 24 40 / 0.05);
  --header-h: 72px;
  --color-backdrop: rgba(22, 22, 22, 0.4);
}

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

html, body { margin: 0; }

body {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  background: var(--color-body);
  color: var(--color-default);
}

h1, h2, h3 { margin: 0 0 .5rem; }
h1 { font-size: 30px; line-height: 38px; font-weight: 700; color: var(--color-default); }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--color-default); }
h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--color-display); }
p { margin: 0 0 1rem; }
a { color: var(--color-primary); }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.muted { color: var(--color-secondary-paragraph); font-size: 14px; }
.text-center { text-align: center; }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
}

/* Round icon holder: 32 / 48 px, brand-light tint. */
.icon-bg {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: var(--radius-full);
}
.icon-bg.size-32 { width: 32px; height: 32px; }
.icon-bg.size-48 { width: 48px; height: 48px; }
.icon-bg.bg-brand-light { background: var(--color-brand-light); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 40px; padding: 8px 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color .15s;
}
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.btn-primary:not(:disabled):hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-outline { background: var(--color-white); color: var(--color-default); border-color: var(--color-neutral-primary); }
.btn-outline:not(:disabled):hover { background: var(--color-body); }
.btn-link { background: none; border: none; color: var(--color-primary); padding-inline: 0; height: auto; min-height: 40px; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled {
  background: var(--color-disabled); border-color: var(--color-field-border); color: var(--color-field-border);
  cursor: not-allowed;
}
.btn-link:disabled { background: none; border: none; }
.btn-block { width: 100%; }

/* Forms */
.field { display: flex; flex-direction: column; }
.field label { font-size: 14px; line-height: 20px; color: var(--color-default); margin-block-end: 8px; }
.input {
  font: inherit; font-size: 16px; line-height: 24px; min-height: 44px; padding-block: 8px; padding-inline: 16px;
  border: 1px solid var(--color-field-border); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-default);
  transition: border-color .2s;
}
.input::placeholder { color: var(--color-secondary-paragraph); }
/* States: hover darkens the border; focus is the brand border plus a soft 3px ring (no outline: that drew a double ring with a white gap);
   an invalid field keeps the error colour in every state, and its focus ring is red, never green. */
.input:hover:not(:disabled):not(:focus) { border-color: var(--color-secondary-paragraph); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-focus-ring); }
.input[aria-invalid="true"], .input[aria-invalid="true"]:hover:not(:disabled):not(:focus) { border-color: var(--color-error); }
.input[aria-invalid="true"]:focus { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-focus-ring); }
.input:disabled { background: var(--color-disabled); color: var(--color-secondary-paragraph); cursor: not-allowed; }

/* Left-to-right fields (ID, phone, user name, e-mail) in an Arabic page: the typed text stays LTR and sits flush with the inline end, and the
   empty field shows its Arabic placeholder RTL (an LTR placeholder scrambles "مثال: 1XXXXXXXXX"). */
html[dir="rtl"] .input.ltr { text-align: end; }
html[dir="rtl"] .input.ltr:placeholder-shown { direction: rtl; text-align: start; }

/* Prefix + input as one field: the group owns the border, the radius and the focus ring; the parts inside have no border of their own.
   The prefix keeps the page direction (so "start" and "end" mean the same for both parts); only its text is isolated as LTR. */
.input-group {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--color-field-border); border-radius: var(--radius-sm); background: var(--color-white);
  transition: border-color .2s;
}
.input-group:hover:not(:has(.input:disabled)):not(:focus-within) { border-color: var(--color-secondary-paragraph); }
.input-group:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-focus-ring); }
.input-group:has(.input[aria-invalid="true"]), .input-group:has(.input[aria-invalid="true"]):hover:not(:focus-within) { border-color: var(--color-error); }
.input-group:has(.input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px var(--color-error-focus-ring); }
.input-group .prefix {
  display: inline-flex; align-items: center; padding-inline: 12px; font-size: 16px; color: var(--color-default);
  border-inline-end: 1px solid var(--color-field-border); background: var(--color-disabled);
}
.input-group .input, .input-group .input:hover:not(:disabled):not(:focus), .input-group .input:focus, .input-group .input[aria-invalid="true"]:focus {
  flex: 1; min-width: 0; min-height: 42px; border: 0; border-radius: 0; box-shadow: none; outline: none;
}
/* Country-code dropdown inside the group: a native <select> (no JS) that looks like the other enabled controls (white, not dimmed) with the
   chevron drawn by the wrapper so it sits at the page's inline end. The select itself is LTR (the code reads "+966"), so its padding is set per page direction. */
.input-group .country {
  position: relative; display: inline-flex; align-items: stretch; border-inline-end: 1px solid var(--color-field-border); background: var(--color-white);
  transition: background-color .2s;
}
.input-group .country:hover:has(select:not(:disabled)) { background: var(--color-body); }
.input-group .country::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 8px; width: 20px; pointer-events: none;
  background: url("../images/icons/arrow-down.svg") center / 20px 20px no-repeat;
}
.input-group .country:has(select:disabled)::after { opacity: .5; }
.input-group .country-select {
  appearance: none; font: inherit; font-size: 16px; line-height: 24px; min-height: 42px; min-width: 88px;
  padding-block: 8px; padding-inline: 12px 32px; border: 0; border-radius: 0; background: transparent; color: var(--color-default);
  cursor: pointer; outline: none;
}
html[dir="rtl"] .input-group .country-select { padding-inline: 32px 12px; }
.input-group .country-select:disabled { cursor: not-allowed; color: var(--color-secondary-paragraph); }
.field-error {
  display: flex; align-items: flex-start; gap: 8px; margin-block-start: 12px;
  font-size: 14px; line-height: 20px; color: var(--color-error);
}
.field-error::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-block-start: 2px;
  background: url("../images/icons/help-circle.svg") center / contain no-repeat;
}

.alert { padding: .75rem 1rem; border-radius: var(--radius-md); font-size: 14px; }
.alert-error { background: var(--color-error-light); color: var(--color-error); }
.alert-success { background: var(--color-success-light); color: var(--color-success-dark); }
.alert-info { background: var(--color-info-light); color: var(--color-info); }

/* Numbers, phone numbers and IDs always read left-to-right, even inside Arabic text. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Arrows point the other way in English (LTR). */
html[lang^="en"] img[src*="arrow-left"],
html[lang^="en"] img[src*="arrow-right"] { transform: scaleX(-1); }

/* Thin scrollbar, as in the Angular portal. */
* { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: var(--radius-full); }

/* Blazor */
#blazor-error-ui {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  padding: .75rem 1rem; background: var(--color-warning-light); color: var(--color-display);
  box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss { cursor: pointer; margin-inline-start: 1rem; }

.app-loading {
  min-height: 100vh; display: grid; place-items: center; color: var(--color-secondary-paragraph);
}

.narrow { max-width: 520px; margin-inline: auto; }

/* Shell drawer (below 1024px): the checkbox #nav-drawer in AppHeader opens the sidebar. CSS only, so it works in prerendered HTML. */
.drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 40; background: var(--color-backdrop); }

@media (max-width: 1023.98px) {
  .shell:has(.menu-toggle:checked) .sidebar { inset-inline-start: 0; visibility: visible; }
  .shell:has(.menu-toggle:checked) .drawer-backdrop { display: block; }
}

/* Home pages (all portals): the page is one column of sections (Figma: 32px between sections, 24px on mobile; the shell already pads the content). */
.page-stack { display: flex; flex-direction: column; gap: var(--space-3xl); min-width: 0; }
.page-section { display: flex; flex-direction: column; gap: var(--space-3xl); min-width: 0; }
.section-head { display: flex; flex-direction: column; gap: var(--space-md); }
.section-head h2, .section-head p { margin: 0; }
.section-head p { font-size: 16px; line-height: 24px; color: var(--color-default); }

@media (min-width: 1024px) {
  .page-stack { gap: var(--space-4xl); }
  .section-head p { font-size: 14px; line-height: 20px; }
}

/* Centred state card (access denied, not found, unexpected error): icon circle, title, text, primary button. */
.state-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xl);
  max-width: 520px; margin-inline: auto; padding: var(--space-4xl) var(--space-3xl);
  background: var(--color-white); border-radius: var(--radius-lg); text-align: center;
}
.state-card h1 { margin: 0; font-size: 24px; line-height: 32px; }
.state-card p { margin: 0; color: var(--color-paragraph); }
.icon-bg.bg-error-light { background: var(--color-error-light); }

/* Profile pages (all portals): the page title and its subtitle (Figma: 16px under the title, 14px on desktop). */
.profile-head h1 { margin: 0; }
.profile-head p { margin: var(--space-xl) 0 0; font-size: 16px; line-height: 24px; color: var(--color-default); }
.profile-body { margin-block-start: var(--space-4xl); }

@media (min-width: 1024px) {
  .profile-head p { font-size: 14px; line-height: 20px; }
  .profile-body { margin-block-start: 64px; }
}
@media (min-width: 1024px) {
  .profile-page { padding-block-start: var(--space-3xl); }
}

/* Text for assistive technology only (status messages, names of icon-only controls). */
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}