/* ==========================================================================
   Superbway — Enterprise Design System (shared by Admin, Member, Franchise)
   One token set, one shell, one component library. Panel CSS files only add
   panel-specific widgets on top of this.
   ========================================================================== */

:root {
  /* Brand */
  --brand:        #E2570B;
  --brand-600:    #C94B07;
  --brand-50:     #FFF4EC;
  --brand-100:    #FFE4D1;
  --ink:          #0F1B2D;     /* navy, headings + sidebar */
  --ink-2:        #16243A;
  --ink-3:        #1F3150;

  /* Neutrals (slate) */
  --bg:           #F5F7FA;
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;
  --border:       #E4E8EE;
  --border-strong:#D3D9E2;
  --text:         #1E293B;
  --text-2:       #475569;
  --muted:        #64748B;
  --subtle:       #94A3B8;

  /* Semantic */
  --success:      #0E9F6E;  --success-bg: #ECFDF5;  --success-fg: #046C4E;
  --warning:      #D97706;  --warning-bg: #FFFBEB;  --warning-fg: #92400E;
  --danger:       #DC2626;  --danger-bg:  #FEF2F2;  --danger-fg:  #991B1B;
  --info:         #2563EB;  --info-bg:    #EFF6FF;  --info-fg:    #1E40AF;
  --violet:       #7C3AED;  --violet-bg:  #F5F3FF;
  --teal:         #0F766E;  --teal-bg:    #F0FDFA;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 8px 24px -6px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
  --ring:      0 0 0 3px rgba(226,87,11,.16);

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h:  64px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Back-compat aliases used by inline styles in legacy views */
  --pi-orange: var(--brand);
  --pi-teal:   var(--teal);
  --pi-navy:   var(--ink);
  --pi-light:  var(--bg);
  --pi-radius: var(--radius);
  --pi-shadow: var(--shadow-sm);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app-body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }
.num, .tabular, td, .kpi-value, .a-stat-value, .stat-value, .pi-stat-value { font-variant-numeric: tabular-nums; }
::selection { background: var(--brand-100); }
.text-muted { color: var(--muted) !important; }
.fw-600 { font-weight: 600 !important; }
.text-brand { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* ── Shell: sidebar ─────────────────────────────────────────────────────── */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--ink);
  color: #CBD5E1;
  display: flex; flex-direction: column;
  z-index: 1040;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  border-right: 1px solid rgba(255,255,255,.04);
}
.app-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  color: #fff;
}
.app-brand:hover { color: #fff; }
.app-brand-logo {
  width: 36px; height: 36px; border-radius: 9px; background: transparent;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.app-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.app-brand-name { font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.15; }
.app-brand-name b { color: #FF8A3D; font-weight: 700; }
.app-brand-sub { font-size: 11px; color: #7F8EA3; font-weight: 500; }

.app-identity {
  margin: 14px 14px 4px;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; gap: 10px; align-items: center;
}
.app-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FF8A3D, var(--brand));
  color: #fff; font-weight: 600; font-size: 14px;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-identity-name { font-size: 13px; font-weight: 600; color: #F1F5F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-identity-meta { font-size: 11px; color: #8A9AB0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.app-identity-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
.app-identity-meta .dot.off { background: var(--danger); }

.app-nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.app-nav::-webkit-scrollbar { width: 6px; }
.app-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 6px; }
.app-nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #5F708A; padding: 16px 10px 6px;
}
.app-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 1px 0;
  border-radius: 8px;
  color: #AEBBCD; font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.app-nav-link i { width: 18px; text-align: center; font-size: 14px; color: #7F8EA3; transition: color .15s; }
.app-nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.app-nav-link:hover i { color: #CBD5E1; }
.app-nav-link.active { background: rgba(255,255,255,.08); color: #fff; }
.app-nav-link.active i { color: #FF8A3D; }
.app-nav-link.active::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}
.app-nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.app-nav-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.app-nav-foot .app-nav-link { color: #F0A4A4; }
.app-nav-foot .app-nav-link i { color: #E57B7B; }
.app-nav-foot .app-nav-link:hover { background: rgba(220,38,38,.12); color: #FECACA; }

.app-overlay { display: none; position: fixed; inset: 0; background: rgba(15,27,45,.5); backdrop-filter: blur(2px); z-index: 1039; }

/* ── Shell: main + topbar ───────────────────────────────────────────────── */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
}
.app-burger {
  display: none; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  align-items: center; justify-content: center; cursor: pointer;
}
.app-burger:hover { background: var(--surface-2); }
.app-crumbs { min-width: 0; flex: 1; }
.app-crumbs-path { font-size: 12px; color: var(--subtle); display: flex; gap: 6px; align-items: center; }
.app-crumbs-path i { font-size: 9px; }
.app-crumbs-title { font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.app-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.app-chip i { color: var(--muted); }
.app-chip strong { color: var(--ink); font-weight: 600; }
a.app-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.app-chip.cta { background: var(--brand); border-color: var(--brand); color: #fff; }
.app-chip.cta i { color: #fff; }
.app-chip.cta:hover { background: var(--brand-600); color: #fff; }
.app-user { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
.app-user .app-avatar { width: 34px; height: 34px; font-size: 13px; }
.app-user-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.app-user-role { font-size: 11.5px; color: var(--muted); }

.app-content { flex: 1; padding: 28px; max-width: 1480px; width: 100%; }
.app-footer { padding: 16px 28px; font-size: 12px; color: var(--subtle); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: 22px; margin: 0; font-weight: 650; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.a-card, .pi-card, .card-x {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  overflow: hidden;
}
.a-card-header, .pi-card-header, .card-x-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.a-card-header h5, .pi-card-header h5, .card-x-head h5,
.a-card-header h6, .pi-card-header h6 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.a-card-header h5 i, .pi-card-header h5 i, .card-x-head h5 i { color: var(--muted); font-size: 13px; }
.a-card-body, .pi-card-body, .card-x-body { padding: 20px; }
.card-x-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.card { border-color: var(--border); border-radius: var(--radius-lg); }

/* ── KPI / stat tiles (all vocabularies) ────────────────────────────────── */
.kpi, .a-stat, .pi-stat, .stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 18px 18px 16px;
  height: 100%;
  color: inherit;
  transition: box-shadow .2s, border-color .2s;
}
a.kpi:hover, a.pi-stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
.a-stat, .pi-stat { display: flex; align-items: center; gap: 14px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kpi-label, .a-stat-label, .pi-stat-label, .stat-label { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 0; }
.kpi-value, .a-stat-value, .a-stat-val, .pi-stat-value, .stat-value { font-size: 24px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.a-stat-val { font-size: 20px; }
.kpi-sub, .a-stat-sub, .pi-stat-sub { font-size: 12px; color: var(--subtle); margin-top: 4px; }
.kpi-icon, .a-stat-icon, .pi-stat-icon, .stat-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px;
  background: var(--surface-2); color: var(--text-2);
}
.stat-card .stat-icon { position: absolute; top: 16px; right: 16px; }
.stat-card .stat-value { margin-top: 26px; }
/* tones */
.tone-brand,  .a-stat-icon.orange, .pi-stat-icon.orange, .stat-card.primary .stat-icon { background: var(--brand-50); color: var(--brand); }
.tone-teal,   .a-stat-icon.teal,   .pi-stat-icon.teal,   .stat-card.teal .stat-icon    { background: var(--teal-bg); color: var(--teal); }
.tone-ink,    .a-stat-icon.navy,   .pi-stat-icon.navy,   .stat-card.dark .stat-icon    { background: #EEF2F7; color: var(--ink-3); }
.tone-green,  .a-stat-icon.green,  .pi-stat-icon.green,  .stat-card.success .stat-icon { background: var(--success-bg); color: var(--success); }
.tone-violet, .a-stat-icon.purple, .pi-stat-icon.purple                                { background: var(--violet-bg); color: var(--violet); }
.tone-red,    .a-stat-icon.red,    .pi-stat-icon.red                                   { background: var(--danger-bg); color: var(--danger); }
.tone-amber,  .stat-card.warning .stat-icon                                           { background: var(--warning-bg); color: var(--warning); }
.tone-blue                                                                             { background: var(--info-bg); color: var(--info); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.kpi-delta.up { color: var(--success-fg); background: var(--success-bg); }
.kpi-delta.down { color: var(--danger-fg); background: var(--danger-bg); }

/* Hero / feature tile */
.hero-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff; padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.hero-tile::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,61,.35), transparent 70%);
}
.hero-tile .eyebrow { color: #93A3BA; }
.hero-tile h2, .hero-tile .hero-value { color: #fff; font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 2px; }
.hero-tile p { color: #A9B6C8; margin: 0; font-size: 13px; }
.hero-tile .hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; position: relative; z-index: 1; }
.hero-tile .btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.hero-tile .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-responsive { border-radius: 0; }
.a-table, .pi-table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin: 0; }
.a-table thead tr, .pi-table thead tr, .data-table thead tr { background: var(--surface-2) !important; }
.a-table thead th, .pi-table thead th, .data-table thead th {
  padding: 10px 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted) !important; background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left;
}
.a-table tbody td, .pi-table tbody td, .data-table tbody td {
  padding: 12px 16px; color: var(--text); border-bottom: 1px solid #EEF1F5; vertical-align: middle;
}
.a-table tbody tr:last-child td, .pi-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
.a-table tbody tr:hover td, .pi-table tbody tr:hover td, .data-table tbody tr:hover td { background: #FAFBFD; }
.a-table tfoot td, .pi-table tfoot td, .data-table tfoot td { padding: 12px 16px; background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--border); }
.table { --bs-table-hover-bg: #FAFBFD; font-size: 13.5px; color: var(--text); }
.table > thead th, .table thead.table-light th, .table thead.table-dark th {
  background: var(--surface-2) !important; color: var(--muted) !important;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); padding: 10px 14px; white-space: nowrap;
}
.table > tbody td { padding: 11px 14px; border-color: #EEF1F5; vertical-align: middle; }
.cell-main { font-weight: 600; color: var(--ink); line-height: 1.3; }
.cell-sub { font-size: 12px; color: var(--muted); }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-avatar { width: 32px; height: 32px; border-radius: 50%; background: #EEF2F7; color: var(--ink-3); font-weight: 600; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.amount-pos { color: var(--success-fg); font-weight: 600; }
.amount-neg { color: var(--danger-fg); font-weight: 600; }

/* ── Badges / pills ─────────────────────────────────────────────────────── */
.status-pill, .a-badge, .pi-badge, .badge-status, .badge-income {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: #F1F5F9; color: var(--text-2);
}
.status-pill::before, .a-badge::before, .pi-badge::before, .badge-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8;
}
.status-pill.success, .a-badge.active, .a-badge.approved, .a-badge.paid, .a-badge.processed, .a-badge.credit,
.pi-badge.active, .pi-badge.approved, .pi-badge.paid, .pi-badge.credit,
.badge-status.active, .badge-status.approved, .badge-status.paid, .badge-status.processed { background: var(--success-bg); color: var(--success-fg); }
.status-pill.danger, .a-badge.inactive, .a-badge.rejected, .a-badge.failed, .a-badge.blocked, .a-badge.debit,
.pi-badge.inactive, .pi-badge.rejected, .pi-badge.failed, .pi-badge.debit,
.badge-status.inactive, .badge-status.rejected, .badge-status.blocked { background: var(--danger-bg); color: var(--danger-fg); }
.status-pill.warning, .a-badge.pending, .pi-badge.pending, .badge-status.pending { background: var(--warning-bg); color: var(--warning-fg); }
.status-pill.info, .a-badge.processing, .a-badge.new, .a-badge.renewal, .pi-badge.processing, .badge-status.processing { background: var(--info-bg); color: var(--info-fg); }
.status-pill.neutral { background: #F1F5F9; color: var(--text-2); }
.badge-income { text-transform: none; }
.badge-income.matching_bonus  { background: var(--teal-bg);    color: var(--teal); }
.badge-income.level_bonus     { background: var(--info-bg);    color: var(--info-fg); }
.badge-income.royalty_bonus   { background: #FEF3C7;           color: #92400E; }
.badge-income.franchise_bonus { background: var(--violet-bg);  color: var(--violet); }
.badge-income.referral_bonus, .badge-income.activation_bonus, .badge-income.payout_bonus { background: #F1F5F9; color: var(--muted); }
.pi-badge.matching { background: var(--teal-bg); color: var(--teal); }
.pi-badge.franchise { background: var(--violet-bg); color: var(--violet); }
.badge { font-weight: 600; letter-spacing: 0; border-radius: 999px; padding: .35em .7em; }

/* Rank badges */
.rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.rank-badge i { font-size: 11px; }
.rank-member           { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.rank-executive        { background: #F0FDFA; color: #0F766E; border-color: #CCFBF1; }
.rank-senior_executive { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }
.rank-manager          { background: #F5F3FF; color: #6D28D9; border-color: #EDE9FE; }
.rank-senior_manager   { background: linear-gradient(135deg,#FFFBEB,#FEF3C7); color: #92400E; border-color: #FDE68A; }
.rank-director         { background: linear-gradient(135deg,#FFF1F2,#FFE4E6); color: #9F1239; border-color: #FECDD3; }
.rank-badge.lg { height: 30px; padding: 0 14px; font-size: 13px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.a-form-label, .pi-form-label, .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.a-form-control, .pi-form-control, .form-control, .form-select {
  display: block; width: 100%;
  height: 40px; padding: 8px 12px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
textarea.a-form-control, textarea.pi-form-control, textarea.form-control { height: auto; min-height: 84px; }
select.a-form-control, select.pi-form-control { appearance: auto; }
.a-form-control:focus, .pi-form-control:focus, .form-control:focus, .form-select:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
.a-form-control:disabled, .pi-form-control:disabled, .a-form-control[readonly], .pi-form-control[readonly] { background: var(--surface-2); color: var(--muted); }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); font-size: 13px; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.a-btn, .pi-btn, .btn-x {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.a-btn:focus-visible, .pi-btn:focus-visible, .btn-x:focus-visible { outline: 0; box-shadow: var(--ring); }
.a-btn:disabled, .pi-btn:disabled, .btn-x:disabled { opacity: .55; cursor: not-allowed; }
.a-btn-primary, .a-btn-orange, .pi-btn-primary, .pi-btn-orange, .btn-x.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(226,87,11,.25); }
.a-btn-primary:hover, .a-btn-orange:hover, .pi-btn-primary:hover, .pi-btn-orange:hover, .btn-x.primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.a-btn-navy, .pi-btn-navy, .btn-x.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.a-btn-navy:hover, .pi-btn-navy:hover, .btn-x.dark:hover { background: var(--ink-3); color: #fff; }
.a-btn-outline, .pi-btn-outline, .btn-x.outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-xs); }
.a-btn-outline:hover, .pi-btn-outline:hover, .btn-x.outline:hover { background: var(--surface-2); border-color: var(--subtle); color: var(--ink); }
.a-btn-danger, .btn-x.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.a-btn-danger:hover, .btn-x.danger:hover { background: #B91C1C; color: #fff; }
.btn-x.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-x.success:hover { background: #057A55; color: #fff; }
.btn-x.ghost { background: transparent; color: var(--text-2); }
.btn-x.ghost:hover { background: var(--surface-2); color: var(--ink); }
.a-btn-sm, .pi-btn-sm, .btn-x.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 7px; }
.a-btn-xs, .btn-x.xs { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 6px; }
.btn-x.block, .a-btn.w-100, .pi-btn.w-100 { width: 100%; }

/* Bootstrap buttons aligned to the system */
.btn { font-weight: 600; font-size: 13.5px; border-radius: 8px; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-600); }

/* Icon action buttons */
.btn-action {
  width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: all .15s;
}
.btn-action:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--ink); }
.btn-edit:hover    { color: var(--info); border-color: #BFDBFE; background: var(--info-bg); }
.btn-view:hover    { color: var(--teal); border-color: #99F6E4; background: var(--teal-bg); }
.btn-approve       { color: var(--success); }
.btn-approve:hover { color: #fff; background: var(--success); border-color: var(--success); }
.btn-delete, .btn-reject { color: var(--danger); }
.btn-delete:hover, .btn-reject:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.a-alert, .pi-alert, .callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13.5px; margin-bottom: 16px; border: 1px solid;
}
.a-alert i, .pi-alert i, .callout > i { margin-top: 2px; flex-shrink: 0; }
.a-alert-warning, .pi-alert-warning, .callout.warning { background: var(--warning-bg); border-color: #FDE68A; color: var(--warning-fg); }
.a-alert-info,    .pi-alert-info,    .callout.info    { background: var(--info-bg);    border-color: #BFDBFE; color: var(--info-fg); }
.a-alert-success, .pi-alert-success, .callout.success { background: var(--success-bg); border-color: #A7F3D0; color: var(--success-fg); }
.a-alert-danger,  .pi-alert-danger,  .callout.danger  { background: var(--danger-bg);  border-color: #FECACA; color: var(--danger-fg); }
.callout-title { font-weight: 600; margin-bottom: 2px; }
.alert { border-radius: var(--radius); font-size: 13.5px; }

/* ── Empty states ───────────────────────────────────────────────────────── */
.a-empty, .pi-empty, .empty-x { text-align: center; padding: 48px 20px; color: var(--muted); }
.a-empty i, .pi-empty i, .empty-x i {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 20px;
  background: var(--surface-2); color: var(--subtle); border: 1px solid var(--border); opacity: 1;
}
.a-empty p, .pi-empty p, .empty-x p { font-size: 13.5px; margin: 0; }

/* ── Filters / toolbars / tabs ──────────────────────────────────────────── */
.a-filters, .toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.a-filters select, .a-filters input, .toolbar select, .toolbar input {
  height: 36px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
}
.a-filters select:focus, .a-filters input:focus, .toolbar select:focus, .toolbar input:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
.a-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.a-summary-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.a-summary-item .asi-label { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: none; }
.a-summary-item .asi-value { font-size: 18px; font-weight: 650; color: var(--ink); }

.seg-tabs, .income-filter-tabs, .pi-tab-bar {
  display: inline-flex; gap: 2px; padding: 3px; flex-wrap: wrap;
  background: #EEF1F5; border-radius: 9px; margin-bottom: 18px;
}
.seg-tab, .ifilter-tab, .pi-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 7px; border: 0;
  font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.seg-tab:hover, .ifilter-tab:hover, .pi-tab:hover { color: var(--ink); }
.seg-tab.active, .ifilter-tab.active, .pi-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }

/* Pagination */
.pagination { --bs-pagination-color: var(--text-2); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-focus-box-shadow: var(--ring); --bs-pagination-font-size: 13px; }

/* Pager bar (includes/pagination.php) */
.pi-pager {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 13px; color: var(--muted);
}
.pi-pager-info b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pi-pager-pages { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pi-pager-tools { display: flex; align-items: center; gap: 12px; }
.pg-btn {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s, color .12s;
}
.pg-btn i { font-size: 11px; }
a.pg-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
a.pg-btn:focus-visible { outline: 0; box-shadow: var(--ring); border-color: var(--brand); }
.pg-btn.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; box-shadow: 0 2px 6px -1px rgba(226,87,11,.45); }
.pg-btn.is-off { opacity: .4; cursor: default; }
.pg-gap { min-width: 22px; text-align: center; color: var(--subtle); letter-spacing: 1px; }
.pg-compact { display: none; padding: 0 8px; white-space: nowrap; color: var(--text-2); }
.pg-compact b { color: var(--ink); }
.pg-jump, .pg-size { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pg-jump label { margin: 0; }
.pg-jump input, .pg-size select {
  height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text); padding: 0 8px;
}
.pg-jump input { width: 64px; text-align: center; -moz-appearance: textfield; }
.pg-jump input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pg-jump input:focus, .pg-size select:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
.pi-pager-solo { justify-content: flex-start; }
.card-x > .pi-pager:last-child, [data-pi-list] > .pi-pager:last-child { margin-bottom: 0; }

/* Active filter chips */
.pi-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pi-chips::before { content: 'Filtered by'; font-size: 12px; color: var(--muted); margin-right: 2px; }
.pi-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 11px; max-width: 100%;
  border-radius: 999px; border: 1px solid var(--brand-100); background: var(--brand-50); color: var(--brand-600);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.pi-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pi-chip i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(226,87,11,.12); }
.pi-chip:hover i { background: var(--brand); color: #fff; }
.pi-chip-clear { border: 0; background: none; font-size: 12.5px; font-weight: 550; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 4px; }
.pi-chip-clear:hover { color: var(--danger); }

/* List refreshing in place */
[data-pi-list] { position: relative; }
[data-pi-list].is-loading .table-responsive, [data-pi-list].is-loading table, [data-pi-list].is-loading .pi-pager, [data-pi-list].is-loading .m-list { opacity: .5; pointer-events: none; transition: opacity .15s .1s; }
[data-pi-list].is-loading::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 5; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: piListBar 1s ease-in-out infinite;
}
@keyframes piListBar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { [data-pi-list].is-loading::after { animation: none; background: var(--brand); opacity: .5; } }

@media (max-width: 991px) {
  .pg-far { display: none; }
}
@media (max-width: 767px) {
  .pi-pager { padding: 12px 14px; gap: 10px; justify-content: center; }
  .pi-pager-info { width: 100%; text-align: center; }
  .pi-pager-pages { margin: 0; width: 100%; justify-content: center; }
  .pi-pager-pages .pg-num, .pi-pager-pages .pg-gap, .pi-pager-pages .is-current { display: none; }
  .pg-compact { display: inline-block; flex: 1; text-align: center; }
  .pg-btn { min-width: 40px; height: 40px; }
  .pi-pager-tools { width: 100%; justify-content: center; }
  .pg-jump input, .pg-size select { height: 38px; font-size: 16px; }
  .pi-chips { padding: 8px 14px; }
}

/* ── Modals (bootstrap) ─────────────────────────────────────────────────── */
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.modal-header, .a-modal .modal-header { background: var(--surface) !important; color: var(--ink) !important; border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-header .modal-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.modal-header .btn-close, .a-modal .modal-header .btn-close { filter: none !important; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: 12px 20px; }

/* ── Data list (key/value) ──────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kv-item { background: var(--surface); padding: 12px 14px; }
.kv-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.kv-value { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }
.kv-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.kv-rows > div:last-child { border-bottom: 0; }
.kv-rows span:first-child { color: var(--muted); }
.kv-rows span:last-child { font-weight: 600; color: var(--ink); text-align: right; }
.kv-rows .total { border-top: 1px solid var(--border-strong); border-bottom: 0; margin-top: 4px; padding-top: 12px; }
.kv-rows .total span { font-size: 15px; color: var(--ink) !important; font-weight: 650; }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress-x { height: 8px; background: #EEF1F5; border-radius: 99px; overflow: hidden; }
.progress-x > span { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .6s ease; }
.progress-x.teal > span { background: var(--teal); }
.progress-x.ok > span { background: var(--success); }
.progress { background: #EEF1F5; border-radius: 99px; }

/* ── Binary leg meter ───────────────────────────────────────────────────── */
.legs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.leg { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.leg-label { font-size: 12px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.leg-value { font-size: 22px; font-weight: 650; color: var(--ink); margin: 2px 0; }
.leg-sub { font-size: 12px; color: var(--subtle); }
.leg.left .leg-label i { color: var(--teal); }
.leg.right .leg-label i { color: var(--brand); }
.leg-match { display: grid; place-items: center; text-align: center; padding: 0 4px; }
.leg-match-ring {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--brand) calc(var(--p, 0) * 1%), #EEF1F5 0);
}
.leg-match-ring > div { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 650; font-size: 16px; color: var(--ink); }
.leg-match small { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }

/* ── Rank ladder ────────────────────────────────────────────────────────── */
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.ladder::before { content: ''; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: var(--border); }
.ladder-step { position: relative; text-align: center; padding: 0 6px; }
.ladder-dot {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; position: relative; z-index: 1;
  background: var(--surface); border: 2px solid var(--border); color: var(--subtle);
}
.ladder-step.done .ladder-dot { background: var(--success); border-color: var(--success); color: #fff; }
.ladder-step.current .ladder-dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-100); }
.ladder-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ladder-rate { font-size: 11.5px; color: var(--muted); }

/* ── Quick actions ──────────────────────────────────────────────────────── */
.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.qa-btn, .qa-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  font-size: 13px; font-weight: 600; transition: border-color .15s, box-shadow .15s;
}
.qa-btn:hover, .qa-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--ink); transform: none; background: var(--surface); }
.qa-btn i, .qa-item i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--surface-2); color: var(--text-2); margin: 0; }
.qa-btn span { font-size: 13px; line-height: 1.3; }
.qa-btn.primary i, .qa-item.orange i { background: var(--brand-50); color: var(--brand); }
.qa-btn.success i, .qa-item.green i  { background: var(--success-bg); color: var(--success); }
.qa-btn.teal i, .qa-item.teal i      { background: var(--teal-bg); color: var(--teal); }
.qa-btn.warning i, .qa-btn.gold i    { background: var(--warning-bg); color: var(--warning); }
.qa-btn.dark i, .qa-item.navy i      { background: #EEF2F7; color: var(--ink-3); }
.qa-btn.info i                       { background: var(--info-bg); color: var(--info); }
.qa-item.purple i                    { background: var(--violet-bg); color: var(--violet); }
.qa-btn:hover i, .qa-btn.primary:hover i, .qa-btn.success:hover i, .qa-btn.teal:hover i, .qa-btn.warning:hover i, .qa-btn.dark:hover i, .qa-btn.info:hover i, .qa-btn.gold:hover i { color: inherit; }

/* ── Activity feed ──────────────────────────────────────────────────────── */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid #EEF1F5; }
.feed li:last-child { border-bottom: 0; }
.feed-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.feed-body { min-width: 0; flex: 1; }
.feed-title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-amt { font-weight: 650; font-size: 13.5px; white-space: nowrap; }

/* ── Plan cards (compensation overview) ─────────────────────────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); }
.plan-card h6 { font-size: 14px; margin: 10px 0 4px; }
.plan-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.plan-card .plan-figure { font-size: 22px; font-weight: 650; color: var(--ink); margin-top: 8px; }

/* ── Toastr / SweetAlert harmonisation ──────────────────────────────────── */
#toast-container > div { border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; opacity: 1 !important; font-family: var(--font); font-size: 13.5px; padding: 14px 16px 14px 48px !important; }
.toast-success { background-color: #065F46 !important; }
.toast-error   { background-color: #991B1B !important; }
.toast-info    { background-color: var(--ink) !important; }
.toast-warning { background-color: #92400E !important; }
.swal2-popup { font-family: var(--font) !important; border-radius: var(--radius-lg) !important; padding: 24px !important; }
.swal2-title { font-size: 18px !important; color: var(--ink) !important; font-weight: 600 !important; }
.swal2-html-container { font-size: 14px !important; color: var(--text-2) !important; }
.swal2-styled { border-radius: 8px !important; font-weight: 600 !important; font-size: 13.5px !important; padding: 9px 18px !important; }
.swal2-styled.swal2-confirm { background: var(--brand) !important; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.gap-grid { display: grid; gap: 20px; }
.sticky-side { position: sticky; top: calc(var(--topbar-h) + 20px); }
.clickable { cursor: pointer; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 1199px) {
  .app-content { padding: 22px; }
  .app-topbar { padding: 0 22px; }
}
@media screen and (max-width: 991px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
  .app-sidebar.open { transform: translateX(0); }
  .app-overlay.show { display: block; }
  .app-main { margin-left: 0; }
  .app-burger { display: inline-flex; }
  .app-user-meta { display: none; }
}
@media screen and (max-width: 767px) {
  .app-content { padding: 16px; }
  .app-topbar { padding: 0 16px; gap: 10px; }
  .app-crumbs-path { display: none; }
  .app-chip.hide-sm, .app-user { display: none; }
  .page-head h1 { font-size: 19px; }
  .kpi-value, .a-stat-value, .stat-value, .pi-stat-value { font-size: 20px; }
  .a-card-body, .pi-card-body, .card-x-body { padding: 16px; }
  .a-card-header, .pi-card-header, .card-x-head { padding: 12px 16px; }
  .a-filters, .toolbar { padding: 12px 16px; }
  .a-filters > *, .toolbar > * { flex: 1 1 100%; }
  .a-table thead th, .pi-table thead th, .data-table thead th, .a-table tbody td, .pi-table tbody td, .data-table tbody td { padding: 10px 12px; }
  .legs { grid-template-columns: 1fr 1fr; }
  .leg-match { grid-column: 1 / -1; grid-row: 1; }
  .ladder { grid-template-columns: repeat(6, minmax(64px, 1fr)); overflow-x: auto; }
  .ladder-name { font-size: 11px; }
  .hero-tile h2, .hero-tile .hero-value { font-size: 26px; }
  .app-footer { padding: 14px 16px; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .app-sidebar, .app-topbar, .app-overlay, .app-footer, .no-print { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; max-width: none; }
  body.app-body { background: #fff !important; }
  .a-card, .pi-card, .card-x, .kpi { box-shadow: none !important; }
}

/* Desktop: keep person/ID cells on one line in wide tables */
@media (min-width: 768px) {
  .cell-user .cell-main, .cell-user .cell-sub { white-space: nowrap; }
}