/* ════════════════════════════════════════════════════════════════
   styles-redesign.css — طبقة التصميم المُحسّنة (Tathmeen Trust)
   تُحمَّل بعد styles.css. طبقة عامة تلمس كل الشاشات:
   1) خط IBM Plex   2) تليين عام (زوايا/حدود/مساحات)
   3) تليين تقسيم دخول الشركات   4) flagship دخول الأفراد
   ترتكز على هوية المشروع: teal #006c62 · navy #16213b · ذهبي #af7a22.
   ════════════════════════════════════════════════════════════════ */

:root {
  --brand: #006c62;
  --brand-strong: #0a5a52;
  --brand-tint: #e8f4f1;
  --ink-900: #11203b;
  --gold: #af7a22;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --r-lg: 22px;
  --r-md: 16px;

  /* ── تليين عام: زوايا أنعم + حدود أخف (يلمس كل الشاشات) ── */
  --radius: 14px;           /* كان 10px — زوايا أنعم في كل المكوّنات */
  --line: #e7edf2;          /* كان #d8e2e8 — حدود أخف، أقل "صلابة" */
  --line-strong: #d6dfe7;
}

/* ════ 1) الخط: IBM Plex في كل مكان ════ */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, a, label, strong, small, div, td, th {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════ 2) تليين عام للأسطح الصندوقية ════ */
/* بطاقات/حاويات شائعة: ظل ناعم بدل الحدّ الحاد، زوايا أنعم */
.card,
.panel,
.role-section .surface,
.stat-card,
.list-card,
.data-card {
  border-radius: var(--r-md);
}

/* ════ 3) تليين دخول الشركات/الأدمن (auth-split الصلب) ════ */
.auth-split {
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(17, 32, 59, 0.12), 0 2px 8px rgba(17, 32, 59, 0.05);
  min-height: 520px;
}

/* تدرّج teal أهدأ وأرقى بدل المشبع الغامق */
.auth-split__brand {
  background: linear-gradient(155deg, #0a5a52 0%, var(--brand) 55%, #0f8f80 100%);
  padding: 48px 44px;
}

.auth-split__brand-title { letter-spacing: -0.02em; }

.auth-split__logo { border-radius: 12px; }

/* أزرار الدخول المؤسسي: حالات أوضح + زوايا أنعم */
.auth-split__form .form__actions button,
.auth-card--web .form__actions button {
  border-radius: var(--r-md);
}

/* ════ 4) flagship — دخول الأفراد ════ */
.individual-app:has(.individual-auth) {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0, 108, 98, 0.07), transparent 60%),
    #f4f7f8;
}
.individual-app__surface:has(.individual-auth) { justify-content: center; }

.individual-auth {
  gap: 22px;
  width: min(100%, 384px);
  margin-inline: auto;
  padding: 8px 4px 4px;
  animation: to-auth-rise 620ms var(--ease-out) both;
}

.individual-auth .individual-brand-card { gap: 18px; }
.individual-auth .individual-brand-card__panel {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 26px;
  background: linear-gradient(160deg, #ffffff, #f3f8f7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 40px rgba(0,108,98,0.16), 0 2px 6px rgba(17,32,59,0.06);
  display: grid; place-items: center; isolation: isolate;
}
.individual-auth .individual-brand-card__panel::before {
  content: ""; position: absolute; inset: 7px; border-radius: 20px;
  border: 1px solid rgba(0,108,98,0.18); z-index: -1;
}
.individual-auth .individual-brand-card__panel img { width: 58px; height: 58px; }

.individual-auth .individual-brand-copy { gap: 8px; }
.individual-auth .individual-brand-copy h1 {
  color: var(--ink-900); font-size: clamp(1.7rem, 6vw, 2.05rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.individual-auth .individual-brand-copy p {
  color: #5b7c72; font-size: 0.98rem; font-weight: 500; line-height: 1.6; max-width: 30ch;
}

.individual-auth .individual-auth-form { gap: 14px; width: 100%; }
.individual-auth .individual-field span { color: #8593a8; }

.individual-auth .individual-phone-field,
.individual-auth .individual-field input {
  min-height: 58px; border-radius: var(--r-md);
  border: 1px solid #e3e9f1; background: #fff;
  box-shadow: 0 4px 14px rgba(17,32,59,0.04);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.individual-auth .individual-phone-field { grid-template-columns: 84px minmax(0, 1fr); }
.individual-auth .individual-phone-field__prefix {
  color: var(--brand-strong); font-weight: 700;
  font-variant-numeric: tabular-nums; border-inline-end: 1px solid #eef2f7;
}
.individual-auth .individual-phone-field input { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.individual-auth .individual-phone-field:focus-within,
.individual-auth .individual-field input:focus-visible {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,108,98,0.12); outline: none;
}

.individual-auth .individual-otp-grid { gap: 8px; }
.individual-auth .individual-otp-digit {
  min-height: 58px; border-radius: 14px; border: 1px solid #e3e9f1; background: #fff;
  font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900);
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.individual-auth .individual-otp-digit:focus-visible {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,108,98,0.12); outline: none; transform: translateY(-1px);
}

.individual-auth .individual-primary-button {
  min-height: 58px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #1b2a49 0%, var(--ink-900) 100%);
  box-shadow: 0 14px 30px rgba(17,32,59,0.22); letter-spacing: 0.01em;
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out), filter 160ms var(--ease-out);
}
.individual-auth .individual-primary-button--green {
  background: linear-gradient(180deg, #15897a 0%, var(--brand) 100%);
  box-shadow: 0 14px 30px rgba(0,108,98,0.26);
}
@media (hover: hover) {
  .individual-auth .individual-primary-button:hover {
    transform: translateY(-2px); box-shadow: 0 20px 38px rgba(17,32,59,0.28); filter: brightness(1.06);
  }
}
.individual-auth .individual-primary-button:active { transform: translateY(0) scale(0.99); }
.individual-auth .individual-link-button { color: var(--brand-strong); font-weight: 600; }

.individual-app__topbar .individual-lang-pill {
  border: 1px solid #e3e9f1; background: rgba(255,255,255,0.86); backdrop-filter: blur(10px);
  border-radius: 999px; font-weight: 600; color: var(--ink-900);
  transition: border-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
@media (hover: hover) {
  .individual-app__topbar .individual-lang-pill:hover { border-color: var(--brand); transform: translateY(-1px); }
}

/* ════ الحركة المنضبطة ════ */
@keyframes to-auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .individual-auth { animation: none; }
  .individual-auth * { transition: none !important; }
}


/* ═══════════════ WORKFLOW REDESIGN LAYER (9 areas, reviewed) ═══════════════ */


/* ╔══════ shared-components ══════╗ */
/* ════════════════════════════════════════════════════════════════
   shared-components — refinement layer (append to styles-redesign.css)
   Scope: shared building blocks only (navbar, sidebar, buttons, fields,
   cards, tables, badges, pills, chips, empty states).
   Goal: soften every rigid 1px edge into calm soft elevation, add a
   single coherent focus ring, fix RTL/LTR hardcoded directions.
   All selectors are scoped to existing shared class names — no leakage.

   REVIEW FIXES APPLIED:
   • #e3e9f1 (stray hex) → var(--line).
   • Removed bare global input/select/textarea selectors (scope leak);
     replaced with area-scoped .field / .admin-filter-bar selectors so
     focus coverage is preserved without leaking to other areas.
   ════════════════════════════════════════════════════════════════ */

/* ── Local elevation tokens (used only by the rules below) ───────── */
:root {
  --shadow-rest:  0 4px 14px rgba(17, 32, 59, 0.05);
  --shadow-lift:  0 18px 44px rgba(17, 32, 59, 0.08);
  --hairline-soft: rgba(17, 32, 59, 0.06);
  --focus-ring: 0 0 0 4px rgba(0, 108, 98, 0.12);
}

/* ════ 1) FOCUS RING — every shared interactive element ════
   Base layer only sets :focus on inputs and nothing on buttons/links.
   Contract requires :focus-visible on every interactive element.
   Scoped to this area's classes + this area's form-field containers
   (.field, .admin-filter-bar) — no bare global element selectors. */
.button:focus-visible,
.button-soft:focus-visible,
.button-ghost:focus-visible,
.button-danger:focus-visible,
.navbar__brand:focus-visible,
.navbar-lang-toggle:focus-visible,
.navbar__logout:focus-visible,
.navbar__hamburger:focus-visible,
.sidebar__link:focus-visible,
.check-card:focus-within,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.admin-filter-bar input:focus-visible,
.admin-filter-bar select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ════ 2) NAVBAR — softer base, no doubled edges ════ */
.navbar {
  border-bottom: 1px solid var(--hairline-soft);
  box-shadow: 0 1px 0 rgba(17, 32, 59, 0.03), var(--shadow-rest);
}

/* logo had BOTH a 1px border AND a shadow → doubled edge. Drop border. */
.navbar__brand { border-radius: var(--r-md); }
.navbar__logo {
  border: none;
  border-radius: 13px;
  box-shadow: var(--shadow-rest);
}

/* org identity: replace hard inline 1px dividers with breathing room */
.navbar__org {
  border-inline: 0;
  padding-inline: 22px;
  gap: 3px;
}
.navbar__org-type {
  background: var(--brand-tint);
  color: var(--brand-strong);
  letter-spacing: 0.05em;
}

/* pill controls in the navbar — calmer borders, soft hover lift */
.navbar-lang-toggle,
.navbar__logout {
  border-color: var(--hairline-soft);
  transition: background 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              transform 140ms var(--ease-out);
}
.navbar__hamburger {
  border-color: var(--hairline-soft);
  box-shadow: var(--shadow-rest);
}
@media (hover: hover) {
  .navbar-lang-toggle:hover,
  .navbar__hamburger:hover { transform: translateY(-1px); }
}

/* FIX (bug): base centered the global feedback with hardcoded left:50%.
   inset-inline-start is logical-safe; because the anchored edge flips by
   direction, the translateX sign must flip too (translateX is NOT mirrored
   by dir). This recenters identically in both LTR and RTL. */
.navbar__global-feedback {
  left: auto;
  right: auto;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
[dir="rtl"] .navbar__global-feedback { transform: translateX(50%); }

/* ════ 3) SIDEBAR — calmer drawer surface + softer backdrop ════ */
.sidebar__panel {
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-rest), var(--shadow-lift);
}
.sidebar__meta { gap: 3px; }
.sidebar__link {
  border-radius: 12px;
  transition: background 140ms var(--ease-out),
              border-color 140ms var(--ease-out),
              color 140ms var(--ease-out);
}
.sidebar__link.is-active {
  box-shadow: inset 0 0 0 1px rgba(0, 108, 98, 0.10);
}
.sidebar-backdrop { background: rgba(17, 32, 59, 0.38); }

/* ════ 4) BUTTONS — soft elevation, intentional motion ════ */
.button,
.button-soft,
.button-ghost,
.button-danger {
  border-radius: var(--r-md);
  transition: background 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              transform 140ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.button {
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(0, 108, 98, 0.16);
}
.button-ghost { border-color: var(--hairline-soft); }
.button-soft  { border-color: rgba(175, 122, 34, 0.18); }
.button-danger { border-color: rgba(179, 58, 87, 0.16); }
@media (hover: hover) {
  .button:hover { box-shadow: 0 16px 30px rgba(0, 108, 98, 0.22); }
}
.button:active,
.button-soft:active,
.button-ghost:active,
.button-danger:active { transform: translateY(0) scale(0.99); }

/* ════ 5) FIELDS / INPUTS — soft rest shadow over hard border ════
   Scoped to this area's form-field containers only. */
.field input,
.field select,
.field textarea,
.admin-filter-bar input,
.admin-filter-bar select {
  border-color: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-rest);
  transition: border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.admin-filter-bar input:focus,
.admin-filter-bar select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* ════ 6) CARDS / PANELS / SECTIONS — the core of "rigid edges" ════
   Replace the hard 1px var(--line) border with soft layered shadow. */
.card,
.table-card {
  border: none;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-rest), var(--shadow-lift);
}
.role-section { gap: 20px; }
.card__header { margin-bottom: 16px; }

/* metrics: lift from boxed tiles to calm soft cards */
.metrics { gap: 14px; }
.metric {
  border: none;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-rest);
}

/* key/value + list rows: hairline-soft fill, no hard outline */
.kv-row,
.list-card {
  border: none;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* checkbox cards: soft, tactile, with calm selected/hover states */
.check-grid { gap: 12px; }
.check-card {
  border-color: var(--hairline-soft);
  border-radius: var(--r-md);
  transition: border-color 140ms var(--ease-out),
              background 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out);
  cursor: pointer;
}
@media (hover: hover) {
  .check-card:hover { box-shadow: var(--shadow-rest); }
}
.check-card:has(input:checked) {
  border-color: rgba(0, 108, 98, 0.30);
  background: var(--brand-tint);
}

/* ════ 7) PILLS / BADGES / CHIPS — pure pill, no border ════ */
.pill,
.admin-profile-chip {
  border: none;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.status-badge { box-shadow: none; }
.org-user-perm-chip { border-color: transparent; }

/* ════ 8) TABLES — softer rows, logical text alignment ════ */
.requests-table th,
.requests-table td {
  border-bottom: 1px solid var(--hairline-soft);
  /* FIX (bug): base hardcodes text-align:right → wrong in English (LTR).
     `start` follows direction in both RTL and LTR. */
  text-align: start;
}
.requests-table th {
  background: var(--surface-soft);
}
.requests-table tbody tr {
  transition: background 140ms var(--ease-out);
}

/* admin filter bar inputs already inherit field softening above */

/* ════ 9) ORG-USER ROWS — softer dividers, calm hover ════ */
.org-user-row {
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 140ms var(--ease-out);
}
.org-user-avatar { box-shadow: var(--shadow-rest); }
.org-user-badge,
.org-user-perm-chip { box-shadow: none; }
.org-user-actions .button-soft:focus-visible,
.org-user-actions .button-ghost:focus-visible { box-shadow: var(--focus-ring); }

/* ════ 10) EMPTY STATE — soft dashed → calm filled panel ════ */
.empty-state {
  border: none;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* ════ Motion safety ════
   Scoped to this area's classes + this area's field containers.
   No bare global input/select/textarea selectors (avoids leakage). */
@media (prefers-reduced-motion: reduce) {
  .button, .button-soft, .button-ghost, .button-danger,
  .navbar-lang-toggle, .navbar__logout, .navbar__hamburger,
  .sidebar__link, .check-card, .requests-table tbody tr, .org-user-row,
  .field input, .field select, .field textarea,
  .admin-filter-bar input, .admin-filter-bar select {
    transition: none !important;
  }
}

/* ════ Responsive — 390px: tighten shared rhythm, keep soft feel ════ */
@media (max-width: 480px) {
  .card,
  .table-card { padding: 16px; }
  .role-section { gap: 16px; }
  .metrics { gap: 12px; }
}

/* ╔══════ corporate-auth ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: corporate-auth — Bank / Company / Admin login + register
   Scoped to .auth-shell / .auth-split / .auth-card (+ children) only.
   Goal: keep the split, but make it BREATHE (calm, soft, Apple-like).
   Center on narrow widths. Fix the English-LTR direction bug.
   Tokens only: --brand #006c62 / --brand-strong #0a5a52 / --brand-tint
   #e8f4f1 / --ink-900 #11203b / --gold #af7a22 / --line #e7edf2.
   ════════════════════════════════════════════════════════════════ */

/* ── Shell: more vertical air, calm centering ────────────────────── */
.auth-shell--web {
  padding-block: clamp(24px, 5vh, 56px) clamp(28px, 5vh, 56px);
}

/* ── The split panel: softer, lighter, roomier ───────────────────── */
.auth-split {
  grid-template-columns: 1.05fr 1fr;   /* brand a touch wider — calmer */
  width: min(100%, 980px);
  min-height: 560px;
  border-radius: var(--r-lg);          /* 22px — softer corners */
  /* soft elevation instead of the heavy 0 28px 72px /.14 shadow */
  box-shadow:
    0 4px 14px rgba(17, 32, 59, 0.05),
    0 22px 56px rgba(17, 32, 59, 0.09);
  background: #fff;
}

/* ── Brand side: quieter teal, generous padding, gentle rings ────── */
.auth-split__brand {
  padding: clamp(40px, 4vw, 56px) clamp(34px, 3.4vw, 52px);
  gap: clamp(26px, 3vh, 38px);
  /* calmer teal gradient, fully tokenized: brand-strong → brand
     (dropped the non-palette #0f8f80 bright stop) */
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(155deg, var(--brand-strong) 0%, var(--brand) 100%);
}

/* decorative rings: softer + logical inset so they sit correctly RTL/LTR */
.auth-split__brand::before {
  width: 420px;
  height: 420px;
  top: -170px;
  inset-inline-end: -130px;
  border-color: rgba(255, 255, 255, 0.08);
}
.auth-split__brand::after {
  width: 260px;
  height: 260px;
  bottom: -110px;
  inset-inline-start: -70px;
  border-color: rgba(255, 255, 255, 0.06);
}

.auth-split__logo-row { gap: 14px; }
.auth-split__logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.16);
}
.auth-split__platform-name { letter-spacing: -0.01em; }

.auth-split__brand-title {
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.auth-split__brand-copy {
  opacity: 0.82;
  line-height: 1.85;
  max-width: 42ch;
}

/* feature checklist: more rhythm, softer chips */
.auth-split__features { gap: 13px; }
.auth-split__feature {
  font-size: 0.9rem;
  opacity: 0.95;
}
.auth-split__feature-dot {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.20);
}

/* ── Form side: calmer spacing ───────────────────────────────────── */
.auth-split__form {
  padding: clamp(40px, 4vw, 56px) clamp(32px, 3.2vw, 48px);
  gap: clamp(20px, 2.4vh, 28px);
}
.auth-split__form-header { gap: 10px; }
.auth-split__form-header h2 { letter-spacing: -0.01em; }
.auth-split__form-header p { line-height: 1.75; }

/* ── Login/Register tabs → soft segmented control (calmer than pills) */
.auth-split__form .auth-switch,
.auth-card .auth-switch {
  gap: 4px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: 999px;
}
.auth-split__form .auth-switch .role-chip,
.auth-card .auth-switch .role-chip {
  flex: 1 1 0;
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  border-radius: 999px;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.auth-split__form .auth-switch .role-chip.is-active,
.auth-card .auth-switch .role-chip.is-active {
  background: #fff;
  color: var(--brand);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(17, 32, 59, 0.08);
}

/* ── Badge: quieter brand tint (targets only the badge, never .pill) ─ */
.auth-card__badge {
  background: var(--brand-tint);
  color: var(--brand-strong);
}

/* ── Standard auth card (admin login, OTP, forgot-pass, register) ── */
.auth-card--web {
  border-radius: var(--r-lg);
  /* match the split: soft elevation, drop the hard 1px-border feel */
  box-shadow:
    0 4px 14px rgba(17, 32, 59, 0.05),
    0 18px 44px rgba(17, 32, 59, 0.08);
}

/* ── Focus-visible on every interactive auth control (contract) ──── */
.auth-split__form .role-chip:focus-visible,
.auth-card .role-chip:focus-visible,
.auth-split__form .button:focus-visible,
.auth-split__form .button-ghost:focus-visible,
.auth-card--web .button:focus-visible,
.auth-card--web .button-ghost:focus-visible,
.auth-split__form input:focus-visible,
.auth-split__form select:focus-visible,
.auth-card--web input:focus-visible,
.auth-card--web select:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ════════════════════════════════════════════════════════════════
   ENGLISH (LTR) FIX — overrides the forced RTL on .auth-card.
   styles.css:205-213 sets `direction:rtl; text-align:right` on
   body[data-role=...] .auth-card unconditionally, so in English the
   admin/OTP/forgot/register card flows right-to-left and punctuation
   (periods, email placeholders) lands on the wrong side. Re-assert
   the document direction for auth surfaces when dir=ltr. CSS-only,
   scoped to auth classes, no markup change.
   Matches dir on EITHER <html> or <body> so the fix fires regardless
   of which element the SPA's i18n toggle sets `dir` on. Specificity
   stays one class above the base rule, so no !important is needed.
   ════════════════════════════════════════════════════════════════ */
html[dir="ltr"] body[data-role="bank"] .auth-card,
html[dir="ltr"] body[data-role="company"] .auth-card,
html[dir="ltr"] body[data-role="admin"] .auth-card,
html[dir="ltr"] .auth-split,
html[dir="ltr"] .auth-split__brand,
html[dir="ltr"] .auth-split__form,
body[dir="ltr"][data-role="bank"] .auth-card,
body[dir="ltr"][data-role="company"] .auth-card,
body[dir="ltr"][data-role="admin"] .auth-card,
body[dir="ltr"] .auth-split,
body[dir="ltr"] .auth-split__brand,
body[dir="ltr"] .auth-split__form {
  direction: ltr;
  text-align: start;
}

/* ── Narrow widths: stack the split and CENTER it (Apple-like calm) ─
   matches the existing .auth-split breakpoint (max-width:680px). ── */
@media (max-width: 680px) {
  .auth-split {
    width: min(100%, 480px);
    min-height: 0;
    margin-inline: auto;
  }
  .auth-split__brand {
    min-height: 0;
    padding: 30px 26px;
    gap: 18px;
    text-align: center;
    align-items: center;
  }
  .auth-split__logo-row { justify-content: center; }
  /* brand body/features are display:none here (base rule) — keep it calm */
  .auth-split__form {
    padding: 30px 24px;
    gap: 20px;
  }
}

/* ── Reduced-motion: drop the tab transition ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth-split__form .auth-switch .role-chip,
  .auth-card .auth-switch .role-chip {
    transition: none;
  }
}


/* ╔══════ individual-app ══════╗ */
/* ════════════════════════════════════════════════════════════════
   styles-redesign.css — APPEND BLOCK · individual-app (post-login)
   CORRECTED: palette-only (off-palette hex -> tokens / color-mix from
   tokens), danger reds removed (fall back to base), focus-visible added
   to every interactive control, logout focus ring -> brand. CSS-ONLY.
   RTL/LTR safe (logical props). Scope: .individual-app.
   ════════════════════════════════════════════════════════════════ */

/* ---- app shell: soft phone frame + calm app background ---- */
.individual-app:not(:has(.individual-auth)) {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(0, 108, 98, 0.05), transparent 58%),
    #f4f7f8;
  border-inline: 0;
  box-shadow: 0 22px 60px rgba(17, 32, 59, 0.10);
}
@media (max-width: 760px) {
  .individual-app:not(:has(.individual-auth)) { box-shadow: none; }
}

/* topbar: lift the hard 1px divider -> soft hairline + frosted surface */
.individual-app .individual-app__topbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.1) blur(12px);
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* ---- section headers: tighter ink hierarchy, teal eyebrow ---- */
.individual-app .individual-screen-header { gap: 6px; }
.individual-app .individual-screen-header h2 {
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.individual-app .individual-screen-header p {
  color: color-mix(in srgb, var(--ink-900) 55%, transparent);
  font-weight: 600;
}
.individual-app .individual-screen-header__eyebrow {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.individual-app .individual-helper-text {
  color: color-mix(in srgb, var(--ink-900) 50%, transparent);
  font-weight: 600;
}

/* breathing room between flow/home blocks */
.individual-app .individual-flow,
.individual-app .individual-home { gap: 18px; }
.individual-app .individual-service-list,
.individual-app .individual-list,
.individual-app .individual-company-grid,
.individual-app .individual-attachment-list { gap: 12px; }

/* ════ generic card softening (services/home + flow + lists) ════ */
.individual-app .individual-service-card,
.individual-app .individual-purpose-card,
.individual-app .individual-request-card,
.individual-app .individual-report-card,
.individual-app .individual-form-card,
.individual-app .individual-summary-card,
.individual-app .individual-company-card,
.individual-app .individual-attachment-card {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(17, 32, 59, 0.05), 0 18px 44px rgba(17, 32, 59, 0.07);
}
.individual-app .individual-empty {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
  color: color-mix(in srgb, var(--ink-900) 50%, transparent);
}

/* ---- RTL/LTR fix: direction follows the section dir, not forced rtl. ---- */
.individual-app .individual-service-card,
.individual-app .individual-purpose-card,
.individual-app .individual-report-card__footer,
.individual-app .individual-report-card__meta {
  direction: inherit;
  text-align: start;
}
.individual-app .individual-field,
.individual-app .individual-screen-header,
.individual-app .individual-form-card__header--rtl { text-align: start; }
.individual-app .individual-field input,
.individual-app .individual-field textarea { text-align: start; }

/* ════ SERVICES / HOME ════ */
.individual-app .individual-service-card {
  padding: 16px 18px;
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) {
  .individual-app .individual-service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(17, 32, 59, 0.06), 0 24px 52px rgba(17, 32, 59, 0.10);
  }
}
.individual-app .individual-service-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}
.individual-app .individual-service-card__icon {
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: var(--r-md);
}
.individual-app .individual-service-card__content strong { color: var(--ink-900); }
.individual-app .individual-service-card.is-selected {
  border-color: rgba(0, 108, 98, 0.30);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-tint) 140%);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.08), 0 18px 44px rgba(17, 32, 59, 0.08);
}
.individual-app .individual-service-card.is-selected .individual-service-card__icon {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 108, 98, 0.22);
}
/* chevron: face the right way in both directions (RTL points start) */
.individual-app .individual-service-card__arrow {
  color: color-mix(in srgb, var(--ink-900) 30%, transparent);
}
.individual-app[dir="rtl"] .individual-service-card__arrow .icon { transform: scaleX(-1); }

/* home tracker banner -> brand-ink gradient, calmer */
.individual-app .individual-status-banner {
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--brand-strong) 0%, color-mix(in srgb, var(--brand-strong) 65%, var(--ink-900)) 100%);
  box-shadow: 0 18px 44px rgba(10, 90, 82, 0.24);
}
.individual-app .individual-status-banner strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.individual-app .individual-status-banner span { color: rgba(255, 255, 255, 0.78); }
.individual-app .individual-status-banner__meta span {
  background: rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}

/* ════ PURPOSE / COMPANY pick cards (create-flow) ════ */
.individual-app .individual-purpose-card {
  padding: 16px;
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.individual-app .individual-purpose-card:focus-visible,
.individual-app .individual-company-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}
.individual-app .individual-purpose-card__icon,
.individual-app .individual-company-card__logo {
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: var(--r-md);
}
.individual-app .individual-purpose-card.is-selected,
.individual-app .individual-company-card.is-selected {
  border-color: rgba(0, 108, 98, 0.30);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-tint) 160%);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.08), 0 16px 38px rgba(17, 32, 59, 0.08);
}
.individual-app .individual-purpose-card.is-selected .individual-purpose-card__icon,
.individual-app .individual-company-card.is-selected .individual-company-card__logo--fallback {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
}
.individual-app .individual-purpose-card.is-selected strong,
.individual-app .individual-purpose-card.is-selected span { color: var(--ink-900); }
.individual-app .individual-company-card { padding: 14px; }
.individual-app .individual-company-card__content strong { color: var(--ink-900); }
.individual-app .individual-company-card__meta strong { color: var(--ink-900); }
.individual-app .individual-company-card__meta span { color: var(--brand); }

/* ════ FORM CARDS + fields (parties / asset / company) ════ */
.individual-app .individual-form-card,
.individual-app .individual-summary-card { padding: 18px; border-radius: var(--r-lg); }
.individual-app .individual-form-card__header { gap: 12px; }
.individual-app .individual-form-card__header strong,
.individual-app .individual-summary-card__row strong { color: var(--ink-900); }
.individual-app .individual-field span {
  color: color-mix(in srgb, var(--ink-900) 55%, transparent);
  font-weight: 700;
}
.individual-app .individual-field input,
.individual-app .individual-field textarea,
.individual-app .individual-field select {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(17, 32, 59, 0.04);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.individual-app .individual-field input:focus-visible,
.individual-app .individual-field textarea:focus-visible,
.individual-app .individual-field select:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ════ ATTACHMENTS step ════ */
.individual-app .individual-attachment-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 16px;
}
.individual-app .individual-attachment-card.is-filled {
  border-color: rgba(0, 108, 98, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-tint) 170%);
  box-shadow: 0 0 0 3px rgba(0, 108, 98, 0.07), 0 12px 30px rgba(17, 32, 59, 0.06);
}
.individual-app .individual-attachment-card__meta strong { color: var(--ink-900); }
.individual-app .individual-attachment-card__meta span { color: var(--brand); }
.individual-app .individual-attachment-card__status .icon { color: var(--brand); }
.individual-app .individual-attachment-card__actions .individual-secondary-button {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: none;
}
/* upload tiles (non-vehicle): teal dashed affordance */
.individual-app .individual-upload-tile {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: #ffffff;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) {
  .individual-app .individual-upload-tile:hover {
    border-color: var(--brand);
    background: var(--brand-tint);
  }
}
.individual-app .individual-upload-tile:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ---- primary / secondary buttons: align to login (ink + teal) ---- */
.individual-app .individual-primary-button {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #1b2a49 0%, var(--ink-900) 100%);
  box-shadow: 0 14px 30px rgba(17, 32, 59, 0.20);
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out), filter 160ms var(--ease-out);
}
.individual-app .individual-primary-button--green {
  background: linear-gradient(180deg, #15897a 0%, var(--brand) 100%);
  box-shadow: 0 14px 30px rgba(0, 108, 98, 0.26);
}
@media (hover: hover) {
  .individual-app .individual-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(17, 32, 59, 0.26);
    filter: brightness(1.05);
  }
}
.individual-app .individual-primary-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}
.individual-app .individual-secondary-button {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  color: var(--brand-strong);
  box-shadow: 0 4px 14px rgba(17, 32, 59, 0.04);
}
.individual-app .individual-secondary-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ════ REQUESTS list ════ */
.individual-app .individual-request-card { padding: 16px 18px; border-radius: var(--r-lg); }
.individual-app .individual-request-card__ref { color: var(--brand); }
.individual-app .individual-request-card strong { color: var(--ink-900); }
.individual-app .individual-request-card__actions { gap: 8px; }
.individual-app .individual-chip-button {
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  transition: transform 120ms var(--ease-out), filter 140ms var(--ease-out);
}
@media (hover: hover) {
  .individual-app .individual-chip-button:hover { filter: brightness(0.97); }
}
.individual-app .individual-chip-button--dark {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
}
/* NOTE: .individual-chip-button--danger left to base styling — this layer
   does not introduce an off-palette red. */
.individual-app .individual-chip-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}
/* status pills: keep semantic hues, success -> brand teal family */
.individual-app .individual-status-pill { border-radius: 999px; font-weight: 800; }
.individual-app .individual-status-pill--success { background: var(--brand-tint); color: var(--brand-strong); }

/* ════ REPORTS list ════ */
.individual-app .individual-report-card { padding: 16px; border-radius: var(--r-lg); }
.individual-app .individual-report-card__meta strong { color: var(--ink-900); }
.individual-app .individual-report-card__footer { border-top: 1px solid var(--line); padding-top: 12px; }
.individual-app .individual-report-card .individual-chip-button--dark {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid rgba(0, 108, 98, 0.28);
}

/* ════ ACCOUNT ════ */
.individual-app .individual-account__avatar {
  background: var(--brand-tint);
  color: var(--brand);
  box-shadow: 0 10px 28px rgba(0, 108, 98, 0.12);
}
.individual-app .individual-account strong { color: var(--ink-900); letter-spacing: -0.01em; }
.individual-app .individual-account span,
.individual-app .individual-account small {
  color: color-mix(in srgb, var(--ink-900) 50%, transparent);
}
/* logout: danger color left to base; this layer only softens shape + ring */
.individual-app .individual-logout-button {
  border-radius: var(--r-md);
  background: #fff;
}
.individual-app .individual-logout-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ════ SUCCESS state ════ */
.individual-app .individual-success { gap: 16px; }
.individual-app .individual-success__icon {
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 18px 44px rgba(0, 108, 98, 0.26);
  animation: ind-success-pop 480ms var(--ease-out) both;
}
.individual-app .individual-success h2 { color: var(--ink-900); letter-spacing: -0.02em; }
@keyframes ind-success-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ════ STEP PROGRESS (topbar) ════ */
.individual-app .individual-step-progress__dot { background: var(--line-strong); }
.individual-app .individual-step-progress__dot.is-done { background: rgba(0, 108, 98, 0.40); }
.individual-app .individual-step-progress__dot.is-active { background: var(--brand); }

/* ════ BOTTOM NAV ════ */
.individual-app .individual-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.1) blur(12px);
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  border-top: 1px solid var(--line);
  border-inline: 0;
  box-shadow: 0 -8px 28px rgba(17, 32, 59, 0.05);
}
.individual-app .individual-bottom-nav__item {
  color: color-mix(in srgb, var(--ink-900) 45%, transparent);
  border-radius: var(--r-md);
}
.individual-app .individual-bottom-nav__item.is-active { color: var(--brand); }
.individual-app .individual-bottom-nav__item.is-active .icon {
  filter: drop-shadow(0 2px 6px rgba(0, 108, 98, 0.35));
}
.individual-app .individual-bottom-nav__item:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .individual-app .individual-service-card,
  .individual-app .individual-purpose-card,
  .individual-app .individual-primary-button,
  .individual-app .individual-upload-tile,
  .individual-app .individual-chip-button { transition: none; }
  .individual-app .individual-success__icon { animation: none; }
}

/* ╔══════ admin-dashboard ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: admin-dashboard  (append to styles-redesign.css)  — REVIEWED
   Scope: body[data-role="admin"] + structural admin classes only.
   These classes (.metric/.table-card/.requests-table/.admin-*) do NOT
   appear on the admin LOGIN screen, so this layer cannot leak there or
   to other roles. Loads after styles.css → wins the line-3738/4094 rules.
   Palette only (all stray hex replaced with existing base tokens):
   --brand/#006c62, --brand-strong/#0a5a52, --brand-tint/#e8f4f1,
   --ink-900, --surface/--surface-soft/--surface-strong, --ink-soft,
   --muted, hairline --line, --gold. Soft elevation over hard borders.
   RTL/LTR-safe (logical props only). Zero !important.
   ════════════════════════════════════════════════════════════════ */

/* ── Local soft-elevation tokens (scoped; no global leak) ── */
body[data-role="admin"] .role-section--admin {
  --tt-shadow-rest: 0 4px 14px rgba(17, 32, 59, .05);
  --tt-shadow-rise: 0 18px 44px rgba(17, 32, 59, .08);
  --tt-focus-ring: 0 0 0 4px rgba(0, 108, 98, .12);
}

/* ════ 1) STAT / METRIC CARDS — soft, spacious, scannable ════ */
/* Replaces hard 1px border + multi-color nth-child accents (palette
   violation: base uses --blue/--rose/--violet) with calm elevation +
   brand/gold-only accent. */
body[data-role="admin"] .metrics {
  gap: 14px;
}

body[data-role="admin"] .metric {
  min-height: 110px;
  padding: 20px 22px;
  border: 0;                                  /* drop rigid hairline */
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--tt-shadow-rest);
  transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}

@media (hover: hover) {
  body[data-role="admin"] .metric:hover {
    box-shadow: var(--tt-shadow-rise);
    transform: translateY(-2px);
  }
}

/* Top accent bar: brand by default, gold for every 4th — calm 2-tone
   rhythm instead of blue/rose/violet off-palette colors. */
body[data-role="admin"] .metric::before {
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}
body[data-role="admin"] .metric:nth-child(2)::before,
body[data-role="admin"] .metric:nth-child(3)::before,
body[data-role="admin"] .metric:nth-child(5)::before,
body[data-role="admin"] .metric:nth-child(6)::before,
body[data-role="admin"] .metric:nth-child(7)::before {
  background: var(--brand);
}
body[data-role="admin"] .metric:nth-child(4)::before,
body[data-role="admin"] .metric:nth-child(8)::before {
  background: var(--gold);
}

body[data-role="admin"] .metric span {
  color: var(--muted);                        /* was #6e7d8f (stray) */
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;                       /* calmer than ALL-CAPS */
}
body[data-role="admin"] .metric strong {
  color: var(--ink-900);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;         /* aligned figures/currency */
}
body[data-role="admin"] .metric small {
  color: var(--muted);                        /* was #8593a8 (stray) */
  font-size: .8rem;
  line-height: 1.5;
}

/* ════ 2) TABLE CARDS & HERO — elevation, breathing room ════ */
body[data-role="admin"] .table-card,
body[data-role="admin"] .role-section--admin > .card {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--tt-shadow-rest);
  padding: 22px;
}

body[data-role="admin"] .section__hero {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--tt-shadow-rest);
  padding: 26px;
  background:
    linear-gradient(135deg, var(--brand-tint) 0%, rgba(255, 255, 255, .96) 56%),
    var(--surface);
}
body[data-role="admin"] .section__hero h1 {
  color: var(--ink-900);
  letter-spacing: -.02em;
}

/* Hero notice: was off-palette blue (--blue-soft at styles.css:432).
   Re-tone to brand tint, soft, borderless. */
body[data-role="admin"] .section__notice {
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand-strong);
  box-shadow: inset 0 0 0 1px rgba(0, 108, 98, .08);
}
body[data-role="admin"] .section__notice strong {
  color: var(--brand-strong);
}

body[data-role="admin"] .card__header {
  margin-bottom: 16px;
}
body[data-role="admin"] .card__eyebrow {
  color: var(--brand);
  letter-spacing: .04em;
}

/* ════ 3) TABLES — softer rows, fewer hard dividers, LTR-safe ════ */
/* FIX: base .requests-table hardcodes text-align:right (styles.css:1234),
   which keeps cells right-aligned in English (LTR). Use logical start. */
body[data-role="admin"] .requests-table th,
body[data-role="admin"] .requests-table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
}

body[data-role="admin"] .requests-table th {
  background: var(--surface-soft);            /* was #fbfdfe (stray) */
  color: var(--muted);                        /* was #6e7d8f (stray) */
  border-bottom: 1px solid var(--line);       /* was 2px — lighter rhythm */
  text-transform: none;                       /* calmer headers */
  letter-spacing: .01em;
  font-weight: 800;
}

/* Last row: no trailing divider (cleaner card edge). */
body[data-role="admin"] .requests-table tbody tr:last-child td {
  border-bottom: 0;
}

body[data-role="admin"] .requests-table tbody tr {
  transition: background .14s var(--ease-out);
}
body[data-role="admin"] .requests-table tbody tr:hover {
  background: rgba(0, 108, 98, .035);
}

/* Numeric / currency columns read better with tabular figures. */
body[data-role="admin"] .requests-table td {
  font-variant-numeric: tabular-nums;
}

/* ════ 4) PILLS, STATUS BADGES, META — quiet & legible ════ */
/* Record-count pill: gentle brand tint instead of flat gray (.pill is
   overridden to gray at styles.css:1150). */
body[data-role="admin"] .card__header .pill {
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-weight: 800;
}

/* Neutral status badge: soft surface chip (most admin badges are the
   plain neutral variant). --success/--warning modifiers keep their tone. */
body[data-role="admin"] .status-badge:not(.status-badge--success):not(.status-badge--warning):not([class*="invoice-status-badge"]) {
  background: var(--surface-strong);          /* was #eef4f7 (stray) */
  color: var(--ink-soft);                     /* was #405063 (stray) */
  font-weight: 800;
}

body[data-role="admin"] .table-meta {
  color: var(--muted);                        /* was #8593a8 (stray) */
  font-size: .72rem;
  font-weight: 700;
}

/* ════ 5) ACTION BUTTONS — softer, with proper focus rings ════ */
/* Soften the boxy in-table buttons; add a11y focus state that is
   missing project-wide for these controls. */
body[data-role="admin"] .table-actions .button-soft,
body[data-role="admin"] .table-actions .button-ghost,
body[data-role="admin"] .table-actions .button-danger {
  border-radius: 999px;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
              color .16s var(--ease-out), box-shadow .16s var(--ease-out),
              transform .16s var(--ease-out);
}

body[data-role="admin"] .button-soft:focus-visible,
body[data-role="admin"] .button-ghost:focus-visible,
body[data-role="admin"] .button-danger:focus-visible,
body[data-role="admin"] .pill:focus-visible,
body[data-role="admin"] .admin-filter-bar input:focus-visible,
body[data-role="admin"] .admin-filter-bar select:focus-visible,
body[data-role="admin"] .admin-inline-form-card input:focus-visible,
body[data-role="admin"] .admin-inline-form-card select:focus-visible,
body[data-role="admin"] .pricing-settings-row input:focus-visible {
  box-shadow: var(--tt-focus-ring);
  outline: none;
}

/* Keep nowrap action clusters from cramping on admin tables. */
body[data-role="admin"] .requests-table--admin .table-actions {
  gap: 6px;
}

/* ════ 6) FILTER BAR — calm search/status controls ════ */
body[data-role="admin"] .admin-filter-bar {
  margin-bottom: 16px;
}
body[data-role="admin"] .admin-filter-bar__grid {
  gap: 14px;
}
body[data-role="admin"] .admin-filter-bar input,
body[data-role="admin"] .admin-filter-bar select {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(17, 32, 59, .04);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
body[data-role="admin"] .admin-filter-bar input:focus-within,
body[data-role="admin"] .admin-filter-bar input:focus,
body[data-role="admin"] .admin-filter-bar select:focus {
  border-color: var(--brand);
}

/* ════ 7) SETTINGS / INLINE-FORM CARDS — match soft surface ════ */
body[data-role="admin"] .admin-inline-form-card {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--tt-shadow-rest);
}
body[data-role="admin"] .pricing-settings-row {
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-soft);            /* was #f8fafb (stray) */
  box-shadow: inset 0 0 0 1px rgba(17, 32, 59, .04);
}
body[data-role="admin"] .pricing-settings-row__service strong {
  color: var(--ink-900);
}

/* ════ 8) EMPTY STATE — softer dashed frame ════ */
body[data-role="admin"] .empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);            /* was #f8fafb (stray) */
  color: var(--muted);                        /* was #8593a8 (stray) */
}

/* ════ 9) RESPONSIVE — align with existing 760px breakpoint ════ */
@media (max-width: 760px) {
  body[data-role="admin"] .table-card,
  body[data-role="admin"] .role-section--admin > .card,
  body[data-role="admin"] .section__hero {
    padding: 18px;
  }
  body[data-role="admin"] .metric {
    padding: 16px 18px;
    min-height: 96px;
  }
  body[data-role="admin"] .metric strong {
    font-size: 1.5rem;
  }
}

/* ════ Motion guard ════ */
@media (prefers-reduced-motion: reduce) {
  body[data-role="admin"] .metric,
  body[data-role="admin"] .requests-table tbody tr,
  body[data-role="admin"] .table-actions .button-soft,
  body[data-role="admin"] .table-actions .button-ghost,
  body[data-role="admin"] .table-actions .button-danger,
  body[data-role="admin"] .admin-filter-bar input,
  body[data-role="admin"] .admin-filter-bar select {
    transition: none;
  }
  body[data-role="admin"] .metric:hover {
    transform: none;
  }
}

/* ╔══════ bank-dashboard ══════╗ */
/* ════════════════════════════════════════════════════════════════
   BANK DASHBOARD AREA — Apple-like refinement layer  (CORRECTED)
   Scoped to body[data-role="bank"] so it never leaks to other roles.
   (body.dataset.role is set in handlers/actions.js:21.)
   Screens: dashboard · requests · create-request · approved-companies
            · users · branches. All wrap in role-section--bank.
   Contract: brand teal #006c62, ink #11203b, gold #af7a22,
   surface #fff, app-bg #f4f7f8, hairline #e7edf2. Soft shadows over
   hard borders. Logical props only (RTL/LTR safe). r-md=16/r-lg=22/pill=999.

   FIXES APPLIED vs. submitted draft:
   • #5b6b80 (hero p) -> var(--ink-soft)            [stray hex removed]
   • bank-slot.is-filled gradient #f4fbf8/#edf7f2 -> var(--brand-tint)  [stray hex removed]
   • .bank-slot__pick:focus-within -> .bank-slot__controls:focus-within
     .bank-slot__pick  [focus ring was dead: input is a hidden SIBLING]
   ════════════════════════════════════════════════════════════════ */

/* ── Calmer vertical rhythm for every bank screen ── */
body[data-role="bank"] .role-section--bank {
  gap: 22px;
}

/* ─────────────────────────────────────────────────────────────
   1) HERO — softer panel, more breathing room, no hard 1px border
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .section__hero {
  padding: clamp(22px, 3vw, 30px);
  border: 0;
  border-radius: var(--r-lg);
  background:
    radial-gradient(135% 120% at 100% -20%, rgba(0, 108, 98, .10), transparent 58%),
    var(--surface);
  box-shadow: 0 4px 14px rgba(17, 32, 59, .05), 0 18px 44px rgba(17, 32, 59, .07);
}
body[data-role="bank"] .section__hero h1 {
  color: var(--ink-900);
  letter-spacing: -.02em;
}
body[data-role="bank"] .section__hero p {
  color: var(--ink-soft); /* was #5b6b80 — off-palette stray; use existing body-copy token */
  line-height: 1.7;
}
/* Notice card: drop the rigid blue border for a soft tinted chip */
body[data-role="bank"] .section__notice {
  border: 0;
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  box-shadow: inset 0 0 0 1px rgba(0, 108, 98, .08);
}
body[data-role="bank"] .section__notice strong { color: var(--brand-strong); }

/* ─────────────────────────────────────────────────────────────
   2) METRIC CARDS — keep the accent bar, lift the shadow, soften edge
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .metrics { gap: 14px; }
body[data-role="bank"] .metric {
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(17, 32, 59, .05), 0 14px 34px rgba(17, 32, 59, .06);
}
body[data-role="bank"] .metric:hover {
  box-shadow: 0 6px 18px rgba(17, 32, 59, .07), 0 22px 50px rgba(17, 32, 59, .10);
}
body[data-role="bank"] .metric strong { color: var(--ink-900); }

/* ─────────────────────────────────────────────────────────────
   3) CARDS / SPLIT / KV / LIST — unify on soft elevation
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .card,
body[data-role="bank"] .table-card {
  border: 0;
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 22px);
  box-shadow: 0 4px 14px rgba(17, 32, 59, .05), 0 18px 44px rgba(17, 32, 59, .07);
}
body[data-role="bank"] .card__header { margin-bottom: 16px; }
body[data-role="bank"] .card__header h3 { color: var(--ink-900); letter-spacing: -.01em; }

/* kv rows + list cards: inner surface tiles, hairline only as faint inset */
body[data-role="bank"] .kv-row,
body[data-role="bank"] .list-card {
  border: 0;
  border-radius: var(--r-md);
  background: #f4f7f8; /* = contract app-bg value */
  box-shadow: inset 0 0 0 1px var(--line);
}
body[data-role="bank"] .kv-row__value { color: var(--ink-900); }
body[data-role="bank"] .list-card strong { color: var(--ink-900); }

/* Pill / count chip */
body[data-role="bank"] .pill {
  background: var(--brand-tint);
  color: var(--brand-strong);
  border-radius: 999px;
}

/* BUG FIX: .card__badge (branch-list count) has NO rule in the codebase
   (rendered at components.js:830). Give it the pill treatment. */
body[data-role="bank"] .card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-block-start: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-size: .8rem;
  font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────
   4) FILTER BAR + FORM CONTROLS — soft inputs, brand focus ring
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .admin-filter-bar { margin-bottom: 16px; }
body[data-role="bank"] .field label,
body[data-role="bank"] .field__label { color: var(--ink-900); }

body[data-role="bank"] input,
body[data-role="bank"] select,
body[data-role="bank"] textarea {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(17, 32, 59, .03);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
body[data-role="bank"] input:focus,
body[data-role="bank"] select:focus,
body[data-role="bank"] textarea:focus,
body[data-role="bank"] input:focus-visible,
body[data-role="bank"] select:focus-visible,
body[data-role="bank"] textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, .12);
  outline: none;
}

/* check-grid cards (permissions selector on users / forms) */
body[data-role="bank"] .check-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
body[data-role="bank"] .check-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), 0 4px 14px rgba(0, 108, 98, .08);
  color: var(--brand-strong);
}
/* keyboard focus on the hidden checkbox bubbles to the card */
body[data-role="bank"] .check-card:focus-within {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, .12);
  outline: none;
}

/* Universal focus-visible for interactive bank elements (buttons/links) */
body[data-role="bank"] .button:focus-visible,
body[data-role="bank"] .button-soft:focus-visible,
body[data-role="bank"] .button-ghost:focus-visible,
body[data-role="bank"] .individual-company-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, .12);
  outline: none;
}

/* ─────────────────────────────────────────────────────────────
   5) TABLES (requests list + branches list) — calmer, RTL/LTR safe
   ───────────────────────────────────────────────────────────── */
/* BUG FIX: base .requests-table th/td hardcode text-align:right (styles.css:1234,
   RTL only). Use logical 'start' so English/LTR mode aligns correctly. */
body[data-role="bank"] .requests-table th,
body[data-role="bank"] .requests-table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
}
body[data-role="bank"] .requests-table th {
  background: #f4f7f8; /* = contract app-bg value */
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
body[data-role="bank"] .requests-table tbody tr:hover {
  background: rgba(0, 108, 98, .035);
}
body[data-role="bank"] .requests-table td strong { color: var(--ink-900); }
/* round the table viewport so it sits cleanly inside the soft card */
body[data-role="bank"] .table-wrap,
body[data-role="bank"] .table-scroll {
  border-radius: var(--r-md);
}

/* status badge — neutral pill */
body[data-role="bank"] .status-badge {
  background: var(--surface-strong);
  color: var(--ink-soft);
  border-radius: 999px;
}

/* BUG FIX: .table-empty (org-users empty state, components.js:770) has NO rule —
   renders as bare inline text. Give it the calm empty-state treatment. */
body[data-role="bank"] .table-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 20px;
  border-radius: var(--r-md);
  background: #f4f7f8; /* = contract app-bg value */
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}
body[data-role="bank"] .empty-state {
  border: 0;
  border-radius: var(--r-md);
  background: #f4f7f8; /* = contract app-bg value */
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   6) CREATE-REQUEST — attachment slots, progress, success
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .bank-slot {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(17, 32, 59, .03);
  transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
body[data-role="bank"] .bank-slot.is-filled {
  border-color: rgba(0, 108, 98, .35);
  background: var(--brand-tint); /* was #f4fbf8/#edf7f2 gradient — off-palette; use approved teal tint */
  box-shadow: 0 4px 14px rgba(0, 108, 98, .08);
}
body[data-role="bank"] .bank-slot__badge--photo { background: var(--brand-tint); color: var(--brand-strong); }
body[data-role="bank"] .bank-slot__badge--doc { background: var(--gold-soft); color: var(--gold); }
body[data-role="bank"] .bank-slot__pick {
  border-radius: 999px;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
body[data-role="bank"] .bank-slot__check { background: var(--brand); }

/* FOCUS FIX: the real file input (.bank-attachment-input) is visually hidden
   (styles.css:4210) and is a SIBLING of the label inside .bank-slot__controls
   (components.js:1841-1854). :focus-within on the label alone never fires, so we
   style the visible label via the shared parent when the input is focused. */
body[data-role="bank"] .bank-slot__controls:focus-within .bank-slot__pick {
  border-color: var(--brand);
  color: var(--brand-strong);
  box-shadow: 0 0 0 4px rgba(0, 108, 98, .12);
  outline: none;
}

body[data-role="bank"] .bank-attach-progress__track { background: var(--line); }
body[data-role="bank"] .bank-attach-progress__fill {
  background: linear-gradient(90deg, var(--brand-strong), var(--brand));
}

body[data-role="bank"] .bank-request-success {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(17, 32, 59, .05), 0 18px 44px rgba(17, 32, 59, .08);
}
body[data-role="bank"] .bank-request-success h3 { color: var(--ink-900); }

/* ─────────────────────────────────────────────────────────────
   7) APPROVED-COMPANIES grid (reuses individual-company-card)
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .individual-company-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
body[data-role="bank"] .individual-company-card {
  border: 0;
  border-radius: var(--r-lg);
  /* BUG FIX: base card hardcodes text-align:right (styles.css:2640) — logical start */
  text-align: start;
  box-shadow: 0 4px 14px rgba(17, 32, 59, .05), 0 14px 34px rgba(17, 32, 59, .06);
  /* non-interactive in the bank view (no click handler, bank.js:82) */
  cursor: default;
  transition: box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
}
body[data-role="bank"] .individual-company-card:active {
  transform: none;
  opacity: 1;
}
@media (hover: hover) {
  body[data-role="bank"] .individual-company-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(17, 32, 59, .07), 0 22px 50px rgba(17, 32, 59, .10);
  }
}
body[data-role="bank"] .individual-company-card__logo { border-radius: 14px; }
body[data-role="bank"] .individual-company-card__content strong { color: var(--ink-900); }
/* BUG FIX: __price hardcodes text-align:left (styles.css:2722) — use logical end */
body[data-role="bank"] .individual-company-card__price {
  text-align: end;
}
body[data-role="bank"] .individual-company-card__price strong { color: var(--ink-900); }
body[data-role="bank"] .individual-empty {
  border-radius: var(--r-md);
  background: #f4f7f8; /* = contract app-bg value */
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   8) USERS list (org-user rows) — softer, brand-aligned chips
   ───────────────────────────────────────────────────────────── */
body[data-role="bank"] .org-user-row {
  border-bottom: 1px solid var(--line);
}
body[data-role="bank"] .org-user-row:hover { background: #f4f7f8; } /* = contract app-bg */
body[data-role="bank"] .org-user-avatar--owner { background: var(--brand); }
body[data-role="bank"] .org-user-avatar--active { background: var(--brand-strong); }
body[data-role="bank"] .org-user-info__name { color: var(--ink-900); }
body[data-role="bank"] .org-user-badge--owner { background: var(--brand-tint); color: var(--brand-strong); }
body[data-role="bank"] .org-user-perm-chip {
  background: var(--brand-tint);
  color: var(--brand-strong);
  border: 0;
}
body[data-role="bank"] .org-user-perm-chip--full {
  background: var(--gold-soft);
  color: var(--gold);
  border: 0;
}
body[data-role="bank"] .org-user-perm-chip--none {
  background: var(--surface-strong);
  color: var(--muted);
  border: 0;
}
body[data-role="bank"] .org-user-branch-tag {
  border: 0;
  border-radius: 999px;
  background: var(--surface-strong);
}

/* ── Responsive: stays clean at 390px ── */
@media (max-width: 600px) {
  body[data-role="bank"] .role-section--bank { gap: 16px; }
  body[data-role="bank"] .section__hero { padding: 20px; }
  body[data-role="bank"] .individual-company-grid { grid-template-columns: 1fr; }
}

/* ── Honour reduced-motion: kill the nonessential lift/transition ── */
@media (prefers-reduced-motion: reduce) {
  body[data-role="bank"] .metric,
  body[data-role="bank"] .metric:hover,
  body[data-role="bank"] .individual-company-card,
  body[data-role="bank"] .individual-company-card:hover,
  body[data-role="bank"] .bank-slot {
    transition: none;
    transform: none;
  }
}

/* ╔══════ company-dashboard ══════╗ */
/* ════════════════════════════════════════════════════════════════
   5) Company (valuation-company) screens — Apple-like elevation pass
   Scoped strictly under .role-section--company so it cannot leak.
   Covers: profile (hero, panels, kv, form, assets, side), settings
   (pricing rows + institution pricing table). Dashboard/wallet/users
   reuse shared components and are intentionally left to those areas.

   REVIEW FIXES APPLIED:
   - Removed stray hex #0f8f80 (logo fallback) -> var(--brand).
   - Removed stray hex #f7fafb (x5) -> var(--brand-tint) / #fff.
   - Removed stray hex #fbfdfd (side preview) -> #fff.
   - Hardened institution-pricing-table horizontal scroll (the
     overflow-x:auto + min-width:max-content combo on grid items was
     unreliable; real fix is a markup wrapper — see note below).
   ════════════════════════════════════════════════════════════════ */

/* ── Shell rhythm: more breathing room between stacked panels ── */
.role-section--company .company-profile-shell { gap: 22px; }
.role-section--company .company-profile-layout { gap: 22px; }
.role-section--company .company-profile-main,
.role-section--company .company-profile-side { gap: 22px; }

/* ── Hero: soft elevation, calmer teal wash, no hard hairline ── */
.role-section--company .company-profile-hero {
  padding: 28px;
  border: 0;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 130% at 100% -20%, rgba(0,108,98,.10), transparent 58%),
    linear-gradient(135deg, var(--brand-tint) 0%, #ffffff 60%);
  box-shadow: 0 4px 14px rgba(17,32,59,.05), 0 18px 44px rgba(17,32,59,.08);
}

.role-section--company .company-profile-hero__identity { gap: 22px; }

.role-section--company .company-profile-hero__logo {
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 10px 26px rgba(0,108,98,.12),
              0 2px 6px rgba(17,32,59,.06);
}

/* Fallback gradient kept strictly within sanctioned teal (no #0f8f80). */
.role-section--company .company-profile-hero__logo--fallback {
  background: linear-gradient(150deg, var(--brand-strong) 0%, var(--brand) 100%);
}

.role-section--company .company-profile-hero__content h2 {
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

/* Meta chips: pill on translucent surface, soft shadow not border */
.role-section--company .company-profile-meta-chip {
  border: 0;
  background: rgba(255,255,255,.9);
  color: var(--ink-900);
  box-shadow: 0 2px 8px rgba(17,32,59,.06);
}

/* Hero mini-stats: lift onto soft cards, drop the boxy outline */
.role-section--company .company-profile-hero__metrics { gap: 14px; }
.role-section--company .company-profile-mini-stat {
  padding: 18px;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(17,32,59,.05);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) {
  .role-section--company .company-profile-mini-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(17,32,59,.08);
  }
}
.role-section--company .company-profile-mini-stat strong { color: var(--ink-900); }

/* ── Panels: soft float, calmer internal gap ── */
.role-section--company .company-profile-panel {
  border: 0;
  border-radius: var(--r-lg);
  gap: 18px;
  box-shadow: 0 4px 14px rgba(17,32,59,.05), 0 18px 44px rgba(17,32,59,.08);
}

/* Read-only data rows: lighter dividers, gentle surface */
.role-section--company .company-profile-readonly-grid { gap: 14px; }
.role-section--company .company-profile-readonly-grid .kv-row {
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-tint);
}
.role-section--company .company-profile-readonly-grid .kv-row__value { color: var(--ink-900); }

/* ── Editable form sections: card-in-card without the rigid border ── */
.role-section--company .company-profile-form { gap: 22px; }
.role-section--company .company-profile-form__section {
  padding: 20px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 14px rgba(17,32,59,.04);
}
.role-section--company .company-profile-form__section-header h4 { color: var(--ink-900); }

/* Asset editor blocks get matching soft treatment */
.role-section--company .company-profile-assets-grid { gap: 16px; }
.role-section--company .company-profile-asset-editor { gap: 14px; }

/* Notes list: brand-teal bullet (uses --brand, not legacy --teal) */
.role-section--company .company-profile-note-list { gap: 12px; }
.role-section--company .company-profile-note-list li::before { background: var(--brand); }

/* Side status chips: keep the dashed hint look but soften the line */
.role-section--company .company-profile-side-preview__item {
  border-color: var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
}
.role-section--company .company-profile-side-preview__item strong { color: var(--ink-900); }

/* ── Settings: general pricing rows (scoped via --company modifier) ── */
.role-section--company .pricing-settings-grid--company { gap: 14px; }
.role-section--company .pricing-settings-grid--company .pricing-settings-row,
.role-section--company .company-profile-pricing-row {
  padding: 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 14px rgba(17,32,59,.04);
  transition: box-shadow 200ms var(--ease-out);
}
@media (hover: hover) {
  .role-section--company .pricing-settings-grid--company .pricing-settings-row:hover,
  .role-section--company .company-profile-pricing-row:hover {
    box-shadow: 0 4px 14px rgba(17,32,59,.05), 0 12px 30px rgba(17,32,59,.07);
  }
}
.role-section--company .pricing-settings-grid--company .pricing-settings-row__service strong {
  color: var(--ink-900);
}

/* ── Settings: per-institution pricing table — soften + make scrollable ──
   NOTE (review): styles.css makes .institution-pricing-table itself a grid
   whose rows use 1fr + auto-fit tracks. Reliable horizontal scrolling really
   needs a dedicated scroll WRAPPER element in markup (out of scope here).
   The rules below soften the surface and provide a best-effort, more
   predictable scroll than min-width:max-content on a grid child. */
.role-section--company .institution-pricing-table {
  border: 0;
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 4px 14px rgba(17,32,59,.05), 0 12px 30px rgba(17,32,59,.07);
  -webkit-overflow-scrolling: touch;
}
.role-section--company .institution-pricing-table__header,
.role-section--company .institution-pricing-table__row {
  /* width:max-content + min-width:100% is more predictable for a grid child
     than min-width:max-content: fills the container, and grows to fit content
     so the container can scroll when columns exceed the viewport. */
  width: max-content;
  min-width: 100%;
}
.role-section--company .institution-pricing-table__header {
  background: var(--brand-tint);
  color: var(--ink-900);
  border-bottom: 1px solid var(--line);
  /* logical alignment for RTL + LTR */
  text-align: start;
}
.role-section--company .institution-pricing-table__row {
  border-bottom: 1px solid var(--line);
  transition: background-color 160ms var(--ease-out);
}
@media (hover: hover) {
  .role-section--company .institution-pricing-table__row:hover { background: #ffffff; }
}
.role-section--company .institution-pricing-table__name { color: var(--ink-900); }
.role-section--company .institution-pricing-table__field input {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #ffffff;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.role-section--company .institution-pricing-table__field input:focus,
.role-section--company .institution-pricing-table__field input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,108,98,.12);
  outline: none;
}

/* ── Unified focus ring for all interactive elements in this area ── */
.role-section--company .company-profile-form input:focus-visible,
.role-section--company .company-profile-form button:focus-visible,
.role-section--company .pricing-settings-grid--company input:focus-visible,
.role-section--company .company-profile-asset-editor input:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,108,98,.12);
  outline: none;
}

/* ── Reduced motion: drop nonessential transitions/transforms ── */
@media (prefers-reduced-motion: reduce) {
  .role-section--company .company-profile-mini-stat,
  .role-section--company .pricing-settings-grid--company .pricing-settings-row,
  .role-section--company .company-profile-pricing-row,
  .role-section--company .institution-pricing-table__row {
    transition: none;
  }
  .role-section--company .company-profile-mini-stat:hover { transform: none; }
}

/* ╔══════ billing-reports ══════╗ */
/* ════════════════════════════════════════════════════════════════
   billing-reports — scoped refinement layer (append to styles-redesign.css)
   Scoped to: .table-card, .invoice-table*, .requests-table--admin only.
   Tokens only (brand teal var(--brand), ink var(--ink-900), gold var(--gold),
   var(--line), var(--muted), var(--surface-soft) — all resolved because
   index.html loads styles.css + styles-redesign.css together).
   RTL/LTR-safe: logical properties throughout.

   REMOVED: the previous "PRINT REPORT @media screen { .report-* / .print-* }"
   block. report-print.html loads ONLY styles-print.css (not styles-redesign.css),
   so those selectors were unreachable from this file AND referenced tokens
   (--ink-900/--r-md/--r-lg) undefined in the print scope. Print-preview styling
   must be added to styles-print.css instead — out of scope for this layer.
   ════════════════════════════════════════════════════════════════ */

/* ── 1) Table cards: lift the hard 1px border into a soft elevation ── */
.table-card {
  border-color: transparent;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(17, 32, 59, 0.05),
              0 18px 44px rgba(17, 32, 59, 0.06);
}

.table-card .card__header {
  align-items: flex-start;
  gap: 16px;
  padding-block-end: 18px;
  margin-block-end: 4px;
  border-block-end: 1px solid var(--line);
}

.table-card .card__header h3 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.table-card .card__eyebrow {
  display: inline-block;
  margin-block-end: 4px;
}

/* Record-count pill: calmer, brand-tinted */
.table-card .card__header .pill {
  align-self: center;
  min-height: 28px;
  padding-inline: 12px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  white-space: nowrap;
}

/* ── 2) Calmer table chrome (admin + invoice tables) ── */
.table-card .table-wrap {
  border-radius: var(--r-md);
  scrollbar-width: thin;
}

/* NOTE: text-align:start here intentionally overrides the base hardcoded
   `text-align:right` (styles.css:1234) so headers/cells align correctly in
   both Arabic (RTL) and English (LTR). */
.table-card .requests-table th {
  background: transparent;
  color: var(--muted);
  border-block-end-color: var(--line);
  letter-spacing: 0.01em;
  text-align: start;
}

.table-card .requests-table td {
  border-block-end-color: var(--line);
  text-align: start;
  vertical-align: middle;
}

/* Soften the very dense admin tables: a touch more air. */
.table-card .requests-table--admin th,
.table-card .requests-table--admin td {
  padding-block: 11px;
  padding-inline: 11px;
}

.table-card .requests-table--admin tbody tr {
  transition: background 160ms var(--ease-out);
}

.table-card .requests-table--admin tbody tr:hover {
  background: rgba(0, 108, 98, 0.035);
}

/* Status badges inside billing tables: brand-coherent weight */
.table-card .status-badge {
  font-weight: 800;
  letter-spacing: 0;
}

/* Action affordances row */
.table-card .table-actions .button-soft {
  border-color: transparent;
  background: var(--brand-tint);
  color: var(--brand-strong);
  box-shadow: 0 2px 8px rgba(17, 32, 59, 0.05);
  transition: transform 140ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out);
}

@media (hover: hover) {
  .table-card .table-actions .button-soft:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 108, 98, 0.16);
    filter: brightness(1.02);
  }
}

.table-card .table-actions .button-soft:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.table-card .table-meta {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Empty states: lighter, calmer dashed frame (on-palette surface) */
.table-card .empty-state {
  border-color: var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  color: var(--muted);
}

/* ── 3) Invoice summary cards: refined elevation, brand restraint ── */
.invoice-table__summary {
  gap: 14px;
}

.invoice-summary-card {
  border-color: transparent;
  border-radius: var(--r-md);
  padding: 16px 18px;
  background:
    linear-gradient(150deg, rgba(0, 108, 98, 0.06), #ffffff 62%);
  box-shadow: 0 4px 14px rgba(17, 32, 59, 0.05);
}

.invoice-summary-card span {
  color: var(--muted);
  letter-spacing: 0.01em;
}

.invoice-summary-card strong {
  color: var(--ink-900);
  font-size: 1.18rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Subtle gold accent on the open-amount card (2nd in DOM order, confirmed
   billing.js:731). nth-child counts DOM children, so this stays the open-amount
   card at every breakpoint regardless of grid column count. */
.invoice-summary-card:nth-child(2) strong {
  color: var(--gold);
}

/* Invoice rows: tabular numerals + calm hover (matches base teal tint) */
.invoice-table td {
  font-variant-numeric: tabular-nums;
}

.invoice-table__row:hover {
  background: rgba(0, 108, 98, 0.04);
}

.invoice-payment-pill {
  letter-spacing: 0;
}

/* ── 3b) MOBILE FIX: invoice-table stacks to cards but <td> has no
   data-label (confirmed billing.js:776-782), so the base rule
   (styles.css:3471-3485) reserves an empty 96–116px label gutter via
   `grid-template-columns: minmax(96px,116px) minmax(0,1fr)` + an empty
   `td::before { content: attr(data-label) }`. Collapse to a single content
   column and hide the empty pseudo. Equal specificity to base, wins by source
   order (appended after). ── */
@media (max-width: 980px) {
  .invoice-table td {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .invoice-table td::before {
    display: none;
  }
  .invoice-table__row {
    border-color: transparent;
    border-radius: var(--r-md);
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(17, 32, 59, 0.05);
  }
}

/* ── 4) Focus-visible for every interactive control in this area ── */
.table-card .button-soft:focus-visible,
.table-card .button:focus-visible,
.table-card .button-ghost:focus-visible,
.table-card [data-open-pay-cycle-modal]:focus-visible,
.table-card [data-open-settle-modal]:focus-visible,
.table-card [data-admin-run-monthly]:focus-visible,
.table-card [data-admin-confirm-transfer]:focus-visible,
.table-card [data-admin-reject-transfer]:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .table-card .requests-table--admin tbody tr,
  .table-card .table-actions .button-soft {
    transition: none;
  }
}


/* ╔══════ modals ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: modals — overlay, panel, header/footer, pay-cycle, methods.
   Scoped to .modal* + modal-only children. Loaded after styles.css.
   Palette/tokens only. Logical props (RTL/LTR safe). Soft elevation.
   ════════════════════════════════════════════════════════════════ */

/* ── Overlay: calmer scrim + gentle backdrop blur, generous padding ── */
.modal {
  padding: clamp(16px, 4vw, 40px);
  background: rgba(17, 32, 59, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  animation: modal-overlay-in 220ms var(--ease-out) both;
}

/* ── Panel: borderless, soft layered elevation, larger radius ── */
.modal .modal__panel {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow:
    0 4px 14px rgba(17, 32, 59, 0.05),
    0 24px 60px rgba(17, 32, 59, 0.16);
  animation: modal-panel-in 320ms var(--ease-out) both;
}

/* role layer re-asserts a hard border on the panel — neutralize it softly */
body[data-role="bank"] .modal__panel,
body[data-role="company"] .modal__panel,
body[data-role="admin"] .modal__panel {
  border: 0;
}

.modal .modal__panel--camera {
  width: min(100%, 460px);
}

/* ── Header / footer: lighter hairlines, more breathing room ── */
.modal .modal__header,
.modal .modal__footer {
  padding: 20px clamp(20px, 4vw, 26px);
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
}

.modal .modal__header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* title block: tighter eyebrow→title rhythm */
.modal .modal__header > div {
  display: grid;
  gap: 4px;
}

.modal .modal__header h3 {
  letter-spacing: -0.01em;
}

/* sticky footer so primary action stays reachable on long forms */
.modal .modal__footer {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.modal .modal__body {
  padding: clamp(20px, 4vw, 26px);
  gap: 18px;
}

/* forms inside modal own their own footer; keep flow clean on iOS */
.modal .form {
  display: contents;
}

/* ── Close (ghost) button: quiet, circular affordance ── */
.modal .modal__header .button-ghost {
  border-radius: 999px;
}

/* ── Pay-cycle / settle summary surfaces: tint, no hard border ── */
.modal .modal-pay-cycle__subtitle {
  color: var(--ink-soft);
}

.modal .modal-pay-cycle__summary {
  border: 0;
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px rgba(0, 108, 98, 0.08);
}

.modal .modal-pay-cycle__summary strong {
  color: var(--brand-strong);
}

.modal .modal-pay-cycle__wallet-info {
  border: 0;
  border-radius: var(--r-md);
  padding: 12px 16px;
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px rgba(0, 108, 98, 0.1);
}

/* ── Payment method tiles: soft cards, shadow-based selection ── */
.modal .pay-method-option {
  border: 0;
  border-radius: var(--r-md);
  padding: 16px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 4px 14px rgba(17, 32, 59, 0.04);
  transition:
    box-shadow 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    background 180ms var(--ease-out);
}

@media (hover: hover) {
  .modal .pay-method-option:hover {
    background: var(--brand-tint);
    box-shadow:
      inset 0 0 0 1px rgba(0, 108, 98, 0.28),
      0 8px 22px rgba(0, 108, 98, 0.1);
    transform: translateY(-1px);
  }
}

.modal .pay-method-option--active,
.modal .pay-method-option--active:hover {
  background: var(--brand-tint);
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    0 0 0 4px rgba(0, 108, 98, 0.12);
  transform: none;
}

.modal .pay-method-option__body strong {
  color: var(--ink-900);
}

/* ── Radio pills inside modal: repair undefined --border/--accent ── */
.modal .radio-group__item {
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
  transition: box-shadow 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
}

.modal .radio-group__item:has(input:checked) {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1.5px var(--brand);
  color: var(--brand-strong);
  font-weight: 700;
}

.modal .radio-group__item input[type="radio"] {
  accent-color: var(--brand);
}

/* ── Check cards inside modal: soft, checked state in brand ── */
.modal .check-card {
  border: 0;
  border-radius: var(--r-md);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}

.modal .check-card:has(input:checked) {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.modal .check-card input {
  accent-color: var(--brand);
}

/* ── Attachment previews inside modal: lift, drop hard border ── */
.modal .attachment-preview {
  border: 0;
  border-radius: var(--r-md);
  box-shadow:
    0 4px 14px rgba(17, 32, 59, 0.05),
    0 14px 34px rgba(17, 32, 59, 0.08);
}

/* ── Camera viewport: softer corner to match panel radius ── */
.modal .individual-camera__viewport {
  border-radius: var(--r-lg);
}

/* ── Focus: unified ring for every interactive modal element ── */
.modal .button:focus-visible,
.modal .button-soft:focus-visible,
.modal .button-ghost:focus-visible,
.modal .button-danger:focus-visible,
.modal .attachment-preview__download:focus-visible,
.modal .pay-method-option:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
.modal .radio-group__item:has(input:focus-visible),
.modal .check-card:has(input:focus-visible) {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}
/* preserve the brand inner ring on focused selectable tiles */
.modal .pay-method-option:focus-visible {
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    0 0 0 4px rgba(0, 108, 98, 0.12);
}
.modal .radio-group__item:has(input:focus-visible),
.modal .check-card:has(input:focus-visible) {
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    0 0 0 4px rgba(0, 108, 98, 0.12);
}

/* ── Mobile (≤760px matches base): keep header row, only stack footer ── */
@media (max-width: 760px) {
  .modal .modal__header {
    flex-direction: row;
    align-items: center;
  }
  .modal .modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* full-width tappable actions, comfy targets */
  .modal .modal__footer > .button,
  .modal .modal__footer > .button-soft,
  .modal .modal__footer > .button-ghost,
  .modal .modal__footer > .button-danger {
    width: 100%;
    min-height: 48px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal .modal__panel {
    animation: none;
  }
  .modal .pay-method-option {
    transition: none;
  }
}

@keyframes modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ╔══════ rtl-responsive-audit ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: rtl-responsive-audit — cross-cutting RTL/LTR + responsive fixes
   CSS-only. Logical properties only. Scoped to existing classes.
   Palette/radius/shadow per contract. No new colors.
   ════════════════════════════════════════════════════════════════ */

/* ── FIX 1 — Missing scroll wrapper for the branch table ──────────────
   components.js:835 wraps a `requests-table--admin` (min-width:1180px,
   styles.css:1250) in `.table-scroll`, but that class is undefined
   anywhere in public/. `.table-card` has overflow:hidden (styles.css:1217)
   so the wide table is clipped with no scroll on mobile. Define the
   wrapper to match the working `.table-wrap` behaviour. */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* Safety net: any wide table directly inside a card (no wrapper) can still
   scroll instead of overflowing the page at 390px. */
.table-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── FIX 2 — Tables: logical text alignment ──────────────────────────
   styles.css:1234 hardcodes `text-align:right` on every th/td, so in
   English (html[dir="ltr"]) headers/cells stay right-aligned. */
.requests-table th,
.requests-table td {
  text-align: start;
}

/* ── FIX 3 — Corporate / bank / admin auth + modals respect language ──
   styles.css:211 forces `direction:rtl; text-align:right` on
   .auth-card / .auth-split / .modal__panel under
   body[data-role="bank"|"company"|"admin"], REGARDLESS of state.lang.
   In English the trailing "?" of "Forgot Password?" (i18n.js:1241)
   renders on the LEFT and all copy right-aligns. Honour the LTR root. */
html[dir="ltr"] body[data-role="bank"] .auth-card,
html[dir="ltr"] body[data-role="company"] .auth-card,
html[dir="ltr"] body[data-role="admin"] .auth-card,
html[dir="ltr"] body[data-role="bank"] .auth-split,
html[dir="ltr"] body[data-role="company"] .auth-split,
html[dir="ltr"] body[data-role="admin"] .auth-split,
html[dir="ltr"] body[data-role="bank"] .modal__panel,
html[dir="ltr"] body[data-role="company"] .modal__panel,
html[dir="ltr"] body[data-role="admin"] .modal__panel {
  direction: ltr;
  text-align: start;
}

/* ── FIX 4 — Individual app cards/fields follow the section dir ───────
   The individual <section> sets dir="ltr" in English (individual.js:79),
   but inner cards hardcode `direction:rtl` + `text-align:right`
   (styles.css:2266,2326,2432,2468,2473,2564,2565,2640,2758,2763,3080,3081),
   overriding it. Re-assert logical direction/alignment only in LTR so the
   Arabic (RTL) layout is untouched. */
.individual-app[dir="ltr"] .individual-field,
.individual-app[dir="ltr"] .individual-screen-header,
.individual-app[dir="ltr"] .individual-service-card,
.individual-app[dir="ltr"] .individual-purpose-card,
.individual-app[dir="ltr"] .individual-company-card,
.individual-app[dir="ltr"] .individual-report-card__meta,
.individual-app[dir="ltr"] .individual-report-card__footer,
.individual-app[dir="ltr"] .individual-form-card__header--rtl {
  direction: ltr;
  text-align: start;
}
.individual-app[dir="ltr"] .individual-phone-field input {
  text-align: start;
}

/* ── FIX 5 — Price cell: contradictory hardcoded `left` ───────────────
   styles.css:2718-2722 sets `justify-items:end; text-align:left` on the
   same element — the hardcoded `left` fights RTL and the grid. Use
   logical end-alignment so price hugs the inline-end in BOTH directions. */
.individual-company-card__price {
  text-align: end;
}
.individual-app[dir="ltr"] .individual-company-card__price,
.individual-app[dir="ltr"] .individual-company-card__meta {
  text-align: end; /* meta/price stay end-aligned (justify-items:end) in LTR too */
}

/* ── FIX 6 — Focus-visible parity (contract) on table controls that
   gained logical alignment, kept palette-true and subtle. ───────────── */
.table-card :focus-visible,
.requests-table :focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 108, 98, 0.12);
  outline: none;
}

/* ── FIX 7 — Decorative auth circles must never cause page overflow ───
   styles.css:3833-3855 place 380px/240px circles with negative
   inset-inline-end/start inside .auth-split__brand. Parent already has
   overflow:hidden (styles.css:3824) — reinforce so a future tweak or the
   stacked mobile header (max-width:680px) can't leak a horizontal
   scrollbar at 390px. */
.auth-split__brand {
  overflow: hidden;
}

/* ── Reduced-motion: nothing added here animates, but keep the contract
   explicit so this layer never reintroduces motion for these areas. ─── */
@media (prefers-reduced-motion: reduce) {
  .table-scroll,
  .table-card {
    scroll-behavior: auto;
  }
}

/* ═══════════════ FLUID LAYOUT — fill any screen, no fixed cap ═══════════════ */
/* لوحات الأدمن/البنك/الشركة: عرض مرن يملأ الشاشة (كان محصوراً بـ1440px موسّط
   فيظهر فراغ كبير على الشاشات العريضة). تطبيق الأفراد يبقى عمود جوال مقصود. */
body[data-role="admin"] .workspace,
body[data-role="bank"] .workspace,
body[data-role="company"] .workspace {
  max-width: none;
  margin: 0;
  padding-inline: clamp(16px, 4vw, 56px);
}

/* إزالة خط التركيز على حاوية المحتوى الرئيسية (تأخذ focus برمجياً للتمرير/قارئ الشاشة
   — ليس عنصراً تفاعلياً، فلا داعي لإطار مرئي). العناصر التفاعلية تحتفظ بحلقة التركيز. */
.view:focus,
#component-view:focus { outline: none; }


/* ═══════════════ FLUID SWEEP LAYER (8 areas, reviewed) ═══════════════ */


/* ╔══════ FLUID: layout-shell ══════╗ */
/* ════════════════════════════════════════════════════════════════════════
   AREA: layout-shell  —  fluid top-level shell at ANY width, no dead margins
   Scope: .workspace / .navbar / .sidebar, role- & route-scoped.
   Appended to styles-redesign.css (loaded AFTER styles.css) → wins by source
   order at equal specificity; route-scoped rules raise specificity where the
   base login rule (styles.css:1116) needs to be beaten.
   Individual role is deliberately untouched: it detaches navbar/sidebar
   (styles.css:2023-2025) and uses its own fluid phone column
   min(100%, --individual-phone-width) (styles.css:2047, 3208).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Workspace: fill the viewport fluidly for every institutional role,
   on EVERY route (default + login). Replaces fixed max-width:1440px / 1360px
   caps (styles.css:296, styles.css:1120) that left large dead margins at
   1440px+ / 1920px. Sidebar track relaxed from a rigid 264px (styles.css:293)
   to a sensible fluid clamp; #component-view fills the remaining 1fr.
   RTL-safe: padding-inline + margin-inline only. ── */
body[data-role="admin"] .workspace,
body[data-role="bank"] .workspace,
body[data-role="company"] .workspace {
  max-width: none;
  margin-inline: 0;
  grid-template-columns: clamp(220px, 18vw, 280px) minmax(0, 1fr);
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ── Login route override: the base rule at styles.css:1116-1121 is MORE
   specific ([data-role][data-route] .workspace) than the rule above, so it
   re-imposes max-width:1360px and re-creates dead margins on the auth screen.
   Match that specificity and neutralize the cap. Keep the single-column grid
   (sidebar is hidden on login). The readability cap is preserved at the CARD
   level, NOT the shell: the login markup (js/views/admin.js:237-238) renders
   .auth-shell--web (width:min(100%,1280px), styles.css:1075-1076) wrapping
   .auth-card--web (width:min(100%,840px), styles.css:1083-1084). So the shell
   can go full-bleed-fluid here without producing a 1900px-wide input. ── */
body[data-role="admin"][data-route="login"] .workspace,
body[data-role="bank"][data-route="login"] .workspace,
body[data-role="company"][data-route="login"] .workspace {
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ── Navbar: relax the rigid 220px minimum on the brand/left track
   (styles.css:91) so the bar flexes gracefully on narrow tablets while
   staying generous on wide screens. The bar already spans full width with
   no max-width, so no dead margin — only the inner track was over-constrained.
   minmax(0,1fr) center + auto actions are kept as-is.

   IMPORTANT FIX vs. the reviewed CSS: this override MUST be gated to
   min-width:761px. The base file collapses the navbar to a 2-column phone
   layout at `@media (max-width:760px){ .navbar{ grid-template-columns:1fr auto } }`
   (styles.css:3367-3370). Because this file is appended AFTER styles.css at
   EQUAL specificity (0,1,0), an UNGATED `.navbar` rule would win by source
   order and clobber that collapse — forcing 3 columns at 360px (first track
   floors to 180px since 22vw≈79px) → horizontal overflow. Gating to
   min-width:761px lets the base mobile collapse survive. ── */
@media (min-width: 761px) {
  .navbar {
    grid-template-columns: minmax(clamp(180px, 22vw, 240px), auto) minmax(0, 1fr) auto;
  }
}

/* ── Safety net: at the existing drawer breakpoint the workspace already
   collapses to a single column (styles.css:3312-3319) and the sidebar becomes
   a fixed drawer (styles.css:3326-3342). The institutional 2-col clamp rule
   above has specificity (0,2,0) and would otherwise beat that base collapse
   (0,1,0), so re-assert single column here for the institutional roles to
   guarantee no 2-col layout survives at drawer width. ── */
@media (max-width: 1160px) {
  body[data-role="admin"] .workspace,
  body[data-role="bank"] .workspace,
  body[data-role="company"] .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 360px guard: tighten side padding on the smallest phones so nothing
   overflows horizontally (covers the 360px breakpoint). Logical property
   keeps RTL/LTR correct. ── */
@media (max-width: 380px) {
  body[data-role="admin"] .workspace,
  body[data-role="bank"] .workspace,
  body[data-role="company"] .workspace,
  body[data-role="admin"][data-route="login"] .workspace,
  body[data-role="bank"][data-route="login"] .workspace,
  body[data-role="company"][data-route="login"] .workspace {
    padding-inline: 12px;
  }
}

/* ╔══════ FLUID: auth-sizing ══════╗ */
/* ===================================================================
   FLUID OVERRIDE  ::  AREA = auth-sizing   (CORRECTED)
   Scope: .auth-shell--web / .auth-card(--web/--wide) / .auth-split
   Appended after styles-redesign.css -> wins on equal specificity.
   Goal: fluid-with-readability-cap. width: min(100%, clamp(...))
   centered; split stacks to 1 col on phones; zero overflow @360px.
   Logical properties only (RTL-safe).

   CORRECTIONS vs the reviewed CSS:
   - FIX HEADLINE BUG: login / OTP / forgot are rendered with
     class "auth-card auth-card--web" (admin.js:238, :576), never bare
     ".auth-card". The reviewed bare ".auth-card" cap (540px) lost the
     cascade to ".auth-card--web" (880px, same specificity, later
     source) -> single-input screens ballooned to 880px. Now the
     readability cap is applied to ".auth-card--web:not(.auth-card--wide)"
     (specificity 0,2,0) so login/OTP/forgot get a calm ~560px cap while
     the 2-col register surface (--wide) stays wide.
   - Removed the inert 960px clamp FLOOR on the shell cap.
   - Defensive box-sizing on the --web/--wide selectors.
   - 360px hard floor aligned to the contract breakpoint.
   =================================================================== */

/* -- Shell: fill width, fluid gutters, vw-driven cap (was 1280px) ----
   styles.css:1075-1081 width:min(100%,1280px) left ~640px dead margin
   at 1920px. Cap is now purely vw-fluid (floor cannot exceed the
   viewport) and centered; ~300px gutter at 1920px is the intentional
   auth readability cap, not a fixed box. */
.auth-shell--web {
  width: 100%;
  max-inline-size: clamp(320px, 92vw, 1320px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
  box-sizing: border-box;
}

/* -- Bare readability card (defensive only) -------------------------
   No standalone ".auth-card" exists in the views today, but if one is
   ever added it should still get a calm, fluid single-column cap. */
.auth-card {
  width: min(100%, clamp(320px, 90vw, 560px));
  margin-inline: auto;
  box-sizing: border-box;
}

/* -- Web auth card (login / OTP / forgot / register) ----------------
   styles.css:1083-1087 (was 840px). Fluid cap; box-sizing for safety. */
.auth-card--web {
  width: min(100%, clamp(320px, 92vw, 880px));
  margin-inline: auto;
  box-sizing: border-box;
}

/* -- REAL READABILITY CAP for single-field web screens --------------
   login / OTP / forgot use .auth-card--web WITHOUT .auth-card--wide.
   :not() raises specificity to 0,2,0 so this beats the plain
   .auth-card--web rule above and keeps a one-input form from stretching
   to 880px. Fluid, centered, never overflows at 360px. */
.auth-card--web:not(.auth-card--wide) {
  width: min(100%, clamp(320px, 90vw, 560px));
}

/* -- Wide (non-web register) -- styles.css:1071-1073 (was 860px) ---- */
.auth-card--wide {
  width: min(100%, clamp(320px, 92vw, 880px));
  margin-inline: auto;
  box-sizing: border-box;
}

/* -- Web + wide register (2-col) -- styles.css:1089-1091 (was 1180px)
   Widest auth surface: grows with vw up to a calm ceiling instead of
   snapping at a fixed 1180px on ultra-wide monitors. */
.auth-card--web.auth-card--wide {
  width: min(100%, clamp(320px, 94vw, 1200px));
}

/* -- Split panel: fluid cap + drop the rigid min-height -------------
   styles.css:3811-3820 / redesign:483-493 / redesign:50-54.
   width:min(100%,980px) was a fixed box; min-height 520-560px forced
   the panel taller than short / landscape phones -> vertical overflow.
   Width becomes fluid; height becomes content-driven (the form side
   already scrolls via overflow-y:auto at styles.css:3941). */
.auth-split {
  width: min(100%, clamp(320px, 94vw, 1000px));
  min-height: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Re-introduce a comfortable MINIMUM height only where real vertical
   room exists, so the desktop two-column layout still feels
   substantial without ever clipping on short / landscape viewports.
   Gated >680px so it never applies to the stacked phone layout. */
@media (min-width: 681px) and (min-height: 620px) {
  .auth-split {
    min-height: clamp(440px, 70vh, 600px);
  }
}

/* -- Phones: clean single-column split, centered, never wider than the
   viewport. Reinforces styles.css:3965-3967 + redesign:648-653.
   The 2-col register form grid is collapsed to 1fr by the base rule
   styles.css:3405 (@media max-width:760px), so no 2-col overflow. -- */
@media (max-width: 680px) {
  .auth-shell--web {
    max-inline-size: 100%;
    padding-inline: clamp(14px, 5vw, 24px);
  }
  .auth-split {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    min-height: 0;
  }
}

/* -- 360px hard floor: eliminate any horizontal overflow on the
   smallest phones (decorative rings are clipped by
   .auth-split__brand{overflow:hidden}; 2-col grids already collapsed).
   Aligned to the 360px contract breakpoint. -- */
@media (max-width: 360px) {
  .auth-card,
  .auth-card--web,
  .auth-card--web:not(.auth-card--wide),
  .auth-card--wide,
  .auth-card--web.auth-card--wide,
  .auth-split {
    width: 100%;
  }
}


/* ╔══════ FLUID: individual-sizing ══════╗ */
/* ════════════════════════════════════════════════════════════════
   FLUID OVERRIDE · individual-sizing  (REVIEWED + CORRECTED)
   Scope: role=individual / .individual-app and its children only.
   Goal: keep the mobile-first phone-column feel, but every cap is a
   fluid min(100%, ...) / clamp() so nothing overflows at 360px and the
   column never balloons to an 800px form. Logical props only (RTL-safe).
   Append to styles-redesign.css (loads AFTER styles.css → wins).

   Adversarial corrections vs the submitted version:
   - REMOVED the .individual-brand-card__panel width override: that panel
     only renders inside .individual-auth, where the redesign sets a
     deliberate 96x96 square (equal-specificity, source-order TIE that the
     appended override would WIN), so the submitted rule distorted the
     login logo (width grew, height stayed 96px). Base 200px is dead code.
   - REMOVED .individual-auth from the inline-size:100% list: it was
     defeating the redesign's intentional 384px auth-card cap
     (styles-redesign.css:82). The 800px auth-FORM fix below is the real
     fix; the wrapper cap stays.
   - REVERTED the OTP grid rewrite: the base flex layout
     (flex:1 1 0; min-width:0; aspect-ratio) is already fluid + safe at
     360px, so we keep flex and only re-assert the shrink guard. */

/* 1) Phone-column token → self-clamping fluid value.
   Was a hard 430px (styles.css:22). Never narrower than a small phone,
   never wider than a phablet, never wider than the viewport. Every
   consumer wraps it in min(100%, ...) so the 100vw term can't overflow. */
body[data-role="individual"] {
  --individual-phone-width: clamp(320px, 100vw, 460px);
}

/* Re-pin the column + fixed bottom-nav to the fluid token via
   min(100%, ...) so the cap can never exceed the viewport at 360px.
   (.individual-bottom-nav is an individual-only class → no leakage;
   it is position:fixed, so 100% resolves against the viewport.) */
body[data-role="individual"] .individual-app,
body[data-role="individual"] .individual-bottom-nav {
  width: min(100%, var(--individual-phone-width));
}

/* 2) THE fix — kill the 800px form cap (styles.css:2252). A form inside a
   phone column should fill the column, not reach for 800px. */
.individual-app .individual-auth-form {
  width: min(100%, var(--individual-phone-width));
  margin-inline: auto;
}

/* Belt-and-suspenders: flow/content containers fill the column fluidly
   and are hard-capped to it (defends against future reuse).
   NOTE: .individual-auth is intentionally EXCLUDED — the redesign caps it
   at a deliberate 384px (readability), and forcing inline-size:100% here
   would override that. The 800px form fix above is the real correction. */
.individual-app .individual-form,
.individual-app .individual-flow,
.individual-app .individual-home,
.individual-app .individual-list-screen,
.individual-app .individual-account,
.individual-app .individual-success {
  inline-size: 100%;
  max-inline-size: min(100%, var(--individual-phone-width));
  margin-inline: auto;
}

/* 3) Safety net: nothing inside the phone column may force horizontal
   overflow. Cards, banners, fields, OTP grid, attachment rows all stay
   inside their fluid column. Scoped to .individual-app only. */
.individual-app .individual-app__surface,
.individual-app .individual-service-card,
.individual-app .individual-purpose-card,
.individual-app .individual-request-card,
.individual-app .individual-report-card,
.individual-app .individual-form-card,
.individual-app .individual-summary-card,
.individual-app .individual-company-card,
.individual-app .individual-attachment-card,
.individual-app .individual-status-banner,
.individual-app .individual-empty {
  max-inline-size: 100%;
}

/* 4) OTP row: keep the proven fluid FLEX layout (base: flex:1 1 0;
   min-width:0; aspect-ratio:1/1). Do NOT swap to grid. Just re-assert
   the shrink guard so digits can compress below ~360px and the row
   never spills. */
.individual-app .individual-otp-grid {
  inline-size: 100%;
}
.individual-app .individual-otp-digit {
  min-inline-size: 0;
}

/* 5) Phone-prefix field: let the prefix track shrink on the narrowest
   phones so the row never overflows. Base is a fixed 96px prefix
   (styles.css:2307) / 84px in auth (styles-redesign.css:122); both have
   specificity ≤ (0,2,0) and this appended rule wins by source order. */
.individual-app .individual-phone-field {
  grid-template-columns: minmax(64px, 84px) minmax(0, 1fr);
  inline-size: 100%;
}

/* ╔══════ FLUID: dashboard-grids ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: dashboard-grids  (fluid override layer) — REVIEWED + HARDENED
   Scope: shared dashboard stat/metric, report/request two-column, and
   option grids used across admin / bank / company dashboards.
   Append AFTER styles-redesign.css. RTL-safe (no left/right hardcoded;
   grid-template-columns + min-width are direction-agnostic).
   Goal: 1->N column reflow from 360px to 1920px, zero horizontal
   overflow, no dead side-gutters.

   CASCADE NOTES (verified against source):
   - styles-redesign.css:1087 body[data-role="admin"] .metrics and
     :1414 body[data-role="bank"] .metrics have higher specificity but
     set ONLY `gap` — no column-axis conflict, so plain .metrics here
     still wins the grid-template-columns it declares.
   - The @media duplicates below are REQUIRED (not redundant): they
     override styles.css in-media re-locks (3361-3363, 3404-3409,
     3316-3318) which would otherwise win by later source order at
     those widths. Equal specificity + later source order = we win.
   - min(100%, <px>) inside minmax() is the canonical safe floor: when
     the container is narrower than <px> the track resolves to 100%
     (single full-width column) → no horizontal overflow at 360px;
     at wide widths it behaves as minmax(<px>, 1fr) and reflows to N.
   - min-width: 0 added so these grids can always shrink below their
     content inside any flex/grid parent (belt-and-suspenders for the
     360px no-overflow guarantee).
   ════════════════════════════════════════════════════════════════ */

/* ── Stat / metric cards (.metrics) ───────────────────────────────
   Base styles.css:469-473 is already fluid auto-fit, but two media
   overrides re-LOCK the column count and defeat it:
     - styles.css:3361-3363  @max-width:1160px -> repeat(2, ...)
     - styles.css:3404-3409  @max-width:760px  -> 1fr
   On a ~1100px canvas 4-5 cards fit yet only 2 render. Restore one
   fluid rule for all widths. min(100%, ...) floor guarantees the track
   never exceeds the container -> no overflow at 360px. */
.metrics {
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Neutralize the fixed-count overrides at their own breakpoints so the
   fluid behavior stays in effect end-to-end. */
@media (max-width: 1160px) {
  .metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
}
@media (max-width: 760px) {
  .metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  }
}

/* ── Report / request two-column dashboard layout (.split) ─────────
   styles.css:496-500 -> repeat(2, minmax(0,1fr)); styles.css:3312-3319
   snaps it to 1fr only at <=1160px. Between the content min-width and
   1160px the two cards (recent requests / recent reports / info card)
   are forced 2-up even when cramped, then snap abruptly. auto-fit lets
   them stack the instant there isn't room for two ~340px columns.
   NOTE: .split is also used inside modals (modals.js:66,83,99); verified
   safe — .modal__panel is width:min(100%,760px) (styles.css:1747) and
   the min(100%,340px) floor collapses to 1 column on narrow panels. */
.split {
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
@media (max-width: 1160px) {
  .split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  }
}

/* ── Checkbox / option grids (.check-grid) ────────────────────────
   styles.css:1155-1159 -> repeat(2, minmax(0,1fr)); styles.css:3404-3409
   snaps to 1fr at <=760px. Result: at 480-759px it shows 1 column while
   two short option labels fit fine. auto-fit reflows 1->2->3 smoothly.
   Also used in the admin multiselect (utils.js:507) and modals
   (modals.js:230) — same class, intended behavior; the min(100%,200px)
   floor keeps it to 1 column inside narrow dropdown panels. */
.check-grid {
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
@media (max-width: 760px) {
  .check-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
}

/* ╔══════ FLUID: tables-responsive ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: tables-responsive — fluid override layer (APPEND to styles-redesign.css)
   Scoped to admin/bank/company roles + this area's classes only.
   Logical properties only (RTL/LTR-safe). No new colors/markup/JS.

   REVIEW VERDICT: fluid + safe. The existing redesign layer already makes
   this area fluid — .table-wrap/.table-scroll scroll horizontally on phones
   (overflow-x:auto, redesign:1220 & 2446), tables fill their card on wide
   screens (width:100% beats min-width when room exists), and the FLUID
   .workspace block (redesign:2550, max-width:none + padding-inline:clamp())
   removes the old 1440px dead space. At 360/768/1024/1440/1920 the page does
   not overflow horizontally (NO 360px overflow) and leaves NO dead side-margins
   at 1920px (only the OS scrollbar). This block makes targeted refinements:
   (1) un-cap the fixed-px org-user name, (2) make the two intentional table
   floors logical (RTL-safe) AND self-sufficient, (3) harden wrappers/cards so
   a wide table can never widen the page. Everything else is left as-is by design.
   ════════════════════════════════════════════════════════════════ */

/* ── 1) FIX (fixed-px content box): org-user display name ─────────────
   styles.css:1503 hard-caps .org-user-info__name at max-width:220px, so
   names are ellipsis-truncated even when the row has free width (the exact
   "locked to a fixed width" complaint). The parent .org-user-info is
   flex:1 + min-width:0 (styles.css:1481), so a logical 100% cap lets the
   name grow to fill available row width AND still ellipsis-truncate when
   the row is narrow. */
body[data-role="admin"] .org-user-info__name,
body[data-role="bank"] .org-user-info__name,
body[data-role="company"] .org-user-info__name {
  max-width: none;          /* drop the physical 220px cap */
  max-inline-size: 100%;    /* fluid + RTL/LTR-safe; flex parent drives ellipsis */
}

/* ── 2) Table width floors → logical (RTL-safe), KEPT on purpose ──────
   These min-widths are intentional readable-floors: below them the table
   SCROLLS inside its .table-wrap/.table-scroll wrapper (contract-approved
   "min-inline-size then scroll") instead of crushing columns. We convert the
   physical `min-width` to the logical `min-inline-size` so the floor is
   direction-correct, and assert inline-size:100% IN EACH block so the table
   FILLS its card on wide screens (no dead space) even if a future view emits
   the --admin modifier without the base .requests-table class. */
body[data-role="admin"] .requests-table,
body[data-role="bank"] .requests-table,
body[data-role="company"] .requests-table {
  inline-size: 100%;
  min-inline-size: 760px;   /* logical mirror of styles.css:1227 */
}
body[data-role="admin"] .requests-table--admin,
body[data-role="bank"] .requests-table--admin,
body[data-role="company"] .requests-table--admin {
  inline-size: 100%;        /* self-sufficient: don't rely on base-class inheritance */
  min-inline-size: 1180px;  /* logical mirror of styles.css:1250 */
}

/* ── 3) Wrapper hardening: guarantee horizontal scroll + no leakage ───
   Reaffirm fluid wrappers so a wide table NEVER pushes the page wider than
   the viewport at 360px. max-inline-size:100% is the load-bearing line — it
   caps the wrapper itself to the available track so the 1180px/760px table
   clips-and-scrolls instead of growing the wrapper. Mirrors redesign:1220/2446
   but binds both wrapper classes together, scoped to role so it can't leak.
   overscroll containment stops the inline scroll from chaining to the page. */
body[data-role="admin"] .table-wrap,
body[data-role="admin"] .table-scroll,
body[data-role="bank"] .table-wrap,
body[data-role="bank"] .table-scroll,
body[data-role="company"] .table-wrap,
body[data-role="company"] .table-scroll {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* ── 4) Card fills its grid track fluidly; inner wrapper owns the scroll ──
   The .table-card must fill its .view (minmax(0,1fr)) track fluidly.
   min-inline-size:0 lets the card shrink correctly inside that track on
   phones so it never becomes the element that widens the page. We do NOT set
   overflow here on purpose: styles.css:1217 sets overflow:hidden but the
   redesign safety-net (redesign:2455) already restores overflow-x:auto
   globally for wrapperless tables; per-property cascade keeps that intact
   because this rule never touches `overflow`. */
body[data-role="admin"] .table-card,
body[data-role="bank"] .table-card,
body[data-role="company"] .table-card {
  inline-size: 100%;
  min-inline-size: 0;
}

/* ── 5) Admin filter bar already fluid — reaffirm fluid auto-fit grid ─
   styles.css:1666 uses repeat(auto-fit, minmax(180px,1fr)); harden it with
   minmax(min(180px,100%),1fr) so a column can never exceed container width on
   ultra-narrow viewports (1 col @360px, N cols @768px+) and never overflows.
   .admin-filter-bar itself stays full-bleed (it is a filter toolbar, not a
   readability text block). */
body[data-role="admin"] .admin-filter-bar,
body[data-role="bank"] .admin-filter-bar,
body[data-role="company"] .admin-filter-bar {
  inline-size: 100%;
}
body[data-role="admin"] .admin-filter-bar__grid,
body[data-role="bank"] .admin-filter-bar__grid,
body[data-role="company"] .admin-filter-bar__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* ── 6) Action button clusters: wrap on phones, never force overflow ──
   .table-actions is already flex-wrap:wrap (styles.css:1289). The dense
   admin variant is flex-wrap:nowrap (styles.css:1276/1713) ON PURPOSE so it
   scrolls WITH the table inside the wrapper — leave that nowrap intact.
   We only ensure the cluster can shrink (min-inline-size:0) so it never
   becomes the element that widens the page. */
body[data-role="admin"] .table-actions,
body[data-role="bank"] .table-actions,
body[data-role="company"] .table-actions {
  min-inline-size: 0;
}

/* ╔══════ FLUID: forms-fields ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: forms-fields — fluid form grids, fields, inputs, actions.
   Scoped strictly to .form / .form__grid / .field / .form__actions
   plus .field--span2, .inline-actions, .email-otp-row. RTL-safe:
   logical properties only.
   Fixes the fixed-column form box at styles.css:551
   ".form__grid = repeat(2, minmax(0,1fr))", styles.css:1101
   "auth .form__grid = repeat(2, ...)", and styles.css:657
   ".field--span2 = span 2" which breaks at a single column.

   Cascade note: base styles.css sets `.form__grid { grid-template-
   columns: 1fr }` inside `@media (max-width:760px)` (styles.css:3405).
   A media query adds no specificity, so this redesign layer — loaded
   AFTER styles.css — wins with its unconditional auto-fit rule and
   restores natural 421–760px reflow, while its own ≤420px query
   forces a clean single column on phones.
   ════════════════════════════════════════════════════════════════ */

/* 1. FLUID FORM GRID. Was a rigid 2-col track that only collapsed at
   the 760px breakpoint. auto-fit + a min track of min(100%, 240px)
   lets fields flow from 1 to 2 to 3+ columns naturally at every width,
   and a single field never overflows below 240px. */
.form__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  align-items: start;
}

/* 2. FULL-ROW FIELDS. "grid-column: span 2" overflows once auto-fit
   resolves to one column; "1 / -1" always spans the whole row. */
.field--span2 {
  grid-column: 1 / -1;
}

/* 3. Let grid/flex children shrink, preventing min-content overflow
   from long placeholders or values inside a field. */
.field,
.email-otp-row input {
  min-inline-size: 0;
}

/* 4. FLUID INPUTS. Fill the field track, never exceed it. */
.field input,
.field select,
.field textarea,
.email-otp-row input {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

/* 5. READABILITY CAP for single-column forms only, i.e. forms with no
   .form__grid inside. Keeps a sensible fluid width and centers, so a
   lone input never stretches across an ultra-wide page. Multi-column
   .form__grid forms are untouched and keep filling their card. The
   clamp floor (420px) collapses to 100% of the parent on phones, so
   this never causes overflow. (Dropped the redundant min(100%, …)
   wrapper: max-inline-size already cannot exceed the parent.) */
.form:not(:has(.form__grid)) {
  inline-size: 100%;
  max-inline-size: clamp(420px, 60vw, 640px);
  margin-inline: auto;
}

/* 6. ACTION ROWS wrap fluidly with a fluid gap. */
.form__actions,
.inline-actions {
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 12px);
}
.email-otp-row {
  flex-wrap: wrap;
}

/* 7. AUTH form grids. Base re-locked these to a rigid 2-col track at
   styles.css:1101. Make them fluid too (higher specificity + later
   source order = wins over the base rule). */
body[data-role="bank"] .auth-card--web .form__grid,
body[data-role="company"] .auth-card--web .form__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* 8. Phones below 420px: force a clean single column with a tight gap. */
@media (max-width: 420px) {
  .form__grid,
  body[data-role="bank"] .auth-card--web .form__grid,
  body[data-role="company"] .auth-card--web .form__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ╔══════ FLUID: modals-sizing ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: modals-sizing  (append to public/styles-redesign.css)
   Fluid modal dialog: sensible cap, no fixed-px overflow at 360px,
   full-height-safe (dvh) so sticky footer stays reachable + scrolls.
   Scoped to .modal* only. Logical properties (RTL/LTR safe).

   Cascade note: uses `.modal .modal__panel` (specificity 0,2,0) and is
   APPENDED after styles-redesign.css:2177 / :2194 (same specificity),
   so it wins on source order and overrides the fixed widths at
   styles.css:1746-1748 (width/max-height) and styles.css:1757 +
   styles-redesign.css:2194 (camera width).

   Fixed-size evidence overridden:
     - styles.css:1746  .modal__panel { width: min(100%, 760px) }
     - styles.css:1748  .modal__panel { max-height: calc(100vh - 48px) }
     - styles.css:1757  .modal__panel--camera { width: min(100%, 460px) }
     - styles-redesign.css:2194 .modal .modal__panel--camera { width: min(100%, 460px) }
   ════════════════════════════════════════════════════════════════ */

/* ── Panel: fluid width with a sensible readability cap ──
   The overlay `.modal` already has `padding: 24px` (styles.css:1742),
   so the panel never touches the screen edge — no extra self-inset is
   needed. inline-size grows from 320px up to a 640px cap; on phones the
   `100%` term keeps it inside the (already-padded) overlay, so it can
   never overflow 360px. Centered by the existing
   `.modal { display:grid; place-items:center }` (styles.css:1740). */
.modal .modal__panel {
  box-sizing: border-box;
  inline-size: min(100%, clamp(320px, 90vw, 640px));
}

/* ── Panel height: full-height-safe + scroll on small screens ──
   `max-block-size` is the logical alias of `max-height`; declaring the
   vh value first and the dvh value second is a progressive-enhancement
   fallback: browsers without `dvh` drop the invalid dvh calc() and use
   the vh value, so the sticky header/footer stay inside the *visible*
   viewport (mobile dynamic-toolbar safe) where supported. */
.modal .modal__panel {
  max-height: calc(100vh - 48px);                 /* fallback (no dvh) */
  max-block-size: calc(100dvh - clamp(32px, 8vw, 80px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Camera panel: same fluid-with-cap treatment, tighter cap ── */
.modal .modal__panel--camera {
  inline-size: min(100%, clamp(300px, 90vw, 460px));
}

/* ── Very small phones (≤360px): use the full (already-padded) overlay
   width so content has maximum room and nothing overflows. ── */
@media (max-width: 360px) {
  .modal .modal__panel,
  .modal .modal__panel--camera {
    inline-size: 100%;
  }
}

/* ── OPTIONAL (in-scope, non-breaking): reflow the in-modal payment
   method selector. styles.css:1833 hardcodes `grid-template-columns:
   1fr 1fr`; auto-fit keeps two columns on roomy panels but drops to a
   single column on narrow phones for comfier tap targets. Scoped under
   .modal so it cannot affect the selector elsewhere. ── */
.modal .pay-method-selector {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

/* ╔══════ FLUID: fixed-width-sweep ══════╗ */
/* ════════════════════════════════════════════════════════════════
   AREA: fixed-width-sweep  (append to styles-redesign.css)
   CROSS-CUTTING audit result. The site is ALREADY largely fluid:
   base grids use minmax()/auto-fit, tables sit in overflow:auto wraps,
   auth/modal/forms use width:min(100%,Npx) caps, and a full media-query
   stack collapses everything at 1160/980/900/760/680/600/520/480/440px.

   This block fixes ONLY the few gaps NOT owned by another area and NOT
   already handled by an existing rule. After verification two of the
   original rules were dropped as already-handled / no-op (see notes).

   RTL/LTR-safe (logical props only). Zero !important. Scoped to the
   specific classes audited. Each rule cites the styles.css line it
   relaxes. Override-only: it changes nothing that already passes.
   ════════════════════════════════════════════════════════════════ */

/* ── 1) GLOBAL ROOT FLOOR — relax the only site-wide hard min ──────
   styles.css:30  `html { min-width: 320px; }`  forces a horizontal
   scrollbar below 320px. 360px (the smallest required breakpoint)
   already passes, but the owner dislikes hard pixel floors. Lower the
   floor so ultra-narrow / split windows (280-320px) also reflow without
   a scrollbar. Still a sane floor — content is unreadable below ~280px
   regardless. (Scope note: this is a deliberate owner-preference relax
   on the global root, beyond the 360px contract minimum.) */
html {
  min-width: 280px;
}

/* ── 2) TOAST READABILITY CAP — keep cap, guarantee 360px safety ──
   styles.css:151-159  `.navbar__global-feedback` is position:fixed,
   centered, min-width:280px + max-width:480px. At 360px the 480px cap
   is wider than the viewport and the 280px MIN could push past the
   edges. Make it fluid-with-cap so it always fits with a small inline
   gutter. At 360px this resolves to 336px, centered — safe in BOTH
   directions. The corporate redesign layer (styles-redesign.css:280-286)
   already recenters it RTL-safe via logical inset + transform; this
   only constrains its width. */
.navbar__global-feedback {
  min-width: 0;
  width: min(480px, calc(100vw - 24px));
  max-width: none;
}

/* ── 3) WIDE-TABLE SCROLL ENHANCEMENT — touch momentum + no hijack ──
   NOTE: the admin-specific overflow rule from the original draft was
   REMOVED. styles-redesign.css:2455-2458 already sets
   `.table-card { overflow-x:auto; -webkit-overflow-scrolling:touch }`
   for ALL roles/tables (a superset), so an admin-only `:has()` copy
   added nothing. The direct-child `:has(> .requests-table--admin)`
   branch was also REMOVED: the admin table lives inside a
   `.table-scroll`/`.table-wrap` wrapper (styles-redesign.css:2441-2445,
   1990), so it is never a direct child of `.table-card` and the
   selector matched nothing.

   What remains: confirm the base `.table-wrap` (styles.css:1220,
   overflow:auto) also has touch momentum + contained inline overscroll,
   using LOGICAL `overscroll-behavior-inline` (RTL-safe). Pure
   enhancement — no layout change on wide screens where tables fit. */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* ── 4) DEFENSIVE 360px GUARANTEE for fixed-px text caps ──────────
   styles.css:1503 `.org-user-info__name{max-width:220px}` and
   styles.css:4179 `.bank-slot__filename{max-width:200px}` are ellipsis
   caps (safe), but on a 360px phone a 220px cap + avatar + actions in a
   flex row can still be tight. Convert the hard cap to a fluid cap so
   the name shrinks gracefully instead of forcing the row wider. Keeps
   the ellipsis; never grows beyond the original cap. */
.org-user-info__name {
  max-width: min(220px, 60vw);
}
.bank-slot__filename {
  max-width: min(200px, 52vw);
}

/* ── 5) DEAD-MARGIN: ALREADY OWNED — intentionally NOT re-declared ──
   styles.css:296 `.workspace{max-width:1440px}` would leave ~240px dead
   space per side at 1920px. VERIFIED this is already fixed by the fluid
   layout rule at styles-redesign.css:2550-2556:
       body[data-role="admin"|"bank"|"company"] .workspace {
         max-width: none; margin: 0;
         padding-inline: clamp(16px, 4vw, 56px);
       }
   so the corporate workspaces already fill 1920px with a fluid gutter.
   The individual app stays an intentional phone column via
   styles.css:2047 `width: min(100%, var(--individual-phone-width))`.
   Re-declaring `.workspace` here would duplicate/fight that rule, so it
   is deliberately left out. Do NOT uncomment a competing declaration. */