/* ==========================================================================
   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/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-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-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);

  /* ---- 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-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-primary-fill: rgba(60, 184, 130, 0.10);
  --color-chart-purple-fill: rgba(111, 82, 201, 0.06);

  /* ---- 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-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-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-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-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);

  /* ---- 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 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-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-body-sm: 0.875rem;  /* 14px */
  --font-size-small: 0.75rem;     /* 12px — helper/caption text */
  --font-size-tiny: 0.6875rem;    /* 11px — badges/overlines */
  --font-size-zero: 0;            /* icon-only responsive labels */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --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 */

  /* 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 form-control geometry. Inputs and dropdowns across every app
     consume these tokens so their shape and height stay identical. */
  --form-control-height: 42px;
  --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 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;

  --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: 1rem;
  --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;

  /* 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(--space-2);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-button);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  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 { padding: var(--space-2) var(--space-4); font-size: var(--font-size-small); }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--font-size-body); }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   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);
  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 {
  min-height: var(--form-control-height);
}
/* 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/phone-input.js) — the inner <input>
   keeps its normal .form-control styling; .iti just wraps it to
   position the country flag/dial-code button */
.iti {
  width: 100%;
}
.iti__country-container {
  z-index: 2;
}
.iti__dropdown-content {
  z-index: var(--z-modal);
}
.form-control.is-invalid {
  border-color: var(--color-danger);
}
.form-control.is-valid {
  border-color: var(--color-success);
}

/* 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/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 {
  margin-top: var(--space-2);
  text-align: right;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.rb-char-counter.is-below-min { color: var(--color-warning-text, #8A5A00); }
.rb-char-counter.is-at-limit { color: var(--color-danger); }

/* 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);
}
.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;
}
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) !important;
  padding: var(--swal-input-padding) !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;
}

/* --------------------------------------------------------------------------
   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%;
  min-height: var(--form-control-height);
  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);
}
.rb-select-menu {
  width: 100%;
  min-width: 100%;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  padding: 0 0 var(--space-2) 0 !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 {
  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);
  font-family: var(--font-family-base);
  font-size: var(--form-option-font-size);
  text-transform: capitalize;
}
[class*="-select-toggle"] {
  min-height: var(--form-control-height);
  font-family: var(--font-family-base);
  font-size: var(--form-control-font-size);
  text-transform: capitalize;
}
.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: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);
}

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