/* =================================================================
   AMLAK PMS — Design System
   Enterprise property management — UAE / MENA market
   Phase 6 Refresh (Agent DR-1, 2026-05-11)
     Eye-comfort foundation: warmer canvas, softer shadows, flat-card
     with borders, generous line-heights, AA contrast across the board.
     Backwards-compatible: every legacy selector preserved.
   ================================================================= */

/* =================================================================
   === 1. CSS Custom Properties (Tokens) ===
   ================================================================= */
:root {
  /* Neutrals — warmer canvas, less clinical than pure #F7F8FA */
  --color-bg-canvas: #F4F6F8;        /* was #F7F8FA */
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F0F2F6;        /* was #F1F3F7 */
  --color-bg-muted: #FBFCFD;         /* new: zebra stripe + ghost hover */
  --color-border: #E4E7EC;
  --color-border-soft: #EDEFF3;      /* new: lighter divider variant */
  --color-border-strong: #C5CBD6;

  /* Text */
  --color-text-primary: #0F1117;
  --color-text-secondary: #4B5563;
  --color-text-muted: #677078;       /* 4.65 on new canvas (#F4F6F8) — AA */
  --color-text-inverse: #FFFFFF;

  /* Brand — slightly desaturated for long-session comfort */
  --color-brand: #1F3A6F;            /* was #1B3A6B */
  --color-brand-light: #EEF2FB;      /* hover row / tab tint */
  --color-brand-soft: #D9E2F2;       /* new: gentle button-at-rest */
  --color-brand-dark: #142A55;       /* hover deepen */

  /* Sidebar (dark) */
  --color-sidebar-bg: #0F1117;
  --color-sidebar-bg-2: #14171F;     /* new: subtle gradient stop */
  --color-sidebar-text: #CBD5E1;
  --color-sidebar-active: #FFFFFF;
  --color-sidebar-accent: #3B82F6;
  --color-sidebar-hover: rgba(255, 255, 255, 0.05);  /* warm overlay */
  --color-sidebar-active-bg: rgba(59, 130, 246, 0.10);
  --color-sidebar-group: #9CA3AF;    /* 7.43 on sidebar bg — AAA */
  --color-sidebar-divider: rgba(255, 255, 255, 0.06);

  /* Semantic — saturated foregrounds for AA contrast on white + soft tints */
  --color-success: #047857;
  --color-success-bg: #ECFDF5;
  --color-success-soft: #F0FAF6;     /* new: easier-on-eye banner bg */
  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-warning-soft: #FEF8EC;     /* new */
  --color-danger: #B91C1C;
  --color-danger-bg: #FEF2F2;
  --color-danger-soft: #FCEEEE;      /* new */
  --color-info: #2563EB;
  --color-info-bg: #EFF6FF;
  --color-info-soft: #EEF4FC;        /* new */
  --color-purple: #7E22CE;
  --color-purple-bg: #F3E8FF;
  --color-purple-soft: #F6ECFD;      /* new */

  /* Finance — mirror semantic adjustments. */
  --color-credit: #047857;
  --color-debit: #B91C1C;
  --color-aed: #0F1117;

  /* Type */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font sizes — clean major-third-ish scale */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-label: 12.5px;
  --font-size-body: 14px;
  --font-size-table: 13.5px;
  --font-size-md: 15px;
  --font-size-section: 17px;
  --font-size-lg: 18px;
  --font-size-title: 22px;
  --font-size-display: 28px;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-heading: 1.4;
  --line-height-body: 1.55;

  /* Spacing — 8pt grid */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Radii — soften just enough */
  --radius-sm: 6px;     /* was 4px */
  --radius-md: 8px;     /* was 6px */
  --radius-lg: 12px;    /* was 8px */
  --radius-xl: 16px;    /* was 12px */
  --radius-pill: 999px;

  /* Shadows — softer at rest, prefer flat cards w/ borders */
  --shadow-xs: 0 1px 2px rgba(15, 17, 23, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 17, 23, 0.06);
  --shadow-md: 0 8px 16px rgba(15, 17, 23, 0.08);
  --shadow-lg: 0 16px 32px rgba(15, 17, 23, 0.12);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(31, 58, 111, 0.18);
  --focus-ring-danger: 0 0 0 3px rgba(185, 28, 28, 0.18);

  /* Motion */
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
}

/* =================================================================
   === 2. Base reset & typography ===
   ================================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  font-weight: 600;
}
h1 { font-size: var(--font-size-title); letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: var(--font-size-lg); letter-spacing: -0.01em; }
h3 { font-size: var(--font-size-section); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-body); }
h6 { font-size: var(--font-size-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-dark); text-decoration: underline; }

/* Numbers */
.num { font-variant-numeric: tabular-nums; }
.num-aed { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.01em; }

/* Default focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =================================================================
   === 3. Layout (chrome shell) ===
   ================================================================= */
.pms-layout { display: flex; min-height: 100vh; }
.pms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pms-page {
  padding: var(--space-6);
  flex: 1;
}

/* =================================================================
   === 4. Sidebar ===
   ================================================================= */
.pms-sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--color-sidebar-bg) 0%, var(--color-sidebar-bg-2) 100%);
  color: var(--color-sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.pms-sb-brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-sidebar-divider);
}
.pms-sb-brand-row { display: flex; align-items: center; gap: var(--space-3); }
.pms-sb-logo {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #3B82F6 0%, var(--color-brand) 100%);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
  overflow: hidden;
  flex-shrink: 0;
}
.pms-sb-logo--image {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.45);
}
.pms-sb-logo--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pms-sb-title { color: white; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; line-height: 1.2; }
.pms-sb-sub { color: var(--color-sidebar-group); font-size: var(--font-size-xs); margin-top: 2px; }

.pms-sb-user {
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--color-sidebar-divider);
}
.pms-sb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px; color: white;
  flex-shrink: 0;
}
.pms-sb-uname {
  color: white; font-size: 13px; font-weight: 500;
  line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 140px;
}
.pms-sb-role {
  color: var(--color-sidebar-group); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
}

.pms-sb-nav { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.pms-sb-nav::-webkit-scrollbar { width: 4px; }
.pms-sb-nav::-webkit-scrollbar-thumb { background: #1E2433; border-radius: 4px; }

.pms-sb-group-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-sidebar-group); font-weight: 600;
  padding: var(--space-4) var(--space-5) var(--space-2);
}
.pms-sb-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-5);
  margin-block: 1px;
  color: var(--color-sidebar-text);
  font-size: 13px;
  cursor: pointer;
  border-inline-start: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
  position: relative;
}
.pms-sb-item:hover { background: var(--color-sidebar-hover); color: white; }
.pms-sb-item.is-active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active);
  border-inline-start-color: var(--color-sidebar-accent);
  font-weight: 500;
}
.pms-sb-item-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: 0.85; display: grid; place-items: center;
}
.pms-sb-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms-sb-item-badge {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--color-danger); color: white;
  min-width: 18px; text-align: center;
}
.pms-sb-item-badge.is-info { background: var(--color-info); }
.pms-sb-item-badge.is-warn { background: var(--color-warning); }

.pms-sb-foot {
  border-top: 1px solid var(--color-sidebar-divider);
  padding: var(--space-3) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.pms-sb-lang {
  display: inline-flex; background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm); padding: 2px;
}
.pms-sb-lang button {
  background: transparent; border: 0; color: var(--color-sidebar-text);
  padding: 4px 10px; border-radius: 4px; font-size: 11px;
  cursor: pointer; font-weight: 500;
}
.pms-sb-lang button.is-active { background: rgba(255,255,255,0.10); color: white; }
.pms-sb-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  color: #4B5563; font-size: var(--font-size-xs);
}
.pms-sb-logout {
  background: transparent; border: 1px solid rgba(255,255,255,0.08);
  color: var(--color-sidebar-text); padding: 6px 10px;
  border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.pms-sb-logout:hover {
  background: rgba(220, 38, 38, 0.10);
  color: #FCA5A5;
  border-color: rgba(220,38,38,0.3);
}

/* =================================================================
   === 5. Topbar ===
   ================================================================= */
.pms-topbar {
  height: 56px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 20;
}
.pms-topbar-bc { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.pms-breadcrumb {
  font-size: 13px; color: var(--color-text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.pms-breadcrumb .crumb { cursor: pointer; }
.pms-breadcrumb .crumb:hover { color: var(--color-text-primary); }
.pms-breadcrumb .sep { color: var(--color-text-muted); font-size: 11px; }
.pms-breadcrumb .crumb.is-current { color: var(--color-text-primary); font-weight: 500; }

.pms-topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.pms-topbar-btn {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: grid; place-items: center; cursor: pointer;
  color: var(--color-text-secondary);
  position: relative; background: transparent; border: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pms-topbar-btn:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.pms-topbar-bell-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-danger);
  border: 2px solid white;
}
.pms-topbar-search {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 6px 10px;
  width: 320px; color: var(--color-text-secondary);
  font-size: 13px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pms-topbar-search:focus-within {
  border-color: var(--color-brand);
  background: white;
  box-shadow: var(--focus-ring);
}
.pms-topbar-search input {
  border: 0; outline: 0; background: transparent;
  flex: 1; font-size: 13px; color: var(--color-text-primary);
  font-family: inherit;
}
.pms-topbar-search kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: white; border: 1px solid var(--color-border);
  padding: 1px 5px; border-radius: 3px; color: var(--color-text-muted);
}

/* =================================================================
   === 6. Page header ===
   ================================================================= */
.pms-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.pms-page-title {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.pms-page-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.pms-page-actions {
  display: flex; gap: var(--space-2); flex-shrink: 0;
  align-items: center;
}

/* =================================================================
   === 7. Cards ===
   ================================================================= */
.pms-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.pms-card--raised { box-shadow: var(--shadow-sm); }
.pms-card--flat { box-shadow: none; }

.pms-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.pms-card-title {
  font-size: var(--font-size-section);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.pms-card-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.pms-card-body { padding: var(--space-5); }
.pms-card-body--flush { padding: 0; }
.pms-card--section { margin-bottom: var(--space-5); }
.pms-card--section .pms-card-header h3 {
  margin: 0; font-size: var(--font-size-section);
  font-weight: 600; color: var(--color-text-primary);
}

/* Quick-access tile grid (used on welcome + module landings) */
.pms-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.pms-quick-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 96px;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500; font-size: 13.5px;
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), background-color var(--transition-fast);
}
.pms-quick-tile:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.pms-quick-tile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-brand);
}
.pms-quick-tile:hover .pms-quick-tile__icon {
  background: var(--color-bg-surface);
}
.pms-quick-tile__label {
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Standard page container — replaces inline max-width wrappers */
.pms-page-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-8);
}
@media (min-width: 1280px) {
  .pms-page-container { padding: var(--space-7) var(--space-10); }
}
@media (max-width: 768px) {
  .pms-page-container { padding: var(--space-4) var(--space-4); }
}

.pms-card-footer {
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--color-text-secondary);
}

/* =================================================================
   === 8. KPI stats ===
   ================================================================= */
.pms-stat-grid,
.pms-grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 1280px) {
  .pms-stat-grid,
  .pms-grid-kpi { grid-template-columns: repeat(4, 1fr); }
}
.pms-stat {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: row; align-items: flex-start;
  gap: var(--space-4);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pms-stat-body {
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1 1 auto; min-width: 0;
}
.pms-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-brand-light);
  color: var(--color-brand);
  flex: 0 0 auto;
}
.pms-stat-icon--glyph { font-size: 22px; }
.pms-stat--success .pms-stat-icon { background: var(--color-success-soft); color: var(--color-success); }
.pms-stat--warning .pms-stat-icon { background: var(--color-warning-soft); color: var(--color-warning); }
.pms-stat--danger  .pms-stat-icon { background: var(--color-danger-soft);  color: var(--color-danger);  }
.pms-stat--info    .pms-stat-icon { background: var(--color-info-soft);    color: var(--color-info);    }
a.pms-stat:hover, .pms-stat.is-clickable:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.pms-stat-label {
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pms-stat-value {
  font-size: var(--font-size-display);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pms-stat-value .unit {
  font-size: 13px; font-weight: 500;
  color: var(--color-text-muted);
  margin-inline-start: 4px;
  letter-spacing: 0;
}
.pms-stat-delta {
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.pms-stat-delta.is-up { color: var(--color-success); }
.pms-stat-delta.is-down { color: var(--color-danger); }
.pms-stat-delta.is-flat { color: var(--color-text-secondary); }
.pms-stat-spark { height: 32px; margin-top: var(--space-2); }

/* Accent variants — left bar marker */
.pms-stat--accent::before,
.pms-stat--brand::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%; background: var(--color-brand);
}
.pms-stat--danger::before { background: var(--color-danger); }
.pms-stat--warning::before { background: var(--color-warning); }
.pms-stat--success::before { background: var(--color-success); }
.pms-stat--info::before { background: var(--color-info); }

/* Stat grid alt for KPI rows on tenants.php */
.pms-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Forced single-row variants for dashboards with many KPIs (5–7 cards).
   At narrow widths they wrap to 2–3 rows so the cards never get unusable. */
.pms-stats-grid--row5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.pms-stats-grid--row6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pms-stats-grid--row7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.pms-stats-grid--row8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.pms-stats-grid--row9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
@media (max-width: 1400px) {
  .pms-stats-grid--row7,
  .pms-stats-grid--row8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pms-stats-grid--row9 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1280px) {
  .pms-stats-grid--row5,
  .pms-stats-grid--row6,
  .pms-stats-grid--row7,
  .pms-stats-grid--row8,
  .pms-stats-grid--row9 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .pms-stats-grid--row5,
  .pms-stats-grid--row6,
  .pms-stats-grid--row7,
  .pms-stats-grid--row8,
  .pms-stats-grid--row9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .pms-stats-grid--row5,
  .pms-stats-grid--row6,
  .pms-stats-grid--row7,
  .pms-stats-grid--row8,
  .pms-stats-grid--row9 {
    grid-template-columns: 1fr;
  }
}
/* Inside the forced-row variants, let each stat card breathe but lock its
   internal padding tighter so 6–8 fit comfortably even at 1280px. */
.pms-stats-grid--row5 .pms-stat,
.pms-stats-grid--row6 .pms-stat,
.pms-stats-grid--row7 .pms-stat {
  padding: var(--space-4);
  gap: var(--space-3);
}
.pms-stats-grid--row8 .pms-stat,
.pms-stats-grid--row9 .pms-stat {
  padding: 12px 10px;
  gap: var(--space-2);
}
.pms-stats-grid--row8 .pms-stat-label,
.pms-stats-grid--row9 .pms-stat-label {
  font-size: 10px;
  letter-spacing: 0.05em;
}
.pms-stats-grid--row8 .pms-stat-delta,
.pms-stats-grid--row9 .pms-stat-delta {
  font-size: 11px;
}
.pms-stats-grid--row5 .pms-stat-value,
.pms-stats-grid--row6 .pms-stat-value,
.pms-stats-grid--row7 .pms-stat-value {
  font-size: 22px;
}
.pms-stats-grid--row8 .pms-stat-value,
.pms-stats-grid--row9 .pms-stat-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.pms-stats-grid--row5 .pms-stat-icon,
.pms-stats-grid--row6 .pms-stat-icon,
.pms-stats-grid--row7 .pms-stat-icon,
.pms-stats-grid--row8 .pms-stat-icon {
  width: 34px; height: 34px;
}

/* =================================================================
   === 9. Tables ===
   ================================================================= */
.pms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-table);
}
.pms-table thead th {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-strong);
  text-align: start;
  font-size: var(--font-size-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 600;
  padding: 10px var(--space-4);
  white-space: nowrap;
  position: sticky; top: 0;
}
.pms-table tbody td {
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-table);
  color: var(--color-text-primary);
  vertical-align: middle;
  line-height: var(--line-height-body);
}
.pms-table tbody tr { transition: background var(--transition-fast); }
.pms-table tbody tr:nth-child(even) { background: var(--color-bg-muted); }
.pms-table tbody tr:hover { background: var(--color-brand-light); }
.pms-table tbody tr.is-clickable { cursor: pointer; }
.pms-table tbody tr.is-overdue { background: var(--color-danger-soft); }
.pms-table tbody tr.is-overdue:hover { background: var(--color-danger-bg); }
.pms-table tbody tr:last-child td { border-bottom: 0; }

.pms-table .col-num,
.pms-table th.col-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pms-table .col-status,
.pms-table th.col-status { text-align: center; }
.pms-table .col-action,
.pms-table th.col-action { text-align: end; white-space: nowrap; }
.pms-table .cell-primary { font-weight: 500; color: var(--color-text-primary); }
.pms-table .cell-secondary {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.pms-table .cell-mono { font-family: var(--font-mono); font-size: 12px; }

.pms-table-caption {
  caption-side: top;
  text-align: start;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-section);
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
}

/* =================================================================
   === 10. Forms ===
   ================================================================= */
.pms-form-row {
  display: flex; gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.pms-form-group {
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1; min-width: 200px;
}
.pms-form-group--full { flex-basis: 100%; }
.pms-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  margin-bottom: 0;
}
.pms-form-label .req { color: var(--color-danger); margin-inline-start: 2px; }

.pms-form-input,
.pms-form-select,
.pms-form-textarea {
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pms-form-textarea {
  height: auto;
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-body);
}
.pms-form-input:focus,
.pms-form-select:focus,
.pms-form-textarea:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}
.pms-form-input::placeholder,
.pms-form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.pms-form-input.is-error,
.pms-form-select.is-error,
.pms-form-textarea.is-error {
  border-color: var(--color-danger);
}
.pms-form-input.is-error:focus,
.pms-form-select.is-error:focus,
.pms-form-textarea.is-error:focus {
  box-shadow: var(--focus-ring-danger);
}
.pms-form-error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: var(--space-1);
}
.pms-form-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.pms-form-input-group { display: flex; }
.pms-form-input-prefix {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px; color: var(--color-text-secondary); font-weight: 500;
  display: inline-flex; align-items: center;
}
.pms-form-input-group .pms-form-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Form sub-section heading inside a .grid form */
.pms-form-section-heading {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: var(--font-size-section);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
}
.pms-form-section-heading + .pms-form-section-heading,
.pms-form-section-heading.is-spaced { margin-top: var(--space-4); }

/* Inline filter form */
.pms-inline-form {
  display: flex; gap: var(--space-2);
  align-items: flex-end;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.pms-inline-form > label { margin: 0; }

/* Document/owner repeaters */
.pms-doc-repeater {
  grid-column: 1 / -1;
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
}
.pms-doc-repeater__title { font-weight: 600; margin-bottom: var(--space-2); }
.pms-doc-rows { display: grid; gap: var(--space-2); }
.pms-doc-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 2fr 2fr 2fr auto;
}
.pms-doc-hint {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.pms-owner-section {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 13px; color: var(--color-text-secondary);
  grid-column: 1 / -1;
}
.pms-owner-search { max-width: 420px; }
.pms-owner-rows {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
}
.pms-owner-row {
  display: flex; gap: var(--space-2); align-items: center;
}
.pms-owner-row > select { flex: 1 1 240px; }
.pms-owner-row > input[name="ownershipPercent[]"] { width: 120px; }
.pms-owner-actions { margin-top: var(--space-2); gap: var(--space-3); }
.pms-owner-remaining { font-size: 12px; color: var(--color-text-secondary); }
.pms-form-hint-inline {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.pms-property-type-delete {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 13px; color: var(--color-text-secondary);
}
.pms-property-type-delete select { min-width: 240px; }

.pms-form-textarea-address {
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: white;
}

/* =================================================================
   === 10.5  Enterprise-form pattern + legacy form safety-net  ===
   Targets `.enterprise-form` (used by properties.php, units.php,
   tenants.php, contracts.php, owners.php, etc.) and any other raw
   form inside `.pms-shell-main main` that hasn't been wrapped in the
   modern .pms-form helpers. This brings the entire codebase to a
   consistent visual baseline WITHOUT touching markup.
   ================================================================= */

/* The form is itself a card-like surface */
.enterprise-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: var(--color-bg-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (min-width: 768px) {
  .enterprise-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .enterprise-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each <label> in .enterprise-form is a stacked field group.
   The browsers' default inline rendering becomes a column. */
.enterprise-form > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  min-width: 0;
}

/* Re-style the actual form controls (inputs, selects, textareas) so
   they look like the design-system .pms-input — but only when they
   live inside .enterprise-form or any form under .pms-shell-main that
   isn't already using the modern .pms-input class. */
.enterprise-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.enterprise-form select,
.enterprise-form textarea,
.pms-shell-main main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not(.pms-input):not(.input):not(.pms-sb-search-kbd),
.pms-shell-main main form select:not(.pms-input):not(.input),
.pms-shell-main main form textarea:not(.pms-input):not(.input) {
  font: inherit;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.enterprise-form textarea,
.pms-shell-main main form textarea:not(.pms-input):not(.input) {
  min-height: 88px;
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}
.enterprise-form select,
.pms-shell-main main form select:not(.pms-input):not(.input) {
  padding-inline-end: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%),
                    linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
}
[dir="rtl"] .enterprise-form select,
[dir="rtl"] .pms-shell-main main form select:not(.pms-input):not(.input) {
  background-position: 18px 50%, 13px 50%;
}
.enterprise-form input:focus,
.enterprise-form select:focus,
.enterprise-form textarea:focus,
.pms-shell-main main form input:focus,
.pms-shell-main main form select:focus,
.pms-shell-main main form textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(31, 58, 111, 0.15);
}
.enterprise-form input::placeholder,
.enterprise-form textarea::placeholder {
  color: var(--color-text-muted);
}
.enterprise-form input[readonly],
.enterprise-form input:disabled,
.enterprise-form select:disabled,
.enterprise-form textarea[readonly],
.enterprise-form textarea:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* Buttons inside enterprise forms that have NO design-system class get a default. */
.enterprise-form button:not(.pms-btn):not(.btn),
.pms-shell-main main form button:not(.pms-btn):not(.btn):not(.pms-sidebar-toggle):not(.pms-topbar__user-trigger):not(.pms-sb-group-label):not(.pms-sidebar__group-toggle):not(.pms-company-switcher-trigger):not(.pms-locale-toggle):not(.pms-notifications-trigger) {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  height: 36px; padding: 0 14px;
  background: var(--color-brand); color: white;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.enterprise-form button:not(.pms-btn):not(.btn):hover,
.pms-shell-main main form button:not(.pms-btn):not(.btn):not(.pms-sidebar-toggle):not(.pms-topbar__user-trigger):not(.pms-sb-group-label):not(.pms-sidebar__group-toggle):not(.pms-company-switcher-trigger):not(.pms-locale-toggle):not(.pms-notifications-trigger):hover {
  background: var(--color-brand-dark); border-color: var(--color-brand-dark);
}
/* Secondary look for inline "Switch", "Delete", "Filter" buttons */
.enterprise-form button[type="submit"][formaction*="switch"]:not(.pms-btn),
.enterprise-form button[name="action"][value*="delete"]:not(.pms-btn),
.enterprise-form button:not([type="submit"]):not(.pms-btn):not(.btn),
.pms-shell-main main form button:not([type="submit"]):not(.pms-btn):not(.btn):not(.pms-sidebar-toggle):not(.pms-topbar__user-trigger):not(.pms-sb-group-label):not(.pms-sidebar__group-toggle):not(.pms-company-switcher-trigger):not(.pms-locale-toggle):not(.pms-notifications-trigger) {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* Inline checkbox / radio rows inside .enterprise-form */
.enterprise-form input[type="checkbox"],
.enterprise-form input[type="radio"] {
  width: 16px; height: 16px;
  margin-inline-end: 6px;
  accent-color: var(--color-brand);
}

/* File inputs */
.enterprise-form input[type="file"],
.pms-shell-main main form input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Datalist hint text alongside an input */
.enterprise-form small,
.enterprise-form .pms-muted,
.enterprise-form .pms-help-text {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* Full-width row marker — use `class="span-all"` or grid-column to make
   a field span every column of the form. */
.enterprise-form > label.span-all,
.enterprise-form > .span-all,
.enterprise-form > .grid-col-full {
  grid-column: 1 / -1;
}
.enterprise-form .pms-form-section-heading,
.enterprise-form > h3,
.enterprise-form > h4 {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 var(--space-1) 0;
  padding-bottom: var(--space-2);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

/* Form action bar (submit + cancel) anchored to bottom of the form */
.enterprise-form .form-actions,
.enterprise-form .pms-form-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

/* Inline (filter) form — already styled above; tighten labels  */
.pms-inline-form > label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--color-text-secondary);
}
.pms-inline-form > label > input,
.pms-inline-form > label > select {
  width: auto; min-width: 200px;
}

/* Cards that immediately wrap a form: drop their internal padding so
   the .enterprise-form's own padding takes over and the header stays
   flush with the field grid. */
.pms-card > .enterprise-form { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* =================================================================
   === 11. Buttons ===
   ================================================================= */
.pms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.pms-btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.pms-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pms-btn-primary { background: var(--color-brand); color: white; }
.pms-btn-primary:hover { background: var(--color-brand-dark); color: white; text-decoration: none; }

.pms-btn-secondary {
  background: white;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.pms-btn-secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-secondary);
  text-decoration: none;
}

.pms-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.pms-btn-ghost:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  text-decoration: none;
}

.pms-btn-danger { background: var(--color-danger); color: white; }
.pms-btn-danger:hover { background: #991B1B; color: white; text-decoration: none; }
.pms-btn-danger:focus-visible { box-shadow: var(--focus-ring-danger); }

.pms-btn-success { background: var(--color-success); color: white; }
.pms-btn-success:hover { background: #036648; color: white; text-decoration: none; }

.pms-btn-warning { background: var(--color-warning); color: white; }
.pms-btn-warning:hover { background: #92400E; color: white; text-decoration: none; }
.pms-btn-warning:focus-visible { box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.22); }

.pms-btn-brand-soft {
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
}
.pms-btn-brand-soft:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  text-decoration: none;
}

.pms-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}
.pms-btn-lg {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}
.pms-btn-icon { padding: 0; width: 36px; }
.pms-btn-icon.pms-btn-sm { width: 28px; }
.pms-btn-icon.pms-btn-lg { width: 44px; }

.pms-btn-group { display: inline-flex; }
.pms-btn-group .pms-btn { border-radius: 0; border-inline-end-width: 0; }
.pms-btn-group .pms-btn:first-child {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}
.pms-btn-group .pms-btn:last-child {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  border-inline-end-width: 1px;
}

/* =================================================================
   === 12. Badges ===
   ================================================================= */
.pms-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 10px;
  font-size: var(--font-size-label);
  font-weight: 500;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}
.pms-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.pms-badge--clean::before { display: none; }
.pms-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.pms-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.pms-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.pms-badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.pms-badge-neutral { background: var(--color-bg-subtle);  color: var(--color-text-secondary); }
.pms-badge-brand   { background: var(--color-brand-light); color: var(--color-brand-dark); }
.pms-badge-purple  { background: var(--color-purple-bg);  color: var(--color-purple); }

/* =================================================================
   === 13. Alerts ===
   ================================================================= */
.pms-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-body);
}
.pms-alert-icon { flex-shrink: 0; margin-top: 1px; }
.pms-alert-body { flex: 1; }
.pms-alert-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.pms-alert-text { color: var(--color-text-secondary); }

.pms-alert-success {
  background: var(--color-success-soft);
  border-color: rgba(4, 120, 87, 0.18);
}
.pms-alert-success .pms-alert-icon { color: var(--color-success); }
.pms-alert-warning {
  background: var(--color-warning-soft);
  border-color: rgba(180, 83, 9, 0.18);
}
.pms-alert-warning .pms-alert-icon { color: var(--color-warning); }
.pms-alert-danger {
  background: var(--color-danger-soft);
  border-color: rgba(185, 28, 28, 0.18);
}
.pms-alert-danger .pms-alert-icon { color: var(--color-danger); }
.pms-alert-info {
  background: var(--color-info-soft);
  border-color: rgba(37, 99, 235, 0.18);
}
.pms-alert-info .pms-alert-icon { color: var(--color-info); }

/* =================================================================
   === 14. Empty states ===
   ================================================================= */
.pms-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.pms-empty-icon {
  width: 48px; height: 48px;
  color: var(--color-text-muted);
  display: inline-grid; place-items: center;
}
.pms-empty-title {
  font-size: var(--font-size-section);
  font-weight: 600;
  color: var(--color-text-primary);
}
.pms-empty-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 360px;
}

/* =================================================================
   === 15. Modals & slide-overs ===
   ================================================================= */
.pms-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 17, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 50;
  animation: pms-fade 0.18s ease;
}
.pms-slideover {
  position: fixed; top: 0; inset-inline-end: 0; bottom: 0;
  width: min(480px, 100vw);
  background: white;
  z-index: 51;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pms-slide 0.22s ease;
}
.pms-slideover-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.pms-slideover-title {
  font-size: var(--font-size-section);
  font-weight: 600;
  margin: 0;
}
.pms-slideover-body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.pms-slideover-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}
@keyframes pms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pms-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Modal scaffold (used by properties.php map picker) */
.pms-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
}
.pms-modal-backdrop.is-open { display: block; }
.pms-modal {
  width: min(560px, 95vw);
  margin: 40px auto;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.pms-modal--wide { width: min(900px, 95vw); }
.pms-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
}
.pms-modal-map {
  height: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* =================================================================
   === 16. Utilities ===
   ================================================================= */
/* Avatars / identity cells */
.pms-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; color: white;
  flex-shrink: 0;
}
.pms-avatar-md { width: 36px; height: 36px; font-size: 13px; }
.pms-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

.pms-id-cell { display: flex; align-items: center; gap: 10px; }
.pms-id-cell .name { font-weight: 500; }
.pms-id-cell .sub { font-size: 11px; color: var(--color-text-secondary); }

/* Tabs */
.pms-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.pms-tab {
  background: transparent; border: 0;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pms-tab:hover { color: var(--color-text-primary); }
.pms-tab.is-active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}
.pms-tab-count {
  background: var(--color-bg-subtle); color: var(--color-text-secondary);
  font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 600;
}
.pms-tab.is-active .pms-tab-count {
  background: var(--color-brand-light);
  color: var(--color-brand);
}

/* Progress / occupancy */
.pms-progress {
  height: 6px;
  background: var(--color-bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.pms-progress-bar {
  height: 100%;
  background: var(--color-brand);
  border-radius: 3px;
  transition: width 0.3s;
}
.pms-progress-bar.is-success { background: var(--color-success); }
.pms-progress-bar.is-warning { background: var(--color-warning); }
.pms-progress-bar.is-danger { background: var(--color-danger); }

.pms-occ-meter {
  display: flex; align-items: center; gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.pms-occ-meter .bar {
  width: 60px; height: 4px;
  background: var(--color-bg-subtle);
  border-radius: 2px; overflow: hidden;
}
.pms-occ-meter .fill { height: 100%; background: var(--color-success); }
.pms-occ-meter .pct {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Filter bar */
.pms-filter-bar {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.pms-filter-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-bg-subtle);
  padding: 6px 10px; border-radius: var(--radius-sm);
  flex: 1; min-width: 200px; max-width: 320px;
}
.pms-filter-search input {
  border: 0; background: transparent; outline: 0;
  flex: 1; font-size: 13px; color: var(--color-text-primary);
  font-family: inherit;
}
.pms-filter-pills {
  display: flex; gap: 4px; padding: 2px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}
.pms-filter-pill {
  background: transparent; border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-family: inherit;
}
.pms-filter-pill.is-active {
  background: white;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}

/* Finance amounts */
.pms-amount-credit {
  color: var(--color-credit);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pms-amount-debit {
  color: var(--color-debit);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pms-amount-neutral {
  color: var(--color-aed);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pms-amount-zero {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.pms-amount-cur {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-inline-end: 4px;
  font-weight: 500;
}

/* Grids
 * PMS_R6_GRID_AUTOFIT_RESTORE_V1 (2026-05-12) — restore the auto-fit
 * column behaviour the backend `_layout.php` originally provided. Every
 * php-backend/public/ui screen was authored against
 *   .grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
 * so form labels and model cards land side-by-side when there's room.
 * When the modern PMS shell stripped that rule, screens rendered
 * single-column and looked cramped on wide displays. Explicit .grid-N
 * variants below still override the default, so the change is safe. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }

/* Flex/spacing utils */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.m-0 { margin: 0; }

.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-md { font-size: 15px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 22px; }
.text-2xl { font-size: 28px; }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-text-primary); }
.text-brand { color: var(--color-brand); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.text-end { text-align: end; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tabular { font-variant-numeric: tabular-nums; }
.full-w { width: 100%; }
.divider { height: 1px; background: var(--color-border); margin: var(--space-4) 0; }

.is-hidden { display: none; }
.is-invisible { visibility: hidden; }
.inline-block { display: inline-block; }
.col-span-full { grid-column: 1 / -1; }
.pms-muted { color: var(--color-text-muted); }

/* Skip-to-main accessibility link (preserve a11y from Phase 4) */
.pms-skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  background: var(--color-brand); color: white;
  padding: var(--space-3) var(--space-4);
  z-index: 9999;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.pms-skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  width: auto; height: auto;
  outline: 2px solid var(--color-sidebar-accent);
  outline-offset: 2px;
}

/* =================================================================
   === 15.8  Special Terms repeater (tenancy_applications.php)  ===
   White surface (replaces the old blue-tinted gradient), inline ×
   delete buttons next to each input (not stacked below). The whole
   block keeps a subtle brand left-rail so it still reads as a
   distinct "additional clauses" section.
   ================================================================= */
.pms-special-terms {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
}
.pms-special-terms__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.pms-special-terms__title {
  color: var(--color-brand-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pms-special-terms__hint {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.pms-special-terms__hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 4px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* Reset legacy ol/li styling so each row is a flex stripe. */
.special-terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.special-term-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
}
.special-term-no {
  flex: 0 0 auto;
  width: 28px;
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
  text-align: end;
  user-select: none;
}
.special-term-row > input[type="text"] {
  /* Width override against the global .enterprise-form input width:100% */
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.special-term-row > input[type="text"]:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(31, 58, 111, 0.15);
}
.special-term-remove {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px; font-weight: 500;
  line-height: 1;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.special-term-remove:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.special-term-remove:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
  border-color: var(--color-danger);
}

@media (max-width: 640px) {
  .special-term-row > input[type="text"] { font-size: 13px; }
  .special-term-no { width: 22px; font-size: 12px; }
  .special-term-remove { width: 28px; height: 28px; font-size: 16px; }
}

/* =================================================================
   === 15.7  Map-picker fallback (Leaflet/OSM load failure)  ===
   Renders inside #mapPickerContainer when ensureLeaflet() rejects
   (CSP blocks unpkg, offline, etc.). Friendly inline panel with
   manual coords input — replaces the legacy native alert().
   ================================================================= */
.pms-map-fallback {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  height: 100%;
  min-height: 320px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
}
.pms-map-fallback__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-warning-soft, rgba(217, 119, 6, 0.12));
  color: var(--color-warning, #B45309);
}
.pms-map-fallback__title {
  font-size: 16px; font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.pms-map-fallback__text {
  font-size: 13.5px; line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 48ch;
}
.pms-map-fallback__hint {
  font-size: 12.5px; line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 52ch;
}
.pms-map-fallback__manual {
  width: 100%;
  max-width: 420px;
  margin-top: var(--space-2);
  display: flex; flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.pms-map-fallback__label {
  font-size: 12px; font-weight: 500;
  color: var(--color-text-secondary);
  text-align: start;
}
.pms-map-fallback__row {
  display: flex; gap: var(--space-2); align-items: stretch;
}
.pms-map-fallback__input {
  flex: 1 1 auto;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pms-map-fallback__input:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(31, 58, 111, 0.15);
}
.pms-map-fallback__input.is-error {
  border-color: var(--color-danger, #B91C1C);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

/* =================================================================
   === 15.6  Confirmation dialog (.pms-confirm)  ===
   Small reusable confirm modal used by:
     - properties.php  "register under company?" no-owner gate
   Pattern: backdrop + centered panel + icon halo + title + body
            + secondary "Cancel" + primary "Confirm" actions.
   All inline-style fallbacks live on the markup itself so the dialog
   stays hidden even if this CSS hasn't loaded yet.
   ================================================================= */
.pms-confirm {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  pointer-events: none;
}
.pms-confirm[hidden] { display: none !important; }
.pms-confirm__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 17, 23, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}
.pms-confirm__panel {
  position: relative;
  pointer-events: auto;
  width: min(440px, calc(100vw - 32px));
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -12px rgba(15, 17, 23, 0.28),
              0 14px 28px -6px rgba(15, 17, 23, 0.18);
  padding: var(--space-6) var(--space-6) var(--space-5) var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  text-align: start;
}
.pms-confirm__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-info-soft, rgba(59, 130, 246, 0.10));
  color: var(--color-info, #2563EB);
}
.pms-confirm__title {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.pms-confirm__text {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--color-text-secondary);
}
.pms-confirm__company-pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  height: 26px;
  padding: 0 10px;
  background: var(--color-brand-light, rgba(31, 58, 111, 0.08));
  color: var(--color-brand, #1F3A6F);
  border-radius: var(--radius-pill, 999px);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.01em;
}
.pms-confirm__company-pill svg { color: var(--color-brand, #1F3A6F); opacity: 0.85; }
.pms-confirm__actions {
  display: flex; gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
[dir="rtl"] .pms-confirm__actions { justify-content: flex-end; }
@media (max-width: 480px) {
  .pms-confirm__panel { padding: var(--space-5) var(--space-4); }
  .pms-confirm__actions { flex-direction: column-reverse; }
  .pms-confirm__actions .pms-btn { width: 100%; }
}

/* =================================================================
   === 15.5  Command Palette (Ctrl/Cmd + K)  ===
   Triggered from the sidebar [data-pms-search-stub] button or the
   global Ctrl+K hotkey. JS in assets/js/cmdk.js; markup in
   includes/footer.php; index built from $resolvedGroups.
   ================================================================= */
.pms-cmdk {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 12vh, 120px);
  pointer-events: none;
}
.pms-cmdk[hidden] { display: none !important; }
.pms-cmdk__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 17, 23, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.pms-cmdk.is-open .pms-cmdk__backdrop { opacity: 1; }
.pms-cmdk__panel {
  position: relative;
  pointer-events: auto;
  width: min(640px, calc(100vw - 32px));
  max-height: min(70vh, 600px);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 30px 60px -12px rgba(15, 17, 23, 0.28),
              0 14px 28px -6px rgba(15, 17, 23, 0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(-6px) scale(0.985);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.pms-cmdk.is-open .pms-cmdk__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pms-cmdk__header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.pms-cmdk__search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.pms-cmdk__input {
  flex: 1 1 auto;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  color: var(--color-text-primary);
  padding: 4px 0;
  min-width: 0;
}
.pms-cmdk__input::placeholder { color: var(--color-text-muted); }
.pms-cmdk__kbd-esc {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pms-cmdk__title-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pms-cmdk__list {
  list-style: none;
  margin: 0; padding: var(--space-2);
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-gutter: stable;
}
.pms-cmdk__list:empty { padding: 0; }

.pms-cmdk__list .pms-cmdk-group {
  padding: 8px 12px 4px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}
.pms-cmdk__list .pms-cmdk-group:first-child { padding-top: 4px; }
.pms-cmdk-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  color: var(--color-text-primary);
  transition: background-color 0.08s ease, color 0.08s ease;
}
.pms-cmdk-item.is-active,
.pms-cmdk-item:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}
.pms-cmdk-item.is-active .pms-cmdk-item__group,
.pms-cmdk-item:hover .pms-cmdk-item__group {
  color: var(--color-brand);
}
.pms-cmdk-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.pms-cmdk-item.is-active .pms-cmdk-item__icon,
.pms-cmdk-item:hover .pms-cmdk-item__icon {
  color: var(--color-brand);
}
.pms-cmdk-item__label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pms-cmdk-item__group {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pms-cmdk__empty {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
}
.pms-cmdk__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.pms-cmdk__empty-title {
  font-size: 14px; font-weight: 600; color: var(--color-text-primary);
}
.pms-cmdk__empty-text {
  font-size: 12.5px; color: var(--color-text-secondary);
  max-width: 36ch;
}

.pms-cmdk__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  font-size: 11.5px;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.pms-cmdk__shortcuts {
  display: inline-flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.pms-cmdk__shortcut {
  display: inline-flex; gap: 4px; align-items: center;
}
.pms-cmdk__shortcut kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; font-weight: 500;
  color: var(--color-text-secondary);
}
.pms-cmdk__count {
  font-variant-numeric: tabular-nums;
}

body.pms-cmdk-locked { overflow: hidden; }

@media (max-width: 640px) {
  .pms-cmdk { padding-top: 40px; padding-inline: 16px; }
  .pms-cmdk__panel { width: 100%; max-height: calc(100vh - 80px); }
}

/* =================================================================
   === 16.5  Welcome / Hero / Section patterns  ===
   Used by php-backend/public/ui/welcome.php (flagship landing) and
   re-usable by any other landing pages (dashboards, module homes).
   ================================================================= */

/* — Page container variants — */
.pms-page-container--narrow { max-width: 1240px; }

/* Full-width shell override:
   force all primary page containers to use the full available viewport width
   (minus sidebar), while keeping internal padding for readability. */
.pms-page-container,
.pms-page-container--narrow {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* — Hero — */
.pms-hero {
  position: relative;
  margin-block: 0 var(--space-6);
  padding: var(--space-8) var(--space-10);
  background:
    radial-gradient(circle at 95% -10%, rgba(31, 58, 111, 0.06), transparent 55%),
    linear-gradient(180deg, #FBFCFD 0%, var(--color-bg-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
@media (min-width: 1280px) {
  .pms-hero { padding: var(--space-10) var(--space-12); }
}
.pms-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(31, 58, 111, 0.04) 0%, transparent 28%, transparent 72%, rgba(31, 58, 111, 0.04) 100%);
  pointer-events: none;
  opacity: 0.7;
}
.pms-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 768px) {
  .pms-hero { padding: var(--space-6) var(--space-5); }
  .pms-hero__inner { grid-template-columns: 1fr; }
  .pms-hero__art { display: none; }
}
.pms-hero__eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pms-hero__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill, 999px);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pms-hero__pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-inverse);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.pms-hero__company {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  font-size: 12px; font-weight: 500;
}
.pms-hero__company svg { color: var(--color-text-muted); }
.pms-hero__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.18;
}
.pms-hero__name {
  background: linear-gradient(135deg, var(--color-brand) 0%, #2C5AA0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-brand); /* fallback */
}
.pms-hero__sub {
  margin: var(--space-2) 0 0 0;
  max-width: 56ch;
  font-size: 14px; line-height: 1.6;
  color: var(--color-text-secondary);
}
.pms-hero__meta {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: rgba(31, 58, 111, 0.04);
  border: 1px solid rgba(31, 58, 111, 0.08);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.pms-hero__meta-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.pms-hero__meta-item svg { color: var(--color-text-muted); }
.pms-hero__meta-tz {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-inline-start: 4px;
}
.pms-hero__meta-sep {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.pms-hero__art {
  color: var(--color-brand);
  opacity: 0.92;
  flex-shrink: 0;
}

/* — Section pattern — */
.pms-section { margin-block: var(--space-6); }
.pms-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  /* Slight horizontal inset so the section title/subtitle don't sit flush
     against the page-container edge — visually aligns them closer to where
     card body content (which has its own inner padding) starts. */
  padding-inline: var(--space-4);
}
@media (min-width: 1280px) {
  .pms-section-head { padding-inline: var(--space-5); }
}
.pms-section-title {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.pms-section-sub {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pms-section-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--color-brand);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pms-section-link:hover {
  background: var(--color-brand-light);
}
.pms-section-link--muted {
  color: var(--color-text-muted);
}
.pms-section-link--muted:hover {
  background: transparent;
  color: var(--color-text-secondary);
}
.pms-section--grid21 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) {
  .pms-section--grid21 { grid-template-columns: 1fr; }
}

/* — Next-best-action card — */
.pms-action-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 58, 111, 0.08), transparent 50%),
    var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.pms-action-card__rail {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-info) 100%);
}
.pms-action-card__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}
.pms-action-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pms-action-card__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.pms-action-card__title {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.pms-action-card__text {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 50ch;
}
.pms-action-card__cta {
  margin-top: var(--space-3);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
}

/* — Quick card (container around quick-grid) — */
.pms-quick-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.pms-quick-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.pms-quick-card__title {
  margin: 0;
  font-size: 15px; font-weight: 600;
  color: var(--color-text-primary);
}
.pms-quick-card__hint {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* — Rich quick-tile (overrides the simple one for welcome) — */
.pms-quick-card .pms-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-3);
  gap: var(--space-2);
}
@media (min-width: 1280px) {
  .pms-quick-card .pms-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pms-quick-card .pms-quick-tile {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  min-height: 64px;
  padding: var(--space-3);
  gap: var(--space-3);
  background: var(--color-bg-surface);
  border-color: transparent;
}
.pms-quick-card .pms-quick-tile:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
  box-shadow: none;
  transform: none;
}
.pms-quick-tile__icon {
  width: 36px; height: 36px;
  background: var(--color-bg-subtle);
  flex-shrink: 0;
}
.pms-quick-card .pms-quick-tile:hover .pms-quick-tile__icon {
  background: var(--color-bg-surface);
}
.pms-quick-tile__text {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-width: 0;
}
.pms-quick-tile__label {
  font-size: 13.5px; font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.pms-quick-tile__sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.pms-quick-tile__chev {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.pms-quick-card .pms-quick-tile:hover .pms-quick-tile__chev {
  opacity: 1; transform: translateX(0);
  color: var(--color-brand);
}
[dir="rtl"] .pms-quick-tile__chev svg { transform: scaleX(-1); }
[dir="rtl"] .pms-quick-card .pms-quick-tile:hover .pms-quick-tile__chev { transform: translateX(0); }
[dir="rtl"] .pms-quick-tile__chev { transform: translateX(4px); }

/* — Timeline (Recent Activity) — */
.pms-timeline {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  position: relative;
}
.pms-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--space-5) + 5px);
  top: var(--space-4);
  bottom: var(--space-4);
  width: 1px;
  background: var(--color-border);
}
.pms-timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  align-items: start;
}
.pms-timeline__row + .pms-timeline__row {
  border-top: 1px dashed var(--color-border);
}
.pms-timeline__dot {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-text-muted);
  margin-top: 6px;
  margin-inline-start: 0;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--color-bg-surface);
}
.pms-timeline__dot--success { background: var(--color-success); }
.pms-timeline__dot--info    { background: var(--color-info); }
.pms-timeline__dot--danger  { background: var(--color-danger); }
.pms-timeline__dot--brand   { background: var(--color-brand); }
.pms-timeline__dot--neutral { background: var(--color-text-muted); }
.pms-timeline__body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pms-timeline__line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
}
.pms-timeline__action {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pms-timeline__entity {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.pms-timeline__id {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
}
.pms-timeline__time {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* — Footer status row — */
.pms-page-footer-status {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.pms-status-row {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}
.pms-status-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-text-muted);
}
.pms-status-row__dot--ok {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.pms-status-row__sep { opacity: 0.5; }
.pms-status-row__text strong {
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* =================================================================
   === 17. Legacy compatibility shims ===
   Map old class names emitted by ~150 PHP pages to the new tokens
   so any drop-in style doesn't break older pages while helpers
   transition. (Preserved verbatim from Phase 4 Wave 1.)
   ================================================================= */

/* Legacy layout — pre-existing topbar + layout wrapper (header.php) */
.layout { display: flex; min-height: 100vh; }
.topbar {
  height: 56px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6);
  position: sticky; top: 0; z-index: 20;
  justify-content: space-between;
}
.brand {
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  text-decoration: none;
}
.brand a { color: inherit; text-decoration: none; }
.content {
  flex: 1; min-width: 0;
  padding: var(--space-6);
  background: var(--color-bg-canvas);
}

/* Legacy sidebar BEM classes */
.pms-sidebar__brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-sidebar-divider);
}
.pms-sidebar__brand a {
  color: white; text-decoration: none;
  display: flex; align-items: center; gap: var(--space-3);
}
.pms-sidebar__brand-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #3B82F6 0%, var(--color-brand) 100%);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}
.pms-sidebar__brand-text { display: flex; flex-direction: column; }
.pms-sidebar__brand-title {
  color: white; font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.pms-sidebar__brand-sub {
  color: var(--color-sidebar-group);
  font-size: 11px;
}

.pms-sidebar__user {
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--color-sidebar-divider);
}
.pms-sidebar__user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand);
  color: white; font-weight: 600; font-size: 12px;
  display: grid; place-items: center; flex-shrink: 0;
}
.pms-sidebar__user-meta { min-width: 0; display: flex; flex-direction: column; }
.pms-sidebar__user-name {
  color: white; font-size: 13px; font-weight: 500;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.pms-sidebar__user-role {
  color: var(--color-sidebar-group);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.pms-sidebar__group { padding: 0; }
.pms-sidebar__group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-5) var(--space-2);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-sidebar-group); font-weight: 600;
  font-family: inherit;
}
.pms-sidebar__group-toggle:hover { color: white; }
.pms-sidebar__group .pms-caret {
  transition: transform 0.18s;
  display: inline-block;
}
.pms-sidebar__group.is-open .pms-caret { transform: rotate(90deg); }
.pms-sidebar__group-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 0.22s ease;
}
.pms-sidebar__group.is-open .pms-sidebar__group-list { max-height: 1200px; }

.pms-sidebar__footer {
  border-top: 1px solid var(--color-sidebar-divider);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--color-text-muted); font-size: 11px;
}
.pms-sidebar__footer a { color: var(--color-sidebar-text); text-decoration: none; }
.pms-sidebar__footer a:hover { color: white; }

.pms-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-5);
  margin-block: 1px;
  color: var(--color-sidebar-text);
  font-size: 13px;
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pms-nav-item:hover {
  background: var(--color-sidebar-hover);
  color: white;
  text-decoration: none;
}
.pms-nav-item.active, .pms-nav-item.is-active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active);
  border-inline-start-color: var(--color-sidebar-accent);
  font-weight: 500;
}
.pms-nav-icon {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  opacity: 0.85; flex-shrink: 0;
}
.nav-link { color: inherit; text-decoration: none; }

/* Legacy stat card classes (pre-Phase 4) */
.pms-stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
a.pms-stat-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.pms-stat-card .pms-stat-title {
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pms-stat-card .pms-stat-value {
  font-size: var(--font-size-display);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pms-stat-card .pms-stat-subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.pms-stat-card .pms-stat-icon {
  font-size: 18px;
  color: var(--color-text-muted);
}
.pms-stat-primary::before,
.pms-stat-info::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%;
  background: var(--color-brand);
}
.pms-stat-success::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%;
  background: var(--color-success);
}
.pms-stat-warning::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%;
  background: var(--color-warning);
}
.pms-stat-danger::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 3px; height: 100%;
  background: var(--color-danger);
}

/* Legacy page header BEM */
.pms-page-header__title { display: flex; flex-direction: column; gap: 4px; }
.pms-page-header__breadcrumb {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pms-page-header__actions {
  display: flex; gap: var(--space-2);
  flex-shrink: 0;
}
.pms-page-header h1 {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Legacy empty state */
.pms-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.pms-empty-state__icon {
  width: 48px; height: 48px;
  color: var(--color-text-muted);
  font-size: 32px;
  display: inline-grid; place-items: center;
}
.pms-empty-state__title {
  font-size: var(--font-size-section);
  font-weight: 600;
  margin: 0;
}
.pms-empty-state__message {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 360px;
  line-height: 1.6;
  margin: 0;
}

/* Legacy table wrap */
.pms-table-wrap {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}

/* Legacy badge aliases — keep working w/ helper alias map */
.pms-badge-active    { background: var(--color-success-bg); color: var(--color-success); }
.pms-badge-inactive  { background: var(--color-bg-subtle);  color: var(--color-text-secondary); }
.pms-badge-pending   { background: var(--color-warning-bg); color: var(--color-warning); }
.pms-badge-overdue   { background: var(--color-danger-bg);  color: var(--color-danger); }
.pms-badge-paid      { background: var(--color-success-bg); color: var(--color-success); }
.pms-badge-cleared   { background: var(--color-info-bg);    color: var(--color-info); }
.pms-badge-bounced   { background: var(--color-danger-bg);  color: var(--color-danger); }
.pms-badge-presented { background: var(--color-info-bg);    color: var(--color-info); }
.pms-badge-received  { background: var(--color-success-bg); color: var(--color-success); }
.pms-badge-deposited { background: var(--color-info-bg);    color: var(--color-info); }
.pms-badge-rejected  { background: var(--color-danger-bg);  color: var(--color-danger); }
.pms-badge-cancelled { background: var(--color-bg-subtle);  color: var(--color-text-secondary); }
.pms-badge-closed    { background: var(--color-bg-subtle);  color: var(--color-text-secondary); }
.pms-badge-in_progress { background: var(--color-info-bg);  color: var(--color-info); }

/* Legacy alert types (Bootstrap-ish leaks) */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
  font-size: 13px;
  line-height: var(--line-height-body);
}
.alert-success { background: var(--color-success-soft); border-color: rgba(4,120,87,0.18); color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-color: rgba(180,83,9,0.18); color: var(--color-warning); }
.alert-danger,
.alert-error   { background: var(--color-danger-soft);  border-color: rgba(185,28,28,0.18); color: var(--color-danger); }
.alert-info    { background: var(--color-info-soft);    border-color: rgba(37,99,235,0.18); color: var(--color-info); }
.pms-alert-error { background: var(--color-danger-soft); border-color: rgba(185,28,28,0.18); color: var(--color-danger); }

/* Legacy bootstrap-ish buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--color-brand); color: white; }
.btn-primary:hover { background: var(--color-brand-dark); color: white; text-decoration: none; }
.btn-secondary {
  background: white;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #991B1B; color: white; text-decoration: none; }
.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.text-bg-info    { background: var(--color-info-bg);    color: var(--color-info); }
.text-bg-success { background: var(--color-success-bg); color: var(--color-success); }
.text-bg-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.text-bg-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.input {
  font-family: inherit; font-size: 13px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: white; color: var(--color-text-primary);
}
.input:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

/* Topbar lang/logout buttons */
.pms-topbar-lang, .pms-topbar-logout {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--color-text-primary); cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.pms-topbar-lang:hover, .pms-topbar-logout:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

/* Sidebar mobile toggle */
.pms-sidebar-toggle {
  display: none;
  background: transparent; border: 0;
  font-size: 18px; cursor: pointer;
  padding: 4px 8px;
  color: var(--color-text-primary);
}

/* Special escrow tone (legacy) */
.pms-sidebar--escrow { border-inline-end: 2px solid var(--color-purple); }

/* =================================================================
   === 18. Responsive (max-width 768px) ===
   ================================================================= */
@media (max-width: 768px) {
  .pms-sidebar-toggle { display: inline-block; }
  .pms-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform 0.2s;
    z-index: 100;
  }
  .pms-sidebar.is-open { transform: translateX(0); }
  .pms-page { padding: var(--space-4); }
  .pms-topbar { padding: 0 var(--space-4); }
  .pms-topbar-search { width: auto; flex: 1; }
  .pms-stat-grid,
  .pms-stats-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .pms-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .pms-page-actions { justify-content: flex-end; }
}

/* =================================================================
   === RTL adjustments ===
   The shell already uses logical properties (inset-inline-*,
   padding-inline-start, border-inline-*); these are explicit
   overrides for properties that can't be expressed logically.
   ================================================================= */
[dir="rtl"] .pms-table thead th,
[dir="rtl"] .pms-table tbody td { text-align: right; }
[dir="rtl"] .pms-table th.col-num,
[dir="rtl"] .pms-table .col-num,
[dir="rtl"] .pms-table th.col-action,
[dir="rtl"] .pms-table .col-action { text-align: left; }
[dir="rtl"] .pms-stat-value,
[dir="rtl"] .pms-amount-credit,
[dir="rtl"] .pms-amount-debit,
[dir="rtl"] .pms-amount-neutral { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .pms-page-actions { margin-inline-start: auto; }
[dir="rtl"] .pms-breadcrumb .sep { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .pms-slideover {
  inset-inline-end: auto;
  inset-inline-start: 0;
  animation: pms-slide-rtl 0.22s ease;
}
@keyframes pms-slide-rtl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
[dir="rtl"] .pms-topbar-bell-dot { right: auto; left: 9px; }

/* =================================================================
   === 19. Print ===
   ================================================================= */
@media print {
  .pms-sidebar,
  .pms-topbar,
  .pms-page-actions,
  .pms-btn,
  .pms-topbar-search,
  .pms-skip-link,
  .pms-sidebar-toggle { display: none !important; }
  .pms-layout { display: block; }
  .pms-main { display: block; }
  .pms-page { padding: 0; }
  .pms-card {
    box-shadow: none;
    border-color: #999;
    break-inside: avoid;
  }
  body { background: white; color: black; font-size: 11pt; }
}

/* ── RTL (Arabic) layout overrides ─────────────────────────────────────── */
/* Flip the main flex container so the sidebar moves to the right.
   Both `body` and `html` selectors are included to maximize specificity
   so this rule beats any later-loaded stylesheet. !important is used
   because the chain of stylesheets (pms-chrome.css, pms-backend-bridge.css)
   loads AFTER this file and may re-declare flex-direction on .layout. */
html[dir="rtl"] body .layout,
html[dir="rtl"] body .app-shell,
html[dir="rtl"] body .pms-layout,
[dir="rtl"] .layout,
[dir="rtl"] .app-shell,
[dir="rtl"] .pms-layout {
  flex-direction: row-reverse !important;
}

/* Sidebar — flip border side, mirror brand row, sidebar text RTL. */
[dir="rtl"] .pms-sidebar          { border-right: none; border-left: 1px solid var(--color-sidebar-divider, rgba(255,255,255,0.08)); }
[dir="rtl"] .pms-sb-brand-row     { flex-direction: row-reverse; }
[dir="rtl"] .pms-sb-nav           { direction: rtl; }
[dir="rtl"] .pms-sidebar__group,
[dir="rtl"] .pms-sidebar__item,
[dir="rtl"] .pms-sb-item          { direction: rtl; text-align: right; }
[dir="rtl"] .pms-sb-item          { flex-direction: row-reverse; }
[dir="rtl"] .pms-sb-item-icon,
[dir="rtl"] .pms-sidebar__item-icon { margin-inline-end: 0; margin-inline-start: 10px; }

/* Topbar — mirror actions to the right side. */
[dir="rtl"] .pms-topbar,
[dir="rtl"] .pms-topbar-strip,
[dir="rtl"] .pms-topbar-actions,
[dir="rtl"] .pms-topbar-bc        { flex-direction: row-reverse; }

/* Page content padding: handled locally in _layout.php and base .pms-page rule. */

/* Cards / page headers / alerts: mirror direction in RTL. */
[dir="rtl"] .pms-card             { direction: rtl; }
[dir="rtl"] .pms-table th,
[dir="rtl"] .pms-table td         { text-align: right; }
[dir="rtl"] table .num,
[dir="rtl"] .pms-table .num       { text-align: left; }
[dir="rtl"] .pms-page-header      { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pms-page-actions     { flex-direction: row-reverse; }
[dir="rtl"] .pms-alert            { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pms-breadcrumb       { flex-direction: row-reverse; }

/* Form elements */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea              { text-align: right; direction: rtl; }
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="datetime-local"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"]     { direction: ltr; text-align: right; }

/* Carets / chevrons / sidebar arrows */
[dir="rtl"] .pms-caret,
[dir="rtl"] .pms-sidebar__group-caret,
[dir="rtl"] .pms-sb-group-caret   { transform: scaleX(-1); }

/* Arabic font everywhere in RTL mode */
[dir="rtl"] body,
[dir="rtl"] .pms-sidebar,
[dir="rtl"] .pms-topbar,
[dir="rtl"] .pms-shell-main,
[dir="rtl"] .content              { font-family: 'Cairo','Tajawal','Segoe UI',sans-serif; }