/* ═══ VARIABLES ═══════════════════════════════════════════ */
:root {
  --bg:            #f1f5f9;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --border:        #e2e8f0;
  --border-focus:  #6366f1;
  --text:          #0f172a;
  --muted:         #64748b;
  --primary:       #4f46e5;
  --primary-dark:  #4338ca;
  --primary-light: #eef2ff;
  --success:       #16a34a;
  --success-bg:    #dcfce7;
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;
  --wa-green:      #25d366;
  --wa-dark:       #128c4b;
  --ahmed-bg:      #ede9fe;
  --ahmed-clr:     #5b21b6;
  --ahmed-border:  #a78bfa;
  --mohamed-bg:    #dbeafe;
  --mohamed-clr:   #1d4ed8;
  --mohamed-border:#93c5fd;
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sh-lg: 0 20px 50px rgba(0,0,0,.16),0 8px 16px rgba(0,0,0,.08);
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
}

/* ═══ RESET ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══ ARABIC FONT ══════════════════════════════════════════ */
.ar { font-family: 'Cairo', 'Inter', sans-serif; }

/* ═══ LOGIN PAGE ═══════════════════════════════════════════ */
#login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060d1a;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.login-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(79,70,229,.55) 0%, transparent 70%);
  top: -160px; left: -160px;
  animation: float-orb 12s ease-in-out infinite;
}
.login-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,.4) 0%, transparent 70%);
  bottom: -100px; right: -80px;
  animation: float-orb 15s ease-in-out infinite reverse;
}
.login-orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(37,211,102,.2) 0%, transparent 70%);
  top: 60%; left: 55%;
  animation: float-orb 10s ease-in-out infinite 3s;
}

@keyframes float-orb {
  0%,100% { transform: translate(0,0); }
  33%      { transform: translate(20px,-30px); }
  66%      { transform: translate(-15px,20px); }
}

.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem 2rem;
  width: min(420px, 94vw);
  box-shadow: 0 25px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  animation: card-in .4s ease;
}

@keyframes card-in {
  from { opacity:0; transform: translateY(24px) scale(.97); }
  to   { opacity:1; transform: translateY(0)    scale(1);   }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.login-brand-icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: var(--r-lg);
  color: white;
  box-shadow: 0 8px 24px rgba(79,70,229,.45);
}

.login-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.login-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,.45);
  margin-top: .2rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.login-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin-bottom: 1.75rem;
}

/* dark form controls */
.form-label-dark {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-bottom: .4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: .85rem;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  flex-shrink: 0;
}

.form-control-dark {
  width: 100%;
  padding: .72rem .9rem .72rem 2.5rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-size: .93rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
}
.form-control-dark::placeholder { color: rgba(255,255,255,.25); }
.form-control-dark option { background: #1a1f3c; }
.form-control-dark:focus {
  border-color: rgba(99,102,241,.7);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

.btn-login {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 1.4rem;
  padding: .85rem 1.2rem;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #4f46e5 100%);
  background-size: 200% auto;
  border: none;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background-position .4s ease, box-shadow .2s, transform .15s;
  box-shadow: 0 4px 18px rgba(79,70,229,.45);
}
.btn-login:hover {
  background-position: right center;
  box-shadow: 0 8px 28px rgba(79,70,229,.6);
  transform: translateY(-1px);
}
.btn-login:active { transform: scale(.98); }

.login-error {
  color: #fca5a5;
  font-size: .83rem;
  min-height: 1.3em;
  margin-top: .75rem;
  text-align: center;
}

.login-footer-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.25);
  letter-spacing: .03em;
}

/* ═══ FORM ELEMENTS (app) ══════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: .38rem; margin-bottom: .95rem; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  font-size: .8rem; font-weight: 600; color: var(--text);
  letter-spacing: .01em;
}

.form-control {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .9rem; font-family: inherit; color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  outline: none; appearance: auto;
}
.form-control:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.form-control::placeholder { color: #94a3b8; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.form-hint { color: var(--muted); font-size: .83rem; min-height: 1.2em; margin-top: .6rem; }
.form-hint-inline { color: var(--muted); font-size: .78rem; font-weight: 400; }
.form-error { color: var(--danger); font-size: .83rem; margin-top: .5rem; padding: .4rem .65rem; background: var(--danger-bg); border-radius: var(--r-sm); }

/* ═══ RADIO PILLS ══════════════════════════════════════════ */
.radio-group { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio-item { position: relative; cursor: pointer; }
.radio-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill {
  display: inline-block; padding: .45rem 1.2rem;
  border-radius: 999px; font-size: .875rem; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--surface-2);
  color: var(--muted); cursor: pointer; transition: all .15s; user-select: none;
}
.radio-item input[type="radio"]:checked + .radio-pill.ahmed  { background:var(--ahmed-bg);   border-color:var(--ahmed-border);   color:var(--ahmed-clr);   }
.radio-item input[type="radio"]:checked + .radio-pill.mohamed{ background:var(--mohamed-bg); border-color:var(--mohamed-border); color:var(--mohamed-clr); }
.radio-item:hover .radio-pill { border-color: #cbd5e1; }

/* ═══ BUTTONS ══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.1rem;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  background: var(--surface); color: var(--text); line-height: 1;
}
.btn:hover { background: var(--surface-2); border-color: #cbd5e1; }
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(79,70,229,.35); }

.btn-sm   { padding: .45rem .85rem; font-size: .82rem; }
.btn-full { width: 100%; justify-content: center; padding: .72rem; font-size: .95rem; }

.btn-outline-danger { color: var(--danger); border-color: #fecaca; background: transparent; }
.btn-outline-danger:hover { background: var(--danger-bg); }

.btn-whatsapp {
  background: var(--wa-green); border-color: var(--wa-green); color: #fff;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { background: var(--wa-dark); border-color: var(--wa-dark); box-shadow: 0 4px 14px rgba(37,211,102,.4); }

.btn-icon-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm); border: none;
  background: transparent; color: var(--muted); cursor: pointer; transition: all .15s; padding: 0; flex-shrink: 0;
}
.btn-icon-close:hover { background: var(--surface-2); color: var(--text); }

/* ═══ TOPBAR ═══════════════════════════════════════════════ */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 1.5rem; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 50; box-shadow: var(--sh-xs);
}
.topbar-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
}
.topbar-brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

.user-chip {
  display: flex; align-items: center; gap: .45rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .28rem .8rem .28rem .32rem;
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
#user-display { font-size: .85rem; font-weight: 600; }

/* ═══ MAIN LAYOUT ══════════════════════════════════════════ */
.main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 5rem; }

/* ═══ KPI SECTION ══════════════════════════════════════════ */
.kpi-people-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 1.15rem 1.1rem;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  transition: box-shadow .15s;
}
.kpi-card:hover { box-shadow: var(--sh); }

.kpi-card.ahmed-card   { border-top: 3px solid var(--ahmed-border);   }
.kpi-card.mohamed-card { border-top: 3px solid var(--mohamed-border); }

.kpi-person-header {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem;
}
.kpi-person-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; flex-shrink: 0;
}
.kpi-person-avatar.ahmed   { background: var(--ahmed-bg);   color: var(--ahmed-clr);   }
.kpi-person-avatar.mohamed { background: var(--mohamed-bg); color: var(--mohamed-clr); }
.kpi-person-name { font-weight: 700; font-size: 1rem; }

.kpi-person-rows { display: grid; gap: .45rem; }
.kpi-person-row  { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.kpi-person-row span:first-child { color: var(--muted); }
.kpi-person-row span:last-child  { font-weight: 600; font-variant-numeric: tabular-nums; }

.kpi-owed-box {
  margin-top: .85rem; padding: .65rem .9rem;
  border-radius: var(--r-sm); text-align: center;
}
.kpi-owed-box.green { background: var(--success-bg); }
.kpi-owed-box.red   { background: var(--danger-bg); }
.kpi-owed-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.kpi-owed-box.green .kpi-owed-label { color: var(--success); }
.kpi-owed-box.red   .kpi-owed-label { color: var(--danger);  }
.kpi-owed-value { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.kpi-owed-box.green .kpi-owed-value { color: var(--success); }
.kpi-owed-box.red   .kpi-owed-value { color: var(--danger);  }

.kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .4rem; }
.kpi-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }

/* ═══ TABS ═════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: .2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .25rem; margin-bottom: 1.1rem;
  box-shadow: var(--sh-xs);
}
.tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .58rem .75rem; border: none; border-radius: calc(var(--r) - 4px);
  background: transparent; font-family: inherit; font-size: .875rem; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tab-btn:hover { background: var(--surface-2); color: var(--text); }
.tab-btn.active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(79,70,229,.25); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ═══ SECTION CARD ═════════════════════════════════════════ */
.section-card {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-sm); border: 1px solid var(--border); overflow: hidden;
}
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--border);
  gap: 1rem; flex-wrap: wrap; background: var(--surface-2);
}
.section-title { font-size: .9rem; font-weight: 700; }
.section-body  { padding: 1.2rem; }

/* ═══ TABLE ════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: .6rem 1rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .875rem; vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #f8faff; }

.badge-user {
  display: inline-flex; align-items: center;
  padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.badge-user.ahmed   { background: var(--ahmed-bg);   color: var(--ahmed-clr);   }
.badge-user.mohamed { background: var(--mohamed-bg); color: var(--mohamed-clr); }

.amount-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; gap: .4rem; align-items: center; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); font-size: .9rem; }

/* ═══ FILTERS ══════════════════════════════════════════════ */
.filters-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; align-items: start; }
.filters-actions-wrap { display: flex; flex-direction: column; }
.filters-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ═══ MODAL ════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 1rem;
  backdrop-filter: blur(4px);
  animation: fade-in .15s ease;
}
.modal-box {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  animation: modal-in .2s ease;
}
.modal-box-wide { max-width: 820px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); gap: 1rem;
}
.modal-head h3 { font-size: 1rem; font-weight: 700; }
.modal-body { padding: 1.5rem; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: .75rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
@keyframes fade-in  { from{opacity:0} to{opacity:1} }
@keyframes modal-in { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ═══ WHATSAPP PREVIEW ══════════════════════════════════════ */
.whatsapp-preview {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  font-family: 'Inter', monospace;
  font-size: .82rem;
  line-height: 1.65;
  color: #14532d;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  user-select: all;
}

/* ═══ TOAST ════════════════════════════════════════════════ */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 300;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.toast {
  background: #1e293b; color: white;
  padding: .72rem 1.1rem; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; box-shadow: var(--sh);
  pointer-events: auto; max-width: 340px;
  animation: toast-in .2s ease;
}
.toast.success { background: #166534; }
.toast.error   { background: #991b1b; }
@keyframes toast-in { from{transform:translateX(60px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ═══ ENTITY OWNER HEADER ══════════════════════════════════ */
.entity-header {
  background: linear-gradient(135deg, #0f2027 0%, #1a3a2a 50%, #0f2027 100%);
  border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.entity-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(37,211,102,.12) 0%, transparent 60%);
  pointer-events: none;
}
.entity-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  margin-bottom: .5rem;
}
.entity-eyebrow-ar {
  font-family: 'Cairo', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255,255,255,.35);
  direction: rtl;
  text-align: right;
  margin-bottom: .75rem;
}
.entity-amount-row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.entity-currency {
  font-size: 1.3rem;
  font-weight: 700;
  color: #86efac;
}
.entity-amount {
  font-size: 3.2rem;
  font-weight: 900;
  color: #4ade80;
  letter-spacing: -.04em;
  line-height: 1;
}
.entity-amount-ar {
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  margin-right: auto;
  direction: rtl;
}
.entity-persons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.entity-person-pill {
  display: flex;
  flex-direction: column;
  padding: .65rem 1.1rem;
  border-radius: var(--r-sm);
  min-width: 140px;
}
.entity-person-pill.ahmed   { background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3); }
.entity-person-pill.mohamed { background: rgba(96,165,250,.15);  border: 1px solid rgba(96,165,250,.3);  }
.ep-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .6; color: #fff; margin-bottom: .2rem; }
.ep-name  { font-size: .88rem; font-weight: 700; color: #e2e8f0; margin-bottom: .15rem; }
.ep-amount{ font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.entity-person-pill.ahmed   .ep-amount { color: #c4b5fd; }
.entity-person-pill.mohamed .ep-amount { color: #93c5fd; }
.entity-hint { margin-top: .85rem; font-size: .75rem; color: rgba(255,255,255,.3); }
.entity-hint-ar { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; font-size: .78rem; color: rgba(255,255,255,.25); margin-top: .3rem; }

@media (max-width: 700px) {
  .entity-header { padding: 1.25rem 1.1rem; }
  .entity-amount  { font-size: 2.4rem; }
  .entity-person-pill { min-width: 120px; }
}

/* ═══ UTILITIES ════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ═══ PRINT SHEET (screen) ═════════════════════════════════ */
.print-sheet { display: none; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .kpi-summary-row { grid-template-columns: repeat(2,1fr); }
  .filters-grid    { grid-template-columns: repeat(2,1fr); }
}

/* ── Tablet ───────────────────────────────── max 768px ── */
@media (max-width: 768px) {
  .main { padding: 1.1rem 1rem 5rem; }
  .kpi-people-row { grid-template-columns: 1fr 1fr; }
  .kpi-summary-row { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .entity-header { padding: 1.25rem 1.1rem; }
  .entity-amount  { font-size: 2.2rem; }
  .entity-pills   { gap: .6rem; }
  .entity-person-pill { min-width: 130px; }
  .tab-btn { font-size: .78rem; padding: .55rem .6rem; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: .55rem .75rem; font-size: .82rem; white-space: nowrap; }
  .modal-box { max-width: 96vw; }
  .filter-bar-inner { gap: .4rem; }
  .filter-sep { display: none; }
  .filter-group-search .filter-input { width: 140px; }
  .filter-date { width: 115px; }
  .filter-month { width: 110px; }
  .filter-actions { margin-left: 0; }
}

/* ── Mobile ───────────────────────────────── max 600px ── */
@media (max-width: 600px) {
  /* Topbar */
  .topbar { padding: 0 1rem; height: 52px; }
  .topbar-brand span { display: none; }
  #user-display { display: none; }
  .topbar-right { gap: .5rem; }

  /* Main layout */
  .main { padding: .85rem .75rem 5rem; }

  /* KPIs */
  .kpi-people-row  { grid-template-columns: 1fr; }
  .kpi-summary-row { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .kpi-card { padding: .85rem .8rem; }
  .kpi-value { font-size: 1.05rem; }
  .kpi-label { font-size: .7rem; }
  .kpi-person-row { gap: .4rem; }

  /* Entity header */
  .entity-header { padding: 1rem .9rem; border-radius: var(--r); }
  .entity-total-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .entity-amount  { font-size: 2rem; }
  .entity-pills   { flex-wrap: wrap; gap: .5rem; }
  .entity-person-pill { min-width: 110px; flex: 1; }
  .ep-name { font-size: .72rem; }
  .ep-amount { font-size: 1.1rem; }

  /* Tabs */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .tab-btn { font-size: .75rem; padding: .5rem .55rem; flex-shrink: 0; }

  /* Tables */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
  .table-wrap table { min-width: 500px; }
  th, td { padding: .5rem .65rem; font-size: .8rem; white-space: nowrap; }

  /* Action bar */
  .action-bar { flex-wrap: wrap; gap: .5rem; }
  .action-bar .btn { font-size: .78rem; padding: .45rem .85rem; }

  /* Filters */
  .filters-grid { grid-template-columns: 1fr; }

  /* Modals — slide up from bottom on mobile */
  .modal-backdrop { align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    animation: modal-slide-up .25s ease;
  }
  @keyframes modal-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal-body { padding: 1rem .9rem; }
  .modal-head { padding: .9rem 1rem; }
  .modal-foot { padding: .8rem 1rem; flex-direction: column; gap: .5rem; }
  .modal-foot .btn { width: 100%; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }

  /* Login */
  #login-page { align-items: flex-start; padding-top: min(12vh, 3rem); }
  .login-card { padding: 2rem 1.25rem 1.75rem; }
  .login-title { font-size: 1.5rem; }

  /* WhatsApp preview */
  .whatsapp-preview { font-size: .78rem; padding: .75rem; max-height: 38vh; }

  /* Print button */
  #print-btn { display: none; }
}

/* ── Small phone ──────────────────────────── max 400px ── */
@media (max-width: 400px) {
  .main { padding: .7rem .6rem 5rem; }
  .kpi-summary-row { grid-template-columns: 1fr; }
  .kpi-card { padding: .75rem; }
  .entity-amount  { font-size: 1.75rem; }
  .entity-person-pill { flex: 1 1 100%; }
  th, td { padding: .4rem .5rem; font-size: .75rem; }
  .tab-btn { font-size: .7rem; padding: .45rem .4rem; }
}

/* ═══ FILTER BAR ════════════════════════════════════════════ */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-xs);
  margin: 0 0 1rem;
  padding: .65rem 1rem;
}
.filter-bar-form { display: flex; flex-direction: column; gap: .35rem; }
.filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
}

.filter-group { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.filter-pills-group { align-items: center; gap: .35rem; }
.filter-group-dates,
.filter-group-month { gap: .3rem; align-items: center; }

.filter-sep {
  width: 1px; height: 1.6rem;
  background: var(--border);
  margin: 0 .1rem;
  flex-shrink: 0;
}

.filter-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.filter-icon {
  color: var(--muted);
  flex-shrink: 0;
}

.filter-input {
  height: 2rem;
  padding: 0 .6rem;
  font-size: .82rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.filter-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: var(--surface);
}

.filter-group-search .filter-input { width: 180px; }
.filter-date  { width: 130px; }
.filter-month { width: 120px; }

/* ── Person pills ─── */
.filter-person-pills { display: flex; gap: .2rem; }
.fpill-item { position: relative; cursor: pointer; user-select: none; }
.fpill-item input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.fpill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; padding: 0 .65rem;
  font-size: .78rem; font-weight: 600;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.fpill-item input:checked ~ .fpill {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.fpill-item:hover .fpill {
  border-color: var(--primary);
  color: var(--primary);
}
.fpill.ahmed { --fp-bg: var(--ahmed-bg); --fp-clr: var(--ahmed-clr); --fp-border: var(--ahmed-border); }
.fpill.mohamed { --fp-bg: var(--mohamed-bg); --fp-clr: var(--mohamed-clr); --fp-border: var(--mohamed-border); }
.fpill-item input:checked ~ .fpill.ahmed {
  background: var(--ahmed-bg); color: var(--ahmed-clr); border-color: var(--ahmed-border);
}
.fpill-item input:checked ~ .fpill.mohamed {
  background: var(--mohamed-bg); color: var(--mohamed-clr); border-color: var(--mohamed-border);
}

/* ── Filter action buttons ─── */
.filter-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }
.filter-actions .btn { height: 2rem; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .75rem; }

/* ── Active filter badge bar ─── */
.filter-active-bar {
  display: flex; align-items: center;
  margin-top: .3rem;
  padding: .3rem .7rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--r-sm);
  font-size: .78rem;
  color: #1e40af;
  font-weight: 500;
}
.filter-active-bar::before {
  content: "▶";
  font-size: .6rem;
  margin-right: .4rem;
  opacity: .6;
}

/* ── Report result ─── */
.report-result {
  font-size: .82rem; color: var(--muted);
  margin-top: .35rem; padding: .3rem .5rem;
}

/* ═══ TABLE TOTALS FOOTER ═══════════════════════════════════ */
.table-totals { border-top: 2px solid var(--border); }
.table-totals td { padding: .6rem .75rem; background: var(--surface-2); }
.totals-label {
  font-size: .8rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.totals-amount {
  font-size: .95rem; font-weight: 800;
  color: var(--primary);
  text-align: right;
}

/* ═══ WHATSAPP MODE BAR ════════════════════════════════════ */
.wa-mode-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.4rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wa-mode-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); flex-shrink: 0;
}
.wa-mode-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 1.9rem; padding: 0 .85rem;
  font-size: .8rem; font-weight: 600;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wa-mode-btn:hover { border-color: var(--wa-green); color: var(--wa-dark); }
.wa-mode-btn.active {
  background: var(--wa-green);
  color: #fff;
  border-color: var(--wa-green);
}

/* ── Date toggle ─── */
.wa-date-toggle { display: none; }

/* ── Two-person panels ─── */
.wa-persons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .wa-persons-grid { grid-template-columns: 1fr; }
}
.wa-person-panel {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.wa-person-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.wa-person-head .badge-user { font-size: .82rem; padding: .25rem .65rem; }
.wa-person-panel .whatsapp-preview {
  margin: 0;
  border: none;
  border-radius: 0;
  flex: 1;
  max-height: 340px;
  overflow-y: auto;
}
.wa-person-panel-both {
  grid-column: 1 / -1;
}
.wa-person-panel-both .whatsapp-preview { max-height: 260px; }
.wa-both-label {
  font-size: .82rem; font-weight: 700; color: var(--text);
}

/* ═══ PRINT MEDIA ══════════════════════════════════════════ */
@media print {
  @page { size: A4 portrait; margin: 6mm 8mm; }

  body { background: #fff; color: #111; font-size: 9pt; }

  .topbar, #login-page, .entity-header,
  .kpi-people-row, .kpi-summary-row,
  .filter-bar, .tabs, #tab-expenses, #tab-repayments,
  #toast-container, .modal-backdrop { display: none !important; }

  .main { padding: 0; max-width: 100%; }

  .print-sheet {
    display: block !important;
    background: #fff; color: #111;
    font-family: 'Cairo', 'Inter', Arial, sans-serif;
  }

  /* Outstanding hero block */
  .ps-outstanding {
    background: linear-gradient(135deg, #0f2027, #1a3a2a);
    color: #fff;
    border-radius: 6pt;
    padding: 10pt 14pt;
    margin-bottom: 8pt;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ps-outstanding-left h2 {
    font-size: 10pt; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.65); margin: 0 0 3pt;
  }
  .ps-outstanding-left h2.ar { font-family: 'Cairo', Arial, sans-serif; direction: rtl; font-size: 10pt; text-transform: none; letter-spacing: 0; }
  .ps-outstanding-amount { font-size: 22pt; font-weight: 900; color: #4ade80; letter-spacing: -.03em; }
  .ps-outstanding-persons { display: flex; gap: 8pt; margin-top: 5pt; }
  .ps-op { padding: 4pt 8pt; border-radius: 3pt; font-size: 9pt; font-weight: 700; }
  .ps-op.ahmed   { background: rgba(167,139,250,.25); color: #c4b5fd; }
  .ps-op.mohamed { background: rgba(96,165,250,.25);  color: #93c5fd; }

  /* header */
  .ps-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 7pt; padding-bottom: 6pt;
    border-bottom: 2px solid #4f46e5;
  }
  .ps-header-left h1 {
    font-size: 13pt; font-weight: 800; color: #4f46e5; margin: 0;
    letter-spacing: -.02em;
  }
  .ps-header-left p { font-size: 8pt; color: #6b7280; margin: 1pt 0 0; }
  .ps-header-right { text-align: right; font-size: 7.5pt; color: #6b7280; }

  .ps-section-title {
    font-size: 7.5pt; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: #374151;
    margin: 7pt 0 3pt; padding-bottom: 2pt;
    border-bottom: 1.5px solid #e5e7eb;
  }

  /* 4-col summary grid */
  .ps-summary-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 4pt; margin-bottom: 5pt;
  }
  .ps-summary-box {
    border: 1px solid #d1d5db; border-radius: 3pt; padding: 4pt 7pt;
    text-align: center;
  }
  .ps-summary-box label { display: block; font-size: 6.5pt; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.5pt; }
  .ps-summary-box span  { font-size: 9.5pt; font-weight: 800; color: #111; }

  /* per-person row */
  .ps-person-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6pt; margin-bottom: 6pt; }
  .ps-person-box { border: 1.5px solid; border-radius: 3pt; padding: 5pt 7pt; }
  .ps-person-box.ahmed-box   { border-color: #a78bfa; }
  .ps-person-box.mohamed-box { border-color: #93c5fd; }
  .ps-person-box h4 { font-size: 9pt; font-weight: 800; margin: 0 0 4pt; }
  .ps-person-box.ahmed-box   h4 { color: #5b21b6; }
  .ps-person-box.mohamed-box h4 { color: #1d4ed8; }
  .ps-person-kv { display: flex; justify-content: space-between; font-size: 8pt; margin-bottom: 2pt; }
  .ps-person-kv span:last-child { font-weight: 600; }
  .ps-owed { margin-top: 4pt; padding: 3pt 5pt; border-radius: 2pt; font-size: 8.5pt; font-weight: 700; }
  .ps-owed.green { background: #dcfce7; color: #166534; }
  .ps-owed.red   { background: #fee2e2; color: #991b1b; }

  /* print-specific table */
  .ps-table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 5pt; font-size: 7.5pt;
    page-break-inside: auto;
  }
  .ps-table th {
    background: #f3f4f6; color: #374151;
    padding: 3pt 5pt; text-align: left;
    font-size: 6.5pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border: 1px solid #d1d5db;
  }
  .ps-table td {
    padding: 2.5pt 5pt; border: 1px solid #e5e7eb;
    vertical-align: top;
  }
  .ps-table tfoot td {
    background: #f9fafb; font-weight: 700; border-top: 2px solid #d1d5db;
    font-size: 8pt;
  }
  tr { page-break-inside: avoid; }

  .ps-footer { margin-top: 7pt; padding-top: 4pt; border-top: 1px solid #e5e7eb; font-size: 7pt; color: #9ca3af; text-align: center; }

  /* Arabic text in print */
  [dir="rtl"], .ar { font-family: 'Cairo', Arial, sans-serif; direction: rtl; text-align: right; }
}

@media print {
  body { background: #fff; color: #111; font-size: 10pt; }

  .topbar, #login-page, .kpi-people-row, .kpi-summary-row,
  .filter-bar, .tabs, #tab-expenses, #tab-repayments,
  #toast-container, .modal-backdrop { display: none !important; }

  .main { padding: 0; max-width: 100%; }

  .print-sheet {
    display: block !important;
    background: #fff; color: #111;
    font-family: 'Cairo', 'Inter', Arial, sans-serif;
  }

  /* print-specific table */
  .ps-table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 8pt; font-size: 9pt;
    page-break-inside: auto;
  }
  .ps-table th {
    background: #f3f4f6; color: #374151;
    padding: 4pt 6pt; text-align: left;
    font-size: 8pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border: 1px solid #d1d5db;
  }
  .ps-table td {
    padding: 4pt 6pt; border: 1px solid #e5e7eb;
    vertical-align: top;
  }
  .ps-table tfoot td {
    background: #f9fafb; font-weight: 700; border-top: 2px solid #d1d5db;
  }
  tr { page-break-inside: avoid; }

  .ps-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10pt; padding-bottom: 8pt;
    border-bottom: 2px solid #4f46e5;
  }
  .ps-header-left h1 {
    font-size: 16pt; font-weight: 800; color: #4f46e5; margin: 0;
    letter-spacing: -.02em;
  }
  .ps-header-left p { font-size: 9pt; color: #6b7280; margin: 2pt 0 0; }
  .ps-header-right { text-align: right; font-size: 8.5pt; color: #6b7280; }

  .ps-section-title {
    font-size: 9pt; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: #374151;
    margin: 9pt 0 4pt; padding-bottom: 3pt;
    border-bottom: 1.5px solid #e5e7eb;
  }

  .ps-summary-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 6pt; margin-bottom: 4pt;
  }
  .ps-summary-box {
    border: 1px solid #d1d5db; border-radius: 4pt; padding: 6pt 8pt;
    text-align: center;
  }
  .ps-summary-box label { display: block; font-size: 7pt; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2pt; }
  .ps-summary-box span  { font-size: 11pt; font-weight: 800; color: #111; }

  .ps-person-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; margin-bottom: 8pt; }
  .ps-person-box { border: 1.5px solid; border-radius: 4pt; padding: 7pt 9pt; }
  .ps-person-box.ahmed-box   { border-color: #a78bfa; }
  .ps-person-box.mohamed-box { border-color: #93c5fd; }
  .ps-person-box h4 { font-size: 10pt; font-weight: 800; margin: 0 0 5pt; }
  .ps-person-box.ahmed-box   h4 { color: #5b21b6; }
  .ps-person-box.mohamed-box h4 { color: #1d4ed8; }
  .ps-person-kv { display: flex; justify-content: space-between; font-size: 9pt; margin-bottom: 3pt; }
  .ps-person-kv span:last-child { font-weight: 600; }
  .ps-owed { margin-top: 6pt; padding: 5pt 7pt; border-radius: 3pt; font-size: 9pt; font-weight: 700; }
  .ps-owed.green { background: #dcfce7; color: #166534; }
  .ps-owed.red   { background: #fee2e2; color: #991b1b; }

  .ps-footer { margin-top: 10pt; padding-top: 6pt; border-top: 1px solid #e5e7eb; font-size: 7.5pt; color: #9ca3af; text-align: center; }

  /* Arabic text in print */
  [dir="rtl"], .ar { font-family: 'Cairo', Arial, sans-serif; direction: rtl; text-align: right; }
}