/* ==========================================================================
   Rentiqa Design System v2 - BASE + BOOTSTRAP SKIN
   Resets, typography, and a token-driven skin for the Bootstrap 5.3 classes
   the 250+ Razor pages already use (btn, form-control, table, modal, ...).
   No hex colours here (see rq-tokens.css). No !important except the sanctioned ones:
   (1) reduced-motion override, (2) re-mapping of Bootstrap colour utilities that are !important in Bootstrap itself.
   Logical properties only: this file is direction-agnostic (true RTL).
   ========================================================================== */

/* Legacy variable aliases so inline page <style> blocks keep resolving. */
:root {
  --rqp-text: var(--rq-text);
  --rqp-text-soft: var(--rq-text-2);
  --rqp-muted: var(--rq-muted);
  --rqp-surface: var(--rq-surface);
  --rqp-panel: var(--rq-surface);
  --rqp-bg: var(--rq-bg);
  --rqp-border: var(--rq-border);
  --rqp-border-strong: var(--rq-border-strong);
  --rqp-danger: var(--rq-danger);
  --rqp-emerald: var(--rq-accent);
  --rqp-radius-sm: var(--rq-r-sm);
  --rqp-radius-lg: var(--rq-r-lg);
  --rqp-shadow-lg: var(--rq-shadow-pop);
  --rqp-focus-ring: var(--rq-focus);
  --rq-theme-accent-secondary: var(--rq-accent-hover);
  --color-primary: var(--rq-accent);
  --color-border: var(--rq-border);
  --rq-primary: var(--rq-accent);
  --rq-success: var(--rq-ok);
  --rq-warning: var(--rq-warn);
  --rq-radius: var(--rq-r-md);
  --rq-control-height: var(--rq-h);

  /* Bootstrap 5.3 variable bridge */
  --bs-body-font-family: var(--rq-font);
  --bs-body-font-size: var(--rq-fs-base);
  --bs-body-color: var(--rq-text);
  --bs-body-bg: var(--rq-bg);
  --bs-border-color: var(--rq-border);
  --bs-border-radius: var(--rq-r-md);
  --bs-secondary-color: var(--rq-muted);
  --bs-secondary-bg: var(--rq-sunken);
  --bs-tertiary-bg: var(--rq-surface-2);
  --bs-link-color: var(--rq-accent-text);
  --bs-link-hover-color: var(--rq-accent-hover);
  --bs-primary: var(--rq-accent);
  --bs-success: var(--rq-ok);
  --bs-danger: var(--rq-danger);
  --bs-warning: var(--rq-warn);
  --bs-info: var(--rq-info);
  --bs-warning-rgb: 133, 80, 0;
  --bs-code-color: var(--rq-accent-text);   /* w9_pwa: Bootstrap pink failed AA in dark mode */
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--rq-topbar-h) + 16px); }

body {
  margin: 0;
  background: var(--rq-bg);
  color: var(--rq-text);
  font-family: var(--rq-font);
  font-size: var(--rq-fs-base);
  line-height: var(--rq-lh-base);
  font-weight: var(--rq-fw-regular);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--rq-s-2);
  color: var(--rq-text);
  font-weight: var(--rq-fw-semibold);
  line-height: var(--rq-lh-tight);
  letter-spacing: var(--rq-tracking-tight);
  overflow-wrap: anywhere;
  word-break: normal;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: 0; line-height: 1.5; }
h1, .h1 { font-size: var(--rq-fs-xl); }
h2, .h2 { font-size: var(--rq-fs-lg); }
h3, .h3 { font-size: var(--rq-fs-md); }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--rq-fs-base); }
p { margin: 0 0 var(--rq-s-3); }
small, .small { font-size: var(--rq-fs-xs); }
strong, b { font-weight: var(--rq-fw-semibold); }
hr { border: 0; border-block-start: 1px solid var(--rq-border); opacity: 1; margin-block: var(--rq-s-4); }

a { color: var(--rq-accent-text); text-decoration: none; }
a:hover { color: var(--rq-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] a:hover { color: var(--rq-accent-text); }

/* Bootstrap colour utilities are declared !important by the framework (sanctioned exception #2: re-mapping them to tokens
   is the only way dark mode and AA contrast hold for the ~700 places pages use .text-muted / .text-danger / .bg-light). */
.text-muted, .text-body-secondary, .text-secondary { color: var(--rq-muted) !important; }
.text-danger { color: var(--rq-danger) !important; }
.text-success { color: var(--rq-ok) !important; }
.text-warning { color: var(--rq-warn) !important; }
.text-info { color: var(--rq-info) !important; }
.text-primary { color: var(--rq-accent-text) !important; }
.text-dark, .text-body, .text-black { color: var(--rq-text) !important; }
.text-white-50 { color: var(--rq-on-ink-92) !important; }
.bg-light, .bg-body-tertiary { background-color: var(--rq-surface-2) !important; }
.bg-white, .bg-body { background-color: var(--rq-surface) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rq-border) !important; }
.badge.bg-success { background-color: var(--rq-ok-bg) !important; }
.badge.bg-danger { background-color: var(--rq-danger-bg) !important; }
.badge.bg-warning { background-color: var(--rq-warn-bg) !important; }
.badge.bg-info, .badge.bg-primary { background-color: var(--rq-info-bg) !important; }
.badge.bg-secondary, .badge.bg-dark { background-color: var(--rq-neutral-bg) !important; }

/* Inline code: Bootstrap hard-codes pink (#d63384, 4.06:1 on the dark surface); use the theme-aware accent text colour (AA in both themes, all accents). */
code { color: var(--rq-accent-text); font-size: max(0.875em, var(--rq-fs-2xs)); }
pre code { color: inherit; }

/* Numbers, codes and identifiers stay LTR inside Arabic text (bidi isolation). */
.rq-num, .rq-ltr, [data-ltr], bdi { unicode-bidi: isolate; }
.rq-num { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }
[dir="rtl"] .rq-ltr { direction: ltr; text-align: end; }
input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"] { unicode-bidi: plaintext; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="number"] { text-align: end; }

/* ---- Accessibility ------------------------------------------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; border-radius: var(--rq-r-sm); }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rq-skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 5000;
  padding: 10px 16px; background: var(--rq-accent); color: var(--rq-on-accent); border-radius: var(--rq-r-md);
  font-weight: var(--rq-fw-semibold); transform: translateY(-200%); transition: transform var(--rq-dur-fast) var(--rq-ease);
}
.rq-skip-link:focus { transform: none; color: var(--rq-on-accent); outline: 2px solid var(--rq-text); outline-offset: 2px; }
::selection { background: var(--rq-accent-soft-2); color: var(--rq-text); }

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

/* Slim, token-coloured scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--rq-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--rq-border-strong); border-radius: var(--rq-r-pill); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 14px; --bs-btn-padding-y: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rq-s-2);
  min-block-size: var(--rq-h); padding-inline: 14px; padding-block: 0;
  font: inherit; font-size: var(--rq-fs-base); font-weight: var(--rq-fw-medium); line-height: 1;
  white-space: nowrap; text-decoration: none;
  border: 1px solid var(--rq-border-strong); border-radius: var(--rq-r-md);
  background: var(--rq-surface); color: var(--rq-text); box-shadow: var(--rq-shadow-1);
  cursor: pointer; user-select: none;
  transition: background-color var(--rq-dur-fast) var(--rq-ease), border-color var(--rq-dur-fast) var(--rq-ease), box-shadow var(--rq-dur-fast) var(--rq-ease), transform var(--rq-dur-fast) var(--rq-ease);
}
.btn:hover { background: var(--rq-hover); border-color: var(--rq-border-control); color: var(--rq-text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-sm { min-block-size: var(--rq-h-sm); padding-inline: 10px; font-size: var(--rq-fs-sm); }
.btn-lg { min-block-size: var(--rq-h-lg); padding-inline: 18px; font-size: var(--rq-fs-md); }
.btn > i, .btn > svg { flex: none; }

.btn-primary, .rq-btn-primary, .rq-action-button:not(.rq-action-button--ghost) {
  background: var(--rq-accent); border-color: var(--rq-accent); color: var(--rq-on-accent); font-weight: var(--rq-fw-semibold);
  box-shadow: 0 1px 0 var(--rq-on-ink-18) inset, 0 1px 2px color-mix(in srgb, var(--rq-accent) 40%, transparent);
}
.btn-primary:hover, .rq-btn-primary:hover, .rq-action-button:not(.rq-action-button--ghost):hover { background: var(--rq-accent-hover); border-color: var(--rq-accent-hover); color: var(--rq-on-accent); }
.btn-primary:active, .rq-btn-primary:active { background: var(--rq-accent-press); border-color: var(--rq-accent-press); }

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .rq-btn, .rq-action-button--ghost {
  background: var(--rq-surface); border-color: var(--rq-border-strong); color: var(--rq-text);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .rq-btn:hover, .rq-action-button--ghost:hover { background: var(--rq-hover); border-color: var(--rq-border-control); color: var(--rq-text); }

.btn-outline-primary { background: transparent; border-color: var(--rq-accent-line); color: var(--rq-accent-text); }
.btn-outline-primary:hover { background: var(--rq-accent-soft); border-color: var(--rq-accent); color: var(--rq-accent-text); }
.btn-outline-primary:disabled, .btn-outline-primary.disabled, fieldset:disabled .btn-outline-primary { background: transparent; border-color: var(--rq-accent-line); color: var(--rq-accent-text); } /* Bootstrap paints the disabled outline in its own blue */
.btn-outline-success, .btn-outline-info { background: transparent; border-color: var(--rq-ok-line); color: var(--rq-ok); }
.btn-outline-success:hover { background: var(--rq-ok-bg); border-color: var(--rq-ok); color: var(--rq-ok); }
.btn-outline-info { border-color: var(--rq-info-line); color: var(--rq-info); }
.btn-outline-info:hover { background: var(--rq-info-bg); border-color: var(--rq-info); color: var(--rq-info); }
.btn-outline-danger { background: transparent; border-color: var(--rq-danger-line); color: var(--rq-danger); }
.btn-outline-danger:hover { background: var(--rq-danger-bg); border-color: var(--rq-danger); color: var(--rq-danger); }
.btn-outline-warning { background: transparent; border-color: var(--rq-warn-line); color: var(--rq-warn); }
.btn-outline-warning:hover { background: var(--rq-warn-bg); border-color: var(--rq-warn); color: var(--rq-warn); }
.btn-success { background: var(--rq-ok); border-color: var(--rq-ok); color: var(--rq-surface); }
.btn-success:hover { background: var(--rq-ok); filter: brightness(0.92); color: var(--rq-surface); }
.btn-danger { background: var(--rq-danger-solid); border-color: var(--rq-danger-solid); color: var(--rq-on-danger); }
.btn-danger:hover { background: var(--rq-danger-solid); filter: brightness(0.9); color: var(--rq-on-danger); }
.btn-warning { background: var(--rq-warn-bg); border-color: var(--rq-warn-line); color: var(--rq-warn); }
.btn-info { background: var(--rq-info-bg); border-color: var(--rq-info-line); color: var(--rq-info); }
.btn-link { border-color: transparent; box-shadow: none; background: transparent; color: var(--rq-accent-text); padding-inline: 6px; }
.btn-link:hover { background: transparent; text-decoration: underline; color: var(--rq-accent-hover); }

.btn-close {
  inline-size: 32px; block-size: 32px; padding: 0; opacity: 1; border-radius: var(--rq-r-md);
  background: transparent; background-image: none; position: relative; border: 0; cursor: pointer; color: var(--rq-text-2);
}
.btn-close::before, .btn-close::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 14px; block-size: 2px; margin-inline-start: -7px; margin-block-start: -1px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.btn-close::after { transform: rotate(-45deg); }
.btn-close:hover { background: var(--rq-hover); color: var(--rq-text); }
[data-theme="dark"] .btn-close, [data-theme="dark"] .btn-close-white { filter: none; }

/* Icon-only button */
.rq-icon-btn { display: inline-grid; place-items: center; inline-size: var(--rq-h); block-size: var(--rq-h); padding: 0; border: 1px solid transparent; border-radius: var(--rq-r-md); background: transparent; color: var(--rq-text-2); cursor: pointer; transition: background-color var(--rq-dur-fast) var(--rq-ease), color var(--rq-dur-fast) var(--rq-ease); }
.rq-icon-btn:hover { background: var(--rq-hover); color: var(--rq-text); }
.rq-icon-btn[aria-expanded="true"] { background: var(--rq-accent-soft); color: var(--rq-accent-text); }
.rq-icon-btn--sm { inline-size: var(--rq-h-sm); block-size: var(--rq-h-sm); }

/* ---- Forms ----------------------------------------------------------------- */
.form-label, label.rq-label, .form-field > label, .rq-field > label, .rq-admin-field > label {
  display: block; margin-block-end: 4px; font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); color: var(--rq-text-2); line-height: 1.3;
}
.form-control, .form-select, .rq-form-control, .rq-form-select, textarea.form-control {
  display: block; inline-size: 100%; min-block-size: var(--rq-h); padding: 0 12px;
  font: inherit; font-size: var(--rq-fs-base); line-height: 1.4; color: var(--rq-text);
  background-color: var(--rq-surface); border: 1px solid var(--rq-border-control); border-radius: var(--rq-r-md);
  box-shadow: none; transition: border-color var(--rq-dur-fast) var(--rq-ease), box-shadow var(--rq-dur-fast) var(--rq-ease);
  appearance: none;
}
textarea.form-control { padding-block: 8px; min-block-size: 72px; }
.form-control::placeholder { color: var(--rq-placeholder); opacity: 1; }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: var(--rq-text-2); }
.form-control:focus, .form-select:focus, .rq-form-control:focus, .rq-form-select:focus {
  background-color: var(--rq-surface); color: var(--rq-text); border-color: var(--rq-focus); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-focus) 28%, transparent);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--rq-sunken); color: var(--rq-muted); border-color: var(--rq-border); cursor: not-allowed; }
.form-control-sm, .form-select-sm { min-block-size: var(--rq-h-sm); padding-inline: 10px; font-size: var(--rq-fs-sm); }
.form-control-lg, .form-select-lg { min-block-size: var(--rq-h-lg); font-size: var(--rq-fs-md); }
.form-control[type="file"] { padding-block: 5px; }
.form-control-color { padding: 4px; inline-size: 56px; }
.form-select {
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237A8899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px; background-position: right 12px center;
}
[dir="rtl"] .form-select { background-position: left 12px center; padding-inline: 12px 34px; }
.form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; padding-block: 6px; }
.form-select option { background: var(--rq-surface); color: var(--rq-text); }
.form-text { font-size: var(--rq-fs-xs); color: var(--rq-muted); margin-block-start: 4px; }
.form-control.is-invalid, .form-select.is-invalid, .input-validation-error { border-color: var(--rq-danger); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-danger) 28%, transparent); }
.invalid-feedback, .text-danger.field-validation-error, .field-validation-error { display: block; color: var(--rq-danger); font-size: var(--rq-fs-xs); margin-block-start: 4px; }
.validation-summary-errors { color: var(--rq-danger); background: var(--rq-danger-bg); border: 1px solid var(--rq-danger-line); border-radius: var(--rq-r-md); padding: var(--rq-s-3) var(--rq-s-4); }
.validation-summary-errors ul { margin: 0; padding-inline-start: 18px; }

.form-check { display: flex; align-items: center; gap: 8px; min-block-size: 24px; padding: 0; margin-block-end: 4px; }
.form-check .form-check-input { float: none; margin: 0; flex: none; }
.form-check-input {
  appearance: none; inline-size: 18px; block-size: 18px; margin: 0; background-color: var(--rq-surface);
  border: 1.5px solid var(--rq-border-control); border-radius: var(--rq-r-sm); cursor: pointer; transition: background-color var(--rq-dur-fast), border-color var(--rq-dur-fast);
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--rq-accent); border-color: var(--rq-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-6.5'/%3E%3C/svg%3E"); }
.form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E"); }
.form-check-input:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
.form-check-input:disabled { opacity: 0.5; cursor: not-allowed; }
.form-check-label { font-size: var(--rq-fs-base); color: var(--rq-text); cursor: pointer; }
.form-switch .form-check-input { inline-size: 34px; border-radius: var(--rq-r-pill); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%237A8899'/%3E%3C/svg%3E"); background-size: 18px; background-position: left center; }
.form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E"); }
[dir="rtl"] .form-switch .form-check-input { background-position: right center; }
[dir="rtl"] .form-switch .form-check-input:checked { background-position: left center; }
.input-group { display: flex; align-items: stretch; inline-size: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; inline-size: 1%; min-inline-size: 0; }
.input-group-text { display: inline-flex; align-items: center; padding-inline: 12px; background: var(--rq-sunken); color: var(--rq-text-2); border: 1px solid var(--rq-border-control); font-size: var(--rq-fs-sm); }
.input-group > :not(:first-child) { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > :first-child { border-start-start-radius: var(--rq-r-md); border-end-start-radius: var(--rq-r-md); }
.input-group > :last-child { border-start-end-radius: var(--rq-r-md); border-end-end-radius: var(--rq-r-md); }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { font-size: var(--rq-fs-base); font-weight: var(--rq-fw-semibold); margin-block-end: var(--rq-s-2); }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: inherit; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; }
[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(0.85); }

/* ---- Cards / surfaces ------------------------------------------------------ */
.card-surface, .card, .rq-card, .rq-page-card, .rq-admin-card, .rq-panel {
  background: var(--rq-surface); color: var(--rq-text);
  border: 1px solid var(--rq-border); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-1);
  min-inline-size: 0;
}
.card { --bs-card-bg: var(--rq-surface); --bs-card-border-color: var(--rq-border); --bs-card-cap-bg: var(--rq-surface-2); }
.card-header { background: transparent; border-block-end: 1px solid var(--rq-border); padding: var(--rq-s-3) var(--rq-s-4); font-weight: var(--rq-fw-semibold); border-start-start-radius: var(--rq-r-lg); border-start-end-radius: var(--rq-r-lg); }
.card-body { padding: var(--rq-s-4); }
.card-title { font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); margin: 0 0 var(--rq-s-2); }
.rq-admin-card-head { padding: var(--rq-s-3) var(--rq-s-4); border-block-end: 1px solid var(--rq-border); }
.rq-admin-title { font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); }
.rq-admin-subtitle { font-size: var(--rq-fs-sm); color: var(--rq-muted); }

/* ---- Tables (plain Bootstrap tables; Syncfusion grids live in the bridge) -- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--rq-text); --bs-table-border-color: var(--rq-border); --bs-table-hover-bg: var(--rq-hover); inline-size: 100%; margin: 0; border-collapse: collapse; color: var(--rq-text); font-size: var(--rq-fs-sm); }
.table-primary { --bs-table-bg: var(--rq-accent-soft); --bs-table-color: var(--rq-text); --bs-table-hover-bg: var(--rq-accent-soft); --bs-table-border-color: var(--rq-accent-line); }
.table-primary > td, .table-primary > th, .table > tbody > tr.table-primary > * { background-color: var(--rq-accent-soft); color: var(--rq-text); }
.table > :not(caption) > * > * { padding: 0 12px; block-size: var(--rq-row-h); vertical-align: middle; border-block-end: 1px solid var(--rq-border); background: transparent; color: inherit; box-shadow: none; }
.table > thead > tr > th { block-size: 40px; font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); text-transform: none; color: var(--rq-muted); background: var(--rq-surface-2); white-space: nowrap; text-align: start; }
.table-hover > tbody > tr:hover > * { background: var(--rq-hover); }
.table-sm > :not(caption) > * > * { block-size: var(--rq-row-h-compact); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table td, .table th { text-align: start; }
.table .text-end, .table td.text-end, .table th.text-end { text-align: end; }

/* ---- Alerts / badges ---------------------------------------------------------- */
.alert { display: flex; gap: var(--rq-s-3); align-items: flex-start; padding: var(--rq-s-3) var(--rq-s-4); margin-block-end: var(--rq-s-3); border: 1px solid var(--rq-info-line); border-radius: var(--rq-r-md); background: var(--rq-info-bg); color: var(--rq-info); font-size: var(--rq-fs-sm); }
.alert-success { background: var(--rq-ok-bg); border-color: var(--rq-ok-line); color: var(--rq-ok); }
.alert-danger, .alert-error { background: var(--rq-danger-bg); border-color: var(--rq-danger-line); color: var(--rq-danger); }
.alert-warning { background: var(--rq-warn-bg); border-color: var(--rq-warn-line); color: var(--rq-warn); }
.alert-secondary, .alert-light { background: var(--rq-neutral-bg); border-color: var(--rq-neutral-line); color: var(--rq-neutral); }
.alert .btn-close { margin-inline-start: auto; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--rq-r-pill); font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold); line-height: 1.5; background: var(--rq-neutral-bg); color: var(--rq-neutral); border: 1px solid var(--rq-neutral-line); }
.badge.bg-success, .badge.text-bg-success { background: var(--rq-ok-bg); color: var(--rq-ok); border-color: var(--rq-ok-line); }
.badge.bg-danger, .badge.text-bg-danger { background: var(--rq-danger-bg); color: var(--rq-danger); border-color: var(--rq-danger-line); }
.badge.bg-warning, .badge.text-bg-warning { background: var(--rq-warn-bg); color: var(--rq-warn); border-color: var(--rq-warn-line); }
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary { background: var(--rq-info-bg); color: var(--rq-info); border-color: var(--rq-info-line); }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge.text-bg-secondary, .badge.text-bg-light, .badge.text-bg-dark { background: var(--rq-neutral-bg); color: var(--rq-neutral); border-color: var(--rq-neutral-line); }

/* ---- Modal / dialog ---------------------------------------------------------- */
.modal-backdrop { --bs-backdrop-bg: var(--rq-scrim); --bs-backdrop-opacity: 1; }
.modal-content { background: var(--rq-surface); color: var(--rq-text); border: 1px solid var(--rq-border); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-pop); overflow: hidden; }
.modal-header { display: flex; align-items: center; gap: var(--rq-s-3); padding: var(--rq-s-3) var(--rq-s-5); border-block-end: 1px solid var(--rq-border); background: var(--rq-surface); }
.modal-title { font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); margin: 0; flex: 1; }
.modal-header .btn-close { margin-inline-start: auto; }
.modal-body { padding: var(--rq-s-5); color: var(--rq-text); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--rq-s-2); padding: var(--rq-s-3) var(--rq-s-5); border-block-start: 1px solid var(--rq-border); background: var(--rq-surface-2); }
.modal.fade .modal-dialog { transition: transform var(--rq-dur) var(--rq-ease), opacity var(--rq-dur) var(--rq-ease); }

/* ---- Dropdowns / menus ----------------------------------------------------------- */
.dropdown-menu { --bs-dropdown-bg: var(--rq-surface); min-inline-size: 200px; padding: 6px; background: var(--rq-surface); color: var(--rq-text); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); box-shadow: var(--rq-shadow-pop); font-size: var(--rq-fs-base); }
.dropdown-item { display: flex; align-items: center; gap: var(--rq-s-2); min-block-size: var(--rq-h); padding: 0 10px; border-radius: var(--rq-r-md); color: var(--rq-text); background: transparent; border: 0; inline-size: 100%; text-align: start; cursor: pointer; font-size: var(--rq-fs-base); }
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--rq-hover); color: var(--rq-text); text-decoration: none; }
.dropdown-item.active, .dropdown-item:active { background: var(--rq-accent-soft); color: var(--rq-accent-text); }
.dropdown-item.text-danger { color: var(--rq-danger); }
.dropdown-divider { margin: 6px 0; border-block-start: 1px solid var(--rq-border); opacity: 1; }
.dropdown-header { padding: 6px 10px; font-size: var(--rq-fs-xs); color: var(--rq-muted); font-weight: var(--rq-fw-semibold); }
.dropdown-toggle::after { display: none; }

/* ---- Tabs / pills / pagination / lists ---------------------------------------------- */
.nav-tabs { display: flex; gap: var(--rq-s-1); border-block-end: 1px solid var(--rq-border); padding: 0; margin: 0 0 var(--rq-s-4); list-style: none; flex-wrap: wrap; }
.nav-tabs .nav-link { display: inline-flex; align-items: center; min-block-size: var(--rq-h); padding: 0 14px; margin-block-end: -1px; border: 0; border-block-end: 2px solid transparent; background: transparent; color: var(--rq-text-2); font-weight: var(--rq-fw-medium); border-radius: 0; cursor: pointer; }
.nav-tabs .nav-link:hover { color: var(--rq-text); background: var(--rq-hover); text-decoration: none; }
.nav-tabs .nav-link.active { color: var(--rq-accent-text); border-block-end-color: var(--rq-accent); background: transparent; font-weight: var(--rq-fw-semibold); }
.nav-pills { display: flex; gap: var(--rq-s-1); flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 var(--rq-s-3); }
.nav-pills .nav-link { display: inline-flex; align-items: center; min-block-size: var(--rq-h-sm); padding: 0 12px; border-radius: var(--rq-r-pill); color: var(--rq-text-2); border: 1px solid var(--rq-border); background: var(--rq-surface); cursor: pointer; }
.nav-pills .nav-link.active { background: var(--rq-accent); border-color: var(--rq-accent); color: var(--rq-on-accent); }
.pagination { display: flex; gap: 4px; padding: 0; list-style: none; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--rq-h-sm); block-size: var(--rq-h-sm); padding-inline: 8px; border: 1px solid var(--rq-border); border-radius: var(--rq-r-md); background: var(--rq-surface); color: var(--rq-text-2); }
.page-item.active .page-link { background: var(--rq-accent); border-color: var(--rq-accent); color: var(--rq-on-accent); }
.list-group { border-radius: var(--rq-r-lg); border: 1px solid var(--rq-border); overflow: hidden; padding: 0; margin: 0; list-style: none; }
.list-group-item { padding: var(--rq-s-3) var(--rq-s-4); background: var(--rq-surface); color: var(--rq-text); border: 0; border-block-end: 1px solid var(--rq-border); }
.list-group-item:last-child { border-block-end: 0; }
.progress { block-size: 8px; background: var(--rq-sunken); border-radius: var(--rq-r-pill); overflow: hidden; }
.progress-bar { background: var(--rq-accent); }
.spinner-border { border-color: var(--rq-accent) var(--rq-accent) var(--rq-accent) transparent; }
.tooltip { --bs-tooltip-bg: var(--rq-text); --bs-tooltip-color: var(--rq-bg); --bs-tooltip-font-size: var(--rq-fs-xs); }
.popover { --bs-popover-bg: var(--rq-surface); --bs-popover-border-color: var(--rq-border); --bs-popover-body-color: var(--rq-text); --bs-popover-header-bg: var(--rq-surface-2); --bs-popover-header-color: var(--rq-text); box-shadow: var(--rq-shadow-pop); }
.breadcrumb { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.accordion-item { background: var(--rq-surface); border: 1px solid var(--rq-border); }
.accordion-button { background: var(--rq-surface); color: var(--rq-text); min-block-size: var(--rq-h-lg); box-shadow: none; }
.accordion-button:not(.collapsed) { background: var(--rq-accent-soft); color: var(--rq-accent-text); box-shadow: none; }

/* Misc layout helpers that pages rely on */
.rq-form-grid, .rq-admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--rq-s-3); }
.rq-admin-field-full { grid-column: 1 / -1; }
.rq-admin-actions { display: flex; flex-wrap: wrap; gap: var(--rq-s-2); }
.rq-empty { padding: var(--rq-s-8) var(--rq-s-4); text-align: center; color: var(--rq-muted); }

/* Touch targets */
@media (max-width: 768px) {
  .btn, .form-control, .form-select, .rq-icon-btn { min-block-size: var(--rq-h-touch); }
  .btn-sm, .form-control-sm, .form-select-sm { min-block-size: var(--rq-h-touch); }
  .rq-icon-btn { inline-size: var(--rq-h-touch); block-size: var(--rq-h-touch); }
  .modal-body, .modal-header, .modal-footer { padding-inline: var(--rq-s-4); }
}

@media print {
  body { background: var(--rq-surface); color: var(--rq-text); }
}

/* ---- Password reveal (injected by password-toggle.js) ---- */
.rq-password-field { position: relative; display: block; inline-size: 100%; }
.rq-password-field > .form-control { padding-inline-end: 44px; }
.rq-password-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 4px; transform: translateY(-50%); display: grid; place-items: center; inline-size: 36px; block-size: 32px; padding: 0; border: 0; border-radius: var(--rq-r-md); background: transparent; color: var(--rq-muted); cursor: pointer; }
.rq-password-toggle:hover { background: var(--rq-hover); color: var(--rq-text); }
.rq-password-toggle svg { inline-size: 18px; block-size: 18px; }
.rq-password-toggle svg path, .rq-password-toggle svg circle { fill: none; }

/* c1_f44: header cells follow the alignment of the body cells beneath them (rq-table-align.js sets data-rq-align on <th>/<td>; EJ2 grids use headerTextAlign from rq-grid.js).
   Numeric columns sit at the inline end, text columns at the inline start. Amounts keep a left-to-right reading order inside the cell so "20.000 KWD" does not flip in RTL. */
table > * > tr > th[data-rq-align="end"], table > * > tr > td[data-rq-align="end"] { text-align: end; }
table > * > tr > th[data-rq-align="center"], table > * > tr > td[data-rq-align="center"] { text-align: center; }
table > * > tr > th[data-rq-align="start"] { text-align: start; }
table > * > tr > td[data-rq-num] { font-variant-numeric: tabular-nums; direction: ltr; text-align: right; unicode-bidi: isolate; }
html[dir="rtl"] table > * > tr > td[data-rq-num] { text-align: left; }
@media (max-width: 760px) { .rq-stack-table > * > tr > td[data-rq-num] { direction: inherit; text-align: end; } }

/* DESIGN-007: directional glyphs inside buttons point along the reading direction: mirrored in RTL (prev / next, back / forward). Same value as the page level flips, so those stay idempotent; opt out with .rq-no-flip */
[dir="rtl"] .btn > i.fa-chevron-left:not(.rq-no-flip), [dir="rtl"] .btn > i.fa-chevron-right:not(.rq-no-flip),
[dir="rtl"] .btn > i.fa-angle-left:not(.rq-no-flip), [dir="rtl"] .btn > i.fa-angle-right:not(.rq-no-flip),
[dir="rtl"] .btn > i.fa-arrow-left:not(.rq-no-flip), [dir="rtl"] .btn > i.fa-arrow-right:not(.rq-no-flip),
[dir="rtl"] .btn > i.fa-arrow-left-long:not(.rq-no-flip), [dir="rtl"] .btn > i.fa-arrow-right-long:not(.rq-no-flip) { transform: scaleX(-1); }