/* ============================================
   iCarFixIt — Design Tokens & Layout
   ============================================ */

:root {
  /* ONE palette. There were two :root blocks 2,400 lines apart — the
     original and a later "Premium SaaS Dashboard Refresh" — and the second
     re-declared 17 of these, so every value in the first was dead. Editing
     --icf-primary at the top of this file changed nothing, which is a
     trap rather than a style. Custom properties resolve at use time, so
     merging them is behaviour-preserving: the refresh values win either
     way. Values below are the refresh ones where the two disagreed.
     Audited 2026-09-23. */
  --icf-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --icf-primary: #2447b8;  /* was #1e40af before the refresh */
  --icf-primary-light: #3f6df6;  /* was #3b82f6 before the refresh */
  --icf-primary-dark: #18337f;  /* was #1e3a8a before the refresh */
  --icf-accent: #f59e0b;
  --icf-accent-light: #fbbf24;
  --icf-sidebar-bg: #0b1220;  /* was #0f172a before the refresh */
  --icf-sidebar-hover: rgba(255,255,255,0.07);  /* was #1e293b before the refresh */
  --icf-sidebar-active: #2447b8;  /* was #1e40af before the refresh */
  --icf-success: #22c55e;
  --icf-warning: #f59e0b;
  --icf-danger: #ef4444;
  --icf-info: #3b82f6;

  /* A bright token above FILLS -- a stripe, a dot, a bar, a border. An -ink
     token WRITES. Measured on white rather than eyeballed: #22c55e is 2.28:1
     and #f59e0b is 2.15:1, so neither clears even the 3:1 floor that LARGE
     text gets, and #ef4444 at 3.76:1 clears large but not the 4.5:1 body
     text needs. The four inks below are 5.02, 5.02, 6.47 and 6.70.
     .icf-pstat and .icf-summary both read these, so the decision is made
     once and the superadmin board cannot drift away from a tenant page. */
  --icf-ink-success: #15803d;
  --icf-ink-warning: #b45309;
  --icf-ink-danger: #b91c1c;
  --icf-ink-info: #1d4ed8;
  --icf-bg: #f4f7fb;  /* was #f8fafc before the refresh */
  --icf-surface: #ffffff;
  --icf-border: #dce5f2;  /* was #e2e8f0 before the refresh */
  --icf-text: #0f172a;  /* was #1e293b before the refresh */
  --icf-text-muted: #64748b;
  --icf-radius: 8px;  /* was 0.5rem before the refresh */
  --icf-radius-lg: 10px;  /* was 0.75rem before the refresh */
  --icf-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.05);  /* was 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgb before the refresh */
  --icf-shadow-lg: 0 18px 48px rgba(15,23,42,0.14);  /* was 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px  before the refresh */
  --icf-sidebar-w: 256px;
  --icf-header-h: 68px;  /* was 64px before the refresh */
  --icf-surface-soft: #f8fafc;   /* added by the refresh */
  --icf-border-strong: #c6d2e3;   /* added by the refresh */
  --icf-focus: 0 0 0 3px rgba(63,109,246,0.18);   /* added by the refresh */
}

/* ============================================
   Base
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--icf-font);
  background: var(--icf-bg);
  color: var(--icf-text);
  line-height: 1.5;
}

[dir="rtl"] body { font-family: var(--icf-font); }

/* ============================================
   Layout
   ============================================ */

.icf-app {
  min-height: 100vh;
}

.icf-sidebar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: var(--icf-sidebar-w);
  height: 100vh;
  background: var(--icf-sidebar-bg);
  color: #e2e8f0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.icf-sidebar-brand {
  padding: 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icf-sidebar-brand svg { flex-shrink: 0; }

.icf-sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
  /* Scrolling stays, the scrollbar does not. In RTL the sidebar sits on the
     right and its scrollbar renders on its inner edge, cutting a grey stripe
     between the nav and the page content. */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* legacy Edge */
  overscroll-behavior: contain;    /* don't chain the scroll to the page */
}

.icf-sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.icf-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border-inline-start: 3px solid transparent;
}

.icf-nav-item:hover {
  background: var(--icf-sidebar-hover);
  color: #e2e8f0;
}

.icf-nav-item.active {
  background: rgba(30, 64, 175, 0.2);
  color: #fff;
  border-inline-start-color: var(--icf-primary-light);
}

.icf-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icf-main {
  margin-inline-start: var(--icf-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.icf-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--icf-surface);
  border-bottom: 1px solid var(--icf-border);
  height: var(--icf-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.icf-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.icf-header-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.icf-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icf-content {
  flex: 1;
  padding: 1.5rem;
}

/* Hamburger — hidden on desktop */
.icf-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--icf-text);
  cursor: pointer;
  padding: 0.25rem;
}

/* Mobile sidebar backdrop */
.icf-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 35;
}

/* ============================================
   Buttons
   ============================================ */

.icf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--icf-radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.icf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icf-btn-primary {
  background: var(--icf-primary);
  color: #fff;
}
.icf-btn-primary:hover:not(:disabled) {
  background: var(--icf-primary-dark);
}

.icf-btn-success {
  background: var(--icf-success);
  color: #fff;
}
.icf-btn-success:hover:not(:disabled) {
  background: #16a34a;
}

.icf-btn-danger {
  background: var(--icf-danger);
  color: #fff;
}
.icf-btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

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

.icf-btn-outline {
  background: transparent;
  color: var(--icf-primary);
  border-color: var(--icf-primary);
}
/* Used on cancel buttons, inactive tabs and secondary actions in a dozen
   places and defined nowhere, so they rendered as a bare `.icf-btn`: no fill,
   no border, indistinguishable from plain text next to a primary button. */
.icf-btn-secondary {
  background: var(--icf-surface);
  color: var(--icf-text);
  border-color: var(--icf-border);
}
.icf-btn-secondary:hover:not(:disabled) {
  background: var(--icf-bg);
  border-color: var(--icf-border-strong, var(--icf-border));
}

/* The destructive counterpart of `.icf-btn-outline`. It is on "remove line
   item" and "disconnect WhatsApp" — two actions that should not look neutral,
   and did.

   NOT `var(--icf-danger)` for the text. #ef4444 on white is 3.76:1, which
   clears the 3:1 a border or an icon needs and fails the 4.5:1 that TEXT
   needs — and "Disconnect" is 13px text, measured in situ on the WhatsApp
   settings tab. #dc2626 is 4.83:1 and is also the hover FILL, so white-on-red
   passes on hover too; the border keeps the lighter token, where 3:1 is the
   bar it has to clear. Same call as .icf-btn-zatca. */
.icf-btn-outline-danger {
  background: transparent;
  color: #dc2626;
  border-color: var(--icf-danger);
}
.icf-btn-outline-danger:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.icf-btn-outline:hover:not(:disabled) {
  background: var(--icf-primary);
  color: #fff;
}

.icf-btn-sm {
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
}/* Template option for notification sending */
.icf-template-option {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--icf-text);
}
.icf-template-option:hover {
  border-color: var(--icf-primary);
  background: rgba(30, 64, 175, 0.04);
}
.icf-template-selected {
  border-color: var(--icf-primary);
  background: rgba(30, 64, 175, 0.08);
  box-shadow: 0 0 0 1px var(--icf-primary);
}

/* Selected row highlight */
.icf-row-selected {
  background: rgba(30, 64, 175, 0.05) !important;
}

.icf-btn-icon {
  padding: 0.375rem;
  border-radius: var(--icf-radius);
}

/* ============================================
   Cards
   ============================================ */

.icf-card {
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg);
  box-shadow: var(--icf-shadow);
}

.icf-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--icf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.icf-card-body {
  padding: 1.5rem;
}

/* ============================================
   Stat Cards
   ============================================ */

/* NOTE: .icf-stats-grid is re-declared later in this file (search for
   "stats-grid ladder"), and that block wins. Column counts live there, in one
   contiguous ladder — editing them here has no effect. */
.icf-stats-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.icf-stat-card {
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--icf-shadow);
}

.icf-stat-label {
  font-size: 0.8125rem;
  color: var(--icf-text-muted);
  margin-bottom: 0.25rem;
}

.icf-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--icf-text);
}

.icf-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/* ============================================
   Tables
   ============================================ */

.icf-table-wrap {
  overflow-x: auto;
}

.icf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.icf-table th {
  background: var(--icf-bg);
  padding: 0.75rem 1rem;
  text-align: start;
  font-weight: 600;
  color: var(--icf-text-muted);
  border-bottom: 1px solid var(--icf-border);
  white-space: nowrap;
}

.icf-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--icf-border);
  vertical-align: middle;
}

.icf-table tr:hover td {
  background: #f1f5f9;
}

/* ============================================
   Badges
   ============================================ */

/* The base carries a NEUTRAL FILL, not just the geometry. Seven places use
   `class="icf-badge"` with no variant at all — the invoice Type column
   (B2C/B2B), the task status, the CRM stage totals and the superadmin tenant
   table — and they rendered as a transparent pill: padded text with no chip,
   sitting in the same row as a real green "Paid" one. Every variant below
   declares BOTH background and color, and all of them come after this rule,
   so none of them is affected. Seen on the invoices page, 2026-09-23. */
.icf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
}

.icf-badge-pending { background: #fef3c7; color: #92400e; }
.icf-badge-confirmed { background: #dbeafe; color: #1e40af; }
.icf-badge-in_progress { background: #e0e7ff; color: #4338ca; }
.icf-badge-completed { background: #dcfce7; color: #166534; }
.icf-badge-cancelled { background: #fee2e2; color: #991b1b; }
.icf-badge-no_show { background: #f1f5f9; color: #475569; }
.icf-badge-pass { background: #dcfce7; color: #166534; }
.icf-badge-fail { background: #fee2e2; color: #991b1b; }
.icf-badge-conditional { background: #fef3c7; color: #92400e; }
.icf-badge-paid { background: #dcfce7; color: #166534; }
.icf-badge-partial { background: #fef3c7; color: #92400e; }
.icf-badge-refunded { background: #f1f5f9; color: #475569; }
/* The GENERIC variants, which every dynamic badge falls back to and which
   were the one family nobody had defined:
     `icf-badge-' + (cls[s] || 'info')`   commissions, crm, inventory
     `icf-badge-' + (map[status] || 'muted')`   invoices
   plus warning/danger/muted, which invoices.js names directly for the ZATCA
   status column. Until 2026-09-23 all five resolved to no rule at all, so an
   unmapped status rendered as a bare pill with the page's default text colour.
   Ratios are AA against their own background, like the portal badges. */
.icf-badge-info { background: #dbeafe; color: #1d4ed8; }
.icf-badge-success { background: #dcfce7; color: #15803d; }
.icf-badge-warning { background: #fef3c7; color: #92400e; }
.icf-badge-danger { background: #fee2e2; color: #b91c1c; }
.icf-badge-muted { background: #f1f5f9; color: #475569; }

.icf-badge-private { background: #dbeafe; color: #1e40af; }
.icf-badge-transport { background: #fef3c7; color: #92400e; }
.icf-badge-diplomatic { background: #e0e7ff; color: #4338ca; }
.icf-badge-temporary { background: #f1f5f9; color: #475569; }
.icf-badge-export { background: #fce7f3; color: #9d174d; }

/* ============================================
   Forms
   ============================================ */

.icf-form-group {
  margin-bottom: 1rem;
}

.icf-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--icf-text);
  margin-bottom: 0.375rem;
}

.icf-input, .icf-select, .icf-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  font-size: 0.875rem;
  color: var(--icf-text);
  background: var(--icf-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.icf-input:focus, .icf-select:focus, .icf-textarea:focus {
  outline: none;
  border-color: var(--icf-primary-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.icf-textarea {
  min-height: 80px;
  resize: vertical;
}

.icf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── Phone input with country code ── */
.icf-phone-group {
  display: flex;
  direction: ltr;
}

.icf-phone-code {
  flex: 0 0 auto;
  width: auto;
  min-width: 100px;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  border: 1px solid var(--icf-border);
  border-right: none;
  border-radius: var(--icf-radius) 0 0 var(--icf-radius);
  font-size: 0.8125rem;
  color: var(--icf-text);
  background: var(--icf-bg);
  cursor: pointer;
  appearance: auto;
  font-family: inherit;
}

[dir="rtl"] .icf-phone-code {
  border-right: 1px solid var(--icf-border);
  border-left: none;
  border-radius: 0 var(--icf-radius) var(--icf-radius) 0;
}

.icf-phone-code:focus {
  outline: none;
  border-color: var(--icf-primary-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  z-index: 1;
}

.icf-phone-group .icf-input {
  border-radius: 0 var(--icf-radius) var(--icf-radius) 0;
  flex: 1;
  min-width: 0;
}

[dir="rtl"] .icf-phone-group .icf-input {
  border-radius: var(--icf-radius) 0 0 var(--icf-radius);
}

/* ============================================
   Modal
   ============================================ */

/* Two names for one thing. Most views write `icf-modal-backdrop` (19 uses); leads, reminders, tasks
   and team write `icf-modal-overlay` (5 uses). The alias was already half-declared — the polish rule
   further down styles `.icf-modal-backdrop, .icf-modal-overlay` together — but the LAYOUT lived here
   under the first name only. So an overlay modal got the dark translucent background and nothing
   else: no `position: fixed`, so it stayed in normal flow instead of covering the viewport, and no
   flex centring, so the dialog sat at the inline start with the backdrop showing as a grey band
   beside it. The page behind was neither dimmed nor blocked.

   Declaring both names here fixes all five at once and, more to the point, means the next view to
   reach for either spelling cannot land half-styled again. */
.icf-modal-backdrop,
.icf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* The scroll belongs to the body, not to the whole dialog.
   It used to sit here, so on a tall form the track ran the full height of the
   modal: straight across the rounded corners, past the title, and past the
   Save button. Header and footer are now pinned and only the fields move,
   which is also why the action buttons no longer scroll out of reach.
   All 24 modals carry an .icf-modal-body, so nothing is left unscrollable. */
.icf-modal {
  background: var(--icf-surface);
  border-radius: var(--icf-radius-lg);
  box-shadow: var(--icf-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* clips the body's scroll to the rounded corner */
}

.icf-modal-lg { max-width: 720px; }

/* flex-shrink:0 on both bars — a flex child defaults to `flex: 0 1 auto`, so
   with a long form the header and footer would compress instead of the body
   scrolling, and the title would slowly flatten as fields were added. */
.icf-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--icf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.icf-modal-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.icf-modal-header button {
  font-family: inherit;
}

.icf-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  /* min-height:0 is what actually lets a flex child scroll. Without it the
     item's automatic minimum size is its content, so the body grows past the
     modal instead of scrolling inside it. */
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;  /* stops the page behind scrolling at the end */
}

.icf-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--icf-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ── Scrollbars inside panels ──────────────────────────────────────────────
   Thin and muted, not hidden. The sidebar hides its scrollbar because its
   content is a fixed, known list; a form does not know how long it is, so
   removing the only signal that there is more below would cost more than the
   grey stripe does. This keeps the signal and drops the chrome.

   Applied to the three panels that scroll their own content. The window
   scrollbar is left alone — overriding it is the browser's call, not ours. */
.icf-modal-body,
.icf-drawer-body,
.icf-board-col-body {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--icf-border-strong, #cbd5e1) transparent;
}

.icf-modal-body::-webkit-scrollbar,
.icf-drawer-body::-webkit-scrollbar,
.icf-board-col-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.icf-modal-body::-webkit-scrollbar-track,
.icf-drawer-body::-webkit-scrollbar-track,
.icf-board-col-body::-webkit-scrollbar-track {
  background: transparent;
}

.icf-modal-body::-webkit-scrollbar-thumb,
.icf-drawer-body::-webkit-scrollbar-thumb,
.icf-board-col-body::-webkit-scrollbar-thumb {
  background: var(--icf-border-strong, #cbd5e1);
  border-radius: 999px;
  /* Transparent border with background-clip is the only way to inset a
     webkit thumb — there is no margin on this pseudo-element. */
  border: 2px solid transparent;
  background-clip: content-box;
}

.icf-modal-body::-webkit-scrollbar-thumb:hover,
.icf-drawer-body::-webkit-scrollbar-thumb:hover,
.icf-board-col-body::-webkit-scrollbar-thumb:hover {
  background: var(--icf-text-muted, #94a3b8);
  background-clip: content-box;
}

/* Chrome draws a small square where the two bars meet; on a panel that only
   scrolls vertically it shows up as a stray dot in the corner. */
.icf-modal-body::-webkit-scrollbar-corner,
.icf-drawer-body::-webkit-scrollbar-corner,
.icf-board-col-body::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================
   Toast
   ============================================ */

.icf-toast-container {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.icf-toast {
  pointer-events: auto;
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  box-shadow: var(--icf-shadow-lg);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  min-width: 280px;
  max-width: 420px;
  animation: icf-slide-in 0.3s ease;
}

.icf-toast-success { border-inline-start: 4px solid var(--icf-success); }
.icf-toast-error { border-inline-start: 4px solid var(--icf-danger); }
.icf-toast-warning { border-inline-start: 4px solid var(--icf-warning); }
.icf-toast-info { border-inline-start: 4px solid var(--icf-info); }

@keyframes icf-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* A SEPARATE keyframe, applied by name. `[dir="rtl"] @keyframes ...` is not
   valid CSS — an at-rule cannot be scoped by a selector — so the browser threw
   the whole block away and every Arabic toast slid in from the wrong side,
   using the LTR `translateX(100%)` above. The container is anchored with
   `inset-inline-end`, so in RTL it sits on the left and must enter from there. */
@keyframes icf-slide-in-rtl {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .icf-toast {
  animation-name: icf-slide-in-rtl;
}

/* ============================================
   Login / Register — Split Screen
   ============================================ */

.icf-login-page {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* --- Hero Side --- */
.icf-login-hero {
  flex: 0 0 46%;
  max-width: 46%;
  background: linear-gradient(160deg, #020617 0%, #0f172a 25%, #1e3a8a 65%, #2563eb 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}

.icf-login-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  inset-inline-end: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.icf-login-hero::after {
  content: '';
  position: absolute;
  bottom: -15%;
  inset-inline-start: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.icf-login-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 380px;
}

.icf-login-hero-logo {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.75rem;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.icf-login-hero-content h2 {
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.icf-login-hero-content p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 2.25rem;
}

.icf-login-hero-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: start;
}

.icf-login-hero-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  padding: 0.5rem 0;
}

.icf-hero-check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}

.icf-login-hero-back {
  position: absolute;
  top: 1.5rem;
  inset-inline-start: 1.5rem;
  z-index: 3;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s;
  padding: 0.375rem 0.75rem;
  border-radius: var(--icf-radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.icf-login-hero-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

[dir="rtl"] .icf-login-hero-back svg {
  transform: scaleX(-1);
}

.icf-login-hero-footer {
  position: absolute;
  bottom: 1.5rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  text-align: center;
  z-index: 2;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

/* --- Form Side --- */
.icf-login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: var(--icf-bg);
  min-height: 100vh;
}

.icf-login-card {
  background: var(--icf-surface);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--icf-border);
}

.icf-login-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.icf-login-brand h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--icf-primary);
  letter-spacing: -0.01em;
}

.icf-login-brand p {
  color: var(--icf-text-muted);
  font-size: 0.875rem;
  margin-top: 0.375rem;
  line-height: 1.5;
}

.icf-login-submit {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(30,64,175,0.2);
  transition: all 0.2s ease;
}

.icf-login-submit:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(30,64,175,0.3);
  transform: translateY(-1px);
}

.icf-input-hint {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  margin-top: 0.25rem;
}

.icf-otp-sent-info {
  text-align: center;
  margin-bottom: 1.25rem;
}

.icf-otp-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.icf-otp-sent-info p {
  font-size: 0.875rem;
  color: var(--icf-text-muted);
}

.icf-otp-input {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  font-weight: 700;
}

.icf-otp-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.icf-login-divider {
  height: 1px;
  background: var(--icf-border);
  margin: 1.5rem 0;
}

.icf-login-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.icf-login-register-link {
  font-size: 0.8125rem;
  color: var(--icf-text-muted);
}

.icf-login-register-link a {
  font-weight: 600;
  color: var(--icf-primary);
  text-decoration: none;
  margin-inline-start: 0.25rem;
}

.icf-login-register-link a:hover {
  text-decoration: underline;
}

/* ── Registration funnel ─────────────────────────────────────────────────────
   Three steps: business type, plan, details. Everything here exists because the
   funnel was assembled out of the login page's classes plus inline styles, so
   the steps disagreed with each other — step 1 had no language toggle and no
   divider while 2 and 3 had both, the error box was `icf-alert` on one step and
   `icf-login-error` on another, step 2 could not show an error at all, and the
   business-type cards borrowed `.icf-plan-card` and then fought it with
   `text-align:start`. Widths were inline and came in three values. */

/* The funnel's brand block is a single line, so it does not need the 2rem the
   login page's two-line version reserves. */
.icf-login-brand.icf-login-brand-compact {
  margin-bottom: 1.5rem;
}

/* The step rail. A three-step form with no progress indication is the single
   thing that made this read as unfinished. */
.icf-reg-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.icf-reg-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.icf-reg-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--icf-bg);
  color: var(--icf-text-muted);
  border: 1px solid var(--icf-border);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  /* Latin digits in both languages: the rail is a position counter, not prose,
     and 1-2-3 is read the same way either side of the page. */
  font-variant-numeric: lining-nums;
}

.icf-reg-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--icf-text-muted);
  white-space: nowrap;
}

.icf-reg-step-line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 12px;
  background: var(--icf-border);
  border-radius: 999px;
}

.icf-reg-step.is-active .icf-reg-step-dot {
  background: var(--icf-primary);
  border-color: var(--icf-primary);
  color: #fff;
}

.icf-reg-step.is-active .icf-reg-step-label {
  color: var(--icf-text);
}

.icf-reg-step.is-done .icf-reg-step-dot {
  background: var(--icf-primary-light, #e8edfb);
  border-color: var(--icf-primary);
  color: var(--icf-primary);
}

.icf-reg-step.is-done + .icf-reg-step-line,
.icf-reg-step.is-active + .icf-reg-step-line {
  background: var(--icf-primary);
}

/* The card. One width per step instead of three inline `max-width`s — the two
   choice steps are wide enough for cards side by side, the form step is not. */
.icf-login-card.icf-reg-card {
  max-width: 560px;
}

.icf-login-card.icf-reg-card-narrow {
  max-width: 480px;
}

/* Business-type cards. Their own component: a plan card is centred and priced,
   these are a left-aligned title, a description and a tick. */
.icf-type-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.icf-type-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-align: start;
  padding: 1rem 1.125rem;
  border: 2px solid var(--icf-border);
  border-radius: var(--icf-radius);
  background: var(--icf-surface);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
  font: inherit;
  color: inherit;
}

.icf-type-card:hover {
  border-color: var(--icf-primary);
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.08);
}

.icf-type-card:focus-visible {
  outline: 2px solid var(--icf-primary);
  outline-offset: 2px;
}

.icf-type-card.is-selected {
  border-color: var(--icf-primary);
  background: #f0f4ff;
}

.icf-type-card-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.icf-type-card-title {
  /* `display: block` because these are spans — a <button> may not contain a
     <div>, so the card's two lines are spans and would otherwise run together
     on one line: "الفحص فحص المركبات وتقارير الحالة". */
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--icf-text);
}

.icf-type-card-desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--icf-text-muted);
  margin-top: 0.125rem;
  line-height: 1.5;
}

/* The tick keeps its slot whether or not it is shown, so choosing a card does
   not shift the text sideways. */
.icf-type-card-tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--icf-border);
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.icf-type-card.is-selected .icf-type-card-tick {
  background: var(--icf-primary);
  border-color: var(--icf-primary);
  color: #fff;
}

/* Full-width action buttons, so the three steps stop setting width inline. */
.icf-reg-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.icf-reg-actions .icf-btn {
  width: 100%;
}

/* The selected-plan summary on step 3 — the inline colours and sizes it used to
   carry are here instead. */
.icf-selected-plan-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.icf-selected-plan-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--icf-text);
}

.icf-selected-plan-trial {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--icf-ink-success);
}

.icf-selected-plan-change {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--icf-primary);
  text-decoration: underline;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .icf-reg-step-label { display: none; }
  .icf-reg-steps { gap: 0.375rem; }
}

/* --- Plan Picker (Registration) --- */
.icf-plan-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.icf-plan-card {
  position: relative;
  border: 2px solid var(--icf-border);
  border-radius: var(--icf-radius);
  padding: 1.5rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.icf-plan-card:hover {
  border-color: var(--icf-primary);
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.1);
}

.icf-plan-card-selected {
  border-color: var(--icf-primary);
  background: #f0f4ff;
}

.icf-plan-card-popular {
  border-color: var(--icf-primary);
}

.icf-plan-popular-tag {
  position: absolute;
  top: -0.625rem;
  inset-inline-end: 1rem;
  background: var(--icf-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.icf-plan-card-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--icf-text);
}

.icf-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.icf-plan-card-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--icf-primary);
  line-height: 1;
}

.icf-plan-card-period {
  font-size: 0.8125rem;
  color: var(--icf-text-muted);
  font-weight: 500;
}

.icf-plan-card-features {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--icf-text-muted);
}

.icf-plan-card-features div {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.icf-plan-card-features svg {
  color: var(--icf-success);
  flex-shrink: 0;
}

.icf-plan-card-btn {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  padding: 0.625rem;
}

.icf-selected-plan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--icf-bg);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  padding: 0.625rem 1rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s;
}

.icf-selected-plan-bar:hover {
  border-color: var(--icf-primary);
}

@media (max-width: 480px) {
  .icf-plan-picker {
    grid-template-columns: 1fr;
  }
}

/* --- Login Error --- */
/* Inline banner. Used by the signup business-type step and the stage board's
   truncation notice. Both markups referenced .icf-alert before this existed, so
   both were rendering unstyled plain text. */
.icf-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--icf-radius);
  font-size: 0.8125rem;
  border: 1px solid transparent;
}

.icf-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.icf-login-error {
  background: #fef2f2;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: var(--icf-radius);
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Login Tabs --- */
.icf-login-tabs {
  display: flex;
  margin-bottom: 1.5rem;
  border-radius: var(--icf-radius);
  background: var(--icf-bg);
  padding: 4px;
  border: 1px solid var(--icf-border);
}

.icf-login-tabs button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--icf-text-muted);
  cursor: pointer;
  border-radius: calc(var(--icf-radius) - 2px);
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.icf-login-tabs button:hover:not(.active) {
  color: var(--icf-text);
}

.icf-login-tabs button.active {
  background: var(--icf-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(30,64,175,0.3);
}

/* --- Login card input overrides --- */
.icf-login-card .icf-input,
.icf-login-card .icf-select {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border-radius: 10px;
}

.icf-login-card .icf-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.icf-login-card .icf-form-group {
  margin-bottom: 1.125rem;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .icf-login-hero { display: none; }
  .icf-login-form-side { padding: 1.5rem; }
  .icf-login-card { padding: 2rem 1.5rem; }
}

@media (max-width: 575px) {
  .icf-login-form-side { padding: 1rem; }
  .icf-login-card { padding: 1.5rem 1.25rem; border-radius: 12px; }
  .icf-login-card .icf-form-row { grid-template-columns: 1fr; }
}

/* ============================================
   Subscription Banner
   ============================================ */

.icf-sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--icf-radius-lg);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.icf-sub-banner-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icf-sub-banner-usage {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.icf-sub-banner-trial {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.icf-sub-banner-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.icf-sub-banner-critical {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.icf-sub-banner-expired {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ============================================
   Settings Tabs
   ============================================ */

.icf-settings-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.icf-settings-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--icf-border);
  background: var(--icf-surface);
  border-radius: var(--icf-radius);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--icf-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.icf-settings-tab:hover {
  border-color: var(--icf-primary-light);
  color: var(--icf-primary);
}

.icf-settings-tab.active {
  background: var(--icf-primary);
  color: #fff;
  border-color: var(--icf-primary);
}

/* ============================================
   Pagination
   ============================================ */

.icf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 1rem;
}

.icf-pagination button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--icf-border);
  background: var(--icf-surface);
  border-radius: var(--icf-radius);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
}

.icf-pagination button:hover:not(:disabled) {
  background: var(--icf-bg);
}

.icf-pagination button.active {
  background: var(--icf-primary);
  color: #fff;
  border-color: var(--icf-primary);
}

.icf-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Tabs
   ============================================ */

.icf-tabs {
  display: flex;
  border-bottom: 2px solid var(--icf-border);
  gap: 0;
  margin-bottom: 1rem;
}

.icf-tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--icf-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.icf-tab:hover { color: var(--icf-text); }

.icf-tab.active {
  color: var(--icf-primary);
  border-bottom-color: var(--icf-primary);
}

/* ============================================
   Filters bar
   ============================================ */

.icf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}

.icf-filters .icf-input,
.icf-filters .icf-select {
  width: auto;
  min-width: 160px;
}

/* ============================================
   Lang Toggle
   ============================================ */

.icf-lang-toggle {
  background: var(--icf-bg);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.icf-lang-toggle:hover {
  background: var(--icf-border);
}

/* ============================================
   User menu
   ============================================ */

.icf-user-menu {
  position: relative;
}

.icf-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: var(--icf-radius);
  transition: background 0.15s;
}

.icf-user-btn:hover { background: var(--icf-bg); }

.icf-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--icf-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.icf-user-info {
  text-align: start;
}

.icf-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--icf-text);
}

.icf-user-role {
  font-size: 0.6875rem;
  color: var(--icf-text-muted);
  text-transform: capitalize;
}

.icf-user-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 0.5rem;
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  box-shadow: var(--icf-shadow-lg);
  min-width: 160px;
  z-index: 50;
}

.icf-user-dropdown button {
  width: 100%;
  text-align: start;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--icf-text);
  transition: background 0.15s;
}

.icf-user-dropdown button:hover {
  background: var(--icf-bg);
}

/* ============================================
   Empty state
   ============================================ */

.icf-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--icf-text-muted);
}

.icf-empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  opacity: 0.4;
}

/* ============================================
   Loading
   ============================================ */

.icf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.icf-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--icf-border);
  border-top-color: var(--icf-primary);
  border-radius: 50%;
  animation: icf-spin 0.7s linear infinite;
}

@keyframes icf-spin {
  to { transform: rotate(360deg); }
}

/* The inline spinner that sits inside a button while it submits. It is used on
   every "sending"/"saving" state in the app and had NO rule, so the element
   rendered at zero size — the button simply showed nothing while it worked. */
.icf-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: icf-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-inline-end: 0.375rem;
  flex-shrink: 0;
}

/* On a light button the white ring is invisible, so borrow the text colour. */
.icf-btn-ghost .icf-spinner-sm,
.icf-btn-outline .icf-spinner-sm,
.icf-btn-secondary .icf-spinner-sm {
  border-color: var(--icf-border);
  border-top-color: var(--icf-primary);
}

/* The × on every modal header. Also undefined, so it inherited the browser's
   default button chrome inside a styled header. */
.icf-modal-close {
  background: none;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--icf-radius);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--icf-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.icf-modal-close:hover {
  background: var(--icf-bg);
  color: var(--icf-text);
}

.icf-modal-close:focus-visible {
  outline: 2px solid var(--icf-primary);
  outline-offset: 2px;
}

/* ============================================
   Detail view
   ============================================ */

.icf-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.icf-detail-item label {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  display: block;
}

.icf-detail-item span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================
   Notification Bell
   ============================================ */

.icf-notif-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: var(--icf-radius);
  color: var(--icf-text-muted);
  transition: all 0.15s;
}

.icf-notif-bell:hover {
  background: var(--icf-bg);
  color: var(--icf-text);
}

.icf-notif-badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  background: var(--icf-danger);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icf-notif-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 0.5rem;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg);
  box-shadow: var(--icf-shadow-lg);
  z-index: 50;
}

.icf-notif-dropdown-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--icf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.875rem;
}

.icf-notif-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--icf-border);
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  transition: background 0.15s;
}

.icf-notif-item:hover {
  background: var(--icf-bg);
}

.icf-notif-item.unread {
  border-inline-start: 3px solid var(--icf-primary);
  background: rgba(59, 130, 246, 0.04);
}

.icf-notif-item-icon {
  flex-shrink: 0;
  color: var(--icf-text-muted);
  margin-top: 2px;
}

.icf-notif-item-body {
  flex: 1;
  min-width: 0;
}

.icf-notif-item-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--icf-text);
}

.icf-notif-item-msg {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icf-notif-item-time {
  font-size: 0.6875rem;
  color: var(--icf-text-muted);
  flex-shrink: 0;
}

.icf-notif-dropdown-footer {
  padding: 0.625rem 1rem;
  text-align: center;
}

.icf-notif-dropdown-footer a {
  color: var(--icf-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.icf-notif-dropdown-footer a:hover {
  text-decoration: underline;
}

/* ============================================
   Role Badges
   ============================================ */

.icf-badge-role-superadmin { background: #fce7f3; color: #9d174d; }
.icf-badge-role-admin { background: #dbeafe; color: #1e40af; }
.icf-badge-role-manager { background: #e0e7ff; color: #4338ca; }
.icf-badge-role-inspector { background: #dcfce7; color: #166534; }
.icf-badge-role-receptionist { background: #fef3c7; color: #92400e; }
/* Slate rather than another hue: `staff` is the tier with no operational
   access, and a quiet badge reads that way next to the five coloured ones.
   Measured 8.40:1, the highest of the six role badges — clears AAA. */
.icf-badge-role-staff { background: #e2e8f0; color: #334155; }
.icf-badge-active { background: #dcfce7; color: #166534; }
.icf-badge-inactive { background: #fee2e2; color: #991b1b; }
.icf-badge-assigned { background: #e0e7ff; color: #4338ca; }

/* ============================================
   Tenant Badges
   ============================================ */

.icf-badge-free { background: #f1f5f9; color: #475569; }
.icf-badge-basic { background: #dbeafe; color: #1e40af; }
.icf-badge-pro { background: #e0e7ff; color: #4338ca; }
.icf-badge-enterprise { background: #fce7f3; color: #9d174d; }
.icf-badge-trial { background: #fef3c7; color: #92400e; }
.icf-badge-suspended { background: #fee2e2; color: #991b1b; }

/* ============================================
   Settings Form
   ============================================ */

.icf-settings-section {
  margin-bottom: 2rem;
}

.icf-settings-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--icf-border);
}

.icf-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--icf-border);
}

.icf-toggle-row:last-child {
  border-bottom: none;
}

.icf-toggle-label {
  font-size: 0.875rem;
  color: var(--icf-text);
}

.icf-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--icf-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.icf-toggle.active {
  background: var(--icf-primary);
}

.icf-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.icf-toggle.active::after {
  transform: translateX(20px);
}

[dir="rtl"] .icf-toggle.active::after {
  transform: translateX(-20px);
}

.icf-day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.icf-day-chip {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--icf-surface);
  color: var(--icf-text);
}

.icf-day-chip.selected {
  background: var(--icf-primary);
  color: #fff;
  border-color: var(--icf-primary);
}

/* ============================================
   Notification List (full page)
   ============================================ */

.icf-notif-list-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--icf-border);
  align-items: flex-start;
  transition: background 0.15s;
}

.icf-notif-list-item:hover {
  background: var(--icf-bg);
}

.icf-notif-list-item.unread {
  border-inline-start: 3px solid var(--icf-primary);
  background: rgba(59, 130, 246, 0.04);
}.icf-input-sm {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  background: var(--icf-bg);
}/* ============================================
   Mobile (< 768px)
   ============================================ */

@media (max-width: 767px) {
  .icf-sidebar {
    transform: translateX(-100%);
  }

  [dir="rtl"] .icf-sidebar {
    transform: translateX(100%);
  }

  .icf-sidebar.open {
    transform: translateX(0);
  }

  .icf-sidebar-backdrop.open {
    display: block;
  }

  .icf-hamburger {
    display: block;
  }

  .icf-main {
    margin-inline-start: 0;
  }

  .icf-content {
    padding: 1rem;
  }

  .icf-form-row {
    grid-template-columns: 1fr;
  }

  .icf-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .icf-filters .icf-input,
  .icf-filters .icf-select {
    width: 100%;
    min-width: 0;
  }

  .icf-modal {
    max-width: 100%;
    margin: 0.5rem;
  }

  .icf-user-info {
    display: none;
  }

}

/* ============================================
   Responsive hardening
   ============================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea,
.icf-btn {
  font-family: var(--icf-font);
}

.icf-btn,
.icf-nav-item,
.icf-card,
.icf-modal,
.icf-table,
.icf-toast,
.icf-badge {
  overflow-wrap: anywhere;
}

.icf-table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .icf-header {
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .icf-header-title {
    font-size: 1rem;
    min-width: 0;
  }

  .icf-header-right {
    gap: 0.5rem;
  }

  .icf-card-header,
  .icf-modal-header,
  .icf-modal-footer {
    padding: 1rem;
    flex-wrap: wrap;
  }

  .icf-card-body,
  .icf-modal-body {
    padding: 1rem;
  }

  .icf-btn {
    min-height: 40px;
    justify-content: center;
    white-space: normal;
  }

  .icf-toast-container {
    inset-inline: 1rem;
  }

  .icf-toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 430px) {
  .icf-content {
    padding: 0.75rem;
  }

  .icf-stats-grid {
    gap: 0.75rem;
  }

  .icf-stat-card {
    padding: 1rem;
  }

  .icf-stat-value {
    font-size: 1.45rem;
  }
}

/* ===== Activity Feed ===== */
.icf-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.icf-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--icf-border);
}

.icf-activity-item:last-child {
  border-bottom: none;
}

.icf-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icf-activity-content {
  flex: 1;
  min-width: 0;
}

.icf-activity-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

.icf-activity-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--icf-text-muted);
}

.icf-activity-details {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  opacity: 0.6;
}

.icf-detail-box {
  background: var(--icf-bg);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--icf-text);
  white-space: pre-wrap;
}

/* ============================================
   Premium SaaS Dashboard Refresh
   ---
   Everything below deliberately RE-STYLES the components defined earlier in
   this file. It is an override layer, not a second copy: the duplicate
   selectors the CSS audit reports between here and the top of the file are
   this, and they are intentional. The design TOKENS that used to live here
   have been merged into the single :root at the top.
   ============================================ */

body {
  background:
    linear-gradient(180deg, rgba(36,71,184,0.035), rgba(36,71,184,0) 220px),
    var(--icf-bg);
  letter-spacing: 0;
}

.icf-app {
  background:
    linear-gradient(90deg, rgba(15,23,42,0.02), transparent 26%),
    var(--icf-bg);
}

.icf-sidebar {
  background:
    linear-gradient(180deg, #0b1220 0%, #101a31 100%);
  border-inline-end: 1px solid rgba(255,255,255,0.08);
  box-shadow: 10px 0 30px rgba(15,23,42,0.14);
}

[dir="rtl"] .icf-sidebar {
  box-shadow: -10px 0 30px rgba(15,23,42,0.14);
}

.icf-sidebar-brand {
  min-height: var(--icf-header-h);
  padding: 1rem 1.35rem;
  font-size: 1.22rem;
  border-bottom-color: rgba(255,255,255,0.09);
}

.icf-sidebar-brand svg {
  width: 31px;
  height: 31px;
  padding: 5px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.icf-sidebar-nav {
  padding: 0.8rem 0.75rem 1rem;
}

.icf-nav-item {
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.18rem;
  border-radius: 8px;
  border-inline-start: 0;
  color: #a8b5ca;
  font-weight: 600;
}

.icf-nav-item:hover {
  background: var(--icf-sidebar-hover);
  color: #fff;
  transform: translateX(2px);
}

[dir="rtl"] .icf-nav-item:hover {
  transform: translateX(-2px);
}

.icf-nav-item.active {
  background: linear-gradient(135deg, rgba(63,109,246,0.98), rgba(36,71,184,0.95));
  color: #fff;
  box-shadow: 0 12px 28px rgba(36,71,184,0.28);
}

.icf-nav-item svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.icf-header {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(198,210,227,0.78);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.icf-header-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--icf-text);
}

.icf-header-title:empty::after {
  content: "iCarFixIt";
}

.icf-header-right {
  gap: 0.75rem;
}

.icf-lang-toggle,
.icf-user-btn,
.icf-notif-bell {
  border: 1px solid var(--icf-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}

.icf-lang-toggle:hover,
.icf-user-btn:hover,
.icf-notif-bell:hover {
  border-color: var(--icf-border-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.icf-user-avatar {
  background: linear-gradient(135deg, var(--icf-primary), var(--icf-primary-light));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.icf-user-name {
  color: var(--icf-text);
  font-weight: 800;
}

.icf-user-role {
  color: var(--icf-text-muted);
  font-weight: 600;
}

.icf-notif-badge {
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(239,68,68,0.28);
}

.icf-notif-dropdown,
.icf-user-dropdown {
  border: 1px solid var(--icf-border);
  border-radius: 12px;
  box-shadow: var(--icf-shadow-lg);
  overflow: hidden;
}

.icf-content {
  padding: 1.65rem;
}

.icf-card {
  border-color: rgba(198,210,227,0.85);
  border-radius: 10px;
  box-shadow: var(--icf-shadow);
  overflow: hidden;
}

.icf-card:hover {
  box-shadow: 0 8px 30px rgba(15,23,42,0.075);
}

.icf-card-header {
  min-height: 58px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

.icf-card-header h3 {
  color: var(--icf-text);
  font-size: 1rem;
  font-weight: 800;
}

.icf-card-body {
  background: #fff;
}

.icf-stats-grid {
  gap: 1rem;
}

.icf-stat-card {
  position: relative;
  min-height: 132px;
  border-color: rgba(198,210,227,0.9);
  border-radius: 10px;
  padding: 1.15rem;
  overflow: hidden;
}

.icf-stat-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -34px;
  top: -42px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(36,71,184,0.055);
  pointer-events: none;
}

.icf-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--icf-border-strong);
}

.icf-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-bottom: 0.85rem;
}

.icf-stat-label {
  color: #66758a;
  font-weight: 700;
}

.icf-stat-value {
  color: #111827;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.icf-sub-banner {
  border-radius: 10px;
  box-shadow: var(--icf-shadow);
}

.icf-sub-banner-text {
  font-weight: 800;
}

.icf-filters {
  padding: 0;
  align-items: center;
}

.icf-filters .icf-input,
.icf-filters .icf-select {
  min-height: 42px;
  background: #fff;
}

.icf-input,
.icf-select,
.icf-textarea,
.icf-input-sm {
  border-color: var(--icf-border);
  border-radius: 8px;
}

.icf-input:hover,
.icf-select:hover,
.icf-textarea:hover,
.icf-input-sm:hover {
  border-color: var(--icf-border-strong);
}

.icf-input:focus,
.icf-select:focus,
.icf-textarea:focus,
.icf-input-sm:focus {
  border-color: var(--icf-primary-light);
  box-shadow: var(--icf-focus);
}

.icf-btn {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

.icf-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.icf-btn-primary {
  background: linear-gradient(135deg, var(--icf-primary), var(--icf-primary-light));
  box-shadow: 0 10px 22px rgba(36,71,184,0.22);
}

.icf-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--icf-primary-dark), var(--icf-primary));
}

.icf-btn-ghost {
  background: #fff;
}

.icf-btn-danger {
  box-shadow: 0 8px 18px rgba(239,68,68,0.16);
}

td > div[style*="display:flex"][style*="gap:0.25rem"] {
  gap: 0.35rem !important;
}

.icf-table-wrap {
  border-radius: 9px;
}

.icf-table {
  font-size: 0.84rem;
}

.icf-table th {
  background: #f8fafc;
  color: #607089;
  font-size: 0.73rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.85rem 1rem;
}

.icf-table td {
  padding: 0.9rem 1rem;
}

.icf-table tbody tr {
  transition: background 0.12s ease;
}

.icf-table tr:hover td {
  background: #f8fbff;
}

.icf-badge {
  min-height: 22px;
  border: 1px solid transparent;
  font-weight: 800;
}

.icf-badge-active,
.icf-badge-confirmed,
.icf-badge-paid {
  background: #e8f7ef;
  color: #15803d;
  border-color: #bbf7d0;
}

.icf-badge-trial,
.icf-badge-pending,
.icf-badge-partial {
  background: #fff7e6;
  color: #b45309;
  border-color: #fde68a;
}

.icf-badge-suspended,
.icf-badge-cancelled,
.icf-badge-fail {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

.icf-empty {
  border: 1px dashed var(--icf-border-strong);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--icf-text-muted);
  font-weight: 700;
}

.icf-loading {
  min-height: 180px;
}

.icf-spinner {
  border-width: 3px;
  border-top-color: var(--icf-primary);
}

.icf-modal-backdrop,
.icf-modal-overlay {
  background: rgba(15,23,42,0.52);
  backdrop-filter: blur(6px);
}

.icf-modal {
  border: 1px solid var(--icf-border);
  border-radius: 12px;
  box-shadow: var(--icf-shadow-lg);
}

.icf-modal-header {
  background: #fbfdff;
}

.icf-modal-header h3 {
  font-weight: 800;
}

.icf-modal-footer {
  background: #fbfdff;
}

.icf-detail-grid {
  gap: 0.8rem;
}

.icf-detail-item {
  padding: 0.85rem;
  border: 1px solid var(--icf-border);
  border-radius: 9px;
  background: #fbfdff;
}

.icf-detail-item label {
  color: var(--icf-text-muted);
  font-weight: 800;
}

.icf-detail-item span {
  font-weight: 700;
}

.icf-pagination {
  gap: 0.4rem;
}

.icf-pagination button {
  min-width: 38px;
  min-height: 36px;
  font-weight: 800;
}

.icf-settings-tab,
.icf-login-tabs button {
  font-weight: 800;
}

.icf-activity-feed {
  gap: 0.15rem;
}

.icf-activity-item {
  padding: 0.95rem;
  border: 1px solid transparent;
  border-radius: 9px;
}

.icf-activity-item:hover {
  background: #f8fbff;
  border-color: var(--icf-border);
}

/* Invoice Page Polish */
.icf-money,
.icf-date-value,
.icf-invoice-number {
  direction: ltr;
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}

.icf-invoice-toolbar .icf-card-body {
  padding: 0.85rem 1rem;
  min-height: auto;
}

.icf-invoice-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
}

.icf-invoice-toolbar-copy {
  min-width: 0;
}

.icf-invoice-toolbar-copy strong {
  display: block;
  color: var(--icf-text);
  font-size: 0.98rem;
  font-weight: 900;
}.icf-invoice-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.icf-invoice-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.icf-invoice-kpi {
  min-height: 116px;
  padding: 1.15rem 1.25rem;
}

.icf-invoice-kpi .icf-stat-value {
  margin-top: 0.55rem;
}

.icf-invoice-kpi-success .icf-stat-value {
  color: #059669;
}

.icf-invoice-kpi-danger .icf-stat-value {
  color: #dc2626;
}

.icf-invoice-list-card .icf-card-body {
  padding: 1.25rem;
}

.icf-invoice-list-toolbar {
  justify-content: flex-end;
  gap: 0.65rem;
}

[dir="rtl"] .icf-invoice-list-toolbar {
  justify-content: flex-start;
}

.icf-invoice-table-wrap {
  border: 1px solid var(--icf-border);
  background: #fff;
}

.icf-invoice-table th,
.icf-invoice-table td {
  vertical-align: middle;
}

.icf-invoice-number {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.15rem 0.5rem;
  border-radius: 7px;
  background: #f8fafc;
  color: var(--icf-text);
  font-weight: 900;
}

/* KEPT DELIBERATELY, though nothing references them. The invoices page still
   carries `submitZatca()` in JS; only the button that called it is not in the
   markup, because ZATCA Phase 2 is parked and `submitToZatca` answers 501.
   These two are the style that button had — deleting them would mean writing
   it again from scratch when the feature is unparked. Audited 2026-09-23. */
.icf-invoice-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 92px;
}

.icf-btn-zatca {
  min-width: 42px;
  border: none;
  /* emerald-600 gave white 3.77:1. One step darker clears AA; hover moves down
     with it so the two states are still distinguishable. */
  background: #047857; /* 5.48:1 */
  color: #fff;
}

.icf-btn-zatca:hover {
  background: #065f46; /* 7.68:1 */
  color: #fff;
}

@media (min-width: 1280px) {
  .icf-content {
    padding: 1.9rem;
  }

  .icf-card-body {
    padding: 1.65rem;
  }

  .icf-invoice-toolbar .icf-card-body {
    padding: 0.85rem 1rem;
  }
}

@media (max-width: 1024px) {
  .icf-invoice-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --icf-header-h: 62px;
  }

  .icf-sidebar {
    width: min(86vw, 286px);
  }

  .icf-header {
    padding: 0 0.9rem;
  }

  .icf-header-title {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .icf-header-right {
    gap: 0.42rem;
  }

  .icf-lang-toggle {
    min-height: 38px;
    padding-inline: 0.75rem;
  }

  .icf-notif-dropdown {
    position: fixed !important;
    inset-inline: 0.75rem !important;
    top: calc(var(--icf-header-h) + 0.5rem) !important;
    width: auto !important;
    max-width: none !important;
  }

  .icf-content {
    padding: 0.9rem;
  }

  .icf-card {
    border-radius: 9px;
  }

  .icf-card-header {
    min-height: 52px;
  }

  .icf-stat-card {
    min-height: 118px;
  }

  .icf-filters {
    gap: 0.65rem;
  }

  .icf-filters .icf-btn,
  .icf-filters .icf-input,
  .icf-filters .icf-select {
    width: 100%;
    max-width: none !important;
  }

  .icf-table {
    min-width: 720px;
  }

  .icf-invoice-toolbar-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .icf-invoice-toolbar-actions {
    justify-content: stretch;
  }

  .icf-invoice-toolbar-actions .icf-btn {
    flex: 1 1 160px;
  }

  .icf-invoice-stats {
    grid-template-columns: 1fr;
  }

  .icf-invoice-kpi {
    min-height: 104px;
  }

  .icf-invoice-list-toolbar {
    justify-content: stretch;
  }

  td > div[style*="display:flex"][style*="gap:0.25rem"] {
    min-width: 180px;
  }

  .icf-modal {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    /* Was `overflow: auto`, which put the scroll back on the whole dialog and
       undid the pinned header and footer below 767px — on a phone, where
       losing sight of the Save button costs the most. The body still scrolls;
       hidden here only clips it to the rounded corner. */
    overflow: hidden;
  }
}

@media (max-width: 430px) {
  .icf-header-title {
    max-width: 34vw;
    font-size: 0.98rem;
  }

  .icf-lang-toggle {
    padding-inline: 0.55rem;
    font-size: 0.78rem;
  }

  .icf-content {
    padding: 0.7rem;
  }

  .icf-card-body,
  .icf-card-header,
  .icf-modal-body,
  .icf-modal-header,
  .icf-modal-footer {
    padding: 0.85rem;
  }

  .icf-stat-value {
    font-size: 1.65rem;
  }
}

/* ============================================
   stats-grid ladder — single source of truth
   ============================================
   .icf-stats-grid is declared in three places earlier in this file (an original
   and two redesign passes). Rather than leave the column count spread across
   five blocks at four breakpoints — where an edit at the top of the file
   silently does nothing — every column declaration was removed from those and
   collected here, at the end, where source order guarantees these win.

   Both dashboard grids hold exactly six cards, so six fills one clean row.
   minmax(0, …) rather than a bare 1fr: 1fr means minmax(auto, 1fr), which lets
   a long unbroken Arabic label push its track past its share and overflow. */
.icf-stats-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Six tracks below ~1100px are about 110px each, which wraps labels like
   "إجمالي الحجوزات" onto three lines. */
@media (max-width: 1100px) {
  .icf-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones: two across, all the way down to the narrowest devices. */
@media (max-width: 767px) {
  .icf-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================
   Row actions — icon dropdown
   ============================================
   Replaces the row of filled buttons that used to sit in every table's actions
   column. At three or more actions per row those coloured blocks dominated the
   table and pushed the real data out of view, and the red delete button carried
   the same visual weight as a harmless edit. One quiet trigger per row, with the
   verbs behind it and an icon to carry the meaning. */
.icf-actions {
  position: relative;
  display: inline-block;
}

.icf-actions-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--icf-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icf-actions-trigger:hover,
.icf-actions-trigger[aria-expanded="true"] {
  background: var(--icf-bg);
  border-color: var(--icf-border);
  color: var(--icf-text);
}

.icf-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  /* Logical property: the menu hangs off the inline-end edge, which is the left
     in RTL and the right in LTR without a second rule. */
  inset-inline-end: 0;
  z-index: 30;
  min-width: 11rem;
  padding: 0.3rem;
  background: var(--icf-surface);
  border: 1px solid var(--icf-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.icf-action-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--icf-text);
  font-family: inherit;
  font-size: 0.8125rem;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.icf-action-item:hover { background: var(--icf-bg); }

.icf-action-item i {
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.95rem;
  color: var(--icf-text-muted);
  text-align: center;
}

/* Destructive actions read as destructive through colour on the label, not a
   filled red block competing with every other control in the row. */
.icf-action-item.danger,
.icf-action-item.danger i { color: var(--icf-danger, #dc2626); }
.icf-action-item.danger:hover { background: rgba(220, 38, 38, 0.08); }

.icf-actions-sep {
  height: 1px;
  margin: 0.3rem 0.2rem;
  background: var(--icf-border);
}

/* ==========================================================================
   Tasks — Kanban board, task cards, detail drawer, team scorecard
   Logical properties throughout (inset-inline, border-inline) so the board
   mirrors in RTL without a single [dir="rtl"] override.
   ========================================================================== */

.icf-board {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
}

.icf-board-col {
  flex: 0 0 17.5rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 15rem);
  background: var(--icf-surface-soft, #f8fafc);
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg, 12px);
}

/* Applied only when the move is actually legal, so the board never invites a
   drag the API will bounce back. */
.icf-board-col.can-drop {
  border-color: var(--icf-primary, #14a27d);
  background: rgba(20, 162, 125, 0.06);
}

.icf-board-col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-bottom: 1px solid var(--icf-border);
}

.icf-board-count {
  min-width: 1.5rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--icf-text-muted);
  background: var(--icf-bg);
  border-radius: 999px;
}

.icf-board-col-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
  overflow-y: auto;
  min-height: 5rem;
}

.icf-task-card {
  padding: 0.7rem 0.75rem;
  background: var(--icf-surface, #fff);
  border: 1px solid var(--icf-border);
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.icf-task-card:hover { box-shadow: var(--icf-shadow); }
.icf-task-card.dragging { opacity: 0.45; }

/* A rail on the leading edge — inline-start, so it sits left in English and
   right in Arabic with no mirrored rule. */
.icf-task-card.overdue { border-inline-start: 3px solid var(--icf-danger, #dc2626); }

.icf-task-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.45rem;
  word-break: break-word;
}

.icf-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--icf-text-muted);
}

.icf-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--icf-bg);
  white-space: nowrap;
}

.icf-task-chip.overdue {
  color: var(--icf-danger, #dc2626);
  background: rgba(220, 38, 38, 0.1);
}

.icf-prio-low    { color: #64748b; }
.icf-prio-normal { color: #475569; }
.icf-prio-high   { color: #ea580c; }
.icf-prio-urgent { color: var(--icf-danger, #dc2626); }

/* Takes its colour from the row, so a tenant recolouring a job title needs no
   CSS change. */
.icf-pos-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  white-space: nowrap;
}

.icf-progress {
  height: 5px;
  margin-top: 0.5rem;
  overflow: hidden;
  background: var(--icf-bg);
  border-radius: 999px;
}

.icf-progress-fill {
  height: 100%;
  background: var(--icf-primary, #14a27d);
  border-radius: 999px;
  transition: width 0.2s;
}

/* ── Detail drawer ── */
.icf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.45);
}

.icf-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;      /* enters from the trailing edge in either script */
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(36rem, 100vw);
  background: var(--icf-surface, #fff);
  box-shadow: var(--icf-shadow-lg);
}

.icf-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--icf-border);
}

.icf-drawer-body {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
}

.icf-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--icf-border);
  background: var(--icf-surface-soft, #f8fafc);
}

.icf-drawer-section { margin-bottom: 1.5rem; }

.icf-drawer-section h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--icf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.icf-check-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--icf-border);
}

.icf-check-item:last-child { border-bottom: none; }
.icf-check-item.done { color: var(--icf-text-muted); text-decoration: line-through; }
.icf-check-item input[type="checkbox"] { flex-shrink: 0; width: 1rem; height: 1rem; cursor: pointer; }

.icf-comment {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  background: var(--icf-bg);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.icf-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--icf-text-muted);
}

/* System lines are the audit trail, not conversation — quieter, and railed so
   they read as a different kind of thing at a glance. */
.icf-comment.system {
  font-style: italic;
  color: var(--icf-text-muted);
  background: transparent;
  border-inline-start: 2px solid var(--icf-border);
  border-radius: 0;
}

.icf-file-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--icf-border);
}

.icf-file-row:last-child { border-bottom: none; }
.icf-file-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icf-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--icf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.icf-group-head.overdue { color: var(--icf-danger, #dc2626); }

.icf-rate { font-weight: 700; }
.icf-rate.good  { color: var(--icf-success, #16a34a); }
.icf-rate.warn  { color: #ea580c; }
.icf-rate.bad   { color: var(--icf-danger, #dc2626); }
.icf-rate.muted { color: var(--icf-text-muted); }

@media (max-width: 767px) {
  /* One column at a time on a phone: four 17.5rem columns side by side is a
     horizontal scroll nobody can aim at. */
  .icf-board-col { flex: 0 0 85vw; max-height: none; }
  .icf-drawer { width: 100vw; }
}

/* ============================================
   BILLING / PAYWALL  (Phase B1)
   ============================================
   The screen a suspended tenant lands on. Standalone, outside the app chrome,
   because the chrome's every panel would be requesting data the server now
   refuses. Centred single card — there is exactly one thing to do here. */

.icf-paywall {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--icf-bg, #f8fafc);
}

/* The column owns the width; cards fill it. B1 sized the single card at 30rem,
   which was right for a paywall and too narrow the moment plan cards appeared
   beside it. */
.icf-paywall-col {
  width: 100%;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.icf-paywall-card {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.icf-paywall-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.icf-paywall-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.icf-paywall-badge.is-suspended {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.icf-paywall-badge.is-active {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.icf-paywall-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--icf-text, #0f172a);
}

.icf-paywall-lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--icf-text-muted);
  margin: 0 0 1.5rem;
}

/* Two facts, side by side on anything but the narrowest phone. A dl rather
   than a table: it is a pair of labelled values, not tabular data. */
.icf-paywall-facts {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.icf-paywall-facts > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  background: var(--icf-bg, #f8fafc);
}

.icf-paywall-facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--icf-text-muted);
  margin-bottom: 0.25rem;
}

.icf-paywall-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--icf-text, #0f172a);
}

.icf-paywall-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--icf-text-muted);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--icf-radius);
  padding: 0.75rem;
  margin: 0 0 1.25rem;
}

.icf-paywall-actions {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

/* flex-basis: 0 is a CONTENT box of zero even under border-box, so a border on
   one button and not the other makes the pair unequal. Both carry the same
   border; the primary one's is transparent and its background paints under it.
   Same fix the landing-page hero CTAs needed. */
.icf-paywall-actions > .icf-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  border: 1px solid transparent;
}

/* Language toggle and sign-out share the footer row: one is how you read the
   page, the other is how you leave it, and neither is the thing to do here. */
.icf-paywall-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--icf-border);
  padding-top: 0.875rem;
}

.icf-paywall-signout {
  color: var(--icf-text-muted);
}

@media (max-width: 400px) {
  .icf-paywall-card { padding: 1.5rem 1.25rem; }
  .icf-paywall-facts,
  .icf-paywall-actions { flex-direction: column; }
}

/* ============================================
   BILLING PAGE  (Phase B3)
   ============================================ */

/* Coming back from Paymob. Three outcomes, and "slow" is deliberately not
   styled as a failure: the webhook may still be in flight, and telling someone
   their payment failed when it has not is worse than saying nothing. */
.icf-paywall-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--icf-radius);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  margin-bottom: 1rem;
}

.icf-paywall-outcome.is-paid    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.icf-paywall-outcome.is-failed  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.icf-paywall-outcome.is-waiting,
.icf-paywall-outcome.is-slow    { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* Monthly / yearly. A segmented control rather than a switch: two named
   choices read better than a toggle whose off state has to be inferred. */
.icf-billing-cycle {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--icf-bg, #f8fafc);
  border: 1px solid var(--icf-border);
  margin-bottom: 1.5rem;
}

.icf-billing-cycle button {
  border: 0;
  background: transparent;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--icf-text-muted);
  cursor: pointer;
}

.icf-billing-cycle button.active {
  background: var(--icf-surface, #fff);
  color: var(--icf-text, #0f172a);
  box-shadow: var(--icf-shadow);
}

.icf-plan-grid {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* SCOPED TO THE BILLING GRID. `.icf-plan-card` is also the register funnel's
   plan card, defined ~2600 lines above with a 2px border, no fill and roomier
   padding. This block came later and, being unscoped, silently overrode it:
   the signup plan cards rendered with a 0.67px border, a grey fill and the
   wrong padding on production until 2026-09-23. Two components, one class
   name — scoping is what keeps them apart. */
.icf-plan-grid .icf-plan-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.25rem 1rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius);
  background: var(--icf-bg, #f8fafc);
}

.icf-plan-grid .icf-plan-card.current {
  border-color: var(--icf-primary, #1e40af);
  box-shadow: 0 0 0 1px var(--icf-primary, #1e40af);
}

.icf-plan-name {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--icf-text-muted);
  margin-bottom: 0.5rem;
}

.icf-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.icf-plan-price .amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--icf-text, #0f172a);
  line-height: 1;
}

.icf-plan-price .unit {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
}

.icf-plan-total {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  margin-bottom: 0.875rem;
  min-height: 1rem;
}

.icf-plan-btn {
  width: 100%;
  justify-content: center;
}

.icf-billing-h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--icf-text, #0f172a);
  text-align: start;
}

.icf-billing-contact-lead {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--icf-text-muted);
  margin: 0 0 1rem;
}

.icf-billing-table { font-size: 0.8125rem; }
.icf-billing-table td,
.icf-billing-table th { text-align: start; white-space: nowrap; }

.icf-billing-status {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.icf-billing-status.is-paid     { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.icf-billing-status.is-pending  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.icf-billing-status.is-failed,
.icf-billing-status.is-refunded { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.icf-billing-status.is-expired  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

.icf-paywall-foot-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* A CTA on the dashboard subscription banner. Every one of its four states
   rendered text with nowhere to click until B3. */
.icf-sub-banner-cta {
  margin-inline-start: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .icf-plan-grid { flex-direction: column; }
  .icf-billing-table { font-size: 0.75rem; }
}

/* ============================================
   REVENUE BOARD  (Phase B4, superadmin)
   ============================================ */

.icf-muted {
  color: var(--icf-text-muted);
  font-size: 0.75rem;
}

.icf-warn {
  color: #b45309;
  font-size: 0.75rem;
}

/* The currency sits beside the figure, not inside it: "4,788 ر.س" reads as one
   number with a unit, while a formatted currency string fights the Arabic-Indic
   digits the rest of the page uses. */
.icf-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  width: auto;
}

/* ============================================
   Platform Overview — the SaaS owner's board
   ============================================
   Its own block, at the end of the file where source order wins, for the same
   reason the stats-grid ladder is here.

   It used to be seven `.icf-stat-card`s in a six-column grid — so the seventh
   sat alone on a row — with ten hardcoded hex values and, on every one of them,
   `border-left`. This app is RTL-first: `border-left` puts the accent stripe on
   the trailing edge in Arabic, which is the side the eye leaves, not the one it
   arrives at. Everything here is logical-property (`inset-inline`,
   `border-inline-start`, `padding-inline`) so the board mirrors on its own.

   TWO TIERS, because the six numbers are not six equal facts. Who is paying and
   who is arriving is the business; how many work orders and vehicles they have
   between them is its scale. A flat row of seven said they were the same thing.

   COLOUR IS SPLIT BY JOB, which is the rule `--icf-danger` already follows
   elsewhere in this file: the bright token fills a bar or a dot, and a DARKER
   sibling carries text. #22c55e on white is 2.3:1 and #f59e0b is 2.1:1 — both
   were being used for 12px labels. The -ink values below are all above 4.5:1. */

.icf-platform {
  margin-bottom: 1.5rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg);
  overflow: hidden;
  background: var(--icf-surface);
  box-shadow: var(--icf-shadow);
}

.icf-platform-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--icf-primary-dark), var(--icf-primary));
  color: #fff;
}

.icf-platform-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.icf-platform-head svg {
  flex: none;
  opacity: 0.9;
}

.icf-platform-body {
  padding: 1.5rem;
}

/* Tier 1: three wide cards. Tier 2: three compact ones. Both collapse to a
   single column on a phone rather than to two — a card here carries a meter or
   a legend under the number, and at half a phone's width those wrap to four
   lines and stop being readable. */
.icf-platform-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .icf-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .icf-platform-grid { grid-template-columns: minmax(0, 1fr); }
}

.icf-pstat {
  position: relative;
  padding: 1rem;
  padding-inline-start: 1.5rem;
  border: 1px solid var(--icf-border);
  border-radius: var(--icf-radius-lg);
  background: var(--icf-surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* The accent stripe, drawn rather than bordered so it can inherit the card's
   radius on the leading edge and stop short of the corners. */
.icf-pstat::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pstat-accent, var(--icf-primary));
}

[dir="rtl"] .icf-pstat::before {
  border-radius: 3px 0 0 3px;
}

.icf-pstat:hover {
  transform: translateY(-2px);
  border-color: var(--icf-border-strong);
  box-shadow: var(--icf-shadow);
}

.icf-pstat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.icf-pstat-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pstat-tint, rgba(36, 71, 184, 0.1));
  color: var(--pstat-ink, var(--icf-primary));
}

.icf-pstat-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #66758a;
  line-height: 1.3;
}

.icf-pstat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #111827;
  letter-spacing: -0.01em;
}

.icf-pstat-sub {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  line-height: 1.5;
}

/* Tier 2 — the same card, quieter. */
.icf-platform-grid--compact .icf-pstat { padding-block: 1rem; }
.icf-platform-grid--compact .icf-pstat-value { font-size: 1.5rem; }

/* ── Segmented meter ───────────────────────────────────────────────────────
   A distribution, not a chart: three numbers that sum to a whole read faster
   as one bar than as "3 active · 0 trial · 5 suspended". Zero-width segments
   collapse on their own because the widths are percentages of the total. */
.icf-meter {
  display: flex;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--icf-bg);
}

.icf-meter-seg {
  height: 100%;
  transition: width 0.3s ease;
}

.icf-meter-seg + .icf-meter-seg {
  border-inline-start: 1px solid var(--icf-surface);
}

.icf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.icf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--icf-text-muted);
}

.icf-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.icf-legend-n {
  font-weight: 800;
  color: #111827;
}

/* ── Plan distribution ─────────────────────────────────────────────────── */
.icf-platform-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--icf-border);
}

.icf-platform-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.icf-platform-section-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--icf-text);
  margin-bottom: 0.5rem;
}

.icf-plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.icf-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--icf-border);
  border-radius: 999px;
  background: var(--icf-surface-soft);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--icf-text);
}

.icf-plan-chip-n {
  font-weight: 800;
  font-size: 0.8125rem;
}

/* A plan nobody is on is stated, not hidden — "Free: 0" is information about
   the price list. It is just not given the same weight as a plan with
   customers on it. */
.icf-plan-chip--empty {
  color: var(--icf-text-muted);
  background: transparent;
}

/* ── Accents ───────────────────────────────────────────────────────────────
   Bright value fills a stripe, a dot or a bar. -ink carries TEXT and an icon
   glyph, and every one is >= 4.5:1 on white. */
.icf-pstat--primary { --pstat-accent: #2447b8; --pstat-ink: var(--icf-ink-info); --pstat-tint: rgba(36,71,184,0.1); }
.icf-pstat--success { --pstat-accent: #22c55e; --pstat-ink: var(--icf-ink-success); --pstat-tint: rgba(34,197,94,0.12); }
.icf-pstat--violet  { --pstat-accent: #8b5cf6; --pstat-ink: #6d28d9; --pstat-tint: rgba(139,92,246,0.12); }
.icf-pstat--info    { --pstat-accent: #3b82f6; --pstat-ink: var(--icf-ink-info); --pstat-tint: rgba(59,130,246,0.12); }
.icf-pstat--amber   { --pstat-accent: #f59e0b; --pstat-ink: var(--icf-ink-warning); --pstat-tint: rgba(245,158,11,0.14); }
.icf-pstat--cyan    { --pstat-accent: #06b6d4; --pstat-ink: #0e7490; --pstat-tint: rgba(6,182,212,0.12); }

.icf-dot--success { background: #22c55e; }
.icf-dot--amber   { background: #f59e0b; }
.icf-dot--danger  { background: var(--icf-danger); }
.icf-dot--info    { background: #3b82f6; }

/* Suspended. Named --danger-accent rather than --danger because the tint and
   the ink here are a card accent, not the button family's fill. */
.icf-pstat--danger-accent {
  --pstat-accent: #ef4444;
  --pstat-ink: var(--icf-ink-danger);
  --pstat-tint: rgba(239,68,68,0.10);
}

/* -- Summary strip --------------------------------------------------------
   The compact row of figures that opens warranties, inventory, CRM,
   quotations, commissions and rentals. Six pages hand-rolled
   `style="display:flex;gap:1.75rem;flex-wrap:wrap;align-items:center;"` for
   it, which is exactly the drift .icf-pstat exists to stop on the superadmin
   board: one kind of number, one treatment.

   It is deliberately NOT .icf-pstat. That is a full bordered card with a
   32px icon tile, and four of those stacked over a list page make a header
   taller than the table it introduces. The RULE is what carries over, and
   the rule is the part that matters: --sum-accent is a FILL (the stripe),
   --sum-ink WRITES, and the ink is the shared --icf-ink-* token .icf-pstat
   already reads rather than a second copy of the hex.

   Every item gets a stripe, neutral by default, so a coloured figure is a
   variant of a row that already has structure rather than the only thing in
   it that has any. Logical properties throughout -- border-left would put
   the accent on the edge an Arabic reader leaves. */
.icf-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.icf-summary-item {
  min-width: 0;
  padding-inline-start: 0.7rem;
  border-inline-start: 3px solid var(--sum-accent, var(--icf-border-strong));
  border-radius: 1px;
}

/* Beats the refresh layer's own `.icf-stat-value { color: #111827 }` on
   SPECIFICITY (0,2,0 against 0,1,0), not on source order -- so it keeps
   working wherever in the file the strip ends up. */
.icf-summary-item .icf-stat-value {
  color: var(--sum-ink, #111827);
}

.icf-summary-item--success { --sum-accent: var(--icf-success); --sum-ink: var(--icf-ink-success); }
.icf-summary-item--warning { --sum-accent: var(--icf-warning); --sum-ink: var(--icf-ink-warning); }
.icf-summary-item--danger  { --sum-accent: var(--icf-danger);  --sum-ink: var(--icf-ink-danger); }

/* Pushes a trailing filter button to the far edge. Was a bare <div> carrying
   `style="flex:1"` on four separate pages. */
.icf-summary-spacer { flex: 1 1 0; }

/* ============================================
   Tenants — the owner's customer book
   ============================================
   Reuses .icf-pstat from the platform overview above rather than inventing a
   second card: these are the same kind of number on the same person's screen,
   and two card treatments for that is how a design drifts.

   The strip is also the filter. Clicking the card you are already filtered by
   clears it, so the summary doubles as the way back out of a filtered view —
   the status dropdown does not look like the thing that got you there. */

/* Four across for the tenants summary; the platform board's three-across
   ladder above still owns every other width. */
.icf-platform-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .icf-platform-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .icf-platform-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.icf-pstat--button {
  display: block;
  width: 100%;
  text-align: inherit;
  font: inherit;
  cursor: pointer;
  background: var(--icf-surface);
}

.icf-pstat--button:focus-visible {
  outline: none;
  border-color: var(--icf-primary-light);
  box-shadow: var(--icf-focus);
}

/* The applied filter. Marked with the card's own accent rather than one shared
   highlight, so "which one is on" and "which one is this" are the same signal. */
.icf-pstat--on {
  border-color: var(--pstat-accent);
  background: var(--pstat-tint);
}

.icf-pstat--on .icf-pstat-label { color: var(--pstat-ink); }

/* ── Pill ─────────────────────────────────────────────────────────────────
   A FILL, not coloured text. --icf-danger is #ef4444: 3.76:1 on white, which
   is fine behind a border or as a block of colour and short of the 4.5:1 that
   text needs. The days-left column rendered it as bold 13px type. Each variant
   below pairs a light tint with an ink that clears 4.5:1 against it. */
.icf-pill {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.icf-pill--danger  { background: #fee2e2; color: #b91c1c; }
.icf-pill--warning { background: #fef3c7; color: #92400e; }
.icf-pill--info    { background: #dbeafe; color: #1d4ed8; }
.icf-pill--ok      { background: #dcfce7; color: #15803d; }

/* ── Table ────────────────────────────────────────────────────────────── */
.icf-cell-title {
  font-weight: 700;
  color: var(--icf-text);
  line-height: 1.4;
}

.icf-cell-sub {
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  line-height: 1.4;
  /* Truncated, with the full value on the element's title. One tenant's support
     address was wrapping to three lines and taking its row with it. */
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icf-slug {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--icf-border);
  border-radius: 8px;
  background: var(--icf-surface-soft);
  /* Generics only. `SFMono-Regular` and `Menlo` name fonts this repo does not
     ship, which design-studio's font-resolves rule reports and is right to —
     and `ui-monospace` already maps to SF Mono on macOS, so naming them bought
     nothing. */
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--icf-text-muted);
  /* A slug is an identifier, so it stays LTR even in Arabic — `demo-carcare`
     reordered by the bidi algorithm is a different string to read. */
  direction: ltr;
  unicode-bidi: isolate;
  /* Same reason as the email above: `al-jazeera-silver-trad-and-investment-co-spc`
     wrapped to FOUR lines inside its own chip, making that row 138px against a
     normal 82. A slug is an identifier you scan, not prose you read. */
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* One mark on the row instead of two coloured cells inferring it. Drawn on the
   leading edge via a logical border so it mirrors with the page. */
.icf-tenant-row--attention > td:first-child {
  box-shadow: inset 3px 0 0 var(--icf-warning);
}

[dir="rtl"] .icf-tenant-row--attention > td:first-child {
  box-shadow: inset -3px 0 0 var(--icf-warning);
}

/* An LTR value inside a table whose direction is RTL — an email, a phone
   number, a slug. The isolation goes on a SPAN, not the cell: the cell keeps
   the table's own alignment, and only the string inside it reads left-to-right.
   Putting direction:ltr on the <td> instead drags the value to the wrong edge
   of an Arabic row and puts the truncation ellipsis on the front, which for an
   address hides the name and keeps the domain — the wrong half. */
.icf-cell-ltr {
  display: inline-block;
  max-width: 100%;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ── Period navigator ──────────────────────────────────────────────────────
   Which month a board is answering for. `/revenue/summary` has taken
   ?period=YYYY-MM since it was written and nothing on the page could change it,
   so the owner could only ever see the current month. */
.icf-period {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.icf-period-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--icf-text-muted);
}

.icf-period-value {
  min-width: 10ch;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--icf-text);
}

.icf-period-nav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--icf-border);
  border-radius: 8px;
  background: var(--icf-surface);
  color: var(--icf-text);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* The chevrons are written ‹ and › in source order and must point at the month
   they travel to, so they flip with the page like everything else. */
[dir="rtl"] .icf-period-nav {
  transform: scaleX(-1);
}

.icf-period-nav:hover:not(:disabled) {
  background: var(--icf-bg);
  border-color: var(--icf-border-strong);
}

.icf-period-nav:focus-visible {
  outline: none;
  border-color: var(--icf-primary-light);
  box-shadow: var(--icf-focus);
}

/* Disabled rather than hidden: a control that vanishes at the edge of its
   range leaves the reader wondering whether it was ever there. */
.icf-period-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The currency beside a figure. Smaller and quieter — "1,908" is the number
   and "SAR" is the unit, not a second number. */
.icf-pstat-unit {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--icf-text-muted);
  margin-inline-start: 0.25rem;
}