/* ==========================================================================
   RIGHTBELL — CENTRAL THEME / DESIGN SYSTEM
   ==========================================================================
   Single source of truth for color, type, spacing and component styling
   across the entire project.

   Usage:
   1. Load this file BEFORE any other stylesheet on every page/template:
        <link rel="stylesheet" href="{% static 'css/global/theme.css' %}">
   2. Never hard-code a color, font, size, radius, shadow, etc. in a
      page-level stylesheet — reference the custom property instead
      (e.g. `color: var(--color-primary)`).
   3. To re-theme the whole project (new brand color, new font, new type
      scale...), change the value ONCE in the `:root` block below. Every
      screen/component that consumes the variable updates automatically.
   4. Component classes below (.btn, .form-control, .card, .table, .menu,
      .tabs...) are the shared building blocks — reuse them instead of
      writing bespoke per-page styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT FACES — Inter (project-wide typeface)
   Variable font: static/fonts/Inter/Inter-Variable.ttf covers the full
   weight axis (100–900) in one file, so every weight token in section 2.6
   (--font-weight-light … --font-weight-black) resolves from these two faces.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter/Inter-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* ---- 2.1 Brand colors ---------------------------------------------- */
  /* Primary — logo mark green */
  --color-primary-50:  #E9F8F1;
  --color-primary-100: #CFF0E1;
  --color-primary-200: #A3E2C6;
  --color-primary-300: #77D4AB;
  --color-primary-400: #56C797;
  --color-primary-500: #3CB882; /* brand primary */
  --color-primary-600: #2F9A6C;
  --color-primary-700: #237A55;
  --color-primary-800: #185A3E;
  --color-primary-900: #0D3B29;
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);
  --color-primary-contrast: #FFFFFF;

  /* Secondary — logo wordmark navy */
  --color-secondary-50:  #EEF1F4;
  --color-secondary-100: #D6DCE2;
  --color-secondary-200: #AEB9C4;
  --color-secondary-300: #8697A6;
  --color-secondary-400: #5F7488;
  --color-secondary-500: #46596E;
  --color-secondary-600: #32485F; /* brand secondary */
  --color-secondary-700: #263A4C;
  --color-secondary-800: #1B2938;
  --color-secondary-900: #101923;
  --color-secondary: var(--color-secondary-600);
  --color-secondary-hover: var(--color-secondary-700);
  --color-secondary-active: var(--color-secondary-800);
  --color-secondary-contrast: #FFFFFF;

  /* ---- 2.2 Neutrals ----------------------------------------------------- */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-50:  #F7F9FA;
  --color-gray-100: #EEF1F3;
  --color-gray-200: #E1E6E9;
  --color-gray-300: #CBD3D8;
  --color-gray-400: #A8B3BA;
  --color-gray-500: #7C8A93;
  --color-gray-600: #5B6770;
  --color-gray-700: #414C54;
  --color-gray-800: #2B333A;
  --color-gray-900: #1A2024;

  /* ---- 2.3 Semantic / functional colors (form + status feedback) ------- */
  --color-success: var(--color-primary-500);
  --color-success-bg: var(--color-primary-50);
  --color-danger: #E5484D;
  --color-danger-bg: #FDECEC;
  --color-danger-surface-strong: #F6D0D3;
  --color-danger-border-soft: #F5C2C7;
  --color-warning: #F5A623;
  --color-warning-bg: #FDF3E1;
  --color-info: var(--color-secondary-500);
  --color-info-bg: var(--color-secondary-50);

  /* Shared status/data-visualisation palette. Keep categorical colours here
     so dashboards, tables, badges and dialogs never define their own HEX. */
  --color-status-blue: #2F80C9;
  --color-status-blue-bg: #E8F3FB;
  --color-certificate-stamp: #1959B8;
  --color-status-purple: #6F52C9;
  --color-status-purple-bg: #EEEAFB;
  --color-status-orange: #D9822B;
  --color-status-orange-bg: #FFF3DF;
  --color-status-slate: #58697A;
  --color-status-slate-bg: #E9EDF0;
  --color-status-teal: #2F9F78;
  --color-status-teal-bg: #E5F6EF;
  --color-status-pink: #BA6174;
  --color-status-pink-bg: #FBEAF3;
  --color-warning-text: #8A5A00;
  --color-danger-text: #9F2731;
  --color-success-text: var(--color-primary-800);

  /* Academics behaviour screens. Values live here so behaviour-ui.css owns
     layout/selectors only and changes cannot create a second visual theme. */
  --acad-bg: #F6F7FB;
  --acad-ink: #0F172A;
  --acad-muted: #64748B;
  --acad-primary: #0EA5E9;
  --acad-primary-hover: #0284C7;
  --acad-primary-dark: #0369A1;
  --acad-accent: #10B981;
  --acad-accent-strong: #059669;
  --acad-accent-dark: #047857;
  --acad-positive: #22C55E;
  --acad-positive-dark: #15803D;
  --acad-surface: var(--color-white);
  --acad-border: #E5E7EB;
  --acad-danger: #DC2626;
  --acad-danger-dark: #B91C1C;
  --acad-warning: #D97706;
  --acad-teal: #0D9488;
  --acad-slate-50: #F8FAFC;
  --acad-slate-100: #F1F5F9;
  --acad-slate-200: #E2E8F0;
  --acad-slate-300: #CBD5E1;
  --acad-slate-400: #94A3B8;
  --acad-slate-600: #475569;
  --acad-slate-700: #334155;
  --acad-slate-800: #1E293B;
  --acad-success-bg: #ECFDF5;
  --acad-success-border: #A7F3D0;
  --acad-danger-bg: #FEF2F2;
  --acad-teal-bg: #F0FDFA;
  --acad-teal-border: #CCFBF1;

  /* Print/report typography and colours. Print stylesheets import this file
     instead of maintaining their own font and colour constants. */
  --report-font-family: var(--font-family-base);
  --report-font-size-page-number: 9px;
  --report-font-size-body: 11px;
  --report-font-size-small: 10px;
  --report-font-size-section-title: 13px;
  --report-font-size-school-title: 16px;
  --report-color-text: var(--color-black);
  --report-color-muted: #333333;
  --report-color-page: var(--color-white);
  --report-color-heading-bg: #E6E6E6;
  --report-color-total-bg: #D9EDF7;

  /* ---- 2.4 Surface / text / border aliases ------------------------------ */
  --color-bg-body: var(--color-white);
  --color-bg-subtle: var(--color-gray-50);
  --color-bg-muted: var(--color-gray-100);
  --color-bg-inverse: var(--color-secondary-600);

  --color-text-heading: var(--color-secondary-600);
  --color-text-body: var(--color-gray-800);
  --color-text-muted: var(--color-gray-500);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-border-focus: var(--color-primary-500);

  /* Reusable component surfaces used by module-specific layouts. */
  --color-surface-card: var(--color-white);
  --color-surface-header: var(--color-gray-50);
  --color-surface-panel: var(--color-gray-100);
  --color-surface-muted: var(--color-gray-100);
  --color-surface-hover: var(--color-primary-50);
  /* Derived brand surfaces follow --color-primary automatically. */
  --color-primary-surface: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
  --color-primary-surface-strong: color-mix(in srgb, var(--color-primary) 16%, var(--color-white));
  --color-primary-border-soft: color-mix(in srgb, var(--color-primary) 25%, var(--color-white));
  --color-primary-border-strong: color-mix(in srgb, var(--color-primary) 50%, var(--color-white));
  --color-border-soft: var(--color-gray-100);
  --color-table-text: var(--color-secondary-700);
  --color-table-head-bg: var(--color-gray-100);
  --color-table-head-text: var(--color-secondary-500);
  --color-chart-grid: var(--color-gray-200);
  --color-chart-grid-line: rgba(116, 132, 150, 0.14);
  --color-chart-primary-fill: rgba(60, 184, 130, 0.10);
  --color-chart-purple-fill: rgba(111, 82, 201, 0.06);

  /* ---- RightBell STS / Module Design Tokens ----------------------------
     Centralized design tokens for Calendar, Assessments, Attendance & Rules.
     Enables uniform reuse across all templates without per-file :root duplication. */
  --sts-primary: #3CB882;
  --sts-primary-dark: #2EA272;
  --sts-navy: #32485F;
  --sts-navy-deep: #1B2938;
  --sts-navy-darkest: #101923;
  --sts-surface: #FFFFFF;
  --sts-bg-subtle: #F7F9FA;
  --sts-bg-muted: #F1F4F6;
  --sts-border: #E1E6E9;
  --sts-border-strong: #CBD3D8;
  --sts-heading: #1B2938;
  --sts-body: #2B333A;
  --sts-muted: #7C8A93;

  --sts-green: #3CB882;
  --sts-green-hover: #2F9A6C;
  --sts-green-dark: #237A55;
  --sts-green-bg: #E9F8F1;
  --sts-green-border: #B7E8D2;

  --sts-critical: #E5484D;
  --sts-critical-text: #CE2C31;
  --sts-critical-bg: #FEECEE;
  --sts-critical-border: #FDB8BF;

  --sts-sky: #0284C7;
  --sts-sky-bg: #E0F2FE;
  --sts-sky-border: #BAE6FD;

  --sts-purple: #7C3AED;
  --sts-purple-bg: #EDE9FE;
  --sts-purple-border: #DDD6FE;

  --sts-amber: #D97706;
  --sts-amber-bg: #FEF3C7;
  --sts-amber-border: #FDE68A;

  --sts-slate: #475569;
  --sts-slate-bg: #F0F4F8;
  --sts-slate-border: #D5DFE8;

  --sts-good: #3CB882;
  --sts-good-bg: #E9F8F1;
  --sts-good-text: #185A3E;
  --sts-good-border: #A3E2C6;

  --sts-attention: #F5A623;
  --sts-attention-bg: #FDF3E1;
  --sts-attention-text: #8A5A00;
  --sts-attention-border: #F5A623;

  /* ---- Centralized legacy/neutral palette ------------------------------
     Page templates reference these tokens instead of owning raw colours.
     Rename/consolidate semantically as components are modernized. -------- */
  --rb-palette-000080: #000080;
  --rb-palette-0000cd: #0000CD;
  --rb-palette-0072ff: #0072FF;
  --rb-palette-007ba7: #007BA7;
  --rb-palette-0093e9: #0093E9;
  --rb-palette-00aaff: #00AAFF;
  --rb-palette-00c6ff: #00C6FF;
  --rb-palette-024166: #024166;
  --rb-palette-072437: #072437;
  --rb-palette-08798b: #08798B;
  --rb-palette-087b55: #087B55;
  --rb-palette-087c55: #087C55;
  --rb-palette-0d6efd: #0D6EFD;
  --rb-palette-0f52ba: #0F52BA;
  --rb-palette-0f6496: #0F6496;
  --rb-palette-11835f: #11835F;
  --rb-palette-11998e: #11998E;
  --rb-palette-126f58: #126F58;
  --rb-palette-148460: #148460;
  --rb-palette-176bb5: #176BB5;
  --rb-palette-177453: #177453;
  --rb-palette-177c56: #177C56;
  --rb-palette-17a2b8: #17A2B8;
  --rb-palette-185a9d: #185A9D;
  --rb-palette-1a252f: #1A252F;
  --rb-palette-1b6b47: #1B6B47;
  --rb-palette-1d875e: #1D875E;
  --rb-palette-1f3347: #1F3347;
  --rb-palette-21845f: #21845F;
  --rb-palette-2193b0: #2193B0;
  --rb-palette-232526: #232526;
  --rb-palette-237e5e: #237E5E;
  --rb-palette-23805e: #23805E;
  --rb-palette-238660: #238660;
  --rb-palette-239769: #239769;
  --rb-palette-25d366: #25D366;
  --rb-palette-263d50: #263D50;
  --rb-palette-276eaa: #276EAA;
  --rb-palette-287d5a: #287D5A;
  --rb-palette-293f53: #293F53;
  --rb-palette-2a52be: #2A52BE;
  --rb-palette-2b75ad: #2B75AD;
  --rb-palette-2c3e50: #2C3E50;
  --rb-palette-2e303e: #2E303E;
  --rb-palette-2f6fa8: #2F6FA8;
  --rb-palette-2faa79: #2FAA79;
  --rb-palette-2fba86: #2FBA86;
  --rb-palette-333: #333;
  --rb-palette-333399: #333399;
  --rb-palette-33475b: #33475B;
  --rb-palette-334b60: #334B60;
  --rb-palette-342400: #342400;
  --rb-palette-342600: #342600;
  --rb-palette-3498db: #3498DB;
  --rb-palette-353839: #353839;
  --rb-palette-356858: #356858;
  --rb-palette-356b58: #356B58;
  --rb-palette-36454f: #36454F;
  --rb-palette-383838: #383838;
  --rb-palette-385268: #385268;
  --rb-palette-38ef7d: #38EF7D;
  --rb-palette-3a3b45: #3A3B45;
  --rb-palette-3b2f2f: #3B2F2F;
  --rb-palette-3c7599: #3C7599;
  --rb-palette-3d2b1f: #3D2B1F;
  --rb-palette-3f51b5: #3F51B5;
  --rb-palette-40826d: #40826D;
  --rb-palette-40e0d0: #40E0D0;
  --rb-palette-414345: #414345;
  --rb-palette-43cea2: #43CEA2;
  --rb-palette-44340c: #44340C;
  --rb-palette-445d72: #445D72;
  --rb-palette-485968: #485968;
  --rb-palette-48d1cc: #48D1CC;
  --rb-palette-496274: #496274;
  --rb-palette-4a5568: #4A5568;
  --rb-palette-4a90e2: #4A90E2;
  --rb-palette-4b5358: #4B5358;
  --rb-palette-4cc99a: #4CC99A;
  --rb-palette-4f86f7: #4F86F7;
  --rb-palette-50687c: #50687C;
  --rb-palette-50c878: #50C878;
  --rb-palette-516678: #516678;
  --rb-palette-52677a: #52677A;
  --rb-palette-52697c: #52697C;
  --rb-palette-526a7d: #526A7D;
  --rb-palette-527063: #527063;
  --rb-palette-53677a: #53677A;
  --rb-palette-536b7f: #536B7F;
  --rb-palette-555d50: #555D50;
  --rb-palette-556b2f: #556B2F;
  --rb-palette-57b0e4: #57B0E4;
  --rb-palette-57cf94: #57CF94;
  --rb-palette-586b7d: #586B7D;
  --rb-palette-5946b2: #5946B2;
  --rb-palette-594718: #594718;
  --rb-palette-5a55f0: #5A55F0;
  --rb-palette-5a5c51: #5A5C51;
  --rb-palette-5c5c5c: #5C5C5C;
  --rb-palette-5c6c79: #5C6C79;
  --rb-palette-5e4a1b: #5E4A1B;
  --rb-palette-5e7080: #5E7080;
  --rb-palette-635147: #635147;
  --rb-palette-64768a: #64768A;
  --rb-palette-6649b5: #6649B5;
  --rb-palette-66798c: #66798C;
  --rb-palette-667eea: #667EEA;
  --rb-palette-66bfbf: #66BFBF;
  --rb-palette-66bff1: #66BFF1;
  --rb-palette-6b5656: #6B5656;
  --rb-palette-6c63ff: #6C63FF;
  --rb-palette-6c757d: #6C757D;
  --rb-palette-6d4e0f: #6D4E0F;
  --rb-palette-6dd5ed: #6DD5ED;
  --rb-palette-6e707e: #6E707E;
  --rb-palette-6f7e8c: #6F7E8C;
  --rb-palette-6f8191: #6F8191;
  --rb-palette-6fdc9f: #6FDC9F;
  --rb-palette-70193d: #70193D;
  --rb-palette-708090: #708090;
  --rb-palette-70dbb4: #70DBB4;
  --rb-palette-718394: #718394;
  --rb-palette-71ddb5: #71DDB5;
  --rb-palette-748496: #748496;
  --rb-palette-757f9a: #757F9A;
  --rb-palette-764ba2: #764BA2;
  --rb-palette-765719: #765719;
  --rb-palette-7a1f28: #7A1F28;
  --rb-palette-7a5207: #7A5207;
  --rb-palette-7a5c4f: #7A5C4F;
  --rb-palette-7a8278: #7A8278;
  --rb-palette-7ce1bb: #7CE1BB;
  --rb-palette-7d6a38: #7D6A38;
  --rb-palette-7d7f7d: #7D7F7D;
  --rb-palette-7e90a1: #7E90A1;
  --rb-palette-7fff00: #7FFF00;
  --rb-palette-800000: #800000;
  --rb-palette-806d42: #806D42;
  --rb-palette-80d0c7: #80D0C7;
  --rb-palette-84dab9: #84DAB9;
  --rb-palette-8794a0: #8794A0;
  --rb-palette-87d7b8: #87D7B8;
  --rb-palette-8a2be2: #8A2BE2;
  --rb-palette-8a98a5: #8A98A5;
  --rb-palette-8a99a7: #8A99A7;
  --rb-palette-8a99a8: #8A99A8;
  --rb-palette-8a9aa7: #8A9AA7;
  --rb-palette-8b2730: #8B2730;
  --rb-palette-8b6d5c: #8B6D5C;
  --rb-palette-8b9aa8: #8B9AA8;
  --rb-palette-8ba8b7: #8BA8B7;
  --rb-palette-8bc34a: #8BC34A;
  --rb-palette-8d6200: #8D6200;
  --rb-palette-8f6500: #8F6500;
  --rb-palette-93d8bd: #93D8BD;
  --rb-palette-94a2ae: #94A2AE;
  --rb-palette-94a3b3: #94A3B3;
  --rb-palette-960018: #960018;
  --rb-palette-966000: #966000;
  --rb-palette-96a8b7: #96A8B7;
  --rb-palette-98a7b4: #98A7B4;
  --rb-palette-98ff98: #98FF98;
  --rb-palette-9aabb7: #9AABB7;
  --rb-palette-9aabb8: #9AABB8;
  --rb-palette-9b356d: #9B356D;
  --rb-palette-9ba8b3: #9BA8B3;
  --rb-palette-9baab6: #9BAAB6;
  --rb-palette-9c8ce0: #9C8CE0;
  --rb-palette-a0522d: #A0522D;
  --rb-palette-a2acb5: #A2ACB5;
  --rb-palette-a33d47: #A33D47;
  --rb-palette-a4b0ba: #A4B0BA;
  --rb-palette-a7b2bc: #A7B2BC;
  --rb-palette-a8325f: #A8325F;
  --rb-palette-a8e6cf: #A8E6CF;
  --rb-palette-a9343e: #A9343E;
  --rb-palette-a9640c: #A9640C;
  --rb-palette-a9b2bc: #A9B2BC;
  --rb-palette-a9ba9d: #A9BA9D;
  --rb-palette-a9e8d0: #A9E8D0;
  --rb-palette-ad3039: #AD3039;
  --rb-palette-aebdca: #AEBDCA;
  --rb-palette-b03060: #B03060;
  --rb-palette-b0b2b0: #B0B2B0;
  --rb-palette-b192ff: #B192FF;
  --rb-palette-b2beb5: #B2BEB5;
  --rb-palette-b33a45: #B33A45;
  --rb-palette-b37109: #B37109;
  --rb-palette-b52f39: #B52F39;
  --rb-palette-b66a50: #B66A50;
  --rb-palette-b7c3cc: #B7C3CC;
  --rb-palette-b8c8d3: #B8C8D3;
  --rb-palette-b9c4cc: #B9C4CC;
  --rb-palette-b9cbd7: #B9CBD7;
  --rb-palette-badfd0: #BADFD0;
  --rb-palette-bc3944: #BC3944;
  --rb-palette-bce6d2: #BCE6D2;
  --rb-palette-bd3540: #BD3540;
  --rb-palette-bd3944: #BD3944;
  --rb-palette-bdd4ca: #BDD4CA;
  --rb-palette-bde7d5: #BDE7D5;
  --rb-palette-bee5d4: #BEE5D4;
  --rb-palette-bfff7f: #BFFF7F;
  --rb-palette-c0c0c0: #C0C0C0;
  --rb-palette-c1d4d9: #C1D4D9;
  --rb-palette-c2b280: #C2B280;
  --rb-palette-c3424c: #C3424C;
  --rb-palette-c3eadb: #C3EADB;
  --rb-palette-c43c48: #C43C48;
  --rb-palette-c6424c: #C6424C;
  --rb-palette-c6e8d9: #C6E8D9;
  --rb-palette-c73542: #C73542;
  --rb-palette-c7d5de: #C7D5DE;
  --rb-palette-c7e8d8: #C7E8D8;
  --rb-palette-c83440: #C83440;
  --rb-palette-c83945: #C83945;
  --rb-palette-c94a52: #C94A52;
  --rb-palette-c9d7df: #C9D7DF;
  --rb-palette-cbd2d9: #CBD2D9;
  --rb-palette-cbd7df: #CBD7DF;
  --rb-palette-cbd7e0: #CBD7E0;
  --rb-palette-ccccff: #CCCCFF;
  --rb-palette-ccd9e1: #CCD9E1;
  --rb-palette-ccefe0: #CCEFE0;
  --rb-palette-ccffcc: #CCFFCC;
  --rb-palette-cddc39: #CDDC39;
  --rb-palette-cdeadb: #CDEADB;
  --rb-palette-cdeadd: #CDEADD;
  --rb-palette-cdeee0: #CDEEE0;
  --rb-palette-ce9411: #CE9411;
  --rb-palette-cee1ef: #CEE1EF;
  --rb-palette-cff0e1: #CFF0E1;
  --rb-palette-d28a12: #D28A12;
  --rb-palette-d2b48c: #D2B48C;
  --rb-palette-d2dce3: #D2DCE3;
  --rb-palette-d3d3d1: #D3D3D1;
  --rb-palette-d3dee6: #D3DEE6;
  --rb-palette-d4dfe6: #D4DFE6;
  --rb-palette-d4ebe1: #D4EBE1;
  --rb-palette-d5e0e6: #D5E0E6;
  --rb-palette-d6e0e7: #D6E0E7;
  --rb-palette-d70040: #D70040;
  --rb-palette-d73b3e: #D73B3E;
  --rb-palette-d7dde8: #D7DDE8;
  --rb-palette-d7f4e8: #D7F4E8;
  --rb-palette-d7f7e8: #D7F7E8;
  --rb-palette-d8d51b: #D8D51B;
  --rb-palette-d8e1e7: #D8E1E7;
  --rb-palette-d8e1e8: #D8E1E8;
  --rb-palette-d8e2e9: #D8E2E9;
  --rb-palette-d99873: #D99873;
  --rb-palette-d9d9d9: #D9D9D9;
  --rb-palette-d9e2e8: #D9E2E8;
  --rb-palette-d9f6e9: #D9F6E9;
  --rb-palette-dce5ea: #DCE5EA;
  --rb-palette-dcecff: #DCECFF;
  --rb-palette-dde3e8: #DDE3E8;
  --rb-palette-ddf5eb: #DDF5EB;
  --rb-palette-ddf5ec: #DDF5EC;
  --rb-palette-de3163: #DE3163;
  --rb-palette-dff5ec: #DFF5EC;
  --rb-palette-dff6ed: #DFF6ED;
  --rb-palette-dff7eb: #DFF7EB;
  --rb-palette-e0e0e0: #E0E0E0;
  --rb-palette-e1e8ed: #E1E8ED;
  --rb-palette-e1e9ee: #E1E9EE;
  --rb-palette-e1f5ed: #E1F5ED;
  --rb-palette-e1f6ee: #E1F6EE;
  --rb-palette-e2e9ee: #E2E9EE;
  --rb-palette-e2f5ee: #E2F5EE;
  --rb-palette-e35d68: #E35D68;
  --rb-palette-e3e6f0: #E3E6F0;
  --rb-palette-e3eaf0: #E3EAF0;
  --rb-palette-e3ebf0: #E3EBF0;
  --rb-palette-e3f5ed: #E3F5ED;
  --rb-palette-e4d00a: #E4D00A;
  --rb-palette-e4edf3: #E4EDF3;
  --rb-palette-e4f7fa: #E4F7FA;
  --rb-palette-e5aa70: #E5AA70;
  --rb-palette-e5bd53: #E5BD53;
  --rb-palette-e5ecef: #E5ECEF;
  --rb-palette-e5eef5: #E5EEF5;
  --rb-palette-e6b743: #E6B743;
  --rb-palette-e6d6b3: #E6D6B3;
  --rb-palette-e6e4d9: #E6E4D9;
  --rb-palette-e6e6fa: #E6E6FA;
  --rb-palette-e6e6ff: #E6E6FF;
  --rb-palette-e6edf1: #E6EDF1;
  --rb-palette-e7edf1: #E7EDF1;
  --rb-palette-e7edf2: #E7EDF2;
  --rb-palette-e7eef2: #E7EEF2;
  --rb-palette-e7eef3: #E7EEF3;
  --rb-palette-e7f6f0: #E7F6F0;
  --rb-palette-e8747d: #E8747D;
  --rb-palette-e8ad25: #E8AD25;
  --rb-palette-e8edf1: #E8EDF1;
  --rb-palette-e8f0f5: #E8F0F5;
  --rb-palette-e8f2f7: #E8F2F7;
  --rb-palette-e8f2fb: #E8F2FB;
  --rb-palette-e9eef2: #E9EEF2;
  --rb-palette-e9f3fa: #E9F3FA;
  --rb-palette-e9f8f1: #E9F8F1;
  --rb-palette-eaf0f4: #EAF0F4;
  --rb-palette-eaf3f7: #EAF3F7;
  --rb-palette-eaf3fb: #EAF3FB;
  --rb-palette-edf1f3: #EDF1F3;
  --rb-palette-edf1f4: #EDF1F4;
  --rb-palette-edf2f5: #EDF2F5;
  --rb-palette-edf2f6: #EDF2F6;
  --rb-palette-edf4f7: #EDF4F7;
  --rb-palette-edf8f4: #EDF8F4;
  --rb-palette-eedbb9: #EEDBB9;
  --rb-palette-eedc82: #EEDC82;
  --rb-palette-eef3f6: #EEF3F6;
  --rb-palette-eef6f2: #EEF6F2;
  --rb-palette-eef7f1: #EEF7F1;
  --rb-palette-eef8f3: #EEF8F3;
  --rb-palette-eef8f4: #EEF8F4;
  --rb-palette-eef9f4: #EEF9F4;
  --rb-palette-efc4c8: #EFC4C8;
  --rb-palette-efd58d: #EFD58D;
  --rb-palette-efedff: #EFEDFF;
  --rb-palette-effaf6: #EFFAF6;
  --rb-palette-f08a92: #F08A92;
  --rb-palette-f0cdd0: #F0CDD0;
  --rb-palette-f0d490: #F0D490;
  --rb-palette-f0dfb5: #F0DFB5;
  --rb-palette-f0ecfb: #F0ECFB;
  --rb-palette-f0f0f0: #F0F0F0;
  --rb-palette-f0f2f4: #F0F2F4;
  --rb-palette-f0faf6: #F0FAF6;
  --rb-palette-f1c9ce: #F1C9CE;
  --rb-palette-f1f3f9: #F1F3F9;
  --rb-palette-f1f5f7: #F1F5F7;
  --rb-palette-f2c7cb: #F2C7CB;
  --rb-palette-f2c8cb: #F2C8CB;
  --rb-palette-f2c8cc: #F2C8CC;
  --rb-palette-f2cb9: #F2CB9;
  --rb-palette-f2cdd0: #F2CDD0;
  --rb-palette-f2f0e6: #F2F0E6;
  --rb-palette-f2f5f7: #F2F5F7;
  --rb-palette-f2faf7: #F2FAF7;
  --rb-palette-f3c6cb: #F3C6CB;
  --rb-palette-f3dfad: #F3DFAD;
  --rb-palette-f3e6ff: #F3E6FF;
  --rb-palette-f3f3f3: #F3F3F3;
  --rb-palette-f3faf7: #F3FAF7;
  --rb-palette-f3fbf7: #F3FBF7;
  --rb-palette-f4c430: #F4C430;
  --rb-palette-f4f7f9: #F4F7F9;
  --rb-palette-f4fbf8: #F4FBF8;
  --rb-palette-f5e1a0: #F5E1A0;
  --rb-palette-f5f5f5: #F5F5F5;
  --rb-palette-f5f8fa: #F5F8FA;
  --rb-palette-f5fbf8: #F5FBF8;
  --rb-palette-f6c9ce: #F6C9CE;
  --rb-palette-f6df9e: #F6DF9E;
  --rb-palette-f6f8f9: #F6F8F9;
  --rb-palette-f6f9fa: #F6F9FA;
  --rb-palette-f6f9fb: #F6F9FB;
  --rb-palette-f7971e: #F7971E;
  --rb-palette-f7df9f: #F7DF9F;
  --rb-palette-f7faf9: #F7FAF9;
  --rb-palette-f7fafb: #F7FAFB;
  --rb-palette-f7fafc: #F7FAFC;
  --rb-palette-f8b500: #F8B500;
  --rb-palette-f8f9fc: #F8F9FC;
  --rb-palette-f8fafb: #F8FAFB;
  --rb-palette-f8fafc: #F8FAFC;
  --rb-palette-f8fbfa: #F8FBFA;
  --rb-palette-fad0c4: #FAD0C4;
  --rb-palette-fbfcfd: #FBFCFD;
  --rb-palette-fbfefd: #FBFEFD;
  --rb-palette-fceabb: #FCEABB;
  --rb-palette-fd7e14: #FD7E14;
  --rb-palette-fde9eb: #FDE9EB;
  --rb-palette-fdeced: #FDECED;
  --rb-palette-fdeef0: #FDEEF0;
  --rb-palette-ff007f: #FF007F;
  --rb-palette-ff00cc: #FF00CC;
  --rb-palette-ff2400: #FF2400;
  --rb-palette-ff416c: #FF416C;
  --rb-palette-ff4b2b: #FF4B2B;
  --rb-palette-ff4d6d: #FF4D6D;
  --rb-palette-ff5733: #FF5733;
  --rb-palette-ff5c73: #FF5C73;
  --rb-palette-ff66a3: #FF66A3;
  --rb-palette-ff676a: #FF676A;
  --rb-palette-ff6f91: #FF6F91;
  --rb-palette-ff7f50: #FF7F50;
  --rb-palette-ff9a9e: #FF9A9E;
  --rb-palette-ffad90: #FFAD90;
  --rb-palette-ffbf00: #FFBF00;
  --rb-palette-ffc87c: #FFC87C;
  --rb-palette-ffcc99: #FFCC99;
  --rb-palette-ffd200: #FFD200;
  --rb-palette-ffd700: #FFD700;
  --rb-palette-ffdbac: #FFDBAC;
  --rb-palette-ffde59: #FFDE59;
  --rb-palette-ffe066: #FFE066;
  --rb-palette-ffe1e4: #FFE1E4;
  --rb-palette-ffe2e4: #FFE2E4;
  --rb-palette-ffe4e6: #FFE4E6;
  --rb-palette-ffe5b4: #FFE5B4;
  --rb-palette-ffecb3: #FFECB3;
  --rb-palette-fff0c9: #FFF0C9;
  --rb-palette-fff0f1: #FFF0F1;
  --rb-palette-fff1d9: #FFF1D9;
  --rb-palette-fff2dc: #FFF2DC;
  --rb-palette-fff2f2: #FFF2F2;
  --rb-palette-fff2f3: #FFF2F3;
  --rb-palette-fff3d6: #FFF3D6;
  --rb-palette-fff3f3: #FFF3F3;
  --rb-palette-fff44f: #FFF44F;
  --rb-palette-fff4dd: #FFF4DD;
  --rb-palette-fff5e1: #FFF5E1;
  --rb-palette-fff7df: #FFF7DF;
  --rb-palette-fff8e8: #FFF8E8;
  --rb-palette-fff9e9: #FFF9E9;
  --rb-palette-fffdd0: #FFFDD0;
  --rb-palette-ffffe0: #FFFFE0;
  --rb-palette-fffff0: #FFFFF0;
  --rb-palette-0f172a: #0F172A;
  --rb-palette-1d4ed8: #1D4ED8;
  --rb-palette-1e3a8a: #1E3A8A;
  --rb-palette-24739d: #24739D;
  --rb-palette-334155: #334155;
  --rb-palette-3b4ba0: #3B4BA0;
  --rb-palette-3b82f6: #3B82F6;
  --rb-palette-475569: #475569;
  --rb-palette-4a4fc4: #4A4FC4;
  --rb-palette-60a5fa: #60A5FA;
  --rb-palette-64748b: #64748B;
  --rb-palette-6b21a8: #6B21A8;
  --rb-palette-8a5b0c: #8A5B0C;
  --rb-palette-9b690b: #9B690B;
  --rb-palette-b45309: #B45309;
  --rb-palette-b65f1c: #B65F1C;
  --rb-palette-d74751: #D74751;
  --rb-palette-d8b4fe: #D8B4FE;
  --rb-palette-d94f59: #D94F59;
  --rb-palette-d99014: #D99014;
  --rb-palette-dbe1fb: #DBE1FB;
  --rb-palette-dbeafe: #DBEAFE;
  --rb-palette-e0e6ff: #E0E6FF;
  --rb-palette-e2e8f0: #E2E8F0;
  --rb-palette-eef2ff: #EEF2FF;
  --rb-palette-f1f5f9: #F1F5F9;
  --rb-palette-f3e8ff: #F3E8FF;
  --rb-alpha-901: rgba(0,0,0,0.07);
  --rb-alpha-902: rgba(59,130,246,.4);
  --rb-alpha-903: rgba(59,130,246,0);
  --rb-alpha-001: rgb(150, 150, 28);
  --rb-alpha-002: rgb(150, 150, 4);
  --rb-alpha-003: rgb(155, 155, 4);
  --rb-alpha-004: rgb(226, 16, 16);
  --rb-alpha-005: rgb(5, 73, 5);
  --rb-alpha-006: rgba(0, 0, 0, 0.05);
  --rb-alpha-007: rgba(0, 0, 0, 0.35);
  --rb-alpha-008: rgba(0, 0, 0, 0.4);
  --rb-alpha-009: rgba(0, 0, 0, 0.55);
  --rb-alpha-010: rgba(0, 0, 0, 0.9);
  --rb-alpha-011: rgba(0,0,0,.08);
  --rb-alpha-012: rgba(0,0,0,0.01);
  --rb-alpha-013: rgba(0,0,0,0.04);
  --rb-alpha-014: rgba(0,0,0,0.08);
  --rb-alpha-015: rgba(0,0,0,0.12);
  --rb-alpha-016: rgba(0,0,0,0.18);
  --rb-alpha-017: rgba(0,0,0,0.3);
  --rb-alpha-018: rgba(102, 222, 178, .17);
  --rb-alpha-019: rgba(111,82,201,.4);
  --rb-alpha-020: rgba(111,82,201,0);
  --rb-alpha-021: rgba(15, 23, 42, .06);
  --rb-alpha-022: rgba(15, 23, 42, .10);
  --rb-alpha-023: rgba(15, 23, 42, 0.06);
  --rb-alpha-024: rgba(15, 23, 42, 0.08);
  --rb-alpha-025: rgba(16,25,35,.74);
  --rb-alpha-026: rgba(17, 37, 54, .25);
  --rb-alpha-027: rgba(18, 39, 56, .28);
  --rb-alpha-028: rgba(220, 53, 69, .14);
  --rb-alpha-029: rgba(229, 72, 77, .35);
  --rb-alpha-030: rgba(23, 42, 60, .06);
  --rb-alpha-031: rgba(23, 42, 60, .14);
  --rb-alpha-032: rgba(23, 42, 60, .16);
  --rb-alpha-033: rgba(23, 42, 60, .2);
  --rb-alpha-034: rgba(23,42,60,.045);
  --rb-alpha-035: rgba(23,42,60,.05);
  --rb-alpha-036: rgba(23,42,60,.055);
  --rb-alpha-037: rgba(23,42,60,.06);
  --rb-alpha-038: rgba(23,42,60,.07);
  --rb-alpha-039: rgba(23,42,60,.12);
  --rb-alpha-040: rgba(23,42,60,.16);
  --rb-alpha-041: rgba(23,42,60,.2);
  --rb-alpha-042: rgba(236, 183, 105, 0.75);
  --rb-alpha-043: rgba(24, 45, 65, .05);
  --rb-alpha-044: rgba(24, 45, 65, .055);
  --rb-alpha-045: rgba(24, 45, 65, .06);
  --rb-alpha-046: rgba(24, 45, 65, .09);
  --rb-alpha-047: rgba(24, 45, 65, .1);
  --rb-alpha-048: rgba(24,45,65,.055);
  --rb-alpha-049: rgba(24,45,65,.06);
  --rb-alpha-050: rgba(24,45,65,.1);
  --rb-alpha-051: rgba(25, 47, 68, .07);
  --rb-alpha-052: rgba(255, 255, 255, .08);
  --rb-alpha-053: rgba(255, 255, 255, .09);
  --rb-alpha-054: rgba(255, 255, 255, .1);
  --rb-alpha-055: rgba(255, 255, 255, .12);
  --rb-alpha-056: rgba(255, 255, 255, .13);
  --rb-alpha-057: rgba(255, 255, 255, .14);
  --rb-alpha-058: rgba(255, 255, 255, .16);
  --rb-alpha-059: rgba(255, 255, 255, .18);
  --rb-alpha-060: rgba(255, 255, 255, .22);
  --rb-alpha-061: rgba(255, 255, 255, .3);
  --rb-alpha-062: rgba(255, 255, 255, .35);
  --rb-alpha-063: rgba(255, 255, 255, .45);
  --rb-alpha-064: rgba(255, 255, 255, .55);
  --rb-alpha-065: rgba(255, 255, 255, .65);
  --rb-alpha-066: rgba(255, 255, 255, .7);
  --rb-alpha-067: rgba(255, 255, 255, .72);
  --rb-alpha-068: rgba(255, 255, 255, .75);
  --rb-alpha-069: rgba(255, 255, 255, .78);
  --rb-alpha-070: rgba(255, 255, 255, .9);
  --rb-alpha-071: rgba(255, 255, 255, 0.05);
  --rb-alpha-072: rgba(255, 255, 255, 0.08);
  --rb-alpha-073: rgba(255, 255, 255, 0.1);
  --rb-alpha-074: rgba(255, 255, 255, 0.12);
  --rb-alpha-075: rgba(255, 255, 255, 0.2);
  --rb-alpha-076: rgba(255, 255, 255, 0.22);
  --rb-alpha-077: rgba(255, 255, 255, 0.3);
  --rb-alpha-078: rgba(255, 255, 255, 0.4);
  --rb-alpha-079: rgba(255, 255, 255, 0.65);
  --rb-alpha-080: rgba(255, 255, 255, 0.75);
  --rb-alpha-081: rgba(255, 255, 255, 0.78);
  --rb-alpha-082: rgba(255, 255, 255, 0.82);
  --rb-alpha-083: rgba(255, 255, 255, 0.95);
  --rb-alpha-084: rgba(255,255,255,.08);
  --rb-alpha-085: rgba(255,255,255,.1);
  --rb-alpha-086: rgba(255,255,255,.15);
  --rb-alpha-087: rgba(255,255,255,.16);
  --rb-alpha-088: rgba(255,255,255,.18);
  --rb-alpha-089: rgba(255,255,255,.2);
  --rb-alpha-090: rgba(255,255,255,.22);
  --rb-alpha-091: rgba(255,255,255,.35);
  --rb-alpha-092: rgba(255,255,255,.36);
  --rb-alpha-093: rgba(255,255,255,.48);
  --rb-alpha-094: rgba(255,255,255,.5);
  --rb-alpha-095: rgba(255,255,255,.55);
  --rb-alpha-096: rgba(255,255,255,.75);
  --rb-alpha-097: rgba(27, 41, 56, .22);
  --rb-alpha-098: rgba(29, 51, 69, .05);
  --rb-alpha-099: rgba(29, 51, 69, .06);
  --rb-alpha-100: rgba(31, 48, 66, 0.75);
  --rb-alpha-101: rgba(35,151,105,.15);
  --rb-alpha-102: rgba(35,151,105,.2);
  --rb-alpha-103: rgba(47, 187, 136, .12);
  --rb-alpha-104: rgba(50, 72, 95, .09);
  --rb-alpha-105: rgba(50, 72, 95, .10);
  --rb-alpha-106: rgba(50, 72, 95, .11);
  --rb-alpha-107: rgba(50, 72, 95, 0.2);
  --rb-alpha-108: rgba(50, 72, 95, 0.28);
  --rb-alpha-109: rgba(50,72,95,.10);
  --rb-alpha-110: rgba(58, 59, 69, 0.1);
  --rb-alpha-111: rgba(60, 184, 130, 0.10);
  --rb-alpha-112: rgba(60, 184, 130, 0.12);
  --rb-alpha-113: rgba(60, 184, 130, 0.15);
  --rb-alpha-114: rgba(60, 184, 130, 0.16);
  --rb-alpha-115: rgba(60, 184, 130, 0.18);
  --rb-alpha-116: rgba(60, 184, 130, 0.25);
  --rb-alpha-117: rgba(60, 184, 130, 0.28);
  --rb-alpha-118: rgba(60, 184, 130, 0.3);
  --rb-alpha-119: rgba(60, 184, 130, 0.30);
  --rb-alpha-120: rgba(60, 184, 130, 0.45);
  --rb-alpha-121: rgba(60, 184, 130, 0.6);
  --rb-alpha-122: rgba(60, 184, 130, 0.65);
  --rb-alpha-123: rgba(60, 184, 130, 0.9);
  --rb-alpha-124: rgba(60,184,130,.15);
  --rb-alpha-125: rgba(67, 213, 159, .17);
  --rb-alpha-126: rgba(68, 204, 154, .16);
  --rb-alpha-127: rgba(9, 14, 20, 0.18);
  --rb-alpha-128: rgba(9, 158, 244, 0.75);
  --rb-alpha-129: rgba(47, 186, 134, .10);
  --rb-alpha-130: rgba(255, 255, 255, .6);
  --rb-alpha-131: rgba(255, 255, 255, 0.92);
  --rb-alpha-132: rgba(226, 232, 240, 0.85);
  --rb-alpha-133: rgba(60, 184, 130, 0.13);
  --rb-alpha-134: rgba(15, 89, 65, 0.06);
  --rb-alpha-135: rgba(15, 89, 65, 0.07);

  /* ---- 2.5 Logo / icon tokens -------------------------------------------
     The mark uses the graduation-cap-in-hands icon in --color-primary on a
     transparent background; the "Right"/"Bell" wordmark uses
     --color-secondary; the "EVERY BELL MATTERS TO US" tagline uses
     --color-primary with --letter-spacing-wider and uppercase. Keep clear
     space around the mark equal to the cap's width on every side; never
     recolor the mark outside these two tokens. ------------------------- */
  --logo-icon-color: var(--color-primary-500);
  --logo-wordmark-color: var(--color-secondary-600);
  --logo-tagline-color: var(--color-primary-500);

  /* ---- 2.6 Typography ---------------------------------------------------- */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-family-icon: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif;

  /* Font sizes — type scale */
  /* Change this one value to scale typography and rem-based page geometry
     in userdata, enquiry and leads without editing individual templates. */
  --ui-root-size: 16px;
  --font-root-size: var(--ui-root-size);
  --font-size-display: 3rem;      /* 48px — hero / marketing display */
  --font-size-display-lg: 2.2rem; /* 35.2px — compact dashboard display */
  --font-size-h1: 2.25rem;        /* 36px */
  --font-size-h2: 1.875rem;       /* 30px */
  --font-size-h3: 1.5rem;         /* 24px */
  --font-size-h4: 1.25rem;        /* 20px */
  --font-size-h5: 1.125rem;       /* 18px */
  --font-size-h6: 1rem;           /* 16px */
  --font-size-body-lg: 1.125rem;  /* 18px */
  --font-size-body: 1rem;         /* 16px — default */
  --font-size-subheading: 0.9375rem; /* 15px — compact panel headings */
  --font-size-body-sm: 0.875rem;  /* 14px */
  --font-size-ui: 0.8125rem;      /* 13px — compact controls/tables */
  --font-size-caption: 0.78125rem;/* 12.5px — dense helper copy */
  --font-size-small: 0.75rem;     /* 12px — helper/caption text */
  --font-size-tiny: 0.6875rem;    /* 11px — badges/overlines */
  --font-size-print-title: 1.0625rem; /* 17px — certificate/PDF title */
  --font-size-print-micro: 0.625rem;  /* 10px — compact certificate copy */
  --font-size-print-stamp: 0.5rem;    /* 8px — print stamps/signatures */
  --font-size-print-audit: 0.3625rem; /* 5.8px — certificate audit id */
  --font-size-print-id: 0.1875rem;    /* 3px — unobtrusive footer id */
  --font-size-zero: 0;            /* icon-only responsive labels */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-normal: var(--font-weight-regular);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --font-weight-heading: var(--font-weight-semibold);
  --font-weight-subheading: var(--font-weight-medium);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-label: var(--font-weight-medium);
  --font-weight-button: var(--font-weight-semibold);

  /* Line heights */
  --line-height-tight: 1.2;   /* headings */
  --line-height-snug: 1.35;   /* sub-headings */
  --line-height-normal: 1.5;  /* body copy */
  --line-height-relaxed: 1.65;/* long-form text */
  --line-height-print-compact: 1.4;
  --line-height-print-readable: 1.6;
  --line-height-print-copy: 1.9;
  --line-height-print-spacious: 2;
  --line-height-print-stamp: 0.5;
  --line-height-print-stamp-readable: 0.9;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;  /* display / h1 */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;    /* buttons / labels */
  --letter-spacing-wider: 0.08em;   /* uppercase tagline / overline */

  /* ---- 2.7 Spacing scale (4px base unit) --------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ---- 2.7.1 Central component length scale -----------------------------
     Page templates in userdata, enquiry and leads consume these exact-value
     tokens for typography, spacing and component geometry. The initial
     values preserve the current UI pixel-for-pixel; changing them here
     updates every matching component without editing page templates. ------ */
  --ui-len-em-0-02: 0.02em;
  --ui-len-em-0-025: 0.025em;
  --ui-len-em-0-03: 0.03em;
  --ui-len-em-0-035: 0.035em;
  --ui-len-em-0-04: 0.04em;
  --ui-len-em-0-045: 0.045em;
  --ui-len-em-0-05: 0.05em;
  --ui-len-em-0-055: 0.055em;
  --ui-len-em-0-06: 0.06em;
  --ui-len-em-0-08: 0.08em;
  --ui-len-em-0-09: 0.09em;
  --ui-len-em-0-9: 0.9em;
  --ui-len-rem-0-03125: 0.03125rem;
  --ui-len-rem-0-0625: 0.0625rem;
  --ui-len-rem-0-09375: 0.09375rem;
  --ui-len-rem-0-1: 0.1rem;
  --ui-len-rem-0-125: 0.125rem;
  --ui-len-rem-0-15: 0.15rem;
  --ui-len-rem-0-1875: 0.1875rem;
  --ui-len-rem-0-2: 0.2rem;
  --ui-len-rem-0-25: 0.25rem;
  --ui-len-rem-0-3125: 0.3125rem;
  --ui-len-rem-0-35: 0.35rem;
  --ui-len-rem-0-375: 0.375rem;
  --ui-len-rem-0-4: 0.4rem;
  --ui-len-rem-0-4375: 0.4375rem;
  --ui-len-rem-0-46875: 0.46875rem;
  --ui-len-rem-0-5: 0.5rem;
  --ui-len-rem-0-53125: 0.53125rem;
  --ui-len-rem-0-55: 0.55rem;
  --ui-len-rem-0-56: 0.56rem;
  --ui-len-rem-0-5625: 0.5625rem;
  --ui-len-rem-0-58: 0.58rem;
  --ui-len-rem-0-59: 0.59rem;
  --ui-len-rem-0-59375: 0.59375rem;
  --ui-len-rem-0-6: 0.6rem;
  --ui-len-rem-0-61: 0.61rem;
  --ui-len-rem-0-6125: 0.6125rem;
  --ui-len-rem-0-625: 0.625rem;
  --ui-len-rem-0-63: 0.63rem;
  --ui-len-rem-0-64: 0.64rem;
  --ui-len-rem-0-65: 0.65rem;
  --ui-len-rem-0-65625: 0.65625rem;
  --ui-len-rem-0-66: 0.66rem;
  --ui-len-rem-0-67: 0.67rem;
  --ui-len-rem-0-68: 0.68rem;
  --ui-len-rem-0-6875: 0.6875rem;
  --ui-len-rem-0-69: 0.69rem;
  --ui-len-rem-0-7: 0.7rem;
  --ui-len-rem-0-71875: 0.71875rem;
  --ui-len-rem-0-72: 0.72rem;
  --ui-len-rem-0-74: 0.74rem;
  --ui-len-rem-0-75: 0.75rem;
  --ui-len-rem-0-76: 0.76rem;
  --ui-len-rem-0-78: 0.78rem;
  --ui-len-rem-0-78125: 0.78125rem;
  --ui-len-rem-0-8: 0.8rem;
  --ui-len-rem-0-81: 0.81rem;
  --ui-len-rem-0-8125: 0.8125rem;
  --ui-len-rem-0-82: 0.82rem;
  --ui-len-rem-0-84: 0.84rem;
  --ui-len-rem-0-84375: 0.84375rem;
  --ui-len-rem-0-85: 0.85rem;
  --ui-len-rem-0-875: 0.875rem;
  --ui-len-rem-0-88: 0.88rem;
  --ui-len-rem-0-9: 0.9rem;
  --ui-len-rem-0-92: 0.92rem;
  --ui-len-rem-0-9375: 0.9375rem;
  --ui-len-rem-0-95: 0.95rem;
  --ui-len-rem-0-98: 0.98rem;
  --ui-len-rem-1: 1rem;
  --ui-len-rem-10: 10rem;
  --ui-len-rem-10-5: 10.5rem;
  --ui-len-rem-1-05: 1.05rem;
  --ui-len-rem-1-0625: 1.0625rem;
  --ui-len-rem-10-9375: 10.9375rem;
  --ui-len-rem-1-1: 1.1rem;
  --ui-len-rem-11-25: 11.25rem;
  --ui-len-rem-1-125: 1.125rem;
  --ui-len-rem-1-15: 1.15rem;
  --ui-len-rem-11-875: 11.875rem;
  --ui-len-rem-1-1875: 1.1875rem;
  --ui-len-rem-12-5: 12.5rem;
  --ui-len-rem-1-25: 1.25rem;
  --ui-len-rem-12-8125: 12.8125rem;
  --ui-len-rem-12-875: 12.875rem;
  --ui-len-rem-1-3: 1.3rem;
  --ui-len-rem-13-125: 13.125rem;
  --ui-len-rem-1-3125: 1.3125rem;
  --ui-len-rem-1-35: 1.35rem;
  --ui-len-rem-13-75: 13.75rem;
  --ui-len-rem-1-375: 1.375rem;
  --ui-len-rem-1-4: 1.4rem;
  --ui-len-rem-14-375: 14.375rem;
  --ui-len-rem-1-4375: 1.4375rem;
  --ui-len-rem-1-45: 1.45rem;
  --ui-len-rem-14-6875: 14.6875rem;
  --ui-len-rem-15: 15rem;
  --ui-len-rem-1-5: 1.5rem;
  --ui-len-rem-15-625: 15.625rem;
  --ui-len-rem-1-5625: 1.5625rem;
  --ui-len-rem-1-6: 1.6rem;
  --ui-len-rem-16-25: 16.25rem;
  --ui-len-rem-1-625: 1.625rem;
  --ui-len-rem-1-65: 1.65rem;
  --ui-len-rem-16-875: 16.875rem;
  --ui-len-rem-1-6875: 1.6875rem;
  --ui-len-rem-1-7: 1.7rem;
  --ui-len-rem-17-5: 17.5rem;
  --ui-len-rem-1-75: 1.75rem;
  --ui-len-rem-17-8125: 17.8125rem;
  --ui-len-rem-1-8: 1.8rem;
  --ui-len-rem-18-125: 18.125rem;
  --ui-len-rem-1-8125: 1.8125rem;
  --ui-len-rem-18-492188: 18.492188rem;
  --ui-len-rem-18-75: 18.75rem;
  --ui-len-rem-1-875: 1.875rem;
  --ui-len-rem-19-242188: 19.242188rem;
  --ui-len-rem-1-9375: 1.9375rem;
  --ui-len-rem-2: 2rem;
  --ui-len-rem-20: 20rem;
  --ui-len-rem-20-625: 20.625rem;
  --ui-len-rem-2-0625: 2.0625rem;
  --ui-len-rem-21-25: 21.25rem;
  --ui-len-rem-2-125: 2.125rem;
  --ui-len-rem-2-1875: 2.1875rem;
  --ui-len-rem-22-5: 22.5rem;
  --ui-len-rem-2-25: 2.25rem;
  --ui-len-rem-2-3: 2.3rem;
  --ui-len-rem-2-3125: 2.3125rem;
  --ui-len-rem-23-75: 23.75rem;
  --ui-len-rem-2-375: 2.375rem;
  --ui-len-rem-2-4: 2.4rem;
  --ui-len-rem-2-4375: 2.4375rem;
  --ui-len-rem-25: 25rem;
  --ui-len-rem-2-5: 2.5rem;
  --ui-len-rem-26-1875: 26.1875rem;
  --ui-len-rem-26-25: 26.25rem;
  --ui-len-rem-2-625: 2.625rem;
  --ui-len-rem-26-875: 26.875rem;
  --ui-len-rem-2-6875: 2.6875rem;
  --ui-len-rem-27-5: 27.5rem;
  --ui-len-rem-2-75: 2.75rem;
  --ui-len-rem-2-875: 2.875rem;
  --ui-len-rem-29-99875: 29.99875rem;
  --ui-len-rem-3: 3rem;
  --ui-len-rem-30: 30rem;
  --ui-len-rem-3-125: 3.125rem;
  --ui-len-rem-3-1875: 3.1875rem;
  --ui-len-rem-32-5: 32.5rem;
  --ui-len-rem-3-25: 3.25rem;
  --ui-len-rem-3-3125: 3.3125rem;
  --ui-len-rem-3-375: 3.375rem;
  --ui-len-rem-3-4375: 3.4375rem;
  --ui-len-rem-35: 35rem;
  --ui-len-rem-3-5: 3.5rem;
  --ui-len-rem-35-99875: 35.99875rem;
  --ui-len-rem-36: 36rem;
  --ui-len-rem-3-625: 3.625rem;
  --ui-len-rem-37-5: 37.5rem;
  --ui-len-rem-3-75: 3.75rem;
  --ui-len-rem-3-8125: 3.8125rem;
  --ui-len-rem-3-875: 3.875rem;
  --ui-len-rem-4: 4rem;
  --ui-len-rem-40: 40rem;
  --ui-len-rem-4-125: 4.125rem;
  --ui-len-rem-42-5: 42.5rem;
  --ui-len-rem-4-25: 4.25rem;
  --ui-len-rem-43-75: 43.75rem;
  --ui-len-rem-4-375: 4.375rem;
  --ui-len-rem-4-4375: 4.4375rem;
  --ui-len-rem-45: 45rem;
  --ui-len-rem-4-5: 4.5rem;
  --ui-len-rem-4-625: 4.625rem;
  --ui-len-rem-47-5: 47.5rem;
  --ui-len-rem-4-75: 4.75rem;
  --ui-len-rem-47-9375: 47.9375rem;
  --ui-len-rem-47-99875: 47.99875rem;
  --ui-len-rem-48: 48rem;
  --ui-len-rem-4-875: 4.875rem;
  --ui-len-rem-49-375: 49.375rem;
  --ui-len-rem-5: 5rem;
  --ui-len-rem-5-125: 5.125rem;
  --ui-len-rem-5-25: 5.25rem;
  --ui-len-rem-5-5: 5.5rem;
  --ui-len-rem-56-25: 56.25rem;
  --ui-len-rem-5-625: 5.625rem;
  --ui-len-rem-56-3125: 56.3125rem;
  --ui-len-rem-5-75: 5.75rem;
  --ui-len-rem-6: 6rem;
  --ui-len-rem-60: 60rem;
  --ui-len-rem-61-25: 61.25rem;
  --ui-len-rem-61-9375: 61.9375rem;
  --ui-len-rem-61-99875: 61.99875rem;
  --ui-len-rem-62: 62rem;
  --ui-len-rem-62-4375: 62.4375rem;
  --ui-len-rem-62-5: 62.5rem;
  --ui-len-rem-6-25: 6.25rem;
  --ui-len-rem-6-5625: 6.5625rem;
  --ui-len-rem-67-5: 67.5rem;
  --ui-len-rem-6-75: 6.75rem;
  --ui-len-rem-68-75: 68.75rem;
  --ui-len-rem-6-875: 6.875rem;
  --ui-len-rem-7: 7rem;
  --ui-len-rem-70: 70rem;
  --ui-len-rem-71-875: 71.875rem;
  --ui-len-rem-7-1875: 7.1875rem;
  --ui-len-rem-7-25: 7.25rem;
  --ui-len-rem-73-75: 73.75rem;
  --ui-len-rem-7-375: 7.375rem;
  --ui-len-rem-74-9375: 74.9375rem;
  --ui-len-rem-75: 75rem;
  --ui-len-rem-7-5: 7.5rem;
  --ui-len-rem-78-125: 78.125rem;
  --ui-len-rem-7-8125: 7.8125rem;
  --ui-len-rem-7-875: 7.875rem;
  --ui-len-rem-8-125: 8.125rem;
  --ui-len-rem-8-25: 8.25rem;
  --ui-len-rem-8-75: 8.75rem;
  --ui-len-rem-9-25: 9.25rem;
  --ui-len-rem-9-375: 9.375rem;
  --ui-len-rem-9-6875: 9.6875rem;
  --ui-len-rem-neg-0-0625: -0.0625rem;
  --ui-len-rem-neg-0-125: -0.125rem;
  --ui-len-rem-neg-0-3125: -0.3125rem;
  --ui-len-rem-neg-0-375: -0.375rem;
  --ui-len-rem-neg-0-5: -0.5rem;
  --ui-len-rem-neg-0-625: -0.625rem;
  --ui-len-rem-neg-0-875: -0.875rem;
  --ui-len-rem-neg-0-9375: -0.9375rem;
  --ui-len-rem-neg-1: -1rem;
  --ui-len-rem-neg-1-125: -1.125rem;
  --ui-len-rem-neg-1-1875: -1.1875rem;
  --ui-len-rem-neg-1-375: -1.375rem;
  --ui-len-rem-neg-1-75: -1.75rem;
  --ui-len-rem-neg-2-3125: -2.3125rem;
  --ui-len-rem-neg-4-75: -4.75rem;

  /* ---- 2.8 Radius --------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px — inputs, badges */
  --radius-md: 0.5rem;    /* 8px — buttons, cards */
  --radius-lg: 0.75rem;   /* 12px — panels, modals */
  --radius-xl: 1rem;      /* 16px — large surfaces */
  --radius-pill: 999px;   /* pills / tags */
  --radius-circle: 50%;   /* avatars / icon buttons */

  /* Shared action geometry. Page classes may control placement/width, but
     normal action buttons get their typography and dimensions from here. */
  --button-height: 2.375rem;
  --button-radius: var(--radius-md);
  --button-font-size: var(--font-size-body-sm);
  --button-padding-y: var(--space-2);
  --button-padding-x: var(--space-4);
  --button-gap: var(--space-2);

  /* Shared form-control geometry. Inputs and dropdowns across every app
     consume these tokens so their shape and height stay identical.
     Tied to --button-height (defined above) so a filter row's inputs and
     dropdowns always line up with its buttons at the same height. */
  --form-control-height: var(--button-height);
  --form-control-radius: var(--radius-md);
  --form-control-font-size: var(--font-size-body-sm);
  --form-control-padding-y: var(--space-2);
  --form-control-padding-x: var(--space-4);
  --form-control-bg: var(--color-white);
  --form-control-text: var(--color-text-body);
  --form-control-placeholder: var(--color-text-disabled);
  --form-control-border: var(--color-border-strong);
  --form-option-font-size: var(--font-size-small);
  --form-option-radius: var(--radius-md);
  --form-option-padding-y: var(--space-2);
  --form-option-padding-x: var(--space-3);
  --form-menu-radius: var(--radius-lg);
  --form-menu-shadow: var(--shadow-lg);
  --form-menu-max-height: min(50vh, 300px);

  /* Shared top-of-screen feedback messages. */
  --alert-font-size: var(--font-size-body-sm);
  --alert-radius: var(--radius-lg);
  --alert-padding-y: var(--space-3);
  --alert-padding-x: var(--space-4);
  --alert-gap: var(--space-3);
  --alert-margin-bottom: var(--space-4);
  --alert-icon-size: var(--font-size-body);

  /* Shared page/layout geometry */
  --layout-content-max-width: 87.5rem; /* 1400px */
  --layout-column-min-width: 17.5rem; /* 280px */
  --layout-sidebar-min-width: var(--layout-column-min-width);
  /* Top is 0 so every page's .rb-page-header sits flush under the topbar,
     matching dashboard.html/userprofiledetails.html/usersettings.html/
     loginsecurity.html — the only pages that never had this padding
     (bare .container-fluid, no page-scoped wrapper class) and were the
     reference for "correct" spacing. Left/right/bottom stay as they were. */
  --layout-page-padding: 0 1.25rem 1.875rem;
  --layout-page-padding-mobile: 0 0.625rem 1.5rem;
  --layout-section-gap: 0.875rem;
  --layout-grid-gap: 1rem;

  /* Shared application chrome: topbar, page header and footer.
     Change these values here to update userdata, enquiry and leads. */
  --topbar-font-family: var(--font-family-base);
  --topbar-font-size: var(--font-size-body-sm);
  --topbar-bg: var(--color-white);
  --topbar-text: var(--color-secondary-700);
  --topbar-height: 4.375rem;
  --topbar-margin-bottom: 1.5rem;
  --topbar-shadow: var(--shadow-sm);
  --topbar-brand-gap: 0.5rem;
  --topbar-brand-padding: 0.5rem 1.1rem;
  --topbar-brand-font-size: var(--font-size-body-sm);
  --topbar-brand-icon-size: 0.85rem;
  --topbar-brand-bg-start: var(--color-secondary-600);
  --topbar-brand-bg-end: var(--color-secondary-800);
  --topbar-brand-text: var(--color-white);
  --topbar-brand-icon-color: var(--color-primary-200);
  --topbar-brand-shadow: 0 0.25rem 0.875rem rgba(31, 48, 66, 0.75);
  --topbar-border-width: 0.0625rem;
  --topbar-focus-ring-size: 0.125rem;
  --topbar-focus-ring-hover-size: 0.1875rem;
  --topbar-session-gap: 0.5rem;
  --topbar-session-padding: 0.45rem 0.9rem;
  --topbar-session-bg: var(--color-primary-50);
  --topbar-session-border: var(--color-primary-200);
  --topbar-session-text: var(--color-secondary-700);
  --topbar-control-size: 2.375rem;
  --topbar-mobile-control-height: 2.75rem;
  --topbar-session-edit-size: 1.25rem;
  --topbar-session-edit-font-size: 0.55rem;
  --topbar-session-menu-width: 10rem;
  --topbar-avatar-border-width: 0.125rem;
  --topbar-profile-avatar-size: var(--avatar-size-compact);
  --topbar-profile-menu-width: 14.375rem;
  --topbar-profile-menu-padding: 0.5rem;
  --topbar-profile-header-padding: 0.7rem 0.9rem;
  --topbar-profile-item-padding: 0.55rem 0.75rem;
  --topbar-profile-menu-icon-width: 1rem;
  --topbar-profile-divider-margin: 0.35rem 0;
  --topbar-badge-size: 1rem;
  --topbar-badge-font-size: 0.62rem;
  --topbar-badge-inset: 0.125rem;
  --topbar-badge-padding: 0 0.25rem;
  --topbar-notification-menu-min-width: 20rem;
  --topbar-notification-menu-max-width: 21.25rem;
  --topbar-notification-menu-max-height: min(70vh, 23.75rem);
  --topbar-notification-header-padding: 0.8rem 1rem;
  --topbar-notification-item-padding: 0.7rem 1rem;
  --topbar-notification-count-size: 1.25rem;
  --topbar-notification-count-font-size: 0.7rem;
  --topbar-notification-count-padding: 0 0.375rem;
  --topbar-notification-item-gap: 0.625rem;
  --topbar-notification-dot-size: 0.5rem;
  --topbar-notification-dot-offset: 0.375rem;
  --topbar-notification-text-gap: 0.125rem;
  --topbar-notification-empty-gap: 0.5rem;
  --topbar-notification-empty-padding: 2rem 1rem;
  --topbar-notification-empty-icon-size: var(--font-size-h3);
  --topbar-mobile-gap: 0.35rem 0.5rem;
  --topbar-mobile-padding: 0.5rem 0.65rem;
  --topbar-mobile-session-padding: 0.35rem 0.55rem;
  --topbar-mobile-brand-padding: 0.4rem 0.65rem;
  --topbar-mobile-brand-font-size: 0.72rem;
  --topbar-mobile-link-padding-x: 0.4rem;

  /* Shared Leads/Enquiry lead-profile hero and compact table actions. */
  --rlc-hero-avatar-border: rgba(255, 255, 255, 0.22);
  --rlc-hero-avatar-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.18);
  --rlc-hero-eyebrow-text: rgba(255, 255, 255, 0.68);
  --rlc-hero-action-bg: rgba(255, 255, 255, 0.10);
  --rlc-hero-action-border: rgba(255, 255, 255, 0.18);
  --rlc-hero-action-bg-hover: rgba(255, 255, 255, 0.18);
  --rlc-hero-action-icon-bg: rgba(255, 255, 255, 0.13);
  --rlc-hero-action-caption: rgba(255, 255, 255, 0.65);
  --rlc-hero-divider: rgba(255, 255, 255, 0.14);
  --rlc-hero-metric-icon-bg: rgba(255, 255, 255, 0.10);
  --rlc-hero-metric-caption: rgba(255, 255, 255, 0.62);
  --rlc-table-action-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

  --page-header-font-family: var(--font-family-base);
  --page-header-font-size: var(--font-size-body-sm);
  --page-header-title-font-size: var(--font-size-h5);
  --page-header-subtitle-font-size: var(--font-size-small);
  --page-header-min-height: 4.875rem;
  --page-header-gap: 0.625rem;
  --page-header-padding: 1.1rem 1.5rem;
  --page-header-padding-mobile: 0.9375rem;
  --page-header-margin-bottom: 1.5rem;
  --page-header-bg-start: var(--color-secondary-600);
  --page-header-bg-end: var(--color-secondary-800);
  --page-header-text: var(--color-white);
  --page-header-radius: var(--radius-lg);
  --page-header-icon-size: 2.375rem;
  --page-header-icon-bg: rgba(255, 255, 255, 0.10);
  --page-header-icon-color: var(--color-primary-200);
  --page-header-subtitle-color: rgba(255, 255, 255, 0.75);
  --page-header-action-bg: rgba(255, 255, 255, 0.08);
  --page-header-action-border: rgba(255, 255, 255, 0.45);
  --page-header-action-font-size: 0.6875rem;
  --page-header-action-min-height: 2.25rem;
  --page-header-action-padding: 0.4375rem 0.75rem;
  --page-header-meta-bg: rgba(255, 255, 255, 0.12);
  --page-header-meta-color: rgba(255, 255, 255, 0.85);

  --footer-font-family: var(--font-family-base);
  --footer-font-size: 0.8rem;
  --footer-font-weight: var(--font-weight-regular);
  --footer-line-height: 1;
  --footer-padding: 2rem 0;
  --footer-bg: var(--color-white);
  --footer-text: var(--color-text-muted);
  --footer-standalone-bg: transparent;
  --footer-standalone-text: rgba(255, 255, 255, 0.65);
  --footer-standalone-margin-top: 3rem;

  /* Shared Bootstrap modal shell used by userdata, enquiry and leads.
     Page templates only choose the title/body/action label; every visual
     decision for the popup itself is controlled here. */
  --modal-font-family: var(--font-family-base);
  --modal-font-size: var(--font-size-body-sm);
  --modal-line-height: var(--line-height-normal);
  --modal-radius: var(--radius-xl);
  --modal-width: 31.25rem;
  --modal-width-lg: 50rem;
  --modal-width-xl: 71.25rem;
  --modal-bg: var(--color-white);
  --modal-body-bg: var(--color-white);
  --modal-footer-bg: var(--color-bg-subtle);
  --modal-border: var(--color-border);
  --modal-shadow: var(--shadow-lg);
  --modal-header-bg-start: var(--color-secondary-600);
  --modal-header-bg-end: var(--color-secondary-900);
  --modal-header-text: var(--color-white);
  --modal-header-icon: var(--color-primary-300);
  --modal-header-padding: var(--space-4) var(--space-5);
  --modal-body-padding: var(--space-5);
  --modal-footer-padding: var(--space-3) var(--space-5);
  --modal-title-font-size: var(--font-size-h5);
  --modal-title-font-weight: var(--font-weight-bold);
  --modal-close-size: 2rem;
  --modal-close-font-size: var(--font-size-h4);
  --modal-close-bg: rgba(255, 255, 255, 0.10);
  --modal-close-bg-hover: rgba(255, 255, 255, 0.20);
  --modal-close-color: var(--color-white);
  --modal-button-height: 2.375rem;
  --modal-button-radius: var(--radius-md);
  --modal-button-font-size: var(--font-size-body-sm);
  --modal-button-padding: var(--space-2) var(--space-5);
  --modal-cancel-bg: var(--color-secondary-600);
  --modal-cancel-bg-hover: var(--color-secondary-700);
  --modal-cancel-text: var(--color-white);
  --modal-action-bg: var(--color-primary);
  --modal-action-bg-hover: var(--color-primary-hover);
  --modal-action-text: var(--color-white);
  --modal-toolbar-bg: var(--color-bg-subtle);
  --modal-toolbar-border: var(--color-border);
  --modal-toolbar-radius: var(--radius-lg);
  --modal-toolbar-padding: var(--space-2);
  --modal-toolbar-gap: var(--space-2);
  --modal-mobile-margin: var(--space-3);
  --modal-mobile-header-padding: var(--space-3) var(--space-4);
  --modal-mobile-body-padding: var(--space-4);
  --modal-mobile-footer-padding: var(--space-3) var(--space-4);

  /* SweetAlert2 is bundled vendor code, but every visual value below is
     owned by the project theme so alerts never fall back to vendor colours,
     typography or component dimensions. */
  --swal-font-family: var(--font-family-base);
  --swal-font-size: var(--font-size-body);
  --swal-popup-width: 32rem;
  --swal-popup-max-width: calc(100% - (var(--space-4) * 2));
  --swal-popup-padding: 0 0 var(--space-5);
  --swal-popup-radius: var(--radius-lg);
  --swal-popup-bg: var(--color-white);
  --swal-popup-text: var(--color-text-body);
  --swal-popup-shadow: var(--shadow-lg);
  --swal-backdrop: rgba(16, 25, 35, 0.5);
  --swal-title-font-size: var(--font-size-h2);
  --swal-title-font-weight: var(--font-weight-semibold);
  --swal-title-padding: 0.8em 1em 0;
  --swal-content-font-size: var(--font-size-body-lg);
  --swal-content-padding: 1em 1.6em 0.3em;
  --swal-actions-margin: var(--space-5) auto 0;
  --swal-actions-gap: var(--space-2);
  --swal-button-padding: var(--space-2) var(--space-5);
  --swal-button-font-size: var(--font-size-body-sm);
  --swal-button-radius: var(--radius-md);
  --swal-close-size: 2.5rem;
  --swal-close-font-size: var(--font-size-h3);
  --swal-close-color: var(--color-text-muted);
  --swal-close-hover: var(--color-danger);
  /* SweetAlert's internal icon strokes use em-based geometry. Scaling this
     unit therefore resizes the ring and every internal mark together. */
  --swal-icon-unit: 1rem;
  --swal-icon-size: 5em;
  --swal-icon-margin: var(--space-10) auto 0.6rem;
  --swal-icon-border-width: 0.25rem;
  --swal-icon-content-size: 3.75em;
  --swal-icon-success: var(--color-success);
  --swal-icon-error: var(--color-danger);
  --swal-icon-warning: var(--color-warning);
  --swal-icon-info: var(--color-info);
  --swal-icon-question: var(--color-secondary);
  --swal-icon-ring: color-mix(in srgb, var(--color-success) 30%, transparent);
  --swal-input-height: var(--form-control-height);
  --swal-input-margin: var(--space-4) var(--space-8) var(--space-1);
  --swal-input-padding: 0 var(--form-control-padding-x);
  --swal-input-font-size: var(--form-control-font-size);
  --swal-input-radius: var(--form-control-radius);
  --swal-textarea-height: var(--textarea-min-height-lg);
  --swal-validation-padding: var(--space-2);
  --swal-loader-size: 2.2rem;
  --swal-loader-border-width: 0.25rem;

  /* Component dimensions that intentionally differ from a normal input */
  --textarea-min-height-sm: 5.625rem; /* 90px */
  --textarea-min-height-compact: 5.75rem; /* 92px */
  --textarea-min-height: 6rem;        /* 96px */
  --textarea-min-height-md: 6.25rem;  /* 100px */
  --textarea-min-height-comfortable: 6.875rem; /* 110px */
  --textarea-min-height-lg: 7.5rem;   /* 120px */
  --choice-size-sm: 0.9375rem;        /* 15px */
  --choice-size: 1rem;                /* 16px */
  --choice-size-md: 1.0625rem;        /* 17px */
  --choice-size-lg: 1.125rem;         /* 18px */
  --choice-size-xl: 1.375rem;         /* 22px */
  --avatar-size-xs: 1.9375rem;        /* 31px */
  --avatar-size-table: 2rem;          /* 32px */
  --avatar-size-compact: 2.125rem;     /* 34px */
  --avatar-size-control: 2.5rem;       /* 40px */
  --avatar-size-list: 2.625rem;        /* 42px */
  --avatar-size-card: 3.5rem;          /* 56px */
  --avatar-size-sm: 3.75rem;          /* 60px */
  --avatar-size-sm-plus: 3.875rem;     /* 62px */
  --avatar-size-profile: 4.25rem;      /* 68px */
  --avatar-size-md: 4.5rem;           /* 72px */
  --avatar-size-md-plus: 4.625rem;     /* 74px */
  --avatar-size-lg: 5.5rem;           /* 88px */
  --photo-preview-size: 11.75rem;      /* 188px */
  --camera-height: 17.5rem;           /* 280px */
  --camera-height-mobile: 13.75rem;   /* 220px */
  --crop-height-max: 32.5rem;         /* 520px */
  --crop-height-mobile-max: 26.25rem; /* 420px */
  --crop-min-height: 17.5rem;         /* 280px */
  --chart-height-sm: 13.125rem;       /* 210px */
  --chart-height-mobile: 13.75rem;    /* 220px */
  --chart-height-compact: 14.375rem;  /* 230px */
  --chart-height-md: 14.6875rem;      /* 235px */
  --chart-height-stage-lg: 15rem;     /* 240px */
  --chart-height-bar: 15.625rem;      /* 250px */
  --chart-height-responsive: 16.25rem;/* 260px */
  --chart-height: 17.5rem;            /* 280px */
  --chart-height-trend: 17.8125rem;   /* 285px */
  --chart-height-lg: 19.375rem;       /* 310px */
  --chart-height-xl: 20.3125rem;      /* 325px */
  --chart-font-scale-body: 0.75;
  --chart-font-scale-small: 0.625;
  --chart-font-scale-tiny: 0.5625;
  --chart-font-scale-tooltip-title: 0.875;

  /* CSS custom properties cannot be interpolated inside native @media
     conditions. These are the canonical reference values; page queries use
     the matching rem literals so there is one documented breakpoint scale. */
  --breakpoint-xs: 22.5rem;   /* 360px */
  --breakpoint-sm: 36rem;     /* 576px */
  --breakpoint-md: 48rem;     /* 768px */
  --breakpoint-lg: 62rem;     /* 992px */
  --breakpoint-xl: 75rem;     /* 1200px */

  /* ---- 2.9 Elevation / shadow --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 25, 35, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 25, 35, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 25, 35, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);

  /* ---- 2.10 Motion --------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ---- 2.11 Layout ------------------------------------------------------- */
  --container-max-width: var(--layout-content-max-width);

  /* ---- 2.12 Z-index scale --------------------------------------------------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-topbar: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1060;
  --z-toast: 1070;
}

/* --------------------------------------------------------------------------
   3. BASE ELEMENTS
   -------------------------------------------------------------------------- */
html {
  box-sizing: border-box;
  font-size: var(--font-root-size);
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg-body);
  -webkit-font-smoothing: antialiased;
}

/* Form widgets do not inherit typography consistently in every browser.
   Keep typed values, native option lists and buttons on the project font. */
button,
input,
optgroup,
option,
select,
textarea {
  font-family: var(--font-family-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
}
/* A very common pattern across this project's older page templates: a
   colored/dark card header with Bootstrap's `.text-white`, and a real
   <h1>-<h6> inside it for the title. Without this, the rule above wins
   over the inherited white (an element's own color always beats an
   inherited one) and the heading becomes unreadable against the
   background it's sitting on. */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white {
  color: #fff !important;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-subheading); letter-spacing: var(--letter-spacing-normal); }
h5 { font-size: var(--font-size-h5); font-weight: var(--font-weight-subheading); letter-spacing: var(--letter-spacing-normal); }
h6 { font-size: var(--font-size-h6); font-weight: var(--font-weight-subheading); letter-spacing: var(--letter-spacing-normal); }

.display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-heading);
}

p {
  margin: 0 0 var(--space-4);
}

.text-lg { font-size: var(--font-size-body-lg); }
.text-sm { font-size: var(--font-size-body-sm); }
.text-small { font-size: var(--font-size-small); color: var(--color-text-muted); }
.text-tiny {
  font-size: var(--font-size-tiny);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-subtle { background-color: var(--color-bg-subtle); }

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

::selection {
  background-color: var(--color-primary-100);
  color: var(--color-secondary-700);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-button);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  box-sizing: border-box !important;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), box-shadow var(--transition-base);
}
.btn:focus-visible {
  box-shadow: var(--shadow-focus);
}
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800));
  border-color: var(--color-primary-hover);
}
.btn-primary:active:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-800));
  border-color: var(--color-primary-active);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-secondary-contrast);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}
.btn-secondary:active:not(:disabled) {
  background-color: var(--color-secondary-active);
  border-color: var(--color-secondary-active);
}

.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-600);
}
.btn-outline-primary:hover:not(:disabled) {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-50);
  color: var(--color-secondary-700);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-muted);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

.btn-sm { height: 1.875rem !important; min-height: 1.875rem !important; max-height: 1.875rem !important; box-sizing: border-box !important; padding: var(--space-1) var(--space-3) !important; font-size: var(--font-size-small) !important; }
.btn-lg { height: 3rem !important; min-height: 3rem !important; max-height: 3rem !important; box-sizing: border-box !important; padding: var(--space-3) var(--space-6) !important; font-size: var(--font-size-body) !important; }
.btn-block { display: flex; width: 100%; }

/* Legacy page names remain valid while their visual geometry is owned by
   the shared .btn system. These selectors intentionally exclude page-header
   actions, whose compact sizing is controlled by --page-header-action-*.
   Layout rules such as width/grid placement stay in each page. */
:is(
  .cne-action-btn,
  .qe-action-btn,
  .el-filter-btn,
  .esa-filter-btn,
  .cp-btn,
  .eqdm-btn,
  .rlc-btn,
  .vld-filter-btn,
  [class*="-filter-btn"],
  [class*="-action-btn"]
):not(.btn-sm):not([class*="-btn-sm"]):not(.btn-lg):not([class*="-btn-lg"]) {
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  box-sizing: border-box !important;
  border-radius: var(--button-radius) !important;
  gap: var(--button-gap) !important;
  padding: var(--button-padding-y) var(--button-padding-x) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--font-weight-button) !important;
  line-height: var(--line-height-normal) !important;
}
:is(
  .cne-action-btn,
  .qe-action-btn,
  .el-filter-btn,
  .esa-filter-btn,
  .cp-btn,
  .eqdm-btn,
  .rlc-btn,
  .vld-filter-btn,
  [class*="-filter-btn"],
  [class*="-action-btn"]
):is(.btn-sm, [class*="-btn-sm"]) {
  height: 1.875rem !important;
  min-height: 1.875rem !important;
  max-height: 1.875rem !important;
  box-sizing: border-box !important;
  padding: var(--space-1) var(--space-2) !important;
  font-size: var(--font-size-small) !important;
}

/* --------------------------------------------------------------------------
   5. FORMS & INPUTS
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: inline-block;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-label);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}
.form-label .required { color: var(--color-danger); margin-left: var(--space-1); }

.form-control,
.form-select,
.custom-select,
textarea.form-control {
  width: 100%;
  font-family: var(--font-family-base);
  font-size: var(--form-control-font-size);
  font-weight: var(--font-weight-regular);
  color: var(--form-control-text);
  background-color: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  padding: var(--form-control-padding-y) var(--form-control-padding-x);
  line-height: var(--line-height-normal);
  box-sizing: border-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Chrome/Edge on Windows render a native <select>'s internal text area
   a few px taller than a plain <input> even with identical padding/
   line-height — a fixed min-height (not applied to <textarea>, which is
   deliberately taller) guarantees every field in a row lines up. */
.form-control:not(textarea),
.form-select,
.custom-select,
select.form-control,
input.form-control:not(textarea) {
  height: var(--form-control-height) !important;
  min-height: var(--form-control-height) !important;
  max-height: var(--form-control-height) !important;
  box-sizing: border-box !important;
}

.form-control-sm,
select.form-control-sm,
.custom-select-sm {
  height: 1.875rem;
  min-height: 1.875rem;
  max-height: 1.875rem;
  box-sizing: border-box;
  font-size: var(--font-size-small);
  padding: var(--space-1) var(--space-2);
}

.form-control-lg,
select.form-control-lg,
.custom-select-lg {
  height: 3rem !important;
  min-height: 3rem !important;
  max-height: 3rem !important;
  box-sizing: border-box !important;
  font-size: var(--font-size-body) !important;
  padding: var(--space-3) var(--space-4) !important;
}
/* Capitalize only the *hint* text ("Enter Full Name"), never what the user
   actually types — text-transform on the input itself would visually
   force-capitalize the real typed value too (e.g. "john doe" would render
   as "John Doe" while the underlying value stays lowercase, misleading the
   user about what they actually entered). Scoping this to ::placeholder
   only affects the placeholder pseudo-element, not the input's own text. */
.form-control::placeholder {
  color: var(--form-control-placeholder);
  text-transform: capitalize;
}
.form-control[type="email"]::placeholder,
.form-control[type="url"]::placeholder,
.form-control[type="password"]::placeholder,
.form-control[type="number"]::placeholder,
.form-control[name*="email" i]::placeholder,
.form-control[id*="email" i]::placeholder,
.form-control[name*="website" i]::placeholder,
.form-control[id*="website" i]::placeholder,
.form-control[name*="_url" i]::placeholder,
.form-control[id*="_url" i]::placeholder {
  text-transform: none;
}
.form-control:focus,
.form-select:focus,
.custom-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.form-control:disabled,
.form-control.is-disabled,
.form-select:disabled,
.custom-select:disabled {
  background-color: var(--color-bg-muted);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
/* :read-only also matches <select> in every browser (it's never "editable"
   the way an <input>/<textarea> is), even when it's a perfectly normal,
   enabled dropdown — so this must stay scoped away from select, or every
   themed dropdown site-wide would render with the muted "readonly" fill
   instead of white. */
.form-control:read-only:not(select) {
  background-color: var(--color-bg-muted);
  cursor: default;
}
/* intl-tel-input (see static/js/global/phone-input.js) — unified typography and sizing
   matching the rest of the project form controls */
.iti {
  width: 100%;
  font-family: var(--font-family-base) !important;
}
.iti__country-container {
  z-index: 2;
}
.iti__dropdown-content {
  z-index: var(--z-modal);
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
}
.iti__country-list {
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
}
.iti__country {
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
  line-height: var(--line-height-normal) !important;
}
.iti__country-name,
.iti__dial-code {
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
}
.iti__search-input {
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
}
.iti input,
.iti .form-control,
.iti__tel-input,
input[data-phone-input] {
  height: var(--form-control-height) !important;
  min-height: var(--form-control-height) !important;
  max-height: var(--form-control-height) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--form-control-text) !important;
  letter-spacing: normal !important;
  box-sizing: border-box !important;
}
.iti__selected-country,
.iti__selected-dial-code {
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--form-control-text) !important;
  letter-spacing: normal !important;
}
.form-control.is-invalid,
.form-select.is-invalid,
.rb-date-alt-input.is-invalid,
[class*="-select-toggle"].is-invalid {
  border-color: var(--color-danger) !important;
}

.form-control.is-valid {
  border-color: var(--color-success);
}

/* One invalid-control contract across Userdata, Leads and Enquiry. Custom
   select buttons replace their chevron with the shared red exclamation.
   Matched by [class*="-select-toggle"]/[class$="-select-chevron"] (this
   project has several near-identical copies of the same themed-dropdown
   component -- .rb-select-*, .rlc-select-*, .cne-select-*, .cp-select-*,
   .el-select-*, .esa-select-*, ... -- see the [class*="-select-menu"] note
   below) so every prefix gets the icon, not just whichever ones happened to
   be listed by name here; a hardcoded list silently stops covering new
   pages the moment someone adds another prefix. */
[class*="-select-toggle"].is-invalid::after {
  content: "\f06a";
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0 0 0 auto;
  border: 0;
  color: var(--color-danger);
  font-family: var(--font-family-icon);
  font-size: var(--ui-len-rem-0-75);
  font-style: normal;
  font-weight: var(--font-weight-black);
  line-height: 1;
  transform: none;
}
.rb-select-wrap.show .rb-select-toggle.is-invalid::after {
  margin: 0 0 0 auto;
  transform: none;
}
[class*="-select-toggle"].is-invalid [class$="-select-chevron"] {
  display: none;
}

/* Page-level field CSS sometimes uses the `background` shorthand after
   Bootstrap, which clears Bootstrap's background-image validation mark. Keep
   the error icon on the wrapper instead so every ordinary input, select,
   textarea and Flatpickr alt input renders the same icon regardless of CSS
   load order. Enhanced selects render their own icon above and are excluded
   here, preventing duplicate indicators. */
:is(.rb-input-icon-group, [class*="-input-wrap"]):has(
  :is(input, select, textarea, .rb-date-alt-input).is-invalid
):not(:has([class*="-select-toggle"]))::after {
  content: "\f06a";
  position: absolute;
  z-index: 4;
  top: calc(var(--form-control-height) / 2);
  right: var(--ui-len-rem-0-75);
  color: var(--color-danger);
  font-family: var(--font-family-icon);
  font-size: var(--ui-len-rem-0-75);
  font-style: normal;
  font-weight: var(--font-weight-black);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
:is(.rb-input-icon-group, [class*="-input-wrap"]):has(
  textarea.is-invalid
):not(:has([class*="-select-toggle"]))::after {
  top: var(--ui-len-rem-0-875);
  transform: none;
}
.password-wrap.rb-input-icon-group:has(
  :is(input, select, textarea, .rb-date-alt-input).is-invalid
)::after {
  right: var(--ui-len-rem-2-75);
}
:is(.rb-input-icon-group, [class*="-input-wrap"]):has(
  :is(input, select, textarea, .rb-date-alt-input).is-invalid
):not(:has([class*="-select-toggle"]))
  :is(input, select, textarea, .rb-date-alt-input).is-invalid {
  background-image: none !important;
  padding-right: var(--ui-len-rem-2-375) !important;
}

/* intl-tel-input's own .iti wrapper stands in for the shared
   [class*="-input-wrap"] pattern on every country-code phone field
   project-wide (see the "skips the manual .rlc-input-wrap icon" comment
   next to each one) -- without this, an invalid phone field fell back to
   Bootstrap's own background-image mark instead, a visibly different icon
   (different glyph, different red) from the shared one every other field
   uses. Give it the same shared icon here instead. */
.iti:has(input.is-invalid)::after {
  content: "\f06a";
  position: absolute;
  z-index: 4;
  top: 50%;
  right: var(--ui-len-rem-0-75);
  color: var(--color-danger);
  font-family: var(--font-family-icon);
  font-size: var(--ui-len-rem-0-75);
  font-style: normal;
  font-weight: var(--font-weight-black);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
.iti input.is-invalid {
  background-image: none !important;
  padding-right: var(--ui-len-rem-2-375) !important;
}

/* Core visual contract for the few app-specific field wrappers that cannot
   use bare .form-control markup (custom dropdown builders and icon fields).
   Page CSS may still position icons or choose textarea height; visual state
   and typography remain centralized here. */
:is(
  .cne-input-wrap,
  .qe-input-wrap,
  .rlc-input-wrap,
  .el-input-wrap,
  .esa-input-wrap,
  .vld-input-wrap,
  [class*="-input-wrap"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([data-phone-input]):not(.iti__tel-input), select, textarea, .rb-date-alt-input),
.cp-control {
  background-color: var(--form-control-bg) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--form-control-border) !important;
  border-radius: var(--form-control-radius) !important;
  color: var(--form-control-text) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-normal) !important;
  padding-left: var(--ui-len-rem-2-375, 2.375rem) !important;
  box-sizing: border-box !important;
}
:is(
  .cne-input-wrap,
  .qe-input-wrap,
  .rlc-input-wrap,
  .el-input-wrap,
  .esa-input-wrap,
  .vld-input-wrap,
  [class*="-input-wrap"]
):has([data-phone-input]) > i,
:is(
  .cne-input-wrap,
  .qe-input-wrap,
  .rlc-input-wrap,
  .el-input-wrap,
  .esa-input-wrap,
  .vld-input-wrap,
  [class*="-input-wrap"]
):has(.iti) > i {
  display: none !important;
}
:is(
  .cne-input-wrap,
  .qe-input-wrap,
  .rlc-input-wrap,
  .el-input-wrap,
  .esa-input-wrap,
  .vld-input-wrap,
  [class*="-input-wrap"]
) :is(input:not([type="checkbox"]):not([type="radio"]), select, .rb-date-alt-input):not([multiple]),
.cp-control:not(textarea) {
  height: var(--form-control-height) !important;
  min-height: var(--form-control-height) !important;
  max-height: var(--form-control-height) !important;
  box-sizing: border-box !important;
}
:is(
  .cne-input-wrap,
  .qe-input-wrap,
  .rlc-input-wrap,
  .el-input-wrap,
  .esa-input-wrap,
  .vld-input-wrap,
  [class*="-input-wrap"]
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .rb-date-alt-input):focus,
.cp-control:focus {
  border-color: var(--color-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

/* Selectize inner input reset inside input-wrappers */
:is([class*="-input-wrap"], .rlc-input-wrap, .vld-input-wrap) .selectize-input > input {
  background-color: transparent !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: content-box !important;
}

/* --------------------------------------------------------------------------
   5.1 TOP-OF-SCREEN FEEDBACK
   -------------------------------------------------------------------------- */
.rb-messages {
  width: 100%;
  margin-bottom: var(--alert-margin-bottom);
  font-family: var(--font-family-base);
}
.rb-messages .alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--alert-gap);
  margin-bottom: var(--space-2);
  padding: var(--alert-padding-y) calc(var(--alert-padding-x) + var(--space-8)) var(--alert-padding-y) var(--alert-padding-x);
  border: 1px solid transparent;
  border-radius: var(--alert-radius);
  font-family: var(--font-family-base);
  font-size: var(--alert-font-size);
  line-height: var(--line-height-normal);
  box-shadow: var(--shadow-sm);
}
.rb-messages .alert:last-child { margin-bottom: 0; }
.rb-message-icon {
  display: inline-flex;
  flex: 0 0 var(--alert-icon-size);
  align-self: center;
  align-items: center;
  justify-content: center;
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
  margin-top: 0;
  font-size: var(--alert-icon-size);
  line-height: 1;
}
.rb-message-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rb-message-copy > :last-child { margin-bottom: 0; }
.rb-messages .alert-success {
  color: var(--color-success-text) !important;
  background: var(--color-success-bg) !important;
  border-color: var(--color-primary-200) !important;
}
.rb-messages .alert-danger {
  color: var(--color-danger-text) !important;
  background: var(--color-danger-bg) !important;
  border-color: var(--color-danger-border-soft) !important;
}
.rb-messages .alert-warning {
  color: var(--color-warning-text) !important;
  background: var(--color-warning-bg) !important;
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-white)) !important;
}
.rb-messages .alert-info {
  color: var(--color-secondary-800) !important;
  background: var(--color-info-bg) !important;
  border-color: var(--color-secondary-200) !important;
}
.rb-messages .alert-dismissible .rb-message-close {
  position: absolute;
  display: inline-flex;
  float: none;
  align-items: center;
  justify-content: center;
  top: 50%;
  right: var(--space-3);
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  line-height: 1;
  text-shadow: none;
  opacity: .65;
  transform: translateY(-50%);
}
.rb-message-close > span {
  position: relative;
  display: block;
  width: var(--space-3);
  height: var(--space-3);
  font-size: 0;
  line-height: 0;
}
.rb-message-close > span::before,
.rb-message-close > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-3);
  height: var(--ui-len-rem-0-09375);
  border-radius: var(--radius-pill);
  background: currentColor;
  content: '';
}
.rb-message-close > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.rb-message-close > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.rb-messages .alert-dismissible .rb-message-close:hover,
.rb-messages .alert-dismissible .rb-message-close:focus { opacity: 1; }
@media (max-width: 47.9375rem) {
  .rb-messages .alert {
    gap: var(--space-2);
    padding-left: var(--space-3);
  }
}

/* One closed-state arrow for Bootstrap 4/5 and legacy select.form-control
   markup. The native option list remains accessible and form-compatible. */
select.form-control:not([multiple]):not([size]),
select.form-select:not([multiple]):not([size]),
select.custom-select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%2346596E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 5 5 5-5'/%3e%3c/svg%3e");
  background-position: right var(--space-4) center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: var(--space-10);
}

/* Input with a leading field icon (username, password, email, etc.) —
   wrap the .form-control and an <i> in .rb-input-icon-group; the icon
   is purely decorative (aria-hidden), so it doesn't need its own label.
   Composable with .password-wrap (icon on the left, show/hide on the
   right) since both just add padding to opposite sides of the input. */
.rb-input-icon-group {
  position: relative;
}
.rb-input-icon-group > .rb-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--font-size-body-sm);
}
.rb-input-icon-group > .form-control,
.rb-input-icon-group > .form-select,
.rb-input-icon-group > .custom-select {
  padding-left: calc(var(--space-4) * 2 + 14px);
}
.rb-input-icon-group--textarea > .rb-input-icon {
  top: var(--space-4);
  transform: none;
}

/* Live "12 / 250" counter auto-inserted by static/js/global/textarea-char-counter.js.
   Preferred placement: inside the field's own <label>, top-right, sharing
   its row with the label text (label.rb-label-with-counter below). Falls
   back to sitting right under the field when no matching <label for="...">
   exists, which is what this base rule covers. */
.rb-char-counter {
  display: block;
  margin-top: 0.35rem;
  text-align: right;
  font-size: var(--font-size-small, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.rb-char-counter.is-below-min { color: var(--color-warning, #f59e0b) !important; }
.rb-char-counter.is-at-limit { color: var(--color-danger) !important; font-weight: 700 !important; }

/* Label augmented with a top-right counter (see textarea-char-counter.js) —
   its own text/required-mark get grouped into one wrapper span so this flex
   row keeps them together on the left while the counter sits on the right.
   !important because many pages set their own `.some-field label { display:
   block }` in a page-level <style> block loaded after this stylesheet, which
   would otherwise win the display:flex needed here at equal specificity. */
label.rb-label-with-counter {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: var(--space-2);
}
label.rb-label-with-counter > .rb-char-counter {
  margin-top: 0;
}

.form-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}
.form-error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-danger);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: static;
  padding-left: 0;
}
/* sb-admin-2.css still styles .form-check-input as position:absolute with a
   negative margin (its own two-column layout). This flex-based .form-check
   never cleared that, so the input renders on top of the label text instead
   of beside it — reset it here so every checkbox/radio using .form-check
   site-wide lays out correctly, not just where a page happens to override it. */
.form-check-input {
  position: static;
  margin: 0;
}
.form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.form-check input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.form-check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
/* Bootstrap 5's own .form-check-input:checked hardcodes background-color:
   #0d6efd (its default blue) — appearance:none on .form-check-input means
   the browser draws that background-color instead of any native widget, so
   accent-color above never actually gets a chance to apply. Bootstrap still
   draws its checked-state mark/dot as a separate white SVG background-image
   layered on top, so overriding just the background/border color here is
   enough to turn it brand green underneath — same "solid color + white
   mark" result the checkbox override above achieves. */
.form-check-input:checked,
.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"],
.form-check input[type="radio"]:checked,
.form-check input[type="checkbox"]:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  accent-color: var(--color-primary) !important;
}
.form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(60, 184, 130, 0.25) !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--color-primary);
}
.form-check label {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-body);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
  font-weight: var(--font-weight-subheading);
  color: var(--color-text-heading);
}
.card-body {
  padding: var(--space-5);
}
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
}
.card-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}
.card-subtitle {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* --------------------------------------------------------------------------
   7. TABLES
   -------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-body);
}
.table thead th {
  text-align: left;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-secondary);
  background-color: var(--color-secondary-50);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-strong);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr:hover {
  background-color: var(--color-primary-50);
}
.table.table-striped tbody tr:nth-child(odd) {
  background-color: var(--color-bg-subtle);
}
.table.table-bordered th,
.table.table-bordered td {
  border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   8. MENUS / NAVIGATION / SIDEBAR
   -------------------------------------------------------------------------- */
.menu {
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary-600);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.75);
  border-left: 3px solid transparent;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  text-decoration: none;
}
.menu-item.active {
  background-color: rgba(60, 184, 130, 0.15);
  border-left-color: var(--color-primary);
  color: var(--color-white);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.nav-link {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.nav-link:hover {
  background-color: var(--color-bg-muted);
  text-decoration: none;
}
.nav-link.active {
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
}

/* --------------------------------------------------------------------------
   9. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.tab:hover {
  color: var(--color-secondary);
}
.tab.active {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   10. BADGES / PILLS / TAGS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.badge-primary { background-color: var(--color-primary-50); color: var(--color-primary-700); }
.badge-secondary { background-color: var(--color-secondary-50); color: var(--color-secondary-700); }
.badge-success { background-color: var(--color-success-bg); color: var(--color-primary-700); }
.badge-danger { background-color: var(--color-danger-bg); color: var(--color-danger); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.text-warning-dark { color: var(--color-warning-text); }

/* "Locked" indicator — shown next to a field the user can't edit
   (system_settings.lock_staff_details) */
.rb-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
}

/* --------------------------------------------------------------------------
   11. MODALS / OVERLAYS (base surfaces reused by any modal implementation)
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(16, 25, 35) !important;
  z-index: var(--z-modal-backdrop);
}
.modal-backdrop.show {
  opacity: 0.5 !important;
}
/* Fallback dim layer for pages where a modal opens without Bootstrap
   inserting its regular backdrop element. */
body.modal-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(16, 25, 35, 0.5);
  z-index: var(--z-modal-backdrop);
}
/* Bootstrap normally adds a real backdrop. Keep the pseudo-element only
   as a fallback so the two overlays do not stack and over-darken the page. */
body.modal-open:has(> .modal-backdrop)::before {
  content: none;
}
.modal {
  background-color: transparent !important;
  border-radius: 0;
  box-shadow: none;
  z-index: var(--z-modal);
}
.modal-content {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-heading);
}
.modal-body { padding: var(--space-5); }
.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Canonical application popup. The rb-modal class intentionally has enough
   specificity to neutralise Bootstrap 4/5 and older page-level modal shells. */
.modal.rb-modal {
  color: var(--color-text-body);
  font-family: var(--modal-font-family) !important;
  font-size: var(--modal-font-size) !important;
  line-height: var(--modal-line-height);
}
.modal.rb-modal .modal-dialog {
  font-family: inherit;
}
@media (min-width: 36rem) {
  .modal.rb-modal .modal-dialog { max-width: var(--modal-width); }
  .modal.rb-modal .modal-dialog.modal-lg { max-width: var(--modal-width-lg); }
  .modal.rb-modal .modal-dialog.modal-xl { max-width: var(--modal-width-xl); }
}
.modal.rb-modal .modal-content {
  background: var(--modal-bg) !important;
  border: 0 !important;
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--modal-shadow) !important;
  color: var(--color-text-body);
  font-family: inherit;
  overflow: hidden !important;
}
.modal.rb-modal .modal-header {
  align-items: center;
  background: linear-gradient(135deg, var(--modal-header-bg-start), var(--modal-header-bg-end)) !important;
  border: 0 !important;
  color: var(--modal-header-text) !important;
  display: flex;
  font-family: inherit;
  justify-content: space-between;
  min-width: 0;
  padding: var(--modal-header-padding) !important;
}
.modal.rb-modal .modal-title {
  align-items: center;
  border: 0 !important;
  color: var(--modal-header-text) !important;
  display: flex;
  font-family: inherit;
  font-size: var(--modal-title-font-size) !important;
  font-weight: var(--modal-title-font-weight) !important;
  gap: var(--space-2);
  line-height: var(--line-height-tight);
  margin: 0 !important;
  min-width: 0;
  padding: 0 !important;
}
.modal.rb-modal .modal-title > i {
  color: var(--modal-header-icon) !important;
}
/* Different pages historically markup the close control three different
   ways — Bootstrap 5's .btn-close (an SVG background-image, optionally
   inverted via .btn-close-white), Bootstrap 4's .close with a literal
   "×" text glyph inside a <span>, or nothing at all. Each renders
   differently (and inconsistently) by default. Rather than fight three
   separate native glyph mechanisms, hide whatever glyph the markup
   would have shown and draw one identical X ourselves via pseudo-elements
   — every modal's close button then looks pixel-identical regardless of
   which markup pattern it happens to use. */
.modal.rb-modal .modal-header .close,
.modal.rb-modal .modal-header .btn-close,
.modal.rb-modal .modal-header .rb-modal-close {
  align-items: center;
  background-color: var(--modal-close-bg) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-circle) !important;
  color: var(--modal-close-color) !important;
  display: inline-flex;
  filter: none !important;
  flex: 0 0 var(--modal-close-size);
  font-family: inherit;
  font-size: 0 !important;
  height: var(--modal-close-size);
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
  opacity: 1 !important;
  padding: 0 !important;
  position: relative;
  text-shadow: none !important;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  width: var(--modal-close-size);
}
.modal.rb-modal .modal-header .close > *,
.modal.rb-modal .modal-header .btn-close > *,
.modal.rb-modal .modal-header .rb-modal-close > * {
  display: none !important;
}
.modal.rb-modal .modal-header .close::before,
.modal.rb-modal .modal-header .close::after,
.modal.rb-modal .modal-header .btn-close::before,
.modal.rb-modal .modal-header .btn-close::after,
.modal.rb-modal .modal-header .rb-modal-close::before,
.modal.rb-modal .modal-header .rb-modal-close::after {
  background-color: currentColor;
  border-radius: 1px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 46%;
}
.modal.rb-modal .modal-header .close::before,
.modal.rb-modal .modal-header .btn-close::before,
.modal.rb-modal .modal-header .rb-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal.rb-modal .modal-header .close::after,
.modal.rb-modal .modal-header .btn-close::after,
.modal.rb-modal .modal-header .rb-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal.rb-modal .modal-header .close:hover,
.modal.rb-modal .modal-header .close:focus,
.modal.rb-modal .modal-header .btn-close:hover,
.modal.rb-modal .modal-header .btn-close:focus,
.modal.rb-modal .modal-header .rb-modal-close:hover,
.modal.rb-modal .modal-header .rb-modal-close:focus {
  background-color: var(--modal-close-bg-hover) !important;
  color: var(--modal-close-color) !important;
  outline: 0;
  transform: rotate(90deg);
}
.modal.rb-modal .modal-body {
  background: var(--modal-body-bg) !important;
  color: var(--color-text-body);
  font-family: inherit;
  font-size: var(--modal-font-size) !important;
  line-height: var(--modal-line-height);
  overflow-wrap: anywhere;
  padding: var(--modal-body-padding) !important;
}
.modal.rb-modal .modal-footer {
  align-items: center;
  background: var(--modal-footer-bg) !important;
  border-color: var(--modal-border) !important;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row !important;
  gap: var(--space-2) !important;
  justify-content: flex-end;
  margin: 0;
  padding: var(--modal-footer-padding) !important;
}
.modal.rb-modal .modal-footer > .btn,
.modal.rb-modal .modal-footer > a.btn {
  align-items: center;
  border-radius: var(--modal-button-radius) !important;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--modal-button-font-size) !important;
  font-weight: var(--font-weight-bold) !important;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 !important;
  min-height: var(--modal-button-height);
  padding: var(--modal-button-padding) !important;
}
.modal.rb-modal .rb-modal-cancel {
  background: var(--modal-cancel-bg) !important;
  border-color: var(--modal-cancel-bg) !important;
  color: var(--modal-cancel-text) !important;
}
.modal.rb-modal .rb-modal-cancel:hover,
.modal.rb-modal .rb-modal-cancel:focus {
  background: var(--modal-cancel-bg-hover) !important;
  border-color: var(--modal-cancel-bg-hover) !important;
  color: var(--modal-cancel-text) !important;
}
.modal.rb-modal .rb-modal-action {
  background: var(--modal-action-bg) !important;
  border-color: var(--modal-action-bg) !important;
  color: var(--modal-action-text) !important;
}
.modal.rb-modal .rb-modal-action:hover,
.modal.rb-modal .rb-modal-action:focus {
  background: var(--modal-action-bg-hover) !important;
  border-color: var(--modal-action-bg-hover) !important;
  color: var(--modal-action-text) !important;
}
.modal.rb-modal .rb-modal-toolbar {
  align-items: center;
  background: var(--modal-toolbar-bg);
  border: 1px solid var(--modal-toolbar-border);
  border-radius: var(--modal-toolbar-radius);
  display: flex;
  flex-wrap: wrap;
  gap: var(--modal-toolbar-gap);
  justify-content: center;
  margin-bottom: var(--space-3);
  padding: var(--modal-toolbar-padding);
}
.modal.rb-modal .rb-modal-toolbar .btn {
  border-radius: var(--modal-button-radius);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

@media (max-width: 35.98rem) {
  .modal.rb-modal .modal-dialog {
    margin: var(--modal-mobile-margin);
    max-width: calc(100% - (var(--modal-mobile-margin) * 2));
  }
  .modal.rb-modal .modal-header { padding: var(--modal-mobile-header-padding) !important; }
  .modal.rb-modal .modal-body { padding: var(--modal-mobile-body-padding) !important; }
  .modal.rb-modal .modal-footer { padding: var(--modal-mobile-footer-padding) !important; }
  .modal.rb-modal .modal-footer > .btn,
  .modal.rb-modal .modal-footer > a.btn {
    flex: 1 1 0;
  }
  .modal.rb-modal .rb-modal-toolbar .btn {
    flex: 1 1 calc(50% - var(--modal-toolbar-gap));
  }
}

/* SweetAlert2 (Swal.fire) — vendor CSS is deliberately overridden here so
   popup typography, controls, icons and dimensions all follow theme tokens. */
body .swal2-container {
  font-family: var(--swal-font-family) !important;
}
/* A toast (Swal.fire({toast:true, ...})) still gets `swal2-backdrop-show`
   here unless the caller also explicitly passes backdrop:false — most of
   this codebase's toast calls don't, and shouldn't have to remember to.
   SweetAlert2 always adds `swal2-toast-shown` to <body> whenever toast:true
   is used, regardless of the backdrop option, so anchor the dimmed-backdrop
   rule on :not(.swal2-toast-shown) and force every toast fully transparent
   (matching SweetAlert2's own no-backdrop CSS) instead. */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation {
  background: var(--swal-backdrop) !important;
}
body.swal2-toast-shown .swal2-container {
  background: transparent !important;
  pointer-events: none !important;
}
body.swal2-toast-shown .swal2-container .swal2-popup {
  pointer-events: auto !important;
}
/* :not(.swal2-toast) on the sizing-related rules below — a toast
   (Swal.fire({toast:true, ...})) is a small corner notification, not a
   modal, and reuses these same swal2-* classes; without the exclusion
   these !important modal dimensions/font-sizes (a 32rem-wide popup with
   an h2-sized title) blow the toast up to full-modal size. Toast styling
   is its own block further down instead. */
body .swal2-container .swal2-popup:not(.swal2-toast) {
  width: var(--swal-popup-width) !important;
  max-width: var(--swal-popup-max-width) !important;
  padding: var(--swal-popup-padding) !important;
  background: var(--swal-popup-bg) !important;
  color: var(--swal-popup-text) !important;
  border-radius: var(--swal-popup-radius) !important;
  box-shadow: var(--swal-popup-shadow) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-font-size) !important;
}
/* Shared shell for application dialogs that need content-specific classes.
   Pages may style their inner fields, but dimensions and spacing stay themed. */
body .swal2-container .swal2-popup.rb-swal-dialog:not(.swal2-toast) {
  width: var(--swal-popup-width) !important;
  max-width: var(--swal-popup-max-width) !important;
  overflow: visible;
}
body .swal2-container .rb-swal-dialog .swal2-html-container:not(.swal2-toast .swal2-html-container) {
  margin: 0 !important;
  padding: var(--swal-content-padding) !important;
  text-align: left;
}

/* Shared inner layout for RawLead duplicate-review dialogs. */
.rb-decision-swal .rb-decision-html {
  margin: 0;
  overflow: visible;
}
.rb-decision-form { text-align: left; }
.rb-decision-help {
  color: var(--color-text-body);
  font-size: var(--ui-len-rem-0-8125);
  line-height: 1.45;
  margin: 0 0 var(--ui-len-rem-0-875);
}
.rb-decision-lead-name {
  color: var(--color-text-heading);
  display: block;
  font-size: var(--ui-len-rem-0-9375);
  margin-bottom: var(--ui-len-rem-0-25);
}
.rb-decision-field label {
  color: var(--color-text-heading);
  display: block;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-label);
  margin-bottom: var(--space-2);
}
.rb-decision-field + .rb-decision-field {
  margin-top: var(--ui-len-rem-0-875);
}
.rb-decision-swal .rb-input-icon-group {
  position: relative;
  width: 100%;
}
.rb-decision-swal .rb-input-icon {
  color: var(--rb-palette-7e90a1);
  font-size: var(--ui-len-rem-0-75);
  left: var(--ui-len-rem-0-8125);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.rb-decision-swal .rb-input-icon-group--textarea .rb-input-icon {
  top: var(--ui-len-rem-0-875);
  transform: none;
}
.rb-decision-swal .rb-input-icon-group:has(.rb-select-wrap) .rb-input-icon {
  top: calc(var(--form-control-height) / 2);
  transform: translateY(-50%);
}
.rb-decision-swal .rb-input-icon-group textarea.form-control {
  box-sizing: border-box;
  min-height: var(--ui-len-rem-6);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--ui-len-rem-2-25);
  resize: vertical;
  width: 100%;
}
.rb-decision-swal .rb-select-wrap { z-index: 2; }
.rb-decision-swal .rb-select-wrap--icon .rb-select-toggle {
  padding-left: var(--ui-len-rem-2-25) !important;
}
.rb-decision-swal .rb-select-menu {
  float: none !important;
  inset: auto !important;
  margin-top: var(--ui-len-rem-0-375) !important;
  max-height: var(--form-menu-max-height);
  position: static !important;
  transform: none !important;
  width: 100%;
  z-index: 3;
}
.rb-decision-swal .rb-select-toggle.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 var(--ui-len-rem-0-1875) var(--rb-alpha-028);
}
.rb-decision-swal .swal2-actions {
  margin-top: var(--ui-len-rem-1-125);
}
body .swal2-container .swal2-title:not(.swal2-toast .swal2-title) {
  padding: var(--swal-title-padding) !important;
  color: var(--color-text-heading) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-title-font-size) !important;
  font-weight: var(--swal-title-font-weight) !important;
}
body .swal2-container .swal2-html-container:not(.swal2-toast .swal2-html-container) {
  padding: var(--swal-content-padding) !important;
  color: var(--color-text-body) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-content-font-size) !important;
}

/* Compact toast styling — small corner card instead of the full modal
   sizing above, matching the same brand colors/radius at a sane scale. */
body .swal2-container .swal2-popup.swal2-toast {
  width: auto !important;
  max-width: min(22rem, calc(100% - var(--space-4) * 2)) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--swal-popup-bg) !important;
  color: var(--swal-popup-text) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--font-size-body-sm) !important;
}
body .swal2-container .swal2-toast .swal2-title {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--color-text-heading) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--font-size-body-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-align: left !important;
}
body .swal2-container .swal2-toast .swal2-html-container {
  padding: 0 !important;
  margin: var(--space-1) 0 0 !important;
  color: var(--color-text-body) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--font-size-body-sm) !important;
}
body .swal2-container .swal2-toast .swal2-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 var(--space-2) 0 0 !important;
  border-width: .125rem !important;
  font-size: .75rem !important;
  line-height: 1.5rem !important;
}
body .swal2-container .swal2-toast .swal2-icon .swal2-icon-content {
  font-size: .85rem !important;
}
body .swal2-container .swal2-toast .swal2-timer-progress-bar {
  background: var(--color-primary-200) !important;
}
body .swal2-container .swal2-actions {
  gap: var(--swal-actions-gap) !important;
  margin: var(--swal-actions-margin) !important;
}
body .swal2-container .swal2-styled {
  margin: 0 !important;
  padding: var(--swal-button-padding) !important;
  border-radius: var(--swal-button-radius) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-button-font-size) !important;
  font-weight: var(--font-weight-button) !important;
}
body .swal2-container .swal2-confirm {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  box-shadow: none !important;
}
body .swal2-container .swal2-confirm:focus {
  box-shadow: var(--shadow-focus) !important;
}
body .swal2-container .swal2-cancel {
  background-color: var(--color-bg-muted) !important;
  color: var(--color-text-body) !important;
  box-shadow: none !important;
}
body .swal2-container .swal2-deny {
  background-color: var(--color-danger) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}
body .swal2-container .swal2-close {
  width: var(--swal-close-size) !important;
  height: var(--swal-close-size) !important;
  color: var(--swal-close-color) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-close-font-size) !important;
}
body .swal2-container .swal2-close:hover {
  color: var(--swal-close-hover) !important;
}
body .swal2-container .swal2-icon {
  width: var(--swal-icon-size) !important;
  height: var(--swal-icon-size) !important;
  margin: var(--swal-icon-margin) !important;
  border-width: var(--swal-icon-border-width) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-icon-unit) !important;
  line-height: var(--swal-icon-size) !important;
}
body .swal2-container .swal2-icon .swal2-icon-content {
  font-size: var(--swal-icon-content-size) !important;
}
body .swal2-container .swal2-success {
  border-color: var(--swal-icon-success) !important;
  color: var(--swal-icon-success) !important;
}
body .swal2-container .swal2-success .swal2-success-ring {
  border-color: var(--swal-icon-ring) !important;
}
body .swal2-container .swal2-success [class^="swal2-success-line"] {
  background-color: var(--swal-icon-success) !important;
}
body .swal2-container .swal2-success [class^="swal2-success-circular-line"],
body .swal2-container .swal2-success .swal2-success-fix {
  background-color: var(--swal-popup-bg) !important;
}
body .swal2-container .swal2-error {
  border-color: var(--swal-icon-error) !important;
  color: var(--swal-icon-error) !important;
}
body .swal2-container .swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--swal-icon-error) !important;
}
body .swal2-container .swal2-warning {
  border-color: var(--swal-icon-warning) !important;
  color: var(--swal-icon-warning) !important;
}
body .swal2-container .swal2-info {
  border-color: var(--swal-icon-info) !important;
  color: var(--swal-icon-info) !important;
}
body .swal2-container .swal2-question {
  border-color: var(--swal-icon-question) !important;
  color: var(--swal-icon-question) !important;
}
body .swal2-container .swal2-input,
body .swal2-container .swal2-file,
body .swal2-container .swal2-textarea,
body .swal2-container .swal2-select {
  margin: var(--swal-input-margin) !important;
  border: 1px solid var(--form-control-border) !important;
  border-radius: var(--swal-input-radius) !important;
  background: var(--form-control-bg) !important;
  color: var(--form-control-text) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--swal-input-font-size) !important;
  box-shadow: none !important;
}
body .swal2-container .swal2-input,
body .swal2-container .swal2-file {
  height: var(--swal-input-height, 42px) !important;
  padding: var(--swal-input-padding, 0 1rem) !important;
}
body .swal2-container .swal2-textarea {
  height: var(--swal-textarea-height) !important;
  padding: var(--form-control-padding-y) var(--form-control-padding-x) !important;
}
body .swal2-container .swal2-select {
  min-height: var(--swal-input-height) !important;
  padding: var(--form-control-padding-y) var(--form-control-padding-x) !important;
}
body .swal2-container .swal2-input:focus,
body .swal2-container .swal2-file:focus,
body .swal2-container .swal2-textarea:focus,
body .swal2-container .swal2-select:focus {
  border-color: var(--color-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: 0 !important;
}
body .swal2-container .swal2-radio,
body .swal2-container .swal2-checkbox {
  background: var(--swal-popup-bg) !important;
  color: var(--swal-popup-text) !important;
  font-family: var(--swal-font-family) !important;
}
body .swal2-container .swal2-validation-message {
  padding: var(--swal-validation-padding) !important;
  background: var(--color-danger-bg) !important;
  color: var(--color-danger) !important;
  font-family: var(--swal-font-family) !important;
  font-size: var(--font-size-body-sm) !important;
}
body .swal2-container .swal2-loader {
  width: var(--swal-loader-size) !important;
  height: var(--swal-loader-size) !important;
  border-width: var(--swal-loader-border-width) !important;
  border-color: var(--color-primary) transparent var(--color-primary) transparent !important;
}

/* --------------------------------------------------------------------------
   GLOBAL ASYNC LOADER
   Compact CSS-only replacement for the old white-background loader GIF.
   -------------------------------------------------------------------------- */
/* Include the legacy id so an older cached legacy override stylesheet
   `#loading { background: loader2.gif ... }` rule cannot paint behind this
   component while caches roll over. */
#loading.rb-page-loader {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-image: none !important;
  background-position: initial;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: color-mix(in srgb, var(--color-secondary-900) 18%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#loading.rb-page-loader[hidden] {
  display: none !important;
}
.rb-page-loader__panel {
  display: flex;
  min-width: 11rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  animation: rb-page-loader-panel-in var(--transition-slow) both;
}
.rb-page-loader__spinner {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: var(--radius-circle);
  background: var(--color-primary-50);
  box-shadow: inset 0 0 0 1px var(--color-primary-100);
}
.rb-page-loader__spinner::before,
.rb-page-loader__spinner::after {
  position: absolute;
  border-radius: var(--radius-circle);
  content: "";
}
.rb-page-loader__spinner::before {
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-secondary-500);
  animation: rb-page-loader-spin 850ms cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.rb-page-loader__spinner::after {
  inset: 0.6875rem;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 30%, transparent);
  animation: rb-page-loader-pulse 1.25s ease-in-out infinite;
}
.rb-page-loader__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: var(--line-height-tight);
}
.rb-page-loader__copy strong {
  color: var(--color-text-heading);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
}
.rb-page-loader__copy small {
  display: flex;
  align-items: baseline;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
}
.rb-page-loader__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  margin-left: var(--space-1);
}
.rb-page-loader__dots i {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  animation: rb-page-loader-dot 1.05s ease-in-out infinite;
}
.rb-page-loader__dots i:nth-child(2) {
  animation-delay: 140ms;
}
.rb-page-loader__dots i:nth-child(3) {
  animation-delay: 280ms;
}
@keyframes rb-page-loader-panel-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2)) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes rb-page-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes rb-page-loader-pulse {
  0%, 100% {
    transform: scale(0.72);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 28%, transparent);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 0 0 var(--space-2) transparent;
  }
}
@keyframes rb-page-loader-dot {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.1875rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rb-page-loader__panel,
  .rb-page-loader__spinner::before,
  .rb-page-loader__spinner::after,
  .rb-page-loader__dots i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   12. DROPDOWNS (Bootstrap .dropdown-menu / .dropdown-item)
   Themed once, here — every dropdown anywhere in the project (profile
   menu, per-page action menus, table row menus, etc.) already renders
   through these same Bootstrap classes, so styling them centrally makes
   every dropdown in the app match this design system automatically,
   with no per-page work required.
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  margin-top: var(--space-2) !important;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  min-width: 12rem;
  /* Without a cap, a long option list (e.g. 12 months/titles) grows the
     menu tall enough that Bootstrap's flip-to-fit positioning breaks
     down near the top of the page and pins the menu at the very top of
     the viewport instead of under its trigger — scroll inside instead. */
  max-height: min(60vh, 320px);
  overflow-y: auto;
}
/* Wrapper for a themed dropdown driving a hidden native <select> (see
   static/js/... generic init pattern) — needs its own positioning
   context for the .dropdown-menu, same as Bootstrap's own .dropdown */
.rb-select-wrap {
  position: relative;
  width: 100%;
}
.rb-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.rb-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  height: var(--form-control-height) !important;
  min-height: var(--form-control-height) !important;
  max-height: var(--form-control-height) !important;
  box-sizing: border-box !important;
  padding: var(--form-control-padding-y) var(--form-control-padding-x);
  color: var(--form-control-text);
  background: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  font-family: var(--font-family-base);
  font-size: var(--form-control-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  text-align: left;
  text-transform: capitalize;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.rb-select-toggle::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 0;
  border-right: 2px solid var(--color-secondary-600);
  border-bottom: 2px solid var(--color-secondary-600);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}
.rb-select-wrap.show .rb-select-toggle::after {
  margin-top: 3px;
  transform: rotate(225deg);
}
.rb-select-toggle:hover,
.rb-select-toggle:focus,
.rb-select-wrap.show .rb-select-toggle {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.rb-select-toggle.is-invalid {
  border-color: var(--color-danger);
}
.rb-select-toggle.disabled,
.rb-select-toggle:disabled {
  color: var(--color-text-disabled);
  background: var(--color-bg-muted);
  cursor: not-allowed;
}
.rb-select-toggle.disabled::after,
.rb-select-toggle:disabled::after {
  /* A locked field isn't actually a dropdown the user can open, so the
     chevron — which signals "click me, there's a list" — shouldn't show. */
  display: none;
}
.rb-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-select-wrap--icon .rb-select-toggle {
  padding-left: calc(var(--space-4) * 2 + 14px);
}
/* static/js/global/country-state-city.js replaces each cascading location <select>
   with this themed toggle as its very next sibling, regardless of which
   page-specific icon wrapper class (.cne-input-wrap, .rb-input-icon-group,
   etc.) the pair sits inside — target that DOM relationship directly so the
   toggle always clears the field's leading icon, without depending on every
   page recognizing its own wrapper class as an "icon group". */
[data-country-select] + .rb-select-wrap .rb-select-toggle,
[data-state-select] + .rb-select-wrap .rb-select-toggle,
[data-district-select] + .rb-select-wrap .rb-select-toggle,
[data-city-select] + .rb-select-wrap .rb-select-toggle {
  padding-left: calc(var(--space-4) * 2 + 14px);
}
.rb-select-menu {
  width: 100%;
  min-width: 100%;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  padding: 0 0 var(--space-2) 0 !important;
  /* Bootstrap's dropdown plugin uses Popper to auto-flip the menu above the
     toggle ("dropup") whenever it judges there isn't enough room below —
     which it does far too eagerly for a long option list, flipping the menu
     up and off the top of the viewport even when the page itself has plenty
     of room to scroll. These selects are never explicitly marked .dropup,
     so force Popper's inline placement (transform/top/bottom) back to a
     plain "always below the toggle" position instead of fighting it per page. */
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-top: 2px !important;
}
.rb-select-menu .dropdown-item.d-none {
  display: none !important;
}
.rb-select-menu .dropdown-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-select-menu .dropdown-item:hover,
.rb-select-menu .dropdown-item:focus,
.rb-select-menu .dropdown-item.is-highlighted {
  background: var(--color-bg-subtle, #f1f5f9);
  color: var(--color-primary);
  outline: 0;
}
.rb-select-menu .dropdown-item.active {
  background: var(--cne-green, #10b981) !important;
  color: var(--color-white) !important;
}
.rb-select-search-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-2);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.rb-select-search-wrap i {
  position: absolute;
  left: calc(var(--space-2) + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 2;
}
.rb-select-search {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding-left: calc(var(--space-3) * 2 + 12px) !important;
  padding-right: var(--space-3);
  font-size: var(--font-size-body-sm);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-subtle, #f8fafc);
  text-transform: none !important;
}
.rb-select-search:focus {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: 0;
}
.rb-select-no-match {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-size: var(--font-size-small);
  font-style: italic;
  color: var(--color-text-muted);
}
/* Scoped to select-style menus specifically, not the bare .dropdown-item
   class below — that one is also used for navbar/action menus (e.g. "User",
   "Leads") that already carry their own intentional casing and shouldn't be
   forced into capitalize.
   This project has several near-identical copies of the same themed-dropdown
   component, each page (re)declaring its own <style> block instead of
   sharing one: .rb-select-*, .rlc-select-*, .cne-select-*, .cp-select-*,
   .el-select-*, .esa-select-* all follow the exact same *-select-toggle /
   *-select-menu .dropdown-item naming. Matching by [class*=] here — instead
   of duplicating this rule once per prefix, which would still miss the next
   one someone adds — is the one place that reaches all of them regardless
   of which page-local copy is loaded. Safe to capitalize unconditionally
   here (unlike form-control's typed value): option labels are always
   backend/developer-authored text, never something the user typed. */
[class*="-select-menu"] .dropdown-item {
  border-radius: var(--form-option-radius) !important;
  color: var(--form-control-text) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--form-option-font-size) !important;
  padding: var(--form-option-padding-y) var(--form-option-padding-x) !important;
  text-transform: capitalize !important;
}
[class*="-select-toggle"] {
  height: var(--form-control-height) !important;
  min-height: var(--form-control-height) !important;
  max-height: var(--form-control-height) !important;
  box-sizing: border-box !important;
  background: var(--form-control-bg) !important;
  border-color: var(--form-control-border) !important;
  border-radius: var(--form-control-radius) !important;
  color: var(--form-control-text) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--form-control-font-size) !important;
  font-weight: var(--font-weight-regular) !important;
  text-transform: capitalize !important;
}
[class*="-select-toggle"]:hover,
[class*="-select-toggle"]:focus {
  border-color: var(--color-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}
[class*="-select-menu"] {
  max-height: var(--form-menu-max-height) !important;
  border-color: var(--form-control-border) !important;
  border-radius: var(--form-menu-radius) !important;
  box-shadow: var(--form-menu-shadow) !important;
}
[class*="-select-menu"] .dropdown-item:hover,
[class*="-select-menu"] .dropdown-item:focus {
  background: var(--color-primary-surface) !important;
  color: var(--color-primary-700) !important;
}
[class*="-select-menu"] .dropdown-item.active,
[class*="-select-menu"] .dropdown-item:active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.dropdown-item {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-body);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.dropdown-item i,
.dropdown-item .fa,
.dropdown-item .fas,
.dropdown-item .far,
.dropdown-item .bi {
  color: var(--color-primary-600);
  width: 1rem;
  text-align: center;
}
.dropdown-item:hover i,
.dropdown-item:hover .fa,
.dropdown-item:hover .fas,
.dropdown-item:hover .bi {
  color: var(--color-primary-700);
}
.dropdown-item.active i,
.dropdown-item:active i {
  color: var(--color-primary-contrast);
}
.dropdown-divider {
  margin: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.dropdown-header {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-2) var(--space-3);
}

/* --------------------------------------------------------------------------
   13. DETAIL GRID — label-above-value cells in a responsive grid, for
   "profile"/"record details"-style pages, instead of a cramped bordered
   <table> with th/td pairs squeezed several to a row.
   -------------------------------------------------------------------------- */
.rb-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.rb-detail-item {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.rb-detail-label {
  font-size: var(--font-size-tiny);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.rb-detail-value {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

/* Reusable navy-gradient page header bar (icon + title), for standalone
   pages that aren't nested under a tab/section shell */
.rb-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--page-header-gap) !important;
  min-height: var(--page-header-min-height) !important;
  margin-bottom: 0 !important;
  padding: var(--page-header-padding) !important;
  background: linear-gradient(135deg, var(--page-header-bg-start), var(--page-header-bg-end)) !important;
  border-radius: var(--page-header-radius) var(--page-header-radius) 0 0;
  color: var(--page-header-text) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-font-size);
}
.rb-page-header h1,
.rb-page-header h2,
.rb-page-header h3,
.rb-page-header h4,
.rb-page-header h5,
.rb-page-header h6 {
  margin: 0;
  color: var(--page-header-text) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-title-font-size) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.rb-themed-page-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}
/* An open .rb-select-menu dropdown is a normal (non-portaled) descendant,
   so the card's overflow:hidden — needed to clip content to its rounded
   corners — was also clipping the dropdown list short whenever it needed
   more height than the space left below the toggle. Let it render past
   the card only while a dropdown inside is actually open. */
.rb-themed-page-card:has(.rb-select-wrap.show) {
  overflow: visible;
}

.rb-page-header--standalone {
  margin-bottom: var(--page-header-margin-bottom) !important;
  border-radius: var(--page-header-radius) !important;
}

.rb-page-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.rb-page-heading-icon {
  display: inline-flex;
  width: var(--page-header-icon-size);
  height: var(--page-header-icon-size);
  flex: 0 0 var(--page-header-icon-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--page-header-icon-bg);
  color: var(--page-header-icon-color);
}
/* Icon-font glyphs carry their own line-height, which throws off perfect
   centering inside a flex box even with align-items/justify-content set —
   collapsing it to 1 makes the glyph's own box match its visual size. */
.rb-page-heading-icon i {
  line-height: 1;
}

.rb-page-heading h1,
.rb-page-heading h2 {
  margin: 0;
  color: var(--page-header-text) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-title-font-size) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.rb-page-heading p {
  margin: 0.1875rem 0 0;
  color: var(--page-header-subtitle-color) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-subtitle-font-size) !important;
  line-height: 1.35;
}

.rb-page-header p {
  color: var(--page-header-subtitle-color) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-subtitle-font-size) !important;
}

.rb-page-header-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-color: var(--page-header-action-border);
  color: var(--page-header-text);
  background: var(--page-header-action-bg);
  font-family: var(--page-header-font-family);
  font-size: var(--page-header-action-font-size);
}

.rb-page-header :is(.btn, .rb-page-header-action) {
  min-height: var(--page-header-action-min-height) !important;
  padding: var(--page-header-action-padding) !important;
  border-color: var(--page-header-action-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--page-header-action-bg) !important;
  color: var(--page-header-text) !important;
  font-family: var(--page-header-font-family) !important;
  font-size: var(--page-header-action-font-size) !important;
  font-weight: var(--font-weight-bold) !important;
}

.rb-page-header-action:hover,
.rb-page-header-action:focus,
.rb-page-header .btn:hover,
.rb-page-header .btn:focus {
  border-color: var(--page-header-text) !important;
  color: var(--topbar-text) !important;
  background: var(--page-header-text) !important;
}

.rb-page-header-meta {
  max-width: min(42vw, 26.25rem);
  overflow: hidden;
  padding: 0.375rem 0.6875rem;
  border-radius: var(--radius-pill);
  background: var(--page-header-meta-bg);
  color: var(--page-header-meta-color);
  font-family: var(--page-header-font-family);
  font-size: var(--page-header-subtitle-font-size);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 35.99875rem) {
  .rb-page-header--responsive {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--page-header-padding-mobile) !important;
  }

  .rb-page-header--responsive .rb-page-header-action {
    align-self: stretch;
  }

  .rb-page-header--responsive .rb-page-header-meta {
    max-width: 100%;
  }
}

/* Shared footer in authenticated layouts and the intentionally standalone
   login/password screens. These declarations override legacy SB-Admin
   defaults while keeping every value editable from the tokens above. */
footer.sticky-footer {
  flex-shrink: 0;
  width: 100%;
  padding: var(--footer-padding) !important;
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  font-family: var(--footer-font-family) !important;
  font-size: var(--footer-font-size) !important;
  font-weight: var(--footer-font-weight);
}

footer.sticky-footer .copyright {
  color: var(--footer-text) !important;
  font-family: var(--footer-font-family) !important;
  font-size: var(--footer-font-size) !important;
  font-weight: var(--footer-font-weight) !important;
  line-height: var(--footer-line-height) !important;
}

.login-page footer {
  margin-top: var(--footer-standalone-margin-top) !important;
  background: var(--footer-standalone-bg) !important;
  font-family: var(--footer-font-family) !important;
}

.login-footer-text {
  color: var(--footer-standalone-text) !important;
  font-family: var(--footer-font-family) !important;
  font-size: var(--footer-font-size) !important;
  font-weight: var(--footer-font-weight) !important;
  line-height: var(--footer-line-height) !important;
}

/* --------------------------------------------------------------------------
   14. EMPTY STATE — "nothing to show yet" placeholder (no records, no
   address set, etc.), used wherever a card/section has no content
   -------------------------------------------------------------------------- */
.rb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2.5rem 1rem;
  color: var(--color-text-muted);
}
/* Direct child only — some empty states also contain a call-to-action
   button with its own small icon, which this rule would otherwise
   blow up to 2rem too if it matched any descendant */
.rb-empty-state > i {
  font-size: 2rem;
  color: var(--color-primary);
}

/* Reusable green choice control used by checkboxes and exclusive choices.
   input[name="perms_checkbox"] covers the role/user permission-grid
   checkboxes (staff/common_perms.html, staff/user_perms.html) without
   needing the class added to every one of those individually-hardcoded
   checkboxes. */
.rb-choice-input,
input[name="perms_checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 17px;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  border: 1.5px solid var(--color-border-strong, #9baab6) !important;
  border-radius: 4px !important;
  background: var(--color-white, #fff) !important;
  cursor: pointer;
  vertical-align: middle;
}

.rb-choice-input:checked,
input[name="perms_checkbox"]:checked {
  border-color: var(--color-primary, #2fba86) !important;
  background: var(--color-primary, #2fba86) !important;
}

.rb-choice-input:not([type="radio"]):checked::after,
input[name="perms_checkbox"]:checked::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

/* Radio inputs using .rb-choice-input must remain circular with centered dot, never a checkmark */
input[type="radio"].rb-choice-input {
  border-radius: 50% !important;
}

input[type="radio"].rb-choice-input::before,
input[type="radio"].rb-choice-input::after {
  content: none !important;
  display: none !important;
}

input[type="radio"].rb-choice-input:checked {
  background-color: var(--color-primary, #2fba86) !important;
  border-color: var(--color-primary, #2fba86) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.rb-choice-input:focus-visible,
input[name="perms_checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 186, 134, .18);
}

/* --------------------------------------------------------------------------
   ICON TYPOGRAPHY PRESERVATION
   Prevent .small, small, or parent weight/font resets from breaking Font Awesome.
   Solid icons (.fas, .fa-solid) strictly require weight 900 to map to the
   fa-solid-900 webfont, otherwise rendering the fallback missing-glyph box (⮽).
   -------------------------------------------------------------------------- */
.fas,
.fa-solid,
i[class*="fa-solid"],
i[class*="fas"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.far,
.fa-regular,
i[class*="fa-regular"],
i[class*="far"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.fab,
.fa-brands,
i[class*="fa-brands"],
i[class*="fab"] {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.fa {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-style: normal !important;
}

/* --------------------------------------------------------------------------
   14. USER PROFILE & DOCUMENT VAULT COMPONENTS
   Reusable components for User Profile details and Document Vault.
   All styles reference centralized design tokens (zero hardcoded colors).
   -------------------------------------------------------------------------- */
.rb-profile-wrapper {
  margin-bottom: var(--space-6);
}

/* Hero Banner */
.rb-profile-hero {
  background: linear-gradient(135deg, var(--color-secondary-900) 0%, var(--color-secondary-800) 60%, var(--color-secondary-700) 100%);
  color: var(--color-text-inverse);
  padding: 2rem 2.25rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.rb-profile-hero::before {
  content: '';
  position: absolute;
  top: -3.75rem;
  right: -3.75rem;
  width: 13.75rem;
  height: 13.75rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 70%);
  border-radius: var(--radius-circle);
  pointer-events: none;
}

.rb-profile-hero-content {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.rb-profile-hero-photo-wrap {
  position: relative;
  flex-shrink: 0;
}

.rb-profile-hero-photo {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-md);
  background: var(--color-secondary-700);
  display: block;
}

.rb-profile-status-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--color-primary);
  border: 3px solid var(--color-secondary-900);
  border-radius: var(--radius-circle);
}

.rb-profile-hero-info {
  flex: 1;
  min-width: 15rem;
}

.rb-profile-hero-name {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 0.25rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.rb-profile-hero-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rb-profile-hero-sub .divider {
  color: rgba(255, 255, 255, 0.4);
}

.rb-profile-badges-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rb-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}

.rb-hero-pill--code {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  color: var(--color-primary-200);
}

.rb-hero-pill--active {
  background: color-mix(in srgb, var(--color-status-blue) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-status-blue) 45%, transparent);
  color: var(--color-primary-100);
}

/* Hero Quick Contact Strip */
.rb-profile-quick-bar {
  background: var(--color-secondary-900);
  padding: 0.875rem 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rb-quick-contacts {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.rb-quick-contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
}

.rb-quick-contact-item i {
  color: var(--color-primary);
  font-size: var(--font-size-body-sm);
}

.rb-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Section Cards */
.rb-profile-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.rb-profile-card:hover {
  box-shadow: var(--shadow-md);
}

.rb-profile-card-header {
  background: var(--color-surface-header);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rb-profile-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--letter-spacing-tight);
}

.rb-profile-card-title i {
  font-size: var(--font-size-body);
  color: var(--color-primary);
}

/* Key Value Grid */
.rb-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  background: var(--color-surface-card);
}

.rb-info-item {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
  border-right: 1px solid var(--color-border-soft);
}

.rb-info-label {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.rb-info-value {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  word-break: break-word;
}

.rb-info-value--empty {
  color: var(--color-text-disabled);
  font-weight: var(--font-weight-regular);
  font-style: italic;
}

/* Address Cards */
.rb-address-body {
  padding: var(--space-5);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-body);
  line-height: var(--line-height-normal);
}

.rb-address-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.rb-address-line:last-child {
  margin-bottom: 0;
}

.rb-address-line i {
  color: var(--color-primary);
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* Documents Section & Modern Vault */
.rb-doc-count-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary-surface);
  color: var(--color-primary-800);
  border: 1px solid var(--color-primary-border-soft);
}

.rb-doc-view-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.rb-doc-view-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.rb-doc-view-btn:hover {
  color: var(--color-text-heading);
  background: rgba(0, 0, 0, 0.04);
}

.rb-doc-view-btn.active {
  background: var(--color-white);
  color: var(--color-primary-700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Document Cards Grid */
.rb-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.125rem;
  padding: 1.25rem;
}

.rb-doc-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.2s ease;
}

.rb-doc-card:hover {
  border-color: var(--color-primary-border-strong);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.rb-doc-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rb-doc-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.rb-doc-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.rb-doc-card-icon--pdf {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.rb-doc-card-icon--img {
  background: var(--color-status-blue-bg);
  color: var(--color-status-blue);
}

.rb-doc-card-icon--file {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.rb-doc-card-info {
  flex: 1;
  min-width: 0;
}

.rb-doc-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 0.25rem;
  word-break: break-word;
  line-height: 1.35;
}

.rb-doc-card-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rb-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-tiny);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
}

.rb-doc-card-meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
}

.rb-doc-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.rb-doc-meta-item:last-child {
  margin-bottom: 0;
}

.rb-doc-meta-item i {
  color: var(--color-primary);
  width: 14px;
  text-align: center;
}

.rb-doc-card-footer {
  padding: 0.875rem 1.25rem;
  background: var(--color-surface-header);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 0.625rem;
}

/* Action Buttons */
.rb-doc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: all 0.15s ease;
  line-height: 1;
}

.rb-doc-btn--view {
  background: var(--color-primary-surface);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-border-soft);
}

.rb-doc-btn--view:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.rb-doc-btn--download {
  background: var(--color-white);
  color: var(--color-secondary-700);
  border: 1px solid var(--color-border-strong);
}

.rb-doc-btn--download:hover {
  background: var(--color-secondary-800);
  color: var(--color-white);
  border-color: var(--color-secondary-800);
}

/* Streamlined Document Table */
.rb-doc-table-wrap {
  padding: 0;
  overflow-x: auto;
}

.rb-doc-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.rb-doc-table thead th {
  font-size: var(--font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-table-head-text, var(--color-secondary-500));
  background: var(--color-table-head-bg, var(--color-surface-header));
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}

.rb-doc-table tbody td {
  padding: 0.9375rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-body);
  vertical-align: middle;
}

.rb-doc-table tbody tr:hover td {
  background-color: var(--color-surface-hover, var(--color-primary-50));
}

.rb-doc-table tbody tr:last-child td {
  border-bottom: 0;
}

.rb-doc-icon-box {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body);
  flex-shrink: 0;
}

.rb-doc-icon-box--pdf {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.rb-doc-icon-box--img {
  background: var(--color-status-blue-bg);
  color: var(--color-status-blue);
}

.rb-doc-icon-box--file {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.rb-format-pill {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-bold);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: var(--letter-spacing-wide);
  display: inline-flex;
  align-items: center;
}

.rb-format-pill--pdf {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border-soft);
}

.rb-format-pill--img {
  background: var(--color-status-blue-bg);
  color: var(--color-status-blue);
  border: 1px solid var(--color-primary-100);
}

.rb-format-pill--file {
  background: var(--color-surface-header);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.rb-doc-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rb-doc-table-actions .rb-doc-btn {
  flex: 0 0 auto;
  padding: 0 0.875rem;
}

/* Empty States */
.rb-empty-doc-box {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.rb-empty-doc-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-circle);
  background: var(--color-gray-100);
  color: var(--color-text-disabled);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

/* Fee-plan AJAX fragment shared by the enquiry payment flows. */
.rb-fee-plan-card {
  min-width: 0;
  width: 100%;
}

.rb-fee-plan-title {
  background: var(--color-secondary-800);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--font-size-h5);
  padding: var(--space-2) var(--space-3);
}

.rb-fee-plan-table {
  color: var(--color-table-text);
}

.rb-fee-plan-table > thead {
  background: var(--color-table-head-bg);
  color: var(--color-table-head-text);
}

.rb-fee-cycle-scroll {
  max-height: var(--ui-len-rem-18-75);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rb-fee-expired-help {
  color: var(--color-danger);
}

@media (max-width: 768px) {
  .rb-profile-hero { padding: var(--space-4); }
  .rb-profile-hero-content { flex-direction: column; text-align: center; }
  .rb-profile-hero-name { justify-content: center; }
  .rb-profile-hero-sub { justify-content: center; }
  .rb-profile-badges-row { justify-content: center; }
  .rb-profile-quick-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .rb-quick-contacts { justify-content: center; }
  .rb-hero-actions { justify-content: center; }
  .rb-info-grid { grid-template-columns: 1fr; }
  .rb-doc-grid { grid-template-columns: 1fr; }
  .rb-doc-card-footer { flex-direction: column; }
  .rb-fee-plan-card .card-body { padding: var(--space-3); }
  .rb-fee-plan-title { font-size: var(--font-size-body); }
}

/* Standard Form Error Summary Box (shared across all apps) */
.rb-error-summary,
.cne-error-summary,
.nav-form-errors {
  align-items: flex-start;
  background: var(--rb-palette-fff3f3, #fff3f3);
  border: var(--ui-len-rem-0-0625, 1px) solid var(--rb-palette-f2c7cb, #f2c7cb);
  border-radius: var(--ui-len-rem-0-5625, 0.5rem);
  color: var(--color-danger-text, #721c24);
  display: flex;
  gap: var(--ui-len-rem-0-625, 0.625rem);
  margin-bottom: var(--space-4, 1rem);
  padding: var(--ui-len-rem-0-6875, 0.6875rem) var(--ui-len-rem-0-8125, 0.8125rem);
}
.rb-error-summary i,
.cne-error-summary i,
.nav-form-errors i {
  margin-top: var(--ui-len-rem-0-125, 0.125rem);
  color: var(--color-danger, #dc3545);
  flex-shrink: 0;
}
.rb-error-summary strong,
.cne-error-summary strong,
.nav-form-errors strong {
  display: block;
  font-size: var(--ui-len-rem-0-8125, 0.8125rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-danger-text, #721c24);
}
.rb-error-summary p,
.cne-error-summary p,
.nav-form-errors p {
  font-size: var(--ui-len-rem-0-75, 0.75rem);
  margin: var(--ui-len-rem-0-125, 0.125rem) 0 0;
  color: var(--color-danger-text, #721c24);
}
.rb-error-summary ul,
.cne-error-summary ul,
.nav-form-errors ul {
  font-size: var(--ui-len-rem-0-75, 0.75rem);
  line-height: 1.5;
  margin: var(--ui-len-rem-0-3125, 0.3125rem) 0 0;
  padding-left: var(--ui-len-rem-1-0625, 1.125rem);
  color: var(--color-danger-text, #721c24);
}
.rb-error-summary ul li b,
.cne-error-summary ul li b,
.nav-form-errors ul li b {
  font-weight: var(--font-weight-bold, 600);
}

/* Standard Inline Field Error (shared across all apps, matches leads/add) */
.rlc-field-error,
.cne-error,
.cne-client-error,
.rlc-client-error,
.nav-client-error,
.rb-field-error,
.form-field-error {
  color: var(--color-status-orange) !important;
  display: block;
  font-size: var(--ui-len-rem-0-6875) !important;
  font-weight: var(--font-weight-bold) !important;
  margin-top: var(--ui-len-rem-0-3125);
  line-height: 1.3;
}

/* Leads & Shared Form Controls: Field Footer & Char Counter */
.rlc-field-footer {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-len-rem-0-5, 0.5rem);
  justify-content: space-between;
  margin-top: var(--ui-len-rem-0-3125, 0.35rem);
  width: 100%;
}
.rlc-field-footer .rlc-field-hint,
.rlc-field-footer .rlc-field-error,
.rlc-field-footer .cne-error {
  margin-top: 0;
  font-size: var(--ui-len-rem-0-6875, 0.74rem);
  color: var(--sts-muted, var(--color-text-muted, #7C8A93));
}
.rlc-field-footer .rlc-field-error,
.rlc-field-footer .cne-error {
  color: var(--sts-critical, var(--color-danger, #E5484D)) !important;
  font-weight: 600;
}
.rlc-field-footer .rlc-char-counter {
  color: var(--sts-muted, var(--color-text-muted, #7C8A93));
  flex: 0 0 auto;
  font-size: var(--ui-len-rem-0-6875, 0.74rem);
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
}
.rlc-field-footer .rlc-char-counter.is-below-min {
  color: var(--sts-amber, var(--color-warning, #D97706));
}
.rlc-field-footer .rlc-char-counter.is-at-limit {
  color: var(--sts-critical, var(--color-danger, #E5484D));
  font-weight: 700;
}

/* Standard Required Field Asterisk (*) across all apps */
.required,
.cne-required,
.qe-required,
.nav-required,
.rlc-field .required,
.form-label .required,
.rb-required {
  color: var(--color-danger) !important;
  font-weight: var(--font-weight-extrabold);
}

/* Final invalid-state cascade guard. This intentionally stays after the
   shared control and page-component contracts so an invalid field never
   falls back to the neutral border while keeping the common icon above.
   !important vs !important still resolves by specificity before source
   order, so the input branch here must match (not just follow) the
   4x :not() specificity of the "Core visual contract" input-wrap rule
   above -- with only 2x :not() this guard used to lose that tiebreak and
   plain text/date inputs silently kept their neutral grey border while
   themed-select toggles (matched by the separate, lower-specificity
   [class*="-select-toggle"] branch) correctly turned red. */
:is(.rb-input-icon-group, [class*="-input-wrap"]) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([data-phone-input]):not(.iti__tel-input),
  select,
  textarea,
  .rb-date-alt-input
).is-invalid,
[class*="-select-toggle"].is-invalid {
  border-color: var(--color-danger) !important;
}
/* ========================================================================
   Userdata page components
   Centralized from page templates; selectors remain page/component scoped.
   ======================================================================== */

/* userdata: error_base */
.rb-error-body { min-height:100%; }
        body.rb-error-body {
            align-items: center;
            background: linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900));
            display: flex;
            justify-content: center;
            margin:0;
            min-height:100vh;
            padding:var(--space-6);
        }
        .rb-error-page { max-width:var(--ui-len-rem-30); width:100%; }
        .rb-error-card {
            background: var(--color-white);
            border:var(--ui-len-rem-0-0625) solid var(--rb-alpha-059);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow-lg);
            padding:var(--space-12) var(--space-8);
            text-align: center;
        }
        .rb-error-icon {
            align-items: center;
            background: var(--color-danger-bg);
            border-radius:var(--radius-circle);
            color: var(--color-danger);
            display: inline-flex;
            font-size:var(--ui-len-rem-2);
            height:var(--ui-len-rem-4-5);
            justify-content: center;
            margin-bottom:var(--space-5);
            width:var(--ui-len-rem-4-5);
        }
        .rb-error-card--warning .rb-error-icon {
            background: var(--color-warning-bg);
            color: var(--color-warning);
        }
        .rb-error-code {
            color: var(--color-secondary-700);
            font-size:var(--font-size-display);
            font-weight: var(--font-weight-bold);
            line-height:var(--line-height-tight);
            margin:0;
        }
        .rb-error-title {
            color: var(--color-text-heading);
            font-size:var(--font-size-h4);
            margin:var(--space-2) 0 var(--space-3);
        }
        .rb-error-message {
            color: var(--color-text-muted);
            font-size:var(--font-size-body-sm);
            line-height:var(--line-height-relaxed);
            margin:0 auto var(--space-6);
            max-width:var(--ui-len-rem-22-5);
        }
        .rb-error-home { min-width:var(--ui-len-rem-10); }
        @media (max-width: 35.99875rem) {
            body.rb-error-body { padding:var(--space-4); }
            .rb-error-card { padding:var(--space-8) var(--space-5); }
            .rb-error-icon { height:var(--ui-len-rem-4); width:var(--ui-len-rem-4); }
            .rb-error-home { width:100%; }
        }

/* userdata: dashboard */
:root {
        /* Escalation/action-required accent — reused across the vacant-staff tag and the two "ACTING/ESCALATED" & "ACTION REQUIRED" badges below. */
        --rb-escalation-bg: var(--rb-palette-f3e8ff);
        --rb-escalation-border: var(--rb-palette-d8b4fe);
        --rb-escalation-text: var(--rb-palette-6b21a8);

        /* Reporting-hierarchy team-member card palette. */
        --rb-team-ink: var(--rb-palette-0f172a);
        --rb-team-code-text: var(--rb-palette-475569);
        --rb-team-code-bg: var(--rb-palette-f1f5f9);
        --rb-team-code-border: var(--rb-palette-e2e8f0);
        --rb-team-designation: var(--rb-palette-1e3a8a);
        --rb-team-dept: var(--rb-palette-64748b);
        --rb-team-pipeline: var(--rb-palette-334155);
    }

    .action-btn {
    display: flex;
    align-items: center;
    gap:var(--ui-len-rem-0-375);
    padding:var(--ui-len-rem-0-4375) var(--ui-len-rem-0-75);
    font-size:var(--ui-len-rem-0-8125);
    border-radius:var(--ui-len-rem-0-5);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border:var(--ui-len-rem-0-0625) solid transparent;
    cursor: pointer;
    transition: 0.2s ease;
}

/* Each salary action has its own color so adjacent actions are easy to scan. */
.action-btn.advance-request {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.action-btn.advance-history {
    background-color: var(--color-info-bg);
    color: var(--color-secondary-700);
}

.action-btn.loan-request {
    background-color: var(--color-secondary-50);
    color: var(--color-secondary-600);
}

.action-btn.loan-history {
    background-color: var(--rb-palette-efedff);
    color: var(--rb-palette-5946b2);
}

.action-btn.extra-allowance {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.action-btn.expense-claim {
    background-color: var(--rb-palette-e4f7fa);
    color: var(--rb-palette-08798b);
}

/* Hover */
.action-btn:hover {
    transform:translateY(var(--ui-len-rem-neg-0-0625));
    opacity: 0.9;
}
/* Danger (Report Issue) */
.action-btn.report-issue {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
}

.action-btn.my-requests {
    background-color: var(--color-status-pink-bg);
    color: var(--rb-palette-9b356d);
}

.payslip-container {

    background: var(--color-white);

    border-radius:var(--ui-len-rem-0-625);

}

.rb-dashboard-page .table td,
.rb-dashboard-page .table th {
    vertical-align: middle;
}

.rb-dashboard-page h6 {
    border-left:var(--ui-len-rem-0-25) solid;
    padding-left:var(--ui-len-rem-0-5);
}

.rb-dashboard-page .text-success { border-color: var(--color-primary); }
.rb-dashboard-page .text-primary { border-color: var(--color-secondary); }
.rb-dashboard-page .text-danger  { border-color: var(--color-danger); }

/* Today's Timetable widget */
.tt-card { border:none; border-radius:var(--ui-len-rem-1); overflow: hidden; }
.tt-header { background: linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900)); padding:var(--ui-len-rem-1) var(--ui-len-rem-1-375); }
.tt-title { font-size:var(--ui-len-rem-1); font-weight: var(--font-weight-bold); letter-spacing:.2px; }
.tt-day-badge { background: var(--rb-alpha-089); padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-8125); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-75); font-weight: var(--font-weight-semibold); }
.tt-body { padding:var(--ui-len-rem-1-125); background: var(--color-bg-subtle); }
.tt-timeline {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(var(--layout-column-min-width), 1fr));
    gap:var(--ui-len-rem-1);
}
.tt-row {
    display: flex;
    min-width:0;
    flex-direction: column;
    overflow: hidden;
    border:var(--ui-len-rem-0-0625) solid var(--color-border);
    border-top:var(--ui-len-rem-0-1875) solid var(--color-secondary);
    border-radius:var(--ui-len-rem-0-875);
    background: var(--color-white);
    box-shadow:0 var(--ui-len-rem-0-1875) var(--ui-len-rem-0-75) var(--rb-alpha-021);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tt-row:hover { transform:translateY(var(--ui-len-rem-neg-0-125)); box-shadow:0 var(--ui-len-rem-0-5) var(--ui-len-rem-1-25) var(--rb-alpha-022); }
.tt-row.is-live { border-top-color: var(--color-primary); box-shadow:0 var(--ui-len-rem-0-3125) var(--ui-len-rem-1-125) color-mix(in srgb, var(--color-primary) 16%, transparent); }
.tt-row.is-done { border-top-color: var(--color-border-strong); }
.tt-slot {
    display: flex;
    align-items: center;
    gap:var(--ui-len-rem-0-5625);
    min-height:var(--ui-len-rem-3-25);
    padding:var(--ui-len-rem-0-625) var(--ui-len-rem-0-8125);
    border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border);
    background: var(--color-bg-subtle);
}
.tt-row.is-live .tt-slot { background: var(--color-primary-50); }
.tt-row.is-done .tt-slot { background: var(--color-bg-subtle); }
.tt-period-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex:0 0 var(--ui-len-rem-1-875);
    width:var(--ui-len-rem-1-875);
    height:var(--ui-len-rem-1-875);
    border-radius:var(--ui-len-rem-0-5625);
    background: var(--color-secondary-50);
    color: var(--color-secondary-600);
    font-size:var(--ui-len-rem-0-8);
    font-weight: var(--font-weight-extrabold);
}
.tt-row.is-done .tt-period-badge { background: var(--color-gray-100); color: var(--color-text-muted); }
.tt-row.is-live .tt-period-badge { background: var(--color-primary-100); color: var(--color-primary-700); }
.tt-period-label { font-size:var(--ui-len-rem-0-68); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing:.45px; color: var(--color-text-muted); white-space: nowrap; }
.tt-time { margin-left:auto; color: var(--color-gray-600); font-size:var(--ui-len-rem-0-7); font-weight: var(--font-weight-semibold); line-height:1.35; text-align: right; white-space: nowrap; }
.tt-time i { margin-right:var(--ui-len-rem-0-25); color: var(--color-secondary); }
.tt-row.is-live .tt-time i { color: var(--color-primary); }
.tt-cards { display: flex; flex:1; min-width:0; flex-direction: column; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-75); }
.tt-lesson { flex:1; min-width:0; padding:var(--ui-len-rem-0-125); background: var(--color-white); }
.tt-lesson-top { display: flex; align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-5); flex-wrap: wrap; }
.tt-subject { font-weight: var(--font-weight-bold); color: var(--color-secondary-600); font-size:var(--ui-len-rem-0-92); }
.tt-class-chip { background: var(--color-secondary-50); color: var(--color-secondary-600); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-semibold); padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-5625); border-radius:var(--ui-len-rem-62-4375); margin-left:auto; }
.tt-meta { display: flex; align-items: center; gap:var(--ui-len-rem-0-75); margin-top:var(--ui-len-rem-0-375); font-size:var(--ui-len-rem-0-76); color: var(--color-text-muted); }
.tt-meta .tt-room { display: flex; align-items: center; gap:var(--ui-len-rem-0-25); }
.tt-now-chip { background: var(--color-primary-100); color: var(--color-primary-700); font-size:var(--ui-len-rem-0-64); font-weight: var(--font-weight-bold); padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-5); border-radius:var(--ui-len-rem-62-4375); text-transform: uppercase; letter-spacing:.4px; }
.tt-proxy-chip { display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-3125); margin-top:var(--ui-len-rem-0-5); background: var(--color-warning-bg); color: var(--color-warning-text); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-semibold); padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-625); border-radius:var(--ui-len-rem-62-4375); }
.tt-compensation-chip { display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-3125); margin-top:var(--ui-len-rem-0-5); background: var(--color-info-bg); color: var(--color-info); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-semibold); padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-625); border-radius:var(--ui-len-rem-62-4375); }
.tt-empty { background: var(--color-white); border:var(--ui-len-rem-0-0625) dashed var(--color-border); border-radius:var(--ui-len-rem-0-875); padding:var(--ui-len-rem-1-125); text-align:center; }
.tt-empty-title { font-size:var(--ui-len-rem-1); font-weight: var(--font-weight-bold); color: var(--color-secondary-700); }
.tt-empty-sub { font-size:var(--ui-len-rem-0-82); color: var(--color-text-muted); margin-top:var(--ui-len-rem-0-25); }

@media (max-width: 47.99875rem) {
    .tt-header { padding:var(--ui-len-rem-0-8125) var(--ui-len-rem-0-9375); }
    .tt-body { padding:var(--ui-len-rem-0-75); }
    .tt-timeline { grid-template-columns:repeat(auto-fit, minmax(var(--ui-len-rem-14-375), 1fr)); gap:var(--ui-len-rem-0-75); }
}

@media (max-width: 35.99875rem) {
    .tt-timeline { grid-template-columns:1fr; }
    .tt-slot { padding:var(--ui-len-rem-0-5625) var(--ui-len-rem-0-6875); }
    .tt-cards { padding:var(--ui-len-rem-0-6875); }
}

/* Staff / Transport Requisition cards — restyled to match the brand
   theme (green/navy) instead of Bootstrap's default bg-success/bg-primary */
.rb-req-card { display: flex; width:100%; flex-direction: column; border:none; border-radius:var(--ui-len-rem-1); overflow: hidden; background: var(--color-white); box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-1-125) var(--rb-alpha-109); }
.rb-req-header { display: flex; align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-625); min-height:var(--ui-len-rem-3-25); padding:var(--ui-len-rem-0-875) var(--ui-len-rem-1-125); color: var(--color-white); }
.rb-req-header--primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); }
.rb-req-header--secondary { background: linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900)); }
.rb-req-header-title { display: flex; align-items: center; gap:var(--ui-len-rem-0-5); font-weight: var(--font-weight-bold); font-size:var(--ui-len-rem-0-95); }
.rb-req-total-pill { background: var(--rb-alpha-090); padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-625); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-semibold); }
.rb-req-tiles { display: grid; grid-template-columns:repeat(auto-fit, minmax(var(--ui-len-rem-6-875), 1fr)); gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-1) var(--ui-len-rem-1-125); }
.rb-req-tile { border-radius:var(--ui-len-rem-0-75); padding:var(--ui-len-rem-0-75) var(--ui-len-rem-0-5); text-align: center; background: var(--color-bg-subtle); }
.rb-req-tile-value { font-size:var(--ui-len-rem-1-3); font-weight: var(--font-weight-bold); line-height:1; margin-bottom:var(--ui-len-rem-0-25); }
.rb-req-tile-label { font-size:var(--ui-len-rem-0-72); color: var(--color-text-muted); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-03); }
.rb-req-tile--warning .rb-req-tile-value { color: var(--color-warning); }
.rb-req-tile--info .rb-req-tile-value { color: var(--color-secondary-400); }
.rb-req-tile--success .rb-req-tile-value { color: var(--color-primary); }
.rb-req-tile--muted .rb-req-tile-value { color: var(--color-text-muted); }
.rb-req-actions { display: flex; flex-wrap: wrap; gap:var(--ui-len-rem-0-625); margin-top:auto; padding:0 var(--ui-len-rem-1-125) var(--ui-len-rem-1-125); }
.rb-req-btn { flex:1 1 var(--ui-len-rem-7-8125); display: flex; align-items: center; justify-content: center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-0-5625) var(--ui-len-rem-0-875); border-radius:var(--ui-len-rem-0-625); font-size:var(--ui-len-rem-0-82); font-weight: var(--font-weight-semibold); text-decoration: none; transition: .15s ease; border:var(--ui-len-rem-0-0625) solid transparent; }
.rb-req-btn--fill-primary { background: var(--color-primary); color: var(--color-white); }
.rb-req-btn--fill-primary:hover { background: var(--color-primary-600); color: var(--color-white); }
.rb-req-btn--fill-secondary { background: var(--color-secondary-600); color: var(--color-white); }
.rb-req-btn--fill-secondary:hover { background: var(--color-secondary-900); color: var(--color-white); }
.rb-req-btn--outline { background: var(--color-white); color: var(--color-secondary-600); border-color: var(--color-border); }
.rb-req-btn--outline:hover { background: var(--color-bg-subtle); color: var(--color-secondary-600); }

/* Salary history stays on one row until the user expands overflow cards. */
.rb-dashboard-section {
    overflow: hidden;
    border:none;
    border-radius:var(--ui-len-rem-1);
    background: var(--color-white);
    box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-1-125) var(--rb-alpha-105);
}
.rb-dashboard-section.card { border:none; }
.rb-dashboard-section > .card-header { border-bottom:0; }
.rb-dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--ui-len-rem-0-625);
    min-height:var(--ui-len-rem-3-25);
    padding:var(--ui-len-rem-0-875) var(--ui-len-rem-1-125);
    color: var(--color-white);
}
.rb-dashboard-section-heading { margin:0; color: var(--color-white); font-size:var(--ui-len-rem-0-95); font-weight: var(--font-weight-bold); }
.rb-att-calendar-btn { display: inline-flex; min-height:var(--ui-len-rem-1-875); align-items: center; justify-content: center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-0-3125) var(--ui-len-rem-0-625); border:var(--ui-len-rem-0-0625) solid var(--rb-alpha-093); border-radius:var(--ui-len-rem-0-5); background: var(--rb-alpha-084); color: var(--color-white); font-size:var(--ui-len-rem-0-65); font-weight: var(--font-weight-extrabold); text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.rb-att-calendar-btn:hover, .rb-att-calendar-btn:focus { border-color: var(--color-white); background: var(--rb-alpha-088); color: var(--color-white); text-decoration: none; }
.rb-dashboard-section-title { display: flex; align-items: center; gap:var(--ui-len-rem-0-5); font-size:var(--ui-len-rem-0-95); font-weight: var(--font-weight-bold); }
.rb-dashboard-section-badge { padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-625); border-radius:var(--ui-len-rem-62-4375); background: var(--rb-alpha-060); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-semibold); }
.rb-dashboard-section-header--salary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); }
.rb-dashboard-section-header--overview { background: linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900)); }

/* Personal birthday, work-anniversary and marriage-anniversary wishes. */
.rb-personal-wishes { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--ui-len-rem-25)), 1fr)); gap:var(--ui-len-rem-0-875); }
.rb-personal-wish { --rb-wish-accent:var(--color-status-pink); --rb-wish-soft:var(--color-status-pink-bg); position:relative; display:flex; min-width:0; align-items:center; gap:var(--ui-len-rem-1); overflow:hidden; padding:var(--ui-len-rem-1-125) var(--ui-len-rem-1-25); border:var(--ui-len-rem-0-0625) solid color-mix(in srgb, var(--rb-wish-accent) 24%, var(--color-border)); border-radius:var(--ui-len-rem-1); background:linear-gradient(120deg, var(--rb-wish-soft), var(--color-white) 68%); box-shadow:0 var(--ui-len-rem-0-3125) var(--ui-len-rem-1) color-mix(in srgb, var(--rb-wish-accent) 12%, transparent); }
.rb-personal-wish--work_anniversary { --rb-wish-accent:var(--color-status-orange); --rb-wish-soft:var(--color-status-orange-bg); }
.rb-personal-wish--marriage_anniversary { --rb-wish-accent:var(--color-status-teal); --rb-wish-soft:var(--color-status-teal-bg); }
.rb-personal-wish::after { position:absolute; right:var(--ui-len-rem-neg-1-75); bottom:var(--ui-len-rem-neg-2-3125); width:var(--ui-len-rem-8-75); height:var(--ui-len-rem-8-75); border:var(--ui-len-rem-0-875) solid color-mix(in srgb, var(--rb-wish-accent) 8%, transparent); border-radius:var(--radius-circle); content:""; pointer-events:none; }
.rb-personal-wish-icon { position:relative; z-index:1; display:inline-flex; width:var(--ui-len-rem-3-625); height:var(--ui-len-rem-3-625); flex:0 0 var(--ui-len-rem-3-625); align-items:center; justify-content:center; border:var(--ui-len-rem-0-1875) solid var(--color-white); border-radius:var(--ui-len-rem-1); background:var(--rb-wish-accent); color:var(--color-white); box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-0-75) color-mix(in srgb, var(--rb-wish-accent) 24%, transparent); font-size:var(--ui-len-rem-1-25); }
.rb-personal-wish-copy { position:relative; z-index:1; min-width:0; flex:1; }
.rb-personal-wish-eyebrow { display:block; margin-bottom:var(--ui-len-rem-0-1875); color:var(--rb-wish-accent); font-size:var(--ui-len-rem-0-58); font-weight:var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-08); text-transform:uppercase; }
.rb-personal-wish h2 { margin:0; color:var(--color-secondary-900); font-size:clamp(var(--ui-len-rem-1-05), 2vw, var(--ui-len-rem-1-35)); font-weight:var(--font-weight-extrabold); }
.rb-personal-wish p { max-width:var(--ui-len-rem-40); margin:var(--ui-len-rem-0-375) 0 0; color:var(--color-text-muted); font-size:var(--ui-len-rem-0-75); line-height:1.55; }
.rb-personal-wish-today { position:relative; z-index:1; display:inline-flex; flex:0 0 auto; align-items:center; gap:var(--ui-len-rem-0-3125); padding:var(--ui-len-rem-0-375) var(--ui-len-rem-0-75); border-radius:var(--ui-len-rem-62-4375); background:var(--rb-wish-accent); color:var(--color-white); font-size:var(--ui-len-rem-0-65); font-weight:var(--font-weight-extrabold); }
.rb-personal-wish-confetti { position:absolute; width:var(--ui-len-rem-0-5); height:var(--ui-len-rem-0-5); border-radius:var(--ui-len-rem-0-125); background:var(--rb-wish-accent); opacity:.28; transform:rotate(28deg); }
.rb-personal-wish-confetti--one { top:var(--ui-len-rem-0-625); left:var(--ui-len-rem-0-75); }
.rb-personal-wish-confetti--two { right:18%; bottom:var(--ui-len-rem-0-625); transform:rotate(-24deg); }

/* Browser notification opt-in within the shared notification bell. */
.rb-browser-alert-control { display:flex; align-items:center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-625) var(--ui-len-rem-0-875); border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border); background:var(--color-bg-subtle); font-family:var(--font-family-base); }
.rb-browser-alert-icon { display:inline-flex; width:var(--ui-len-rem-1-875); height:var(--ui-len-rem-1-875); flex:0 0 var(--ui-len-rem-1-875); align-items:center; justify-content:center; border-radius:var(--ui-len-rem-0-5625); background:var(--color-secondary-100); color:var(--color-secondary-600); font-size:var(--ui-len-rem-0-72); }
.rb-browser-alert-copy { min-width:0; flex:1; }
.rb-browser-alert-copy strong, .rb-browser-alert-copy small { display:block; }
.rb-browser-alert-copy strong { color:var(--color-secondary-800); font-size:var(--ui-len-rem-0-7); font-weight:var(--font-weight-bold); }
.rb-browser-alert-copy small { margin-top:var(--ui-len-rem-0-125); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-55); line-height:1.35; }
.rb-browser-alert-actions { display:flex; flex:0 0 auto; align-items:center; gap:var(--ui-len-rem-0-3125); }
.rb-browser-alert-button { flex:0 0 auto; padding:var(--ui-len-rem-0-3125) var(--ui-len-rem-0-625); border:var(--ui-len-rem-0-0625) solid var(--color-primary); border-radius:var(--ui-len-rem-62-4375); background:var(--color-white); color:var(--color-primary-700); font-family:var(--font-family-base); font-size:var(--ui-len-rem-0-58); font-weight:var(--font-weight-bold); cursor:pointer; }
.rb-browser-alert-button:hover, .rb-browser-alert-button:focus-visible { background:var(--color-primary); color:var(--color-white); }
.rb-browser-alert-button:disabled { border-color:var(--color-border); background:var(--color-bg-muted); color:var(--color-text-muted); cursor:not-allowed; }
.rb-browser-alert-control.is-enabled .rb-browser-alert-icon { background:var(--color-status-teal-bg); color:var(--color-status-teal); }

/* Dashboard birthdays and work milestones. */
.rb-celebrations {
    overflow:hidden;
    border:var(--ui-len-rem-0-0625) solid var(--color-border);
    border-radius:var(--ui-len-rem-1);
    background:var(--color-bg-subtle);
    box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-1-125) var(--rb-alpha-105);
}
.rb-celebrations-heading { position:relative; display:flex; align-items:center; gap:var(--ui-len-rem-0-875); overflow:hidden; padding:var(--ui-len-rem-1) var(--ui-len-rem-1-25); background:linear-gradient(120deg, var(--color-secondary-900), var(--color-secondary-600)); color:var(--color-white); }
.rb-celebrations-heading::after { position:absolute; right:var(--ui-len-rem-neg-1-75); bottom:var(--ui-len-rem-neg-2-3125); width:var(--ui-len-rem-8-75); height:var(--ui-len-rem-8-75); border:var(--ui-len-rem-1) solid color-mix(in srgb, var(--color-white) 8%, transparent); border-radius:var(--radius-circle); content:""; pointer-events:none; }
.rb-celebrations-title-icon { display:inline-flex; width:var(--ui-len-rem-3-25); height:var(--ui-len-rem-3-25); flex:0 0 var(--ui-len-rem-3-25); align-items:center; justify-content:center; border:var(--ui-len-rem-0-0625) solid color-mix(in srgb, var(--color-white) 22%, transparent); border-radius:var(--ui-len-rem-0-875); background:color-mix(in srgb, var(--color-white) 12%, transparent); color:var(--color-warning); font-size:var(--ui-len-rem-1-25); }
.rb-celebrations-title-copy { min-width:0; flex:1; }
.rb-celebrations-eyebrow { display:block; margin-bottom:var(--ui-len-rem-0-125); color:color-mix(in srgb, var(--color-white) 72%, transparent); font-size:var(--ui-len-rem-0-58); font-weight:var(--font-weight-bold); letter-spacing:var(--ui-len-em-0-08); text-transform:uppercase; }
.rb-celebrations-heading h2 { margin:0; color:var(--color-white); font-size:var(--ui-len-rem-1-1); font-weight:var(--font-weight-extrabold); }
.rb-celebrations-heading p { margin:var(--ui-len-rem-0-125) 0 0; color:color-mix(in srgb, var(--color-white) 75%, transparent); font-size:var(--ui-len-rem-0-7); }
.rb-celebrations-window { position:relative; z-index:1; display:inline-flex; flex:0 0 auto; align-items:center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-0-375) var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid color-mix(in srgb, var(--color-white) 22%, transparent); border-radius:var(--ui-len-rem-62-4375); background:color-mix(in srgb, var(--color-white) 10%, transparent); color:var(--color-white); font-size:var(--ui-len-rem-0-65); font-weight:var(--font-weight-bold); }
.rb-celebration-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--ui-len-rem-0-875); padding:var(--ui-len-rem-1); }
.rb-celebration-card { --rb-celebration-accent:var(--color-status-pink); --rb-celebration-soft:var(--color-status-pink-bg); display:flex; min-width:0; flex-direction:column; overflow:hidden; border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-875); background:var(--color-white); box-shadow:0 var(--ui-len-rem-0-1875) var(--ui-len-rem-0-75) var(--rb-alpha-021); transition:transform .18s ease, box-shadow .18s ease; }
.rb-celebration-card:hover { transform:translateY(var(--ui-len-rem-neg-0-125)); box-shadow:0 var(--ui-len-rem-0-5) var(--ui-len-rem-1-25) color-mix(in srgb, var(--rb-celebration-accent) 13%, transparent); }
.rb-celebration-card--anniversary { --rb-celebration-accent:var(--color-status-orange); --rb-celebration-soft:var(--color-status-orange-bg); }
.rb-celebration-card--marriage-anniversary { --rb-celebration-accent:var(--color-status-teal); --rb-celebration-soft:var(--color-status-teal-bg); }
.rb-celebration-card--student-birthday { --rb-celebration-accent:var(--color-status-purple); --rb-celebration-soft:var(--color-status-purple-bg); }
.rb-celebration-card-header { display:flex; align-items:center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-875); border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border); background:var(--color-white); }
.rb-celebration-card-icon { display:inline-flex; width:var(--ui-len-rem-2-5); height:var(--ui-len-rem-2-5); flex:0 0 var(--ui-len-rem-2-5); align-items:center; justify-content:center; border-radius:var(--ui-len-rem-0-75); background:var(--rb-celebration-soft); color:var(--rb-celebration-accent); font-size:var(--ui-len-rem-0-9); }
.rb-celebration-card-heading { min-width:0; flex:1; }
.rb-celebration-card-heading strong { display:block; overflow:hidden; color:var(--color-secondary-800); font-size:var(--ui-len-rem-0-82); font-weight:var(--font-weight-extrabold); text-overflow:ellipsis; white-space:nowrap; }
.rb-celebration-card-heading small { display:block; margin-top:var(--ui-len-rem-0-125); overflow:hidden; color:var(--color-text-muted); font-size:var(--ui-len-rem-0-58); text-overflow:ellipsis; white-space:nowrap; }
.rb-celebration-count { display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; }
.rb-celebration-count strong { color:var(--rb-celebration-accent); font-size:var(--ui-len-rem-1-1); font-weight:var(--font-weight-extrabold); line-height:1; }
.rb-celebration-count small { margin-top:var(--ui-len-rem-0-125); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-5); font-weight:var(--font-weight-semibold); text-transform:uppercase; }
.rb-celebration-spotlight { display:flex; align-items:center; justify-content:space-between; gap:var(--ui-len-rem-0-75); margin:var(--ui-len-rem-0-75); padding:var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid color-mix(in srgb, var(--rb-celebration-accent) 20%, var(--color-border)); border-radius:var(--ui-len-rem-0-75); background:linear-gradient(135deg, var(--rb-celebration-soft), var(--color-white)); }
.rb-celebration-spotlight-content { min-width:0; flex:1; }
.rb-celebration-spotlight-label { display:block; margin-bottom:var(--ui-len-rem-0-4375); color:var(--rb-celebration-accent); font-size:var(--ui-len-rem-0-5); font-weight:var(--font-weight-bold); letter-spacing:var(--ui-len-em-0-04); text-transform:uppercase; }
.rb-celebration-featured-list { display:flex; max-height:var(--ui-len-rem-9-6875); flex-direction:column; overflow-y:auto; scrollbar-color:color-mix(in srgb, var(--rb-celebration-accent) 35%, transparent) transparent; scrollbar-width:thin; }
.rb-celebration-featured-person { display:flex; min-width:0; align-items:center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-3125) 0; }
.rb-celebration-featured-person:first-child { padding-top:0; }
.rb-celebration-featured-person:last-child { padding-bottom:0; }
.rb-celebration-featured-person + .rb-celebration-featured-person { border-top:var(--ui-len-rem-0-0625) solid color-mix(in srgb, var(--rb-celebration-accent) 16%, var(--color-border)); }
.rb-celebration-featured-avatar { display:inline-flex; width:var(--ui-len-rem-2-5); height:var(--ui-len-rem-2-5); flex:0 0 var(--ui-len-rem-2-5); align-items:center; justify-content:center; border:var(--ui-len-rem-0-125) solid var(--color-white); border-radius:var(--radius-circle); background:var(--color-white); color:var(--rb-celebration-accent); object-fit:cover; box-shadow:0 0 0 var(--ui-len-rem-0-0625) color-mix(in srgb, var(--rb-celebration-accent) 30%, transparent); }
.rb-celebration-person { min-width:0; }
.rb-celebration-person strong { display:block; overflow:hidden; color:var(--color-secondary-800); font-size:var(--ui-len-rem-0-72); font-weight:var(--font-weight-extrabold); text-overflow:ellipsis; white-space:nowrap; }
.rb-celebration-spotlight .rb-celebration-person > span { display:block; margin-top:var(--ui-len-rem-0-1875); overflow:hidden; color:var(--color-text-muted); font-size:var(--ui-len-rem-0-625); text-overflow:ellipsis; white-space:nowrap; }
.rb-celebration-spotlight-date { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; gap:var(--ui-len-rem-0-375); }
.rb-celebration-spotlight-date time { display:flex; width:var(--ui-len-rem-3); height:var(--ui-len-rem-3); flex-direction:column; align-items:center; justify-content:center; border-radius:var(--ui-len-rem-0-6875); background:var(--rb-celebration-accent); color:var(--color-white); line-height:1; box-shadow:0 var(--ui-len-rem-0-1875) var(--ui-len-rem-0-5) color-mix(in srgb, var(--rb-celebration-accent) 25%, transparent); }
.rb-celebration-spotlight-date time strong { font-size:var(--ui-len-rem-1); font-weight:var(--font-weight-extrabold); }
.rb-celebration-spotlight-date time span { margin-top:var(--ui-len-rem-0-1875); font-size:var(--ui-len-rem-0-5); font-weight:var(--font-weight-bold); }
.rb-celebration-next-label { display:flex; align-items:center; justify-content:space-between; padding:0 var(--ui-len-rem-0-875) var(--ui-len-rem-0-375); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-55); font-weight:var(--font-weight-bold); letter-spacing:var(--ui-len-em-0-04); text-transform:uppercase; }
.rb-celebration-next-label small { color:var(--rb-celebration-accent); font-size:inherit; }
.rb-celebration-timeline { display:flex; flex:1; flex-direction:column; padding:0 var(--ui-len-rem-0-75) var(--ui-len-rem-0-625); }
.rb-celebration-item { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:var(--ui-len-rem-0-5625); min-width:0; padding:var(--ui-len-rem-0-4375) 0; border-top:var(--ui-len-rem-0-0625) solid var(--color-border); }
.rb-celebration-date { display:flex; width:var(--ui-len-rem-2); height:var(--ui-len-rem-2); flex-direction:column; align-items:center; justify-content:center; border-radius:var(--ui-len-rem-0-5); background:var(--rb-celebration-soft); color:var(--rb-celebration-accent); line-height:1; }
.rb-celebration-date span { font-size:var(--ui-len-rem-0-78); font-weight:var(--font-weight-extrabold); }
.rb-celebration-date small { margin-top:var(--ui-len-rem-0-0625); font-size:var(--ui-len-rem-0-5); font-weight:var(--font-weight-bold); text-transform:uppercase; }
.rb-celebration-item .rb-celebration-person small { display:block; margin-top:var(--ui-len-rem-0-125); overflow:hidden; color:var(--color-text-muted); font-size:var(--ui-len-rem-0-58); text-overflow:ellipsis; white-space:nowrap; }
.rb-celebration-when { padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-4375); border-radius:var(--ui-len-rem-62-4375); background:var(--color-bg-subtle); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-5); font-weight:var(--font-weight-bold); white-space:nowrap; }
.rb-celebration-when.is-today { background:var(--rb-celebration-accent); color:var(--color-white); }
.rb-celebration-empty { display:flex; min-height:var(--ui-len-rem-14-375); flex:1; flex-direction:column; align-items:center; justify-content:center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-1); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-65); text-align:center; }
.rb-celebration-empty-icon { display:inline-flex; width:var(--ui-len-rem-3); height:var(--ui-len-rem-3); align-items:center; justify-content:center; margin-bottom:var(--ui-len-rem-0-25); border-radius:var(--radius-circle); background:var(--rb-celebration-soft); color:var(--rb-celebration-accent); font-size:var(--ui-len-rem-1); }
.rb-celebration-empty strong { color:var(--color-secondary-700); font-size:var(--ui-len-rem-0-75); }
.rb-celebration-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:var(--ui-len-rem-0-5) var(--ui-len-rem-0-75); border-top:var(--ui-len-rem-0-0625) solid var(--color-border); background:var(--color-bg-subtle); color:var(--color-text-muted); font-size:var(--ui-len-rem-0-55); }
.rb-celebration-footer span { display:inline-flex; align-items:center; gap:var(--ui-len-rem-0-25); }
.rb-celebration-footer strong { color:var(--rb-celebration-accent); font-weight:var(--font-weight-bold); }
.rb-slip-grid {
    display: grid;
    grid-template-columns:repeat(var(--slip-columns, 5), minmax(0, 1fr));
    gap:var(--ui-len-rem-0-875);
    padding:var(--ui-len-rem-1);
}
.rb-slip-card.is-overflow { display: none; }
.rb-slip-card {
    min-width:0;
    border:var(--ui-len-rem-0-0625) solid var(--color-border);
    border-radius:var(--ui-len-rem-0-75);
    padding:var(--ui-len-rem-0-875) var(--ui-len-rem-1);
    background: var(--color-white);
    transition: box-shadow .15s ease, transform .15s ease;
}
.rb-slip-card:hover {
    box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-0-875) color-mix(in srgb, var(--color-primary) 15%, transparent);
    transform:translateY(var(--ui-len-rem-neg-0-125));
}
.rb-slip-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:var(--ui-len-rem-0-5);
    margin-bottom:var(--ui-len-rem-0-625);
    padding-bottom:var(--ui-len-rem-0-625);
    border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border);
}
.rb-slip-month { font-weight: var(--font-weight-bold); color: var(--color-secondary-600); font-size:var(--ui-len-rem-1); }
.rb-slip-year { font-size:var(--ui-len-rem-0-6875); color: var(--color-text-muted); }
.rb-slip-actions { display: flex; gap:var(--ui-len-rem-0-375); flex-shrink: 0; }
.rb-slip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:var(--ui-len-rem-0-625);
    padding:var(--ui-len-rem-0-25) 0;
    font-size:var(--ui-len-rem-0-8125);
}
.rb-slip-row .label { color: var(--color-text-muted); }
.rb-slip-amount { flex:0 0 auto; white-space: nowrap; }
.rb-slip-lop-badge { font-size:var(--ui-len-rem-0-625); }
.rb-slip-net {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:var(--ui-len-rem-0-5);
    padding-top:var(--ui-len-rem-0-5);
    border-top:var(--ui-len-rem-0-0625) solid var(--color-border);
}
.rb-slip-net .label { font-weight: var(--font-weight-semibold); color: var(--color-primary-700); font-size:var(--ui-len-rem-0-8125); }
.rb-slip-net .value { font-weight: var(--font-weight-bold); color: var(--color-primary-700); font-size:var(--ui-len-rem-1-1); }
.rb-slip-expand-wrap { display: flex; justify-content: center; padding:0 var(--ui-len-rem-1) var(--ui-len-rem-1); }
.rb-slip-expand-wrap[hidden] { display: none !important; }
.rb-slip-expand-button { display: inline-flex; min-width:var(--ui-len-rem-8-125); align-items: center; justify-content: center; gap:var(--ui-len-rem-0-4375); border-radius:var(--ui-len-rem-0-5625); }
.rb-section-empty { padding:var(--ui-len-rem-1-75) var(--ui-len-rem-1-125); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-82); text-align: center; }
.rb-section-empty i { display: block; margin-bottom:var(--ui-len-rem-0-5); color: var(--color-gray-400); font-size:var(--ui-len-rem-1-35); }

.rb-overview-body {
    display: grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(var(--ui-len-rem-18-75), .65fr);
    gap:var(--ui-len-rem-1-125);
    padding:var(--ui-len-rem-1-125);
}
.rb-overview-panel { min-width:0; }
.rb-overview-panel + .rb-overview-panel { padding-left:var(--ui-len-rem-1-125); border-left:var(--ui-len-rem-0-0625) solid var(--color-border); }
.rb-overview-label { display: flex; align-items: center; gap:var(--ui-len-rem-0-4375); margin-bottom:var(--ui-len-rem-0-75); color: var(--color-secondary-600); font-size:var(--ui-len-rem-0-82); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-04); }
.rb-leave-grid { display: grid; grid-template-columns:repeat(4, minmax(var(--ui-len-rem-7-1875), 1fr)); gap:var(--ui-len-rem-0-625); }
.rb-leave-stat { position: relative; overflow: hidden; min-width:0; padding:var(--ui-len-rem-0-875) var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-75); background: var(--color-bg-subtle); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.rb-leave-stat:hover { transform:translateY(var(--ui-len-rem-neg-0-125)); border-color: currentColor; box-shadow:0 var(--ui-len-rem-0-375) var(--ui-len-rem-0-875) var(--rb-alpha-105); text-decoration: none; }
.rb-leave-stat:focus-visible { outline:var(--ui-len-rem-0-1875) solid color-mix(in srgb, var(--color-primary) 25%, transparent); outline-offset:var(--ui-len-rem-0-125); }
.rb-leave-stat::after { content: ''; position: absolute; right:var(--ui-len-rem-neg-1-125); bottom:var(--ui-len-rem-neg-1-375); width:var(--ui-len-rem-3-625); height:var(--ui-len-rem-3-625); border-radius:var(--radius-circle); background: currentColor; opacity: .07; }
.rb-leave-stat-icon { display: inline-flex; align-items: center; justify-content: center; width:var(--ui-len-rem-1-875); height:var(--ui-len-rem-1-875); margin-bottom:var(--ui-len-rem-0-625); border-radius:var(--ui-len-rem-0-5625); background: currentColor; }
.rb-leave-stat-icon i { color: var(--color-white); font-size:var(--ui-len-rem-0-78); }
.rb-leave-stat-value { color: var(--color-secondary-800); font-size:var(--ui-len-rem-1-35); font-weight: var(--font-weight-extrabold); line-height:1; }
.rb-leave-stat-name { margin-top:var(--ui-len-rem-0-375); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-7); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.rb-leave-stat-link { position: absolute; top:var(--ui-len-rem-0-75); right:var(--ui-len-rem-0-75); color: currentColor; font-size:var(--ui-len-rem-0-65); opacity: .65; }
.rb-leave-stat--availed { color: var(--color-secondary-500); }
.rb-leave-stat--approved { color: var(--color-primary-600); }
.rb-leave-stat--pending { color: var(--color-warning); }
.rb-leave-stat--cancelled { color: var(--color-danger); }
.rb-holiday-list { display: flex; flex-direction: column; gap:var(--ui-len-rem-0-5625); }
.rb-holiday-item { display: flex; align-items: center; gap:var(--ui-len-rem-0-6875); min-width:0; padding:var(--ui-len-rem-0-5625) var(--ui-len-rem-0-6875); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-6875); background: var(--color-bg-subtle); }
.rb-holiday-date { display: flex; flex:0 0 var(--ui-len-rem-2-6875); min-height:var(--ui-len-rem-2-6875); flex-direction: column; align-items: center; justify-content: center; border-radius:var(--ui-len-rem-0-5625); background: var(--color-primary-50); color: var(--color-primary-700); line-height:1; }
.rb-holiday-day { font-size:var(--ui-len-rem-1); font-weight: var(--font-weight-extrabold); }
.rb-holiday-month { margin-top:var(--ui-len-rem-0-1875); font-size:var(--ui-len-rem-0-6); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.rb-holiday-details { min-width:0; }
.rb-holiday-name { overflow: hidden; color: var(--color-secondary-700); font-size:var(--ui-len-rem-0-8); font-weight: var(--font-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.rb-holiday-range { margin-top:var(--ui-len-rem-0-1875); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-67); }
.rb-holiday-empty { display: flex; min-height:var(--ui-len-rem-7-25); align-items: center; justify-content: center; padding:var(--ui-len-rem-1-125); border:var(--ui-len-rem-0-0625) dashed var(--color-border-strong); border-radius:var(--ui-len-rem-0-6875); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-78); text-align: center; }

.rb-net-amount { font-size:clamp(var(--ui-len-rem-1-4), 6vw, var(--ui-len-rem-2)); }
.rb-contact-info { min-width:0; }
.rb-contact-info span { word-break: break-word; }

@media (max-width: 74.9375rem) {
    .rb-celebration-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 61.99875rem) {
    .rb-celebration-grid { grid-template-columns:1fr; }
    .rb-overview-body { grid-template-columns:1fr; }
    .rb-overview-panel + .rb-overview-panel { padding-top:var(--ui-len-rem-1-125); padding-left:0; border-top:var(--ui-len-rem-0-0625) solid var(--color-border); border-left:0; }
}

@media (max-width: 35.99875rem) {
    .rb-personal-wish { align-items:flex-start; padding:var(--ui-len-rem-0-875); }
    .rb-personal-wish-icon { width:var(--ui-len-rem-2-75); height:var(--ui-len-rem-2-75); flex-basis:var(--ui-len-rem-2-75); }
    .rb-personal-wish-today { position:absolute; top:var(--ui-len-rem-0-625); right:var(--ui-len-rem-0-625); }
    .rb-personal-wish-copy { padding-top:var(--ui-len-rem-1-75); }
    .rb-celebrations-heading { align-items:flex-start; padding:var(--ui-len-rem-0-875); }
    .rb-celebrations-title-icon { width:var(--ui-len-rem-2-5); height:var(--ui-len-rem-2-5); flex-basis:var(--ui-len-rem-2-5); }
    .rb-celebration-grid { padding:var(--ui-len-rem-0-75); }
    .rb-celebrations-window { display:none; }
    .rb-celebration-spotlight { align-items:flex-start; }
    .rb-celebration-featured-avatar { width:var(--ui-len-rem-2-5); height:var(--ui-len-rem-2-5); flex-basis:var(--ui-len-rem-2-5); }
    .rb-dashboard-section-header { align-items: flex-start; padding:var(--ui-len-rem-0-8125) var(--ui-len-rem-0-9375); }
    .rb-overview-body { padding:var(--ui-len-rem-0-875); }
    .rb-leave-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .rb-slip-grid { padding:var(--ui-len-rem-0-875); }
    .rb-slip-expand-wrap { padding:0 var(--ui-len-rem-0-875) var(--ui-len-rem-0-875); }
    .rb-slip-expand-button { width:100%; }
}

/* Reporting hierarchy shown in the welcome card. */
.rb-reporting-grid { display: grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--ui-len-rem-0-75); margin-top:var(--ui-len-rem-1); }
.rb-reporting-panel { display: flex; min-width:0; align-items: center; gap:var(--ui-len-rem-0-6875); padding:var(--ui-len-rem-0-75) var(--ui-len-rem-0-875); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-75); background: var(--color-bg-subtle); color: var(--color-text-body); text-align: left; }
button.rb-reporting-panel { width:100%; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
button.rb-reporting-panel:hover { border-color: var(--color-primary); background: var(--color-primary-50); transform:translateY(var(--ui-len-rem-neg-0-0625)); }
.rb-reporting-icon { display: inline-flex; width:var(--ui-len-rem-2-25); height:var(--ui-len-rem-2-25); flex:0 0 var(--ui-len-rem-2-25); align-items: center; justify-content: center; border-radius:var(--ui-len-rem-0-625); background: var(--color-primary-100); color: var(--color-primary-700); }
.rb-reporting-copy { min-width:0; flex:1; }
.rb-reporting-label { color: var(--color-text-muted); font-size:var(--ui-len-rem-0-65); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-04); text-transform: uppercase; }
.rb-reporting-value { margin-top:var(--ui-len-rem-0-125); overflow: hidden; color: var(--color-secondary-700); font-size:var(--ui-len-rem-0-84); font-weight: var(--font-weight-extrabold); text-overflow: ellipsis; white-space: nowrap; }
.rb-reporting-meta { margin-top:var(--ui-len-rem-0-125); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-67); }
.rb-reporting-arrow { flex:0 0 auto; color: var(--color-primary-700); }

.rb-team-modal-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-625); margin-bottom:var(--ui-len-rem-0-875); padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-8125); border:var(--ui-len-rem-0-0625) solid var(--color-primary-100); border-radius:var(--ui-len-rem-0-6875); background: var(--color-primary-50); }
.rb-team-modal-count { color: var(--color-primary-800); font-size:var(--ui-len-rem-0-8); font-weight: var(--font-weight-extrabold); }
.rb-team-search { width:min(100%, var(--ui-len-rem-18-125)); min-height:var(--ui-len-rem-2-375); padding:var(--ui-len-rem-0-5) var(--ui-len-rem-0-6875) var(--ui-len-rem-0-5) var(--ui-len-rem-2-125); border:var(--ui-len-rem-0-0625) solid var(--color-border-strong); border-radius:var(--ui-len-rem-0-5625); font-size:var(--ui-len-rem-0-78); }
.rb-team-search:focus { outline:0; border-color: var(--color-primary); box-shadow:0 0 0 var(--ui-len-rem-0-1875) color-mix(in srgb, var(--color-primary) 14%, transparent); }
.rb-team-root { display: flex; align-items: center; gap:var(--ui-len-rem-0-625); margin-bottom:var(--ui-len-rem-0-8125); padding:var(--ui-len-rem-0-625) var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid var(--color-secondary-100); border-radius:var(--ui-len-rem-0-625); background: var(--color-secondary-50); }
.rb-team-root-icon { display: inline-flex; width:var(--ui-len-rem-1-9375); height:var(--ui-len-rem-1-9375); flex:0 0 var(--ui-len-rem-1-9375); align-items: center; justify-content: center; border-radius:var(--radius-circle); background: var(--color-secondary-700); color: var(--color-white); }
.rb-team-root-copy { min-width:0; }
.rb-team-root-title { color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-78); font-weight: var(--font-weight-extrabold); }
.rb-team-root-meta { margin-top:var(--ui-len-rem-0-0625); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-65); }
.rb-team-hierarchy { display: grid; gap:var(--ui-len-rem-0-875); }
.rb-team-level { --rb-level-indent: 0; position: relative; padding-left:calc(var(--ui-len-rem-2-5) + var(--rb-level-indent)); }
.rb-team-level::before { position: absolute; top:var(--ui-len-rem-1-9375); bottom:var(--ui-len-rem-neg-0-9375); left:calc(var(--ui-len-rem-0-9375) + var(--rb-level-indent)); width:var(--ui-len-rem-0-125); background: var(--color-primary-100); content: ""; }
.rb-team-level:last-child::before { display: none; }
.rb-team-level-marker { position: absolute; top:0; left:var(--rb-level-indent); display: inline-flex; width:var(--ui-len-rem-1-9375); height:var(--ui-len-rem-1-9375); align-items: center; justify-content: center; border:var(--ui-len-rem-0-1875) solid var(--color-white); border-radius:var(--radius-circle); box-shadow:0 0 0 var(--ui-len-rem-0-0625) var(--color-primary-200); background: var(--color-primary); color: var(--color-white); font-size:var(--ui-len-rem-0-68); font-weight: var(--font-weight-black); }
.rb-team-level--extended .rb-team-level-marker { background: var(--color-secondary-600); box-shadow:0 0 0 var(--ui-len-rem-0-0625) var(--color-secondary-200); }
.rb-team-level-header { display: flex; min-height:var(--ui-len-rem-1-9375); align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-5625); margin-bottom:var(--ui-len-rem-0-5); }
.rb-team-level-title { color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-78); font-weight: var(--font-weight-black); }
.rb-team-level-description { margin-top:var(--ui-len-rem-0-0625); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-63); }
.rb-team-level-count { flex:0 0 auto; padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-5); border-radius:var(--ui-len-rem-62-4375); background: var(--color-bg-muted); color: var(--color-secondary-700); font-size:var(--ui-len-rem-0-6); font-weight: var(--font-weight-extrabold); }
.rb-team-list { display: grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--ui-len-rem-0-625); }
.rb-team-member { display: flex; min-width:0; align-items: center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-6875); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-6875); background: var(--color-white); }
.rb-team-photo { width:var(--avatar-size-list); height:var(--avatar-size-list); flex:0 0 var(--avatar-size-list); border:var(--ui-len-rem-0-125) solid var(--color-primary-100); border-radius:var(--radius-circle); object-fit: cover; }
.rb-team-member-copy { min-width:0; flex:1; }
.rb-team-member-name { overflow: hidden; color: var(--color-secondary-700); font-size:var(--ui-len-rem-0-81); font-weight: var(--font-weight-extrabold); text-overflow: ellipsis; white-space: nowrap; }
.rb-team-member-meta { margin-top:var(--ui-len-rem-0-125); overflow-wrap: anywhere; color: var(--color-text-muted); font-size:var(--ui-len-rem-0-68); }
.rb-team-scope { display: inline-flex; margin-top:var(--ui-len-rem-0-3125); padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-4375); border-radius:var(--ui-len-rem-62-4375); background: var(--color-secondary-50); color: var(--color-secondary-600); font-size:var(--ui-len-rem-0-58); font-weight: var(--font-weight-extrabold); text-transform: uppercase; }
.rb-team-scope--direct { background: var(--color-primary-100); color: var(--color-primary-800); }
.rb-team-empty { padding:var(--ui-len-rem-1-5) var(--ui-len-rem-0-75); color: var(--color-text-muted); text-align: center; }
.rb-last-attendance { margin-top:var(--ui-len-rem-0-875); padding:var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-6875); background: var(--color-bg-subtle); text-align: left; }
.rb-last-attendance-head { display: flex; align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-5); }
.rb-last-attendance-title { color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-76); font-weight: var(--font-weight-black); }
.rb-att-status { display: inline-flex; flex:0 0 auto; align-items: center; padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-5); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-58); font-weight: var(--font-weight-black); text-transform: uppercase; }
.rb-att-status--success { background: var(--color-success-bg); color: var(--color-primary-800); }
.rb-att-status--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.rb-att-status--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.rb-att-status--info { background: var(--color-info-bg); color: var(--color-info); }
.rb-last-attendance-summary { margin:var(--ui-len-rem-0-4375) 0 var(--ui-len-rem-0-5625); color: var(--color-text-body); font-size:var(--ui-len-rem-0-69); line-height:1.45; }
.rb-last-attendance-metrics { display: grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--ui-len-rem-0-4375); }
.rb-last-attendance-metric { min-width:0; padding:var(--ui-len-rem-0-4375) var(--ui-len-rem-0-5); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--ui-len-rem-0-5); background: var(--color-white); }
.rb-last-attendance-metric span { display: block; color: var(--color-text-muted); font-size:var(--ui-len-rem-0-56); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-02); text-transform: uppercase; }
.rb-last-attendance-metric strong { display: block; margin-top:var(--ui-len-rem-0-125); overflow: hidden; color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-7); text-overflow: ellipsis; white-space: nowrap; }
.rb-last-attendance-foot { display: flex; flex-wrap: wrap; gap:var(--ui-len-rem-0-3125) var(--ui-len-rem-0-75); margin-top:var(--ui-len-rem-0-5); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-61); }
.rb-last-attendance-foot span { align-items: center; display: inline-flex; gap:var(--ui-len-rem-0-3125); }
.rb-last-attendance-foot i { width:var(--ui-len-rem-0-75); color: var(--color-primary-700); text-align: center; }

.rb-wing-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.rb-wing-chip { border-radius: 2rem; font-size: var(--font-size-small); font-weight: var(--font-weight-bold); padding: 0.25rem 0.65rem; border: var(--ui-len-rem-0-0625) solid var(--color-border-strong); background: var(--color-white); color: var(--color-gray-700); transition: all 0.15s ease; cursor: pointer; }
.rb-wing-chip:hover { background: var(--color-bg-subtle); color: var(--color-secondary-800); }
.rb-wing-chip.active { background: var(--color-secondary-800); color: var(--color-white); border-color: var(--color-secondary-800); }
.rb-wing-chip.active .badge { background: var(--color-white) !important; color: var(--color-secondary-800) !important; }
.rb-wing-chip[data-wing="academics"].active { background: var(--color-status-teal); border-color: var(--color-status-teal); }
.rb-wing-chip[data-wing="transport"].active { background: var(--color-status-orange); border-color: var(--color-status-orange); }
.rb-wing-chip[data-wing="admin"].active { background: var(--color-status-blue); border-color: var(--color-status-blue); }
.rb-wing-chip[data-wing="tech"].active { background: var(--color-status-purple); border-color: var(--color-status-purple); }
.rb-wing-chip[data-wing="vacant"].active { background: var(--color-status-purple); border-color: var(--color-status-purple); }

.rb-vacant-gap-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; border: var(--ui-len-rem-0-09375) dashed var(--color-status-purple); border-radius: 0.625rem; background: var(--color-status-purple-bg); }
.rb-vacant-gap-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-status-purple-bg); color: var(--color-status-purple); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-body-sm); flex-shrink: 0; }
.rb-vacant-gap-copy { flex: 1; min-width: 0; }
.rb-vacant-gap-title { font-weight: var(--font-weight-extrabold); font-size: var(--font-size-small); color: var(--color-status-purple); }
.rb-vacant-gap-meta { font-size: var(--font-size-tiny); color: var(--color-text-muted); margin-top: 0.125rem; line-height: 1.35; }
.rb-vacant-staff-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.rb-vacant-staff-tag { display: inline-flex; align-items: center; background: var(--rb-escalation-bg); border: 1px solid var(--rb-escalation-border); color: var(--rb-escalation-text); border-radius: 0.35rem; padding: 0.15rem 0.5rem; font-size: var(--font-size-tiny); font-weight: var(--font-weight-semibold); margin: 2px 0; }

.rb-team-member { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 0.65rem; padding: 0.85rem; display: flex; align-items: flex-start; gap: 0.75rem; box-shadow: 0 1px 3px var(--rb-alpha-013); transition: all 0.15s ease; }
.rb-team-member:hover { border-color: var(--color-primary-300); box-shadow: 0 3px 6px var(--rb-alpha-901); }
.rb-team-member-name { font-weight: var(--font-weight-extrabold); font-size: var(--font-size-body); color: var(--rb-team-ink); }
.rb-team-member-code { font-size: var(--font-size-tiny); font-weight: var(--font-weight-bold); color: var(--rb-team-code-text); background: var(--rb-team-code-bg); border: 1px solid var(--rb-team-code-border); padding: 0.1rem 0.4rem; border-radius: 0.25rem; }
.rb-team-member-designation { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--rb-team-designation); margin-top: 0.2rem; }
.rb-team-member-dept { font-size: var(--font-size-small); color: var(--rb-team-dept); margin-top: 0.15rem; }
.rb-team-member-pipeline { font-size: var(--font-size-small); color: var(--rb-team-pipeline); margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px dashed var(--rb-team-code-border); line-height: 1.4; }
.rb-team-member-pipeline strong { color: var(--rb-team-ink); font-weight: var(--font-weight-bold); }

.rb-level-wing-header { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.375rem; padding-bottom: 0.25rem; border-bottom: var(--ui-len-rem-0-0625) solid var(--color-border); }

@media (max-width: 47.99875rem) {
    .rb-reporting-grid, .rb-team-list { grid-template-columns:1fr; }
    .rb-team-modal-summary { align-items: stretch; flex-direction: column; }
    .rb-team-search { width:100%; }
    .rb-team-level { padding-left:calc(var(--ui-len-rem-2-125) + min(var(--rb-level-indent), var(--ui-len-rem-2))); }
    .rb-last-attendance-metrics { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* userdata: hdfc_payment_status */
.pmt-page { padding-bottom:var(--ui-len-rem-1-5); }
    .pmt-card {
        background: var(--color-white); border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--radius-lg);
        box-shadow:var(--shadow-md); margin:0 auto; max-width:var(--ui-len-rem-35); overflow: hidden;
    }
    .pmt-card-body { padding:var(--space-8) var(--space-6); text-align: center; }
    .pmt-icon { font-size:var(--ui-len-rem-3-5); margin-bottom:var(--space-4); }
    .pmt-icon--ok { color: var(--color-primary); }
    .pmt-icon--bad { color: var(--color-danger); }
    .pmt-title { color: var(--color-text-heading); font-size:var(--font-size-h4); font-weight: var(--font-weight-bold); margin-bottom:var(--space-1); }
    .pmt-subtitle { color: var(--color-text-muted); font-size:var(--font-size-body-sm); font-weight: var(--font-weight-semibold); margin-bottom:var(--space-4); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-04); }
    .pmt-note { color: var(--color-text-muted); font-size:var(--font-size-small); margin:0 0 var(--space-4); }
    .pmt-detail-table { margin:0 auto; max-width:var(--ui-len-rem-21-25); text-align: left; width:100%; }
    .pmt-detail-table tr td { border-top:var(--ui-len-rem-0-0625) solid var(--color-border); color: var(--color-text-body); font-size:var(--font-size-body-sm); padding:var(--space-2) 0; }
    .pmt-detail-table tr:first-child td { border-top:0; }
    .pmt-detail-table td:first-child { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
    .pmt-detail-table td:last-child { text-align: right; }

    @media (max-width: 35.99875rem) {
        .pmt-card-body { padding:var(--space-6) var(--space-4); }
    }

/* userdata: forgot_password */
/* Full background image */
.login-page {
    position: relative;
    min-height:100vh;
    background: url("/static/img/school_bg2.webp") center/cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:var(--ui-len-rem-2) var(--ui-len-rem-1);
}

/* var(--color-black) transparent overlay */
.login-page::before {
    content: "";
    position: absolute;
    inset:0;
    background: var(--rb-alpha-009);
    z-index: 0;
}

/* Make content appear above overlay */
.login-page .container-fluid {
    position: relative;
    z-index: 1;
}
.modern-login-card {
    border-radius:var(--radius-xl, var(--ui-len-rem-1));
    border:none;
    backdrop-filter:blur(var(--ui-len-rem-0-625));
    background: var(--rb-alpha-083);
}
.login-page .form-control {
    padding:var(--ui-len-rem-0-875);
    transition: all 0.2s ease;
}

.login-page .btn-primary.btn-block {
    padding:var(--ui-len-rem-0-75);
}

/* iOS Safari renders fixed backgrounds unreliably (jump/zoom on scroll) */
@media (max-width: 48rem) {
    .login-page {
        background-attachment: scroll;
    }
}

@media (max-width: 36rem) {
    .login-page {
        padding:var(--ui-len-rem-1-25) var(--ui-len-rem-0-625);
    }
    .modern-login-card {
        padding:var(--ui-len-rem-1-25);
    }
    .logo-circle {
        width:var(--ui-len-rem-5-625);
        height:var(--ui-len-rem-5-625);
    }
    .login-page .text-center.mb-4 h1.h4 {
        font-size:var(--ui-len-rem-1-1);
    }
}

@media (max-width: 22.5rem) {
    .logo-circle {
        width:var(--ui-len-rem-4-75);
        height:var(--ui-len-rem-4-75);
    }
    .modern-login-card {
        padding:var(--ui-len-rem-1);
    }
}

.logo-circle {
    width:var(--ui-len-rem-7-5);
    height:var(--ui-len-rem-7-5);
    margin:0 auto;

    border-radius:var(--radius-circle);
    overflow: hidden;
    background: var(--color-white);
    padding:var(--ui-len-rem-0-5);
    box-shadow:0 var(--ui-len-rem-0-5) var(--ui-len-rem-1-25) var(--rb-alpha-017), 0 0 0 var(--ui-len-rem-0-3125) color-mix(in srgb, var(--color-primary) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-circle img {
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:var(--radius-circle);
}

.login-forgot-link {
    color: var(--color-primary-700);
    font-weight: var(--font-weight-medium);
}
.login-forgot-link:hover {
    color: var(--color-primary-800);
}

.login-footer-text {
    color: var(--rb-alpha-079);
}

/* userdata: login */
.password-wrap {
    position: relative;
}
.password-wrap .form-control {
    padding-right:var(--ui-len-rem-2-75);
}
.toggle-password-btn {
    position: absolute;
    right:var(--ui-len-rem-0-625);
    top:50%;
    transform:translateY(-50%);
    border:none;
    background: transparent;
    color: var(--color-text-muted, var(--rb-palette-6c757d));
    padding:0;
    line-height:1;
}

/* Shared userdata validation alert. Its content mirrors the detailed VMS
   required-field dialog while typography remains owned by theme.css. */
.rb-validation-alert-details {
    color: var(--swal-popup-text);
    font-family: var(--swal-font-family);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-relaxed);
    text-align: left;
}
.rb-validation-alert-heading {
    color: var(--swal-popup-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-2);
}
.rb-validation-alert-item {
    overflow-wrap: anywhere;
}
.rb-validation-alert-item strong {
    font-weight: var(--font-weight-bold);
}

/* userdata: direct-URL superuser Data Maintenance */
.udm-page {
    padding-bottom: var(--space-8);
}
.udm-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    background: var(--color-info-bg);
    color: var(--color-secondary-800);
}
.udm-notice > i {
    margin-top: var(--space-1);
    color: var(--color-secondary-600);
}
.udm-notice strong,
.udm-notice span {
    display: block;
}
.udm-notice span {
    margin-top: var(--space-1);
    font-size: var(--font-size-body-sm);
}
.udm-card {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.udm-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.udm-card h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-heading);
    font-size: var(--font-size-h5);
}
.udm-card h2 i {
    color: var(--color-primary);
}
.udm-card h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-heading);
    font-size: var(--font-size-body);
}
.udm-card p {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
}
.udm-card__header p {
    margin: var(--space-1) 0 0;
}
.udm-card code {
    overflow-wrap: anywhere;
    color: var(--color-secondary-700);
    font-size: var(--font-size-small);
}
.udm-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}
.udm-status--ready { background: var(--color-success-bg); color: var(--color-primary-800); }
.udm-status--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.udm-status--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.udm-status--neutral { background: var(--color-bg-muted); color: var(--color-text-muted); }
.udm-pending-list {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: var(--font-size-body-sm);
}
.udm-action-form {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}
.udm-action-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.udm-table {
    margin-bottom: 0;
    font-size: var(--font-size-body-sm);
}
.udm-route {
    display: block;
    margin-bottom: var(--space-2);
}
.udm-route:last-child {
    margin-bottom: 0;
}
.udm-route small {
    display: block;
    color: var(--color-text-muted);
}
.udm-details summary {
    cursor: pointer;
    color: var(--color-secondary-700);
    font-weight: var(--font-weight-semibold);
}
.udm-details ul {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
}
.udm-details li {
    margin-bottom: var(--space-2);
}
.udm-cli-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.udm-cli-grid article {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}
.udm-cli-grid article > code {
    display: block;
    margin-bottom: var(--space-3);
}
.udm-cli-grid small {
    color: var(--color-text-muted);
}
@media (max-width: 47.99875rem) {
    .udm-card { padding: var(--space-4); }
    .udm-card__header { flex-direction: column; }
    .udm-cli-grid { grid-template-columns: 1fr; }
}

/* userdata: loginsecurity */
.ls-page { padding-bottom:var(--space-6); }
    .ls-page-header { justify-content: space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
    .ls-header-count {
        display: inline-flex;
        flex:0 0 auto;
        align-items: center;
        gap:var(--ui-len-rem-0-375);
        padding:var(--ui-len-rem-0-375) var(--ui-len-rem-0-6875);
        border-radius:var(--radius-pill);
        background: var(--rb-alpha-055);
        color: var(--rb-alpha-070);
        font-size:var(--font-size-small);
        font-weight: var(--font-weight-semibold);
    }
    .ls-panel {
        overflow: hidden;
        margin-bottom:var(--space-5);
        border:var(--ui-len-rem-0-0625) solid var(--color-border);
        border-radius:var(--radius-lg);
        background: var(--color-white);
        box-shadow:var(--shadow-sm);
    }
    .ls-panel-header {
        display: flex;
        min-height:var(--ui-len-rem-3-375);
        align-items: center;
        justify-content: space-between;
        gap:var(--space-3);
        padding:var(--space-3) var(--space-5);
        border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border);
        background: var(--color-bg-subtle);
    }
    .ls-panel-heading { display: flex; min-width:0; align-items: center; gap:var(--space-3); }
    .ls-panel-icon {
        display: inline-flex;
        width:var(--ui-len-rem-2-125);
        height:var(--ui-len-rem-2-125);
        flex:0 0 var(--ui-len-rem-2-125);
        align-items: center;
        justify-content: center;
        border-radius:var(--radius-md);
        background: var(--color-primary-100);
        color: var(--color-primary-700);
    }
    .ls-panel-title { margin:0; color: var(--color-secondary-700); font-size:var(--font-size-body); font-weight: var(--font-weight-bold); }
    .ls-panel-subtitle { margin-top:var(--ui-len-rem-0-125); color: var(--color-text-muted); font-size:var(--font-size-small); }
    .ls-panel-body { padding:var(--space-4); }
    .ls-logout-all {
        display: inline-flex;
        flex:0 0 auto;
        align-items: center;
        justify-content: center;
        gap:var(--ui-len-rem-0-375);
        border-color: var(--color-danger);
        color: var(--color-danger);
        background: var(--color-white);
        font-size:var(--font-size-small);
        font-weight: var(--font-weight-semibold);
    }
    .ls-logout-all:hover, .ls-logout-all:focus { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-white); }
    .ls-table-wrap { overflow-x: auto; border:var(--ui-len-rem-0-0625) solid var(--color-border); border-radius:var(--radius-md); }
    .ls-table { width:100%; margin:0; border-collapse: collapse; }
    .ls-table thead th {
        padding:var(--ui-len-rem-0-625) var(--ui-len-rem-0-8125);
        border:0;
        border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border-strong);
        background: var(--color-gray-100);
        color: var(--color-secondary-700);
        font-size:var(--ui-len-rem-0-67);
        font-weight: var(--font-weight-bold);
        letter-spacing:var(--letter-spacing-wide);
        text-transform: uppercase;
        white-space: nowrap;
    }
    .ls-table tbody td { padding:var(--ui-len-rem-0-75) var(--ui-len-rem-0-8125); border:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border); color: var(--color-text-body); font-size:var(--font-size-body-sm); vertical-align: middle; }
    .ls-table tbody tr:last-child td { border-bottom:0; }
    .ls-table tbody tr:not(.ls-empty-row):hover { background: var(--color-bg-subtle); }
    .ls-device { display: flex; min-width:0; align-items: center; gap:var(--ui-len-rem-0-5625); }
    .ls-device-icon {
        display: inline-flex;
        width:var(--ui-len-rem-2);
        height:var(--ui-len-rem-2);
        flex:0 0 var(--ui-len-rem-2);
        align-items: center;
        justify-content: center;
        border-radius:var(--ui-len-rem-0-5625);
        background: var(--color-secondary-50);
        color: var(--color-secondary-600);
    }
    .ls-device-name { min-width:0; overflow-wrap: anywhere; color: var(--color-secondary-700); font-weight: var(--font-weight-semibold); }
    .ls-current-badge, .ls-status {
        display: inline-flex;
        align-items: center;
        gap:var(--ui-len-rem-0-25);
        padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-5);
        border-radius:var(--radius-pill);
        font-size:var(--ui-len-rem-0-64);
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
    }
    .ls-current-badge { margin-left:var(--ui-len-rem-0-375); background: var(--color-primary-100); color: var(--color-primary-700); }
    .ls-status--success { background: var(--color-success-bg); color: var(--color-primary-700); }
    .ls-status--failed { background: var(--color-danger-bg); color: var(--color-danger); }
    .ls-status--blocked { background: var(--color-warning-bg); color: var(--color-warning-text); }
    .ls-secondary { color: var(--color-text-muted); font-size:var(--font-size-small); }
    .ls-signout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap:var(--ui-len-rem-0-3125);
        border-color: var(--color-danger);
        color: var(--color-danger);
        background: var(--color-white);
        font-size:var(--font-size-small);
        font-weight: var(--font-weight-semibold);
    }
    .ls-signout:hover, .ls-signout:focus { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
    .ls-alert-panel { border-color: var(--color-warning); }
    .ls-alert-panel .ls-panel-header { border-color: var(--color-warning); background: var(--color-warning-bg); }
    .ls-alert-panel .ls-panel-icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
    .ls-alert-list { display: grid; grid-template-columns:repeat(auto-fit, minmax(var(--ui-len-rem-16-25), 1fr)); gap:var(--space-3); }
    .ls-alert-item { display: flex; min-width:0; align-items: flex-start; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid var(--color-warning); border-radius:var(--radius-md); background: var(--color-warning-bg); }
    .ls-alert-item > i { margin-top:var(--ui-len-rem-0-125); color: var(--color-warning-text); }
    .ls-alert-message { overflow-wrap: anywhere; color: var(--color-secondary-700); font-size:var(--font-size-body-sm); font-weight: var(--font-weight-medium); }
    .ls-alert-time { display: block; margin-top:var(--ui-len-rem-0-1875); color: var(--color-text-muted); font-size:var(--font-size-small); }
    .ls-empty-cell { padding:0 !important; }
    .ls-empty-state { display: flex; min-height:var(--ui-len-rem-8-25); align-items: center; justify-content: center; flex-direction: column; gap:var(--ui-len-rem-0-4375); padding:var(--space-5); color: var(--color-text-muted); text-align: center; }
    .ls-empty-state i { color: var(--color-primary); font-size:var(--ui-len-rem-1-6); }

    @media (max-width: 47.99875rem) {
        .ls-panel-header { align-items: flex-start; padding:var(--space-3) var(--space-4); }
        .ls-panel-header--action { flex-direction: column; }
        .ls-panel-header--action .logout-all-devices-form,
        .ls-panel-header--action .ls-logout-all { width:100%; }
        .ls-panel-body { padding:var(--space-3); }
        .ls-table-wrap { overflow: visible; border:0; border-radius:var(--radius-none); }
        .ls-table, .ls-table tbody { display: block; width:100%; }
        .ls-table thead { display: none; }
        .ls-table tbody tr {
            display: block;
            overflow: hidden;
            margin-bottom:var(--space-3);
            border:var(--ui-len-rem-0-0625) solid var(--color-border);
            border-radius:var(--radius-md);
            background: var(--color-white);
        }
        .ls-table tbody tr:last-child { margin-bottom:0; }
        .ls-table tbody td {
            display: grid;
            grid-template-columns:var(--ui-len-rem-6-5625) minmax(0, 1fr);
            gap:var(--ui-len-rem-0-625);
            align-items: center;
            padding:var(--ui-len-rem-0-625) var(--ui-len-rem-0-75);
            border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border);
        }
        .ls-table tbody td::before { content: attr(data-label); color: var(--color-text-muted); font-size:var(--ui-len-rem-0-61); font-weight: var(--font-weight-bold); letter-spacing:var(--letter-spacing-wide); text-transform: uppercase; }
        .ls-table tbody td:last-child { border-bottom:0; }
        .ls-table tbody td[data-label="Action"] { display: flex; justify-content: flex-end; }
        .ls-table tbody td[data-label="Action"]::before { display: none; }
        .ls-empty-row { display: block !important; }
        .ls-empty-row td { display: block !important; width:100%; }
        .ls-empty-row td::before { display: none !important; }
    }

    @media (max-width: 29.99875rem) {
        .ls-header-count { align-self: flex-start; }
        .ls-alert-list { grid-template-columns:1fr; }
        .ls-table tbody td { grid-template-columns:var(--ui-len-rem-5-5) minmax(0, 1fr); }
        .ls-current-badge { display: flex; width:max-content; margin:var(--ui-len-rem-0-3125) 0 0; }
    }

/* userdata: ongoing_requisitions */
.og-page {
        --og-navy: var(--color-secondary-700, var(--color-secondary-600));
        --og-navy-dark: var(--color-secondary-900, var(--color-secondary-800));
        --og-green: var(--color-primary);
        --og-green-dark: var(--color-primary-700, var(--rb-palette-287d5a));
        --og-border: var(--color-border, var(--color-gray-200));
        --og-muted: var(--color-text-muted, var(--color-gray-500));
    }
    .og-shell {
        overflow: hidden;
        border:0;
        border-radius:var(--ui-len-rem-1);
        background: var(--color-white);
        box-shadow:0 var(--ui-len-rem-0-25) var(--ui-len-rem-1-125) var(--rb-alpha-106);
    }

    .og-stats-row { display: grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--ui-len-rem-0-75); padding:var(--ui-len-rem-1) var(--ui-len-rem-1-125) 0; }
    .og-stat-card { padding:var(--ui-len-rem-0-8125) var(--ui-len-rem-0-875); border:var(--ui-len-rem-0-0625) solid var(--og-border); border-radius:var(--ui-len-rem-0-75); background: var(--color-bg-subtle, var(--rb-palette-f8fafb)); }
    .og-stat-value { font-size:var(--ui-len-rem-1-25); font-weight: var(--font-weight-extrabold); color: var(--og-navy); line-height:1.1; }
    .og-stat-label { margin-top:var(--ui-len-rem-0-25); font-size:var(--ui-len-rem-0-68); font-weight: var(--font-weight-bold); color: var(--og-muted); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-03); }
    .og-stat-card--urgent .og-stat-value { color: var(--color-danger); }
    .og-stat-card--overdue .og-stat-value { color: var(--rb-palette-a9640c); }
    .og-stat-card--total .og-stat-value { color: var(--og-green-dark); }

    .og-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-1) var(--ui-len-rem-1-125) 0; }
    .og-filter-chip {
        display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-0-4375) var(--ui-len-rem-0-8125); border-radius:var(--ui-len-rem-62-4375);
        border:var(--ui-len-rem-0-0625) solid var(--og-border); background: var(--color-white); color: var(--og-navy); font-size:var(--ui-len-rem-0-76); font-weight: var(--font-weight-bold);
        text-decoration: none; white-space: nowrap;
    }
    .og-filter-chip:hover { border-color: var(--og-green); color: var(--og-green-dark); text-decoration: none; }
    .og-filter-chip.og-active { background: var(--og-navy); border-color: var(--og-navy); color: var(--color-white); }
    .og-filter-chip .og-chip-count { padding:var(--ui-len-rem-0-0625) var(--ui-len-rem-0-375); border-radius:var(--ui-len-rem-62-4375); background: var(--rb-alpha-011); font-size:var(--ui-len-rem-0-66); }
    .og-filter-chip.og-active .og-chip-count { background: var(--rb-alpha-090); }

    .og-search-form { margin-left:auto; display: flex; align-items: center; gap:var(--ui-len-rem-0-5); }
    .og-search-input-wrap { position: relative; display: flex; align-items: center; }
    .og-search-icon {
        position: absolute; left: var(--ui-len-rem-0-8125); color: var(--og-muted);
        font-size: var(--ui-len-rem-0-8); pointer-events: none; z-index: 2;
    }
    .og-search-input {
        padding:var(--ui-len-rem-0-5) var(--ui-len-rem-0-75) var(--ui-len-rem-0-5) var(--ui-len-rem-2-25); border:var(--ui-len-rem-0-0625) solid var(--og-border); border-radius:var(--ui-len-rem-0-5625); font-size:var(--ui-len-rem-0-8); min-width:var(--ui-len-rem-13-75);
    }
    .og-search-input:focus { outline:none; border-color: var(--og-green); box-shadow:0 0 0 var(--ui-len-rem-0-1875) color-mix(in srgb, var(--color-primary) 14%, transparent); }
    .og-search-btn {
        display: inline-flex; align-items: center; justify-content: center; width:var(--ui-len-rem-2-25); height:var(--ui-len-rem-2-25); border-radius:var(--ui-len-rem-0-5625);
        border:var(--ui-len-rem-0-0625) solid var(--og-border); background: var(--color-white); color: var(--og-navy);
    }
    .og-search-btn:hover { background: var(--og-green); border-color: var(--og-green); color: var(--color-white); }
    .og-clear-link { font-size:var(--ui-len-rem-0-74); color: var(--og-muted); text-decoration: underline; }

    .og-body { padding:var(--ui-len-rem-1-125); }
    .og-table-wrap { overflow-x: auto; border:var(--ui-len-rem-0-0625) solid var(--og-border); border-radius:var(--ui-len-rem-0-75); }
    .og-table { width:100%; margin:0; border-collapse: collapse; }
    .og-table thead th {
        padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-8125); border:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--og-border); background: var(--color-bg-subtle, var(--rb-palette-edf1f4)); color: var(--og-navy);
        font-size:var(--ui-len-rem-0-67); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-045); text-transform: uppercase; white-space: nowrap;
    }
    .og-table tbody td { padding:var(--ui-len-rem-0-8125); border:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--og-border); color: var(--color-text-body, var(--rb-palette-33475b)); font-size:var(--ui-len-rem-0-8); vertical-align: middle; }
    .og-table tbody tr:last-child td { border-bottom:0; }
    .og-table tbody tr:not(.og-empty-row):hover { background: var(--color-primary-50, var(--rb-palette-f8fbfa)); }
    .og-req-number { color: var(--og-navy); font-weight: var(--font-weight-extrabold); white-space: nowrap; }
    .og-req-item-name { color: var(--og-navy); font-weight: var(--font-weight-bold); }
    .og-req-meta { display: block; margin-top:var(--ui-len-rem-0-1875); color: var(--og-muted); font-size:var(--ui-len-rem-0-7); line-height:1.4; }
    .og-req-quantity { font-weight: var(--font-weight-bold); white-space: nowrap; }

    .og-status {
        display: inline-flex; align-items: center; padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-5625); border-radius:var(--ui-len-rem-62-4375); background: var(--color-secondary-50); color: var(--color-secondary-700);
        font-size:var(--ui-len-rem-0-64); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-025); text-transform: uppercase; white-space: nowrap;
    }
    .og-status--approved, .og-status--issued, .og-status--received { background: var(--color-primary-100, var(--rb-palette-cff0e1)); color: var(--color-primary-800); }
    .og-status--requested, .og-status--reviewed, .og-status--stock_check { background: var(--color-warning-bg); color: var(--color-warning-text); }
    .og-status--in_quotation, .og-status--ordered { background: var(--color-status-purple-bg); color: var(--color-status-purple); }
    .og-status--partially_issued { background: var(--color-status-orange-bg); color: var(--rb-palette-a9640c); }

    .og-mini-badge { display: inline-flex; margin-top:var(--ui-len-rem-0-3125); padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-4375); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-61); font-weight: var(--font-weight-bold); }
    .og-mini-badge--urgent { background: var(--color-danger-bg); color: var(--color-danger); }
    .og-mini-badge--service { margin-top:var(--ui-len-rem-0-1875); background: var(--color-secondary-50); color: var(--color-secondary-700); }
    .og-overdue { display: block; margin-top:var(--ui-len-rem-0-25); color: var(--color-danger); font-size:var(--ui-len-rem-0-67); font-weight: var(--font-weight-bold); }

    .og-track-btn {
        display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-375); padding:var(--ui-len-rem-0-5) var(--ui-len-rem-0-8125); border:var(--ui-len-rem-0-0625) solid var(--og-green);
        border-radius:var(--ui-len-rem-0-5); background: var(--og-green); color: var(--color-white); font-size:var(--ui-len-rem-0-76); font-weight: var(--font-weight-bold); text-decoration: none; white-space: nowrap;
    }
    .og-track-btn:hover { background: var(--og-green-dark); border-color: var(--og-green-dark); color: var(--color-white); text-decoration: none; }
    .og-table .og-action-column { width:var(--ui-len-rem-9-375); text-align: center !important; white-space: nowrap; }

    .og-empty-cell { padding:0 !important; }
    .og-empty-state { display: flex; width:100%; min-height:var(--ui-len-rem-12-5); align-items: center; justify-content: center; flex-direction: column; padding:var(--ui-len-rem-1-75) var(--ui-len-rem-1-125); color: var(--og-muted); text-align: center; }
    .og-empty-state i { display: block; margin-bottom:var(--ui-len-rem-0-6875); color: var(--color-border-strong, var(--rb-palette-cbd7e0)); font-size:var(--ui-len-rem-2); }
    .og-empty-state strong { display: block; margin-bottom:var(--ui-len-rem-0-25); color: var(--og-navy); font-size:var(--ui-len-rem-0-9); }

    @media (max-width: 61.99875rem) {
        .og-stats-row { grid-template-columns:repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 47.99875rem) {
        .og-header { align-items: flex-start; padding:var(--ui-len-rem-0-875); }
        .og-subtitle { display: none; }
        .og-body { padding:var(--ui-len-rem-0-75); }
        .og-search-form { margin-left:0; width:100%; }
        .og-search-input-wrap { flex:1 1 auto; min-width:0; }
        .og-search-input { width:100%; min-width:0; }
        .og-table-wrap { overflow: visible; border:0; border-radius:var(--radius-none); }
        .og-table, .og-table tbody { display: block; width:100%; }
        .og-table thead { display: none; }
        .og-table tbody tr {
            display: grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; margin-bottom:var(--ui-len-rem-0-75); overflow: hidden;
            border:var(--ui-len-rem-0-0625) solid var(--og-border); border-radius:var(--ui-len-rem-0-75); background: var(--color-white);
        }
        .og-table tbody tr:last-child { margin-bottom:0; }
        .og-table tbody td { display: block; min-width:0; padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-75); border:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--og-border); }
        .og-table tbody td::before { content: attr(data-label); display: block; margin-bottom:var(--ui-len-rem-0-3125); color: var(--og-muted); font-size:var(--ui-len-rem-0-59); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-04); text-transform: uppercase; }
        .og-table tbody td:nth-child(2) { grid-column: 1 / -1; }
        .og-table tbody td:last-child { grid-column: 1 / -1; border-bottom:0; }
        .og-table tbody td.og-action-column {
            display: flex; width:auto; align-items: center; justify-content: space-between; gap:var(--ui-len-rem-0-75); text-align: left !important;
        }
        .og-table tbody td.og-action-column::before { margin-bottom:0; }
        .og-empty-row { display: block !important; }
        .og-empty-row td { width:100%; }
        .og-empty-row td::before { display: none !important; }
    }
    @media (max-width: 29.99875rem) {
        .og-stats-row { grid-template-columns:1fr 1fr; }
        .og-table tbody tr { grid-template-columns:1fr; }
        .og-table tbody td:nth-child(2) { grid-column: 1; }
    }

/* userdata: reusable expandable copy for requisition list tables */
.rb-expandable-text {
    display: flex;
    max-width: 100%;
    min-width: 0;
    align-items: baseline;
    gap: var(--ui-len-rem-0-375);
}
.rb-expandable-text__content {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.rb-expandable-text.is-ready:not(.is-expanded) .rb-expandable-text__content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
}
.rb-expandable-text.is-expanded {
    align-items: flex-start;
}
.rb-expandable-text.is-expanded .rb-expandable-text__content {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    text-overflow: clip;
    white-space: normal;
}
.rb-expandable-text__toggle {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-700);
    font-family: inherit;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: var(--ui-len-rem-0-125);
}
.rb-expandable-text__toggle:hover,
.rb-expandable-text__toggle:focus-visible {
    color: var(--color-primary-900);
}
.rb-expandable-text__toggle:focus-visible {
    border-radius: var(--radius-sm);
    outline: var(--ui-len-rem-0-125) solid var(--color-primary-300);
    outline-offset: var(--ui-len-rem-0-125);
}
.rb-expandable-text__toggle[hidden] {
    display: none !important;
}

/* userdata: password_reset_complete */
.reset-complete-icon {
    color: var(--color-primary);
    font-size:var(--ui-len-rem-3-5);
}

/* userdata: password_reset_confirm */
/* Keep this after the final login form-control shorthand so the icon's
   reserved space cannot be reset by page-level padding. */
.login-page .rb-input-icon-group > .form-control,
.login-page .rb-input-icon-group > .form-select,
.login-page .rb-input-icon-group > .custom-select {
    padding-left: calc(var(--space-4) * 2 + 14px);
}
/* userdata: requisition_status */
.rt-page {
        --rt-navy: var(--color-secondary-700, var(--color-secondary-600));
        --rt-navy-dark: var(--color-secondary-900, var(--color-secondary-800));
        --rt-green: var(--color-primary);
        --rt-green-dark: var(--color-primary-700, var(--rb-palette-287d5a));
        --rt-border: var(--color-border, var(--color-gray-200));
        --rt-muted: var(--color-gray-500);
        --rt-active: var(--color-status-purple);
        --rt-amber: var(--rb-palette-a9640c);
        --rt-red: var(--rb-palette-c43c48);
        width:100%;
        max-width:none;
        margin:0;
        padding-bottom:var(--ui-len-rem-1-625);
    }
    .rt-header-actions { display: flex; flex:0 0 auto; align-items: center; gap:var(--ui-len-rem-0-5625); }
    .rt-back {
        display: inline-flex;
        align-items: center;
        gap:var(--ui-len-rem-0-375);
        padding:var(--ui-len-rem-0-5) var(--ui-len-rem-0-75);
        border:var(--ui-len-rem-0-0625) solid var(--rb-alpha-092);
        border-radius:var(--ui-len-rem-0-5625);
        background: var(--rb-alpha-085);
        color: var(--color-white);
        font-size:var(--ui-len-rem-0-76);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        white-space: nowrap;
    }
    .rt-back:hover { background: var(--rb-alpha-089); color: var(--color-white); text-decoration: none; }

    .rt-shell {
        overflow: hidden;
        border:var(--ui-len-rem-0-0625) solid var(--rt-border);
        border-radius:var(--ui-len-rem-0-875);
        background: var(--color-white);
        box-shadow:0 var(--ui-len-rem-0-375) var(--ui-len-rem-1-375) var(--rb-alpha-104);
        margin-bottom:var(--ui-len-rem-1-125);
    }
    .rt-req-id { overflow-wrap: anywhere; }
    .rt-badge {
        display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-375);
        padding:var(--ui-len-rem-0-375) var(--ui-len-rem-0-8125); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-7); font-weight: var(--font-weight-extrabold);
        text-transform: uppercase; letter-spacing:var(--ui-len-em-0-03); white-space: nowrap;
        background: var(--rb-alpha-087); color: var(--color-white);
    }
    .rt-badge.rt-status--rejected { background: var(--rb-palette-ffe1e4); color: var(--rt-red); }
    .rt-badge.rt-status--approved,
    .rt-badge.rt-status--issued,
    .rt-badge.rt-status--received { background: var(--rb-palette-d7f7e8); color: var(--rb-palette-1b6b47); }
    .rt-badge.rt-status--requested,
    .rt-badge.rt-status--reviewed,
    .rt-badge.rt-status--stock_check { background: var(--rb-palette-fff1d9); color: var(--color-warning-text); }
    .rt-badge.rt-status--in_quotation,
    .rt-badge.rt-status--ordered { background: var(--color-status-purple-bg); color: var(--rt-active); }

    .rt-progress-wrap { margin:0; padding:var(--ui-len-rem-1-125) var(--ui-len-rem-1-125) 0; }
    .rt-progress-track { height:var(--ui-len-rem-0-5625); border-radius:var(--ui-len-rem-0-5); background: var(--color-gray-200); overflow: hidden; }
    .rt-progress-fill { height:100%; border-radius:var(--ui-len-rem-0-5); background: linear-gradient(90deg, var(--rt-green), var(--rb-palette-6fdc9f)); transition: width .4s; }
    .rt-progress-fill.rt-progress-rejected { background: linear-gradient(90deg, var(--rb-palette-e35d68), var(--rb-palette-f08a92)); }
    .rt-progress-label { margin-top:var(--ui-len-rem-0-375); font-size:var(--ui-len-rem-0-72); color: var(--rt-muted); }

    .rt-next-banner {
        display: flex; align-items: flex-start; gap:var(--ui-len-rem-0-75);
        margin:0 0 var(--ui-len-rem-1-125); padding:var(--ui-len-rem-0-875) var(--ui-len-rem-0-9375);
        border-radius:var(--ui-len-rem-0-75); background: var(--rb-palette-eef7f1); border:var(--ui-len-rem-0-0625) solid var(--rb-palette-cdeadb);
    }
    .rt-next-banner.rt-next-rejected { background: var(--rb-palette-fdeef0); border-color: var(--rb-palette-f6c9ce); }
    .rt-next-banner i { color: var(--rt-green-dark); font-size:var(--ui-len-rem-1-15); margin-top:var(--ui-len-rem-0-0625); }
    .rt-next-banner.rt-next-rejected i { color: var(--rt-red); }
    .rt-next-title { margin:0 0 var(--ui-len-rem-0-1875); font-size:var(--ui-len-rem-0-78); font-weight: var(--font-weight-extrabold); color: var(--rb-palette-1f3347); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-03); }
    .rt-next-text { margin:0; font-size:var(--ui-len-rem-0-85); color: var(--rb-palette-33475b); line-height:1.4; }

    .rt-body { padding:var(--ui-len-rem-1-125); background: var(--color-bg-page, var(--color-gray-50)); }
    .rt-summary-grid {
        display: grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--ui-len-rem-0-75); margin-bottom:var(--ui-len-rem-0-875);
    }
    .rt-summary-card {
        display: flex; min-width:0; align-items: center; gap:var(--ui-len-rem-0-6875); padding:var(--ui-len-rem-0-8125) var(--ui-len-rem-0-875);
        border:var(--ui-len-rem-0-0625) solid var(--rt-border); border-radius:var(--ui-len-rem-0-6875); background: var(--color-white);
    }
    .rt-summary-icon {
        display: inline-flex; width:var(--ui-len-rem-2-125); height:var(--ui-len-rem-2-125); flex:0 0 var(--ui-len-rem-2-125); align-items: center; justify-content: center;
        border-radius:var(--ui-len-rem-0-5625); background: var(--color-primary-50, var(--rb-palette-eef8f3)); color: var(--rt-green-dark);
    }
    .rt-summary-copy { min-width:0; }
    .rt-summary-label { color: var(--rt-muted); font-size:var(--ui-len-rem-0-61); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-045); text-transform: uppercase; }
    .rt-summary-value { margin-top:var(--ui-len-rem-0-125); overflow: hidden; color: var(--rb-palette-293f53); font-size:var(--ui-len-rem-0-82); font-weight: var(--font-weight-extrabold); text-overflow: ellipsis; white-space: nowrap; }

    .rt-content-grid { display: grid; grid-template-columns:minmax(0, 1.65fr) minmax(var(--layout-column-min-width), .75fr); gap:var(--ui-len-rem-0-875); align-items: start; }
    .rt-panel { border:var(--ui-len-rem-0-0625) solid var(--rt-border); border-radius:var(--ui-len-rem-0-75); background: var(--color-white); overflow: hidden; }
    .rt-panel-header {
        display: flex; align-items: center; gap:var(--ui-len-rem-0-625); padding:var(--ui-len-rem-0-8125) var(--ui-len-rem-0-9375);
        border-bottom:var(--ui-len-rem-0-0625) solid var(--rt-border); background: var(--color-bg-subtle, var(--rb-palette-f8fafb));
    }
    .rt-panel-icon {
        display: inline-flex; width:var(--ui-len-rem-1-875); height:var(--ui-len-rem-1-875); flex:0 0 var(--ui-len-rem-1-875); align-items: center; justify-content: center;
        border-radius:var(--ui-len-rem-0-5); background: var(--color-primary-100, var(--rb-palette-d7f7e8)); color: var(--rt-green-dark);
    }
    .rt-panel-title { margin:0; color: var(--rb-palette-1f3347); font-size:var(--ui-len-rem-0-84); font-weight: var(--font-weight-extrabold); }
    .rt-panel-subtitle { margin-top:var(--ui-len-rem-0-125); color: var(--rt-muted); font-size:var(--ui-len-rem-0-67); }
    .rt-panel-body { padding:var(--ui-len-rem-1); }

    /* ── Vertical timeline ── */
    .rt-timeline { position: relative; list-style: none; margin:0; padding:0; }
    .rt-step { position: relative; display: flex; gap:var(--ui-len-rem-1); padding-bottom:var(--ui-len-rem-1-625); }
    .rt-step:last-child { padding-bottom:0; }
    .rt-step-rail {
        position: relative; display: flex; flex-direction: column; align-items: center; flex:0 0 auto;
    }
    .rt-step-dot {
        width:var(--ui-len-rem-2-125); height:var(--ui-len-rem-2-125); border-radius:var(--radius-circle); display: flex; align-items: center; justify-content: center;
        font-size:var(--ui-len-rem-0-95); color: var(--color-white); background: var(--rb-palette-cbd2d9); flex:0 0 auto; z-index: 1;
    }
    .rt-step-dot.rt-dot-completed { background: linear-gradient(135deg, var(--rt-green), var(--rb-palette-57cf94)); }
    .rt-step-dot.rt-dot-current { background: linear-gradient(135deg, var(--rt-active), var(--rb-palette-9c8ce0)); animation: rt-pulse 1.8s infinite; }
    .rt-step-dot.rt-dot-pending { background: var(--rb-palette-cbd2d9); }
    .rt-step-dot.rt-dot-rejected { background: linear-gradient(135deg, var(--rt-red), var(--rb-palette-e8747d)); }
    @keyframes rt-pulse { 0%{box-shadow:0 0 0 0 var(--rb-alpha-019)} 70%{box-shadow:0 0 0 var(--ui-len-rem-0-5) var(--rb-alpha-020)} 100%{box-shadow:0 0 0 0 var(--rb-alpha-020)} }
    .rt-step-line { width:var(--ui-len-rem-0-125); flex:1 1 auto; margin-top:var(--ui-len-rem-0-25); min-height:var(--ui-len-rem-1-125); background: var(--rb-palette-dde3e8); }
    .rt-step-line.rt-line-completed { background: var(--rt-green); }

    .rt-step-content { flex:1 1 auto; min-width:0; padding-top:var(--ui-len-rem-0-1875); }
    .rt-step-title-row { display: flex; align-items: center; gap:var(--ui-len-rem-0-5625); flex-wrap: wrap; }
    .rt-step-title { font-size:var(--ui-len-rem-0-9); font-weight: var(--font-weight-bold); color: var(--rb-palette-1f3347); }
    .rt-step-pill { font-size:var(--ui-len-rem-0-6); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing:var(--ui-len-em-0-03); padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-5625); border-radius:var(--ui-len-rem-62-4375); }
    .rt-pill-completed { background: var(--rb-palette-d7f7e8); color: var(--rb-palette-1b6b47); }
    .rt-pill-current { background: var(--color-status-purple-bg); color: var(--rt-active); }
    .rt-pill-pending { background: var(--rb-palette-f1f3f9); color: var(--rb-palette-6c757d); }
    .rt-pill-rejected { background: var(--rb-palette-ffe1e4); color: var(--rt-red); }
    .rt-step-help { margin:var(--ui-len-rem-0-3125) 0 0; font-size:var(--ui-len-rem-0-8); color: var(--rt-muted); line-height:1.45; }
    .rt-step-help.rt-help-current { color: var(--rt-active); font-weight: var(--font-weight-semibold); }
    .rt-step-time { margin-top:var(--ui-len-rem-0-25); font-size:var(--ui-len-rem-0-7); color: var(--rb-palette-a2acb5); }

    .rt-footer-actions { display: flex; gap:var(--ui-len-rem-0-625); flex-wrap: wrap; margin-top:var(--ui-len-rem-0-375); }
    .rt-action-btn {
        display: inline-flex; align-items: center; gap:var(--ui-len-rem-0-4375); padding:var(--ui-len-rem-0-5625) var(--ui-len-rem-0-9375); border-radius:var(--ui-len-rem-0-5625);
        font-size:var(--ui-len-rem-0-8); font-weight: var(--font-weight-bold); text-decoration: none; border:var(--ui-len-rem-0-0625) solid var(--rt-border);
        background: var(--color-white); color: var(--rt-navy);
    }
    .rt-action-btn:hover { background: var(--rb-palette-f6f8f9); color: var(--rt-navy); text-decoration: none; }
    .rt-action-btn.rt-action-primary { border-color: var(--rt-green); background: var(--rt-green); color: var(--color-white); }
    .rt-action-btn.rt-action-primary:hover { background: var(--rt-green-dark); color: var(--color-white); }

    .rt-detail-grid { display: grid; grid-template-columns:1fr; gap:var(--ui-len-rem-0-625); margin-bottom:var(--ui-len-rem-1); }
    .rt-detail-card { padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-8125); border:var(--ui-len-rem-0-0625) solid var(--rt-border); border-radius:var(--ui-len-rem-0-625); background: var(--rb-palette-f8fafb); }
    .rt-detail-card.rt-wide { grid-column: 1 / -1; }
    .rt-detail-label { margin-bottom:var(--ui-len-rem-0-25); color: var(--rt-muted); font-size:var(--ui-len-rem-0-63); font-weight: var(--font-weight-bold); letter-spacing:var(--ui-len-em-0-04); text-transform: uppercase; }
    .rt-detail-value { color: var(--rb-palette-293f53); font-size:var(--ui-len-rem-0-82); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }

    @media (max-width: 61.99875rem) {
        .rt-content-grid { grid-template-columns:1fr; }
        .rt-detail-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
        .rt-detail-card.rt-wide { grid-column: auto; }
    }
    @media (max-width: 47.99875rem) {
        .rt-summary-grid { grid-template-columns:1fr; gap:var(--ui-len-rem-0-5625); }
        .rt-summary-value { white-space: normal; }
        .rt-detail-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 35.99875rem) {
        .rt-header-actions { width:100%; margin-top:var(--ui-len-rem-0-75); }
        .rt-back { flex:1 1 auto; justify-content: center; }
        .rt-req-id { overflow-wrap: anywhere; }
        .rt-body { padding:var(--ui-len-rem-0-625); }
        .rt-panel-body { padding:var(--ui-len-rem-0-8125); }
        .rt-step { gap:var(--ui-len-rem-0-6875); }
        .rt-step-dot { width:var(--ui-len-rem-1-875); height:var(--ui-len-rem-1-875); font-size:var(--ui-len-rem-0-82); }
        .rt-next-banner { padding:var(--ui-len-rem-0-75); }
        .rt-footer-actions { display: grid; grid-template-columns:1fr; }
        .rt-action-btn { justify-content: center; }
    }

/* userdata: usersettings */
/* Account Settings — modernized into a tabbed layout (left nav +
       right panel) instead of 4 long forms stacked one after another.
       Uses the project's existing design-system tokens (theme.css); no
       new colors/fonts introduced. Form field ids/names are untouched
       so the HTMX endpoints and the toggle_permanent_address() script
       below keep working exactly as before. */
    .rb-settings-shell {
        display: flex;
        gap:var(--ui-len-rem-1-5);
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .rb-settings-nav {
        width:var(--ui-len-rem-14-375);
        flex-shrink: 0;
    }
    .rb-settings-nav-link {
        display: flex;
        align-items: center;
        gap:var(--ui-len-rem-0-625);
        padding:var(--ui-len-rem-0-75) var(--ui-len-rem-1);
        border-radius:var(--radius-md);
        color: var(--color-text-body);
        font-weight: var(--font-weight-medium);
        font-size:var(--ui-len-rem-0-9);
        margin-bottom:var(--ui-len-rem-0-25);
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }
    .rb-settings-nav-link i { width:var(--ui-len-rem-1-125); text-align: center; color: var(--color-text-muted); }
    .rb-settings-nav-link:hover { background: var(--color-bg-subtle); color: var(--color-text-heading); text-decoration: none; }
    .rb-settings-nav-link.active { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: var(--font-weight-semibold); }
    .rb-settings-nav-link.active i { color: var(--color-primary-600); }
    .rb-settings-content { flex:1; min-width:var(--ui-len-rem-17-5); }
    .rb-settings-card { border:none; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow: visible; background: var(--color-white); }
    .rb-settings-card-header {
        display: flex;
        align-items: center;
        gap:var(--ui-len-rem-0-625);
        padding:var(--ui-len-rem-1-1) var(--ui-len-rem-1-5);
        background: var(--color-bg-subtle);
        border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border);
        font-weight: var(--font-weight-bold);
        color: var(--color-secondary-700);
        border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    }
    .rb-settings-card-header i { color: var(--color-primary); }
    .rb-settings-card-body { padding:var(--ui-len-rem-1-75); max-width:var(--ui-len-rem-32-5); }
    /* Address panels use a 2-column field grid, which needs more room
       than the single-column Contact Info / Reset Password panels */
    .rb-settings-card-body--wide { max-width:var(--ui-len-rem-60); }
    .rb-field-step-badge {
        display:inline-flex;
        align-items:center;
        margin-left:var(--space-2);
        padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-4375);
        border-radius:var(--radius-pill);
        background:var(--color-primary-50);
        color:var(--color-primary-700);
        font-size:var(--font-size-tiny);
        font-weight:var(--font-weight-bold);
        line-height:var(--line-height-tight);
        vertical-align:middle;
    }
    .rb-pin-guidance {
        display:flex;
        align-items:center;
        gap:var(--space-1);
        color:var(--color-primary-700);
    }
    .rb-pin-guidance i { flex:0 0 auto; }

    /* Worldwide address search. Provider colors, typography and spacing stay
       attached to the shared theme tokens; the feature CSS only owns layout. */
    .rb-address-lookup {
        margin-bottom:var(--space-5);
        font-family:var(--font-family-base);
    }
    .rb-address-lookup--automatic-fallback { display:none; }
    .rb-address-lookup__panel {
        padding:var(--space-4);
        border:var(--ui-len-rem-0-0625) solid var(--color-border);
        border-radius:var(--radius-lg);
        background:linear-gradient(135deg, var(--color-primary-50), var(--color-white) 58%);
        box-shadow:var(--shadow-sm);
    }
    .rb-address-mode-banner {
        display:grid;
        grid-template-columns:auto minmax(0, 1fr) auto;
        align-items:center;
        gap:var(--space-3);
        padding:var(--space-3) var(--space-4);
        border:var(--ui-len-rem-0-0625) solid var(--color-border);
        border-left:var(--ui-len-rem-0-1875) solid var(--color-primary);
        border-radius:var(--radius-md);
        background:linear-gradient(90deg, var(--color-primary-50), var(--color-white) 72%);
        box-shadow:var(--shadow-sm);
    }
    .rb-address-mode-banner__icon {
        display:inline-flex;
        width:var(--ui-len-rem-2-25);
        height:var(--ui-len-rem-2-25);
        align-items:center;
        justify-content:center;
        border-radius:var(--radius-md);
        background:var(--color-primary-100);
        color:var(--color-primary-700);
    }
    .rb-address-mode-banner__copy {
        display:grid;
        min-width:0;
        gap:var(--space-1);
    }
    .rb-address-mode-banner__copy strong {
        color:var(--color-text-heading);
        font-family:var(--font-family-base);
        font-weight:var(--font-weight-semibold);
        line-height:var(--line-height-tight);
    }
    .rb-address-mode-banner__copy span {
        color:var(--color-text-muted);
        font-size:var(--font-size-small);
        line-height:var(--line-height-normal);
    }
    .rb-address-global-switch {
        display:inline-flex;
        min-height:var(--ui-len-rem-2-25);
        align-items:center;
        justify-content:center;
        gap:var(--space-2);
        padding-inline:var(--space-3);
        border:var(--ui-len-rem-0-0625) solid var(--color-primary);
        border-radius:var(--radius-md);
        background:var(--color-primary);
        color:var(--color-white);
        font-family:var(--font-family-base);
        font-size:var(--font-size-small);
        font-weight:var(--font-weight-semibold);
        white-space:nowrap;
    }
    .rb-address-global-switch:hover,
    .rb-address-global-switch:focus-visible {
        border-color:var(--color-primary-700);
        background:var(--color-primary-700);
        color:var(--color-white);
    }
    .rb-address-lookup__header {
        display:grid;
        grid-template-columns:auto minmax(0, 1fr) auto;
        align-items:start;
        gap:var(--space-3);
        margin-bottom:var(--space-4);
    }
    .rb-address-lookup__icon {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:var(--ui-len-rem-2-75);
        height:var(--ui-len-rem-2-75);
        border-radius:var(--radius-lg);
        background:var(--color-primary);
        color:var(--color-white);
        box-shadow:var(--shadow-sm);
    }
    .rb-address-lookup__heading { min-width:0; }
    .rb-address-lookup__eyebrow {
        margin-bottom:var(--space-1);
        color:var(--color-primary-700);
        font-size:var(--font-size-tiny);
        font-weight:var(--font-weight-extrabold);
        letter-spacing:var(--ui-len-em-0-045);
        line-height:var(--line-height-tight);
        text-transform:uppercase;
    }
    .rb-address-lookup__heading h3 {
        margin:0 0 var(--space-1);
        color:var(--color-text-heading);
        font-family:var(--font-family-base);
        font-size:var(--font-size-subheading);
        font-weight:var(--font-weight-bold);
        line-height:var(--line-height-tight);
    }
    .rb-address-lookup__heading p {
        margin:0;
        color:var(--color-text-muted);
        font-size:var(--font-size-body-sm);
        line-height:var(--line-height-normal);
    }
    .rb-address-provider-status {
        display:inline-flex;
        align-items:center;
        gap:var(--space-2);
        max-width:100%;
        padding:var(--space-2) var(--space-3);
        border:var(--ui-len-rem-0-0625) solid var(--color-border);
        border-radius:var(--radius-pill);
        background:var(--color-white);
        color:var(--color-text-muted);
        font-size:var(--font-size-small);
        font-weight:var(--font-weight-semibold);
        line-height:var(--line-height-tight);
        white-space:nowrap;
    }
    .rb-address-provider-status__dot {
        width:var(--ui-len-rem-0-5);
        height:var(--ui-len-rem-0-5);
        border-radius:50%;
        background:currentColor;
        flex:0 0 auto;
    }
    .rb-address-provider-status.is-checking .rb-address-provider-status__dot {
        animation:rb-address-status-pulse 1.15s ease-in-out infinite;
    }
    .rb-address-provider-status.is-ready,
    .rb-address-provider-status.is-selected {
        border-color:var(--color-primary-200);
        background:var(--color-success-bg);
        color:var(--color-primary-700);
    }
    .rb-address-provider-status.is-fallback {
        border-color:var(--color-warning);
        background:var(--color-warning-bg);
        color:var(--color-warning-text);
    }
    @keyframes rb-address-status-pulse {
        0%, 100% { opacity:.35; transform:scale(.85); }
        50% { opacity:1; transform:scale(1.15); }
    }
    .rb-address-search-row {
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto auto;
        align-items:stretch;
        gap:var(--space-3);
    }
    .rb-address-search-control { position:relative; min-width:0; }
    .rb-address-search-control > i {
        position:absolute;
        top:50%;
        left:var(--space-4);
        z-index:1;
        color:var(--color-text-muted);
        transform:translateY(-50%);
        pointer-events:none;
    }
    .rb-address-search-control .form-control {
        min-height:var(--ui-len-rem-3);
        padding-left:var(--ui-len-rem-2-75);
        padding-right:var(--ui-len-rem-2-75);
        border-color:var(--color-border-strong);
        border-radius:var(--radius-md);
        background:var(--color-white);
        font-family:var(--font-family-base);
        font-size:var(--font-size-body);
    }
    .rb-address-search-control .form-control:focus {
        border-color:var(--color-primary);
        box-shadow:var(--shadow-focus);
    }
    .rb-address-search-spinner {
        position:absolute;
        top:50%;
        right:var(--space-4);
        width:var(--ui-len-rem-1);
        height:var(--ui-len-rem-1);
        border:var(--ui-len-rem-0-125) solid var(--color-primary-100);
        border-top-color:var(--color-primary);
        border-radius:50%;
        transform:translateY(-50%);
        animation:rb-address-spin .75s linear infinite;
    }
    @keyframes rb-address-spin { to { transform:translateY(-50%) rotate(360deg); } }
    .rb-address-nearby-button {
        display:inline-flex;
        min-height:var(--ui-len-rem-3);
        align-items:center;
        justify-content:center;
        gap:var(--space-2);
        padding-inline:var(--space-3);
        border:var(--ui-len-rem-0-0625) solid var(--color-border-strong);
        border-radius:var(--radius-md);
        background:var(--color-white);
        color:var(--color-text-body);
        font-family:var(--font-family-base);
        font-size:var(--font-size-body-sm);
        font-weight:var(--font-weight-semibold);
        white-space:nowrap;
    }
    .rb-address-nearby-button:hover,
    .rb-address-nearby-button:focus-visible {
        border-color:var(--color-primary);
        background:var(--color-primary-50);
        color:var(--color-primary-700);
    }
    .rb-address-nearby-button.is-active {
        border-color:var(--color-primary-200);
        background:var(--color-success-bg);
        color:var(--color-primary-700);
    }
    .rb-address-nearby-button:disabled { cursor:wait; opacity:.7; }
    .rb-address-manual-button {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:var(--space-2);
        min-height:var(--ui-len-rem-3);
        padding-inline:var(--space-4);
        border:var(--ui-len-rem-0-0625) solid var(--color-primary);
        border-radius:var(--radius-md);
        background:var(--color-white);
        color:var(--color-primary-700);
        font-family:var(--font-family-base);
        font-size:var(--font-size-body-sm);
        font-weight:var(--font-weight-semibold);
        white-space:nowrap;
    }
    .rb-address-manual-button:hover,
    .rb-address-manual-button:focus-visible {
        background:var(--color-primary);
        color:var(--color-white);
    }
    .rb-address-results {
        display:grid;
        gap:var(--space-2);
        max-height:var(--ui-len-rem-19-242188);
        margin-top:var(--space-2);
        padding:var(--space-2);
        overflow-y:auto;
        border:var(--ui-len-rem-0-0625) solid var(--color-border);
        border-radius:var(--radius-md);
        background:var(--color-white);
        box-shadow:var(--shadow-md);
    }
    .rb-address-result {
        display:grid;
        grid-template-columns:auto minmax(0, 1fr) auto;
        align-items:center;
        gap:var(--space-3);
        width:100%;
        padding:var(--space-3);
        border:var(--ui-len-rem-0-0625) solid transparent;
        border-radius:var(--radius-md);
        background:transparent;
        color:var(--color-text-body);
        font-family:var(--font-family-base);
        text-align:left;
        transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
    }
    .rb-address-result:hover,
    .rb-address-result:focus-visible {
        border-color:var(--color-primary-200);
        background:var(--color-primary-50);
        outline:0;
        transform:translateY(-1px);
    }
    .rb-address-result__marker {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:var(--ui-len-rem-2-25);
        height:var(--ui-len-rem-2-25);
        border-radius:var(--radius-md);
        background:var(--color-success-bg);
        color:var(--color-primary-700);
    }
    .rb-address-result__copy { display:grid; min-width:0; gap:var(--space-1); }
    .rb-address-result__copy strong {
        overflow:hidden;
        color:var(--color-text-heading);
        font-size:var(--font-size-body-sm);
        font-weight:var(--font-weight-semibold);
        line-height:var(--line-height-snug);
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .rb-address-result__copy > span {
        overflow:hidden;
        color:var(--color-text-muted);
        font-size:var(--font-size-small);
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .rb-address-result__action {
        color:var(--color-primary-700);
        font-size:var(--font-size-small);
        font-weight:var(--font-weight-bold);
    }
    .rb-address-results__empty {
        padding:var(--space-4);
        color:var(--color-text-muted);
        font-size:var(--font-size-body-sm);
        text-align:center;
    }
    .rb-address-lookup__message {
        display:flex;
        align-items:center;
        gap:var(--space-2);
        margin-top:var(--space-3);
        color:var(--color-text-muted);
        font-size:var(--font-size-small);
    }
    .rb-address-lookup__message i { color:var(--color-primary-700); }
    .rb-address-fallback {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:var(--space-3);
        margin-top:var(--space-3);
        padding:var(--space-3);
        border:var(--ui-len-rem-0-0625) solid var(--color-warning);
        border-radius:var(--radius-md);
        background:var(--color-warning-bg);
        color:var(--color-warning-text);
        font-size:var(--font-size-body-sm);
    }
    .rb-address-fallback > div { display:grid; gap:var(--space-1); }
    .rb-address-fallback .btn {
        display:inline-flex;
        align-items:center;
        gap:var(--space-2);
        border-color:currentColor;
        color:inherit;
        font-size:var(--font-size-small);
        font-weight:var(--font-weight-semibold);
        white-space:nowrap;
    }
    .rb-address-fields--smart-hidden { display:none !important; }
    @media (max-width: 47.99875rem) {
        .rb-settings-nav { width:100%; }
        .rb-settings-nav .nav { flex-direction: row !important; flex-wrap: wrap; }
        .rb-settings-nav-link { margin-bottom:0; }
        .rb-settings-content { min-width: 0; width: 100%; }
        .rb-settings-card-body { padding: var(--ui-len-rem-1); }
        .rb-address-lookup__panel { padding:var(--space-3); }
        .rb-address-mode-banner {
            grid-template-columns:auto minmax(0, 1fr);
            padding:var(--space-3);
        }
        .rb-address-global-switch {
            grid-column:1 / -1;
            width:100%;
        }
        .rb-address-lookup__header { grid-template-columns:auto minmax(0, 1fr); }
        .rb-address-provider-status { grid-column:1 / -1; width:max-content; }
        .rb-address-search-row { grid-template-columns:1fr; }
        .rb-address-nearby-button,
        .rb-address-manual-button { width:100%; }
        .rb-address-fallback { align-items:flex-start; flex-direction:column; }
        .rb-address-result__copy strong,
        .rb-address-result__copy > span { white-space:normal; }
    }

/* userdata: user_requisitions */
.rb-requisition-page,
    .rb-requisition-modal {
        --req-navy: var(--color-secondary-700, var(--color-secondary-600));
        --req-navy-dark: var(--color-secondary-900, var(--color-secondary-800));
        --req-green: var(--color-primary);
        --req-green-dark: var(--color-primary-700, var(--rb-palette-287d5a));
        --req-border: var(--color-border, var(--color-gray-200));
        --req-muted: var(--color-text-muted, var(--color-gray-500));
    }
    .rb-req-list-shell {
        overflow: hidden;
        border:0;
    }
    .rb-req-list-title { overflow-wrap: anywhere; }
    .rb-req-list-actions { display: flex; flex:0 0 auto; align-items: center; gap:var(--ui-len-rem-0-5625); }
    .rb-req-count { padding:var(--ui-len-rem-0-3125) var(--ui-len-rem-0-6875); border-radius:var(--ui-len-rem-62-4375); background: var(--rb-alpha-057); font-size:var(--ui-len-rem-0-72); font-weight: var(--font-weight-bold); }
    .rb-req-list-body { padding:0; }
    .rb-req-table-wrap { overflow-x: auto; border:var(--ui-len-rem-0-0625) solid var(--req-border); border-radius:var(--ui-len-rem-0-75); }
    .rb-req-table { width:100%; margin:0; border-collapse: collapse; }
    .rb-req-table thead th {
        padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-8125);
        border:0;
        border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border-strong);
        background: var(--color-gray-100);
        color: var(--req-navy);
        font-size:var(--ui-len-rem-0-67);
        font-weight: var(--font-weight-extrabold);
        letter-spacing:var(--ui-len-em-0-045);
        text-transform: uppercase;
        white-space: nowrap;
    }
    .rb-req-table tbody td { padding:var(--ui-len-rem-0-8125); border:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border); color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-8); vertical-align: middle; }
    .rb-req-table tbody td:last-child { text-align: right; white-space: nowrap; }
    .rb-req-table tbody tr:last-child td { border-bottom:0; }
    .rb-req-table tbody tr:not(.rb-empty-row) { transition: background .15s ease; }
    .rb-req-table tbody tr:not(.rb-empty-row):hover { background: var(--color-gray-50); }
    .rb-req-number { color: var(--req-navy); font-weight: var(--font-weight-extrabold); white-space: nowrap; }
    .rb-req-item-name { color: var(--color-secondary-800); font-weight: var(--font-weight-bold); }
    .rb-req-description, .rb-req-meta { display: block; margin-top:var(--ui-len-rem-0-1875); color: var(--req-muted); font-size:var(--ui-len-rem-0-7); line-height:1.4; }
    .rb-req-quantity { font-weight: var(--font-weight-bold); white-space: nowrap; }
    .rb-status {
        display: inline-flex;
        align-items: center;
        padding:var(--ui-len-rem-0-25) var(--ui-len-rem-0-5625);
        border-radius:var(--ui-len-rem-62-4375);
        background: var(--color-info-bg);
        color: var(--color-secondary-700);
        font-size:var(--ui-len-rem-0-64);
        font-weight: var(--font-weight-extrabold);
        letter-spacing:var(--ui-len-em-0-025);
        text-transform: uppercase;
        white-space: nowrap;
    }
    .rb-status--approved, .rb-status--issued, .rb-status--received { background: var(--color-success-bg); color: var(--color-primary-700); }
    .rb-status--requested, .rb-status--reviewed, .rb-status--stock_check { background: var(--color-warning-bg); color: var(--color-warning-text); }
    .rb-status--rejected { background: var(--color-danger-bg); color: var(--color-danger); }
    .rb-status--partially_issued, .rb-status--partially_returned { background: var(--color-warning-bg); color: var(--color-warning-text); }
    .rb-status--returned { background: var(--color-gray-100); color: var(--color-gray-600); }
    .rb-mini-badge { display: inline-flex; margin-top:var(--ui-len-rem-0-3125); padding:var(--ui-len-rem-0-1875) var(--ui-len-rem-0-4375); border-radius:var(--ui-len-rem-62-4375); font-size:var(--ui-len-rem-0-61); font-weight: var(--font-weight-bold); }
    .rb-mini-badge--urgent { background: var(--color-danger-bg); color: var(--color-danger); }
    .rb-mini-badge--service { margin-top:var(--ui-len-rem-0-1875); background: var(--color-info-bg); color: var(--color-secondary-700); }
    .rb-mini-badge--stage { margin-left:var(--ui-len-rem-0-1875); background: var(--color-warning-bg); color: var(--color-warning-text); }
    .rb-overdue { display: block; margin-top:var(--ui-len-rem-0-25); color: var(--color-danger); font-size:var(--ui-len-rem-0-67); font-weight: var(--font-weight-bold); }
    .rb-view-btn {
        display: inline-flex;
        width:var(--ui-len-rem-2-125);
        height:var(--ui-len-rem-2);
        align-items: center;
        justify-content: center;
        border:var(--ui-len-rem-0-0625) solid var(--req-green);
        border-radius:var(--ui-len-rem-0-5);
        background: var(--color-white);
        color: var(--req-green-dark);
        transition: background .15s ease, color .15s ease;
    }
    .rb-view-btn:hover { background: var(--req-green); color: var(--color-white); text-decoration: none; }
    .rb-view-btn + .rb-view-btn { margin-left:var(--ui-len-rem-0-375); }
    .rb-req-empty-cell { padding:0 !important; }
    .rb-req-empty-state { display: flex; width:100%; min-height:var(--ui-len-rem-10-5); align-items: center; justify-content: center; flex-direction: column; padding:var(--ui-len-rem-1-75) var(--ui-len-rem-1-125); color: var(--req-muted); text-align: center; }
    .rb-req-empty-state i { display: block; margin-bottom:var(--ui-len-rem-0-6875); color: var(--color-gray-400); font-size:var(--ui-len-rem-2); }
    .rb-req-empty-state strong { display: block; margin-bottom:var(--ui-len-rem-0-25); color: var(--color-secondary-700); font-size:var(--ui-len-rem-0-9); }
    .rb-modal-details { display: grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--ui-len-rem-0-75); }
    .rb-modal-detail { min-width:0; padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-75); border:var(--ui-len-rem-0-0625) solid var(--req-border); border-radius:var(--ui-len-rem-0-625); background: var(--color-gray-50); }
    .rb-modal-detail--wide { grid-column: 1 / -1; }
    .rb-modal-label { margin-bottom:var(--ui-len-rem-0-25); color: var(--req-muted); font-size:var(--ui-len-rem-0-63); font-weight: var(--font-weight-bold); letter-spacing:var(--ui-len-em-0-04); text-transform: uppercase; }
    .rb-modal-value { overflow-wrap: anywhere; color: var(--color-secondary-800); font-size:var(--ui-len-rem-0-8); font-weight: var(--font-weight-semibold); }

    @media (max-width: 47.99875rem) {
        .rb-req-list-actions { align-items: flex-end; flex-direction: column-reverse; }
        .rb-req-table-wrap { overflow: visible; border:0; border-radius:var(--radius-none); }
        .rb-req-table, .rb-req-table tbody { display: block; width:100%; }
        .rb-req-table thead { display: none; }
        .rb-req-table tbody tr {
            display: grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:0;
            margin-bottom:var(--ui-len-rem-0-75);
            overflow: hidden;
            border:var(--ui-len-rem-0-0625) solid var(--req-border);
            border-radius:var(--ui-len-rem-0-75);
            background: var(--color-white);
        }
        .rb-req-table tbody tr:last-child { margin-bottom:0; }
        .rb-req-table tbody td {
            display: block;
            min-width:0;
            padding:var(--ui-len-rem-0-6875) var(--ui-len-rem-0-75);
            border:0;
            border-bottom:var(--ui-len-rem-0-0625) solid var(--color-gray-100);
        }
        .rb-req-table tbody td::before { content: attr(data-label); display: block; margin-bottom:var(--ui-len-rem-0-3125); color: var(--req-muted); font-size:var(--ui-len-rem-0-59); font-weight: var(--font-weight-extrabold); letter-spacing:var(--ui-len-em-0-04); text-transform: uppercase; }
        .rb-req-table tbody td:nth-child(2), .rb-req-table tbody td:nth-child(4) { grid-column: 1 / -1; }
        .rb-req-table tbody td:last-child { border-bottom:0; text-align: right; }
        .rb-empty-row { display: block !important; }
        .rb-empty-row td { width:100%; }
        .rb-empty-row td::before { display: none !important; }
    }

    @media (max-width: 29.99875rem) {
        .rb-req-list-actions { width:100%; align-items: stretch; flex-direction: row; }
        .rb-req-count { display: inline-flex; align-items: center; justify-content: center; }
        .rb-req-table tbody tr { grid-template-columns:1fr; }
        .rb-req-table tbody td, .rb-req-table tbody td:nth-child(2), .rb-req-table tbody td:nth-child(4) { grid-column: 1; }
        .rb-modal-details { grid-template-columns:1fr; }
        .rb-modal-detail--wide { grid-column: 1; }
    }

/* ========================================================================
   Userdata shared UI normalization
   Template markup carries semantic classes; visual values stay centralized.
   ======================================================================== */
.rb-sidebar-submenu {
    margin-top:0;
    margin-bottom:0;
    padding-top:var(--ui-len-rem-0-25);
    padding-bottom:var(--ui-len-rem-0-25);
    line-height:1.2;
}

.rb-quick-action-dialog-copy {
    color: var(--color-text-muted);
    font-size:var(--ui-len-rem-0-98);
    line-height:1.5;
}
.rb-quick-action-dialog-name { color: var(--color-text-heading); }
.rb-settings-message { margin-bottom:var(--space-4); }
.rb-flex-auto { flex:1 1 auto; min-width:0; }

.rt-progress-fill { width:var(--rt-progress-value, 0%); }
.rt-overdue { color:var(--rt-red); font-weight:var(--font-weight-bold); }

.rb-doc-col-index { width:var(--ui-len-rem-3-125); }
.rb-doc-col-date { width:var(--ui-len-rem-11-25); }
.rb-doc-col-actions { width:var(--ui-len-rem-8-75); }

.rb-dashboard-section-header--primary {
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-700));
}
.rb-dashboard-section-header--dark {
    background:linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900));
}
.rb-profile-avatar { object-fit:cover; }
.rb-profile-meta-badge { font-size:var(--ui-len-rem-0-6875); }
.rb-profile-meta-badge--department { background:var(--color-secondary); }
.rb-profile-meta-badge--designation { background:var(--color-warning); }
.rb-profile-meta-badge--role { background:var(--color-primary); }
.rb-profile-meta-value { color:var(--color-text-body); font-size:var(--ui-len-rem-0-875); }
.rb-escalation-badge {
    padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-375);
    border-radius:var(--ui-len-rem-0-25);
    background:var(--rb-escalation-text);
    font-size:var(--font-size-tiny);
}
.rb-escalation-copy {
    color:var(--rb-escalation-text);
    font-size:var(--font-size-small);
    line-height:1.35;
}
.rb-wing-count { font-size:var(--font-size-tiny); }
.rb-vacant-board--visible { display:block; }
.rb-vacant-board--hidden { display:none; }
.rb-vacant-board {
    margin-bottom:var(--space-4);
    padding:var(--space-4);
    border:var(--ui-len-rem-0-0625) solid var(--rb-escalation-border);
    border-radius:var(--radius-lg);
    background:var(--rb-escalation-bg);
}
.rb-vacant-board-header,
.rb-vacant-board-title,
.rb-vacant-card-top,
.rb-vacant-detail,
.rb-vacant-impacted-title {
    display:flex;
    align-items:center;
}
.rb-vacant-board-header,
.rb-vacant-card-top { justify-content:space-between; gap:var(--space-2); }
.rb-vacant-board-title { gap:var(--space-2); color:var(--rb-escalation-text); font-weight:var(--font-weight-bold); }
.rb-action-required-badge {
    background:var(--rb-escalation-bg);
    color:var(--rb-escalation-text) !important;
}
.rb-vacant-help { font-size:var(--font-size-small); }
.rb-vacant-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.rb-vacant-card {
    min-width:0;
    padding:var(--space-3);
    border:var(--ui-len-rem-0-0625) solid var(--rb-escalation-border);
    border-radius:var(--radius-md);
    background:var(--color-white);
}
.rb-vacant-title { color:var(--color-secondary-800); font-size:var(--font-size-body-sm); font-weight:var(--font-weight-bold); }
.rb-vacant-badge,
.rb-vacant-position-badge {
    padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-4375);
    border-radius:var(--ui-len-rem-0-625);
    background:var(--color-status-purple);
    color:var(--color-white);
    font-size:var(--font-size-tiny);
    font-weight:var(--font-weight-bold);
    white-space:nowrap;
}
.rb-vacant-detail { gap:var(--space-1); margin-top:var(--space-2); color:var(--color-text-muted); font-size:var(--font-size-small); }
.rb-icon-tiny { font-size:var(--font-size-tiny); }
.rb-vacant-impacted { margin-top:var(--space-3); padding-top:var(--space-2); border-top:var(--ui-len-rem-0-0625) dashed var(--color-border); }
.rb-vacant-impacted-title { color:var(--color-secondary-700); font-size:var(--font-size-small); font-weight:var(--font-weight-bold); }
.rb-level-vacant-desc { margin-top:var(--space-1); color:var(--color-text-muted); font-size:var(--font-size-small); line-height:1.4; }
.rb-team-level--indent-0 { --rb-level-indent:0; }
.rb-team-level--indent-16 { --rb-level-indent:var(--ui-len-rem-1); }
.rb-team-level--indent-32 { --rb-level-indent:var(--ui-len-rem-2); }
.rb-team-level--indent-48 { --rb-level-indent:var(--ui-len-rem-3); }
.rb-team-level--indent-64 { --rb-level-indent:var(--ui-len-rem-4); }
.rb-wing-heading { font-size:var(--font-size-small); letter-spacing:var(--ui-len-em-0-03); }
.rb-wing-member-count,
.rb-member-wing-badge {
    padding:var(--ui-len-rem-0-125) var(--ui-len-rem-0-375);
    border-radius:var(--ui-len-rem-0-625);
    background:var(--rb-department-tone);
    color:var(--color-white) !important;
    font-size:var(--font-size-tiny);
}
.rb-team-member-footer { gap:var(--space-2); font-size:var(--font-size-small); }
.rb-department-tone--0 { --rb-department-tone:var(--color-primary-700); color:var(--color-primary-700) !important; }
.rb-department-tone--1 { --rb-department-tone:var(--color-secondary-600); color:var(--color-secondary-600) !important; }
.rb-department-tone--2 { --rb-department-tone:var(--color-status-orange); color:var(--color-status-orange) !important; }
.rb-department-tone--3 { --rb-department-tone:var(--color-status-purple); color:var(--color-status-purple) !important; }
.rb-department-tone--muted { --rb-department-tone:var(--color-gray-500); color:var(--color-gray-500) !important; }
.rb-wing-member-count[class*="rb-department-tone--"],
.rb-member-wing-badge[class*="rb-department-tone--"] {
    background:var(--rb-department-tone);
    color:var(--color-white) !important;
}

.rb-salary-period-badge { background:var(--color-info-bg); color:var(--color-secondary-600); font-size:var(--ui-len-rem-0-75); }
.rb-salary-period-badge--danger { background:var(--color-danger-bg); color:var(--color-danger); }
.rb-salary-panel { border:var(--ui-len-rem-0-0625) solid; }
.rb-salary-panel--earnings { border-color:var(--color-primary-200); background:var(--color-success-bg); }
.rb-salary-panel--deductions { border-color:var(--rb-alpha-029); background:var(--color-danger-bg); }
.rb-salary-panel-title { font-size:var(--ui-len-rem-0-8125); letter-spacing:var(--ui-len-rem-0-03125); }
.rb-salary-item-label { font-size:var(--ui-len-rem-0-6875); }
.rb-salary-item-note,
.rb-salary-day-badge { font-size:var(--ui-len-rem-0-625); }
.rb-salary-net-card { background:linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-900)); color:var(--color-white); }
.rb-salary-net-title { font-size:var(--ui-len-rem-0-8125); opacity:.85; }
.rb-salary-net-amount { letter-spacing:var(--ui-len-rem-0-0625); }
.rb-salary-net-note { font-size:var(--ui-len-rem-0-6875); opacity:.75; }
.rb-transparent-bg { background:transparent; }
.rb-employer-toggle {
    background:var(--color-info-bg);
    color:var(--color-secondary-600);
    box-shadow:none;
    font-size:var(--ui-len-rem-0-8125);
    font-weight:var(--font-weight-semibold);
}
.rb-ctc-card { color:var(--color-white); }
.rb-ctc-card--annual { background:var(--color-secondary-600); }
.rb-ctc-card--monthly { background:var(--color-secondary-900); }
.rb-ctc-label { font-size:var(--ui-len-rem-0-6875); opacity:.75; }
.rb-breakdown-header { border-bottom:var(--ui-len-rem-0-125) solid; }
.rb-breakdown-header--earnings { border-color:var(--color-primary); background:var(--color-success-bg); }
.rb-breakdown-header--allowance { border-color:var(--color-secondary); background:var(--color-info-bg); }
.rb-breakdown-header--deductions { border-color:var(--color-danger); background:var(--color-danger-bg); }
.rb-breakdown-title { font-size:var(--ui-len-rem-0-8125); }
.rb-allowance-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--ui-len-rem-8-75), 1fr)); gap:var(--ui-len-rem-0-75); text-align:center; }
.rb-breakdown-column { border-right:var(--ui-len-rem-0-0625) solid var(--color-border); }
.rb-deduction-total { border-top:var(--ui-len-rem-0-0625) solid var(--rb-alpha-029); background:var(--color-danger-bg); }

:is(.action-btn, .rb-req-btn, .rt-action-btn, .og-track-btn, .rb-view-btn, .rb-doc-btn, .rb-att-calendar-btn) {
    font-family:var(--font-family-base);
}

@media (max-width:47.99875rem) {
    .rb-vacant-grid { grid-template-columns:1fr; }
    .rb-breakdown-column { border-right:0; border-bottom:var(--ui-len-rem-0-0625) solid var(--color-border); }
}