:root {
  --font-farsi: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --radius: 14px;
  --bg: #f4f7fc;
  --surface: rgba(255,255,255,.9);
  --border: rgba(255,255,255,.18);
  --shadow-1: 0 10px 24px rgba(2,6,23,.35);
  --primary: #0ea5e9;
  --secondary: #64748b;
  --success: #16a34a;
  --danger: #ef4444;
  --info: #06b6d4;
  --warning: #f59e0b;
  --text: #0f172a;
  --muted: #334155;
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-danger: var(--danger);
  --bs-warning: var(--warning);
  --bs-info: var(--info);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
}

body { font-family: var(--font-farsi); color: var(--text); background: linear-gradient(120deg, #eef6ff 0%, #f4f7fc 100%); }

.navbar.navbar-dark.bg-dark {
  background: linear-gradient(120deg, #1f2937 0%, #334155 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.navbar .btn { border-radius: 9999px; transition: all .2s ease; }
.navbar .btn:hover { transform: translateY(-1px); }
.navbar-brand { font-weight: 700; letter-spacing: .2px; }

.card { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-1); background: var(--surface); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
.card.text-bg-warning, .card.text-bg-success, .card.text-bg-info { box-shadow: var(--shadow-1); }
.card-header { font-weight: 600; background: transparent; border-bottom: 1px solid var(--border); }

.table { --stripe:rgba(255,255,255,.65); --hover:rgba(255,255,255,.8); border-color: var(--border); }
.table thead th { font-weight: 600; color: var(--muted); }
.table tbody tr:hover { background-color: var(--hover); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--stripe); }
.table td, .table th { vertical-align: middle; }

.list-group-item { border-color: var(--border); border-radius: calc(var(--radius) - 6px); padding: .625rem .75rem; transition: background-color .2s ease, transform .2s ease; background-color: rgba(255,255,255,.9); }
#peopleList .list-group-item.active, #peopleListMobile .list-group-item.active { background-image: linear-gradient(135deg, #0ea5e9, #3b82f6); border-color: transparent; color: #fff; }
#peopleList .list-group-item:hover, #peopleListMobile .list-group-item:hover { transform: translateX(-1px); }

.badge { font-size: 1rem; border-radius: 9999px; padding: .35rem .6rem; }

.btn { border-radius: 9999px; transition: box-shadow .2s ease, transform .2s ease; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline-secondary:hover { transform: translateY(-1px); }

.form-control { border-color: var(--border); border-radius: 10px; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(59,130,246,.15); }

.modal-content { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-title { font-weight: 700; }

#personActionBar { transition: opacity .2s ease; }

.money-input { direction: ltr; text-align: right; }
.money-input, #purchaseDateJalali, #receiptDateJalali, #reportFromJ, #reportToJ, #jalaliCalendar, #jcMonth, #jcYear { font-family: var(--font-farsi); }

/* Liquid Glass summary cards */
.card.text-bg-warning,
.card.text-bg-success,
.card.text-bg-info { position: relative; overflow: hidden; color: #0f172a; }
.card.text-bg-warning { background: linear-gradient(135deg, #f59e0b40, #ffffff10); border: 1px solid #f59e0b3a; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 10px 24px rgba(245, 158, 11, .25), var(--shadow-1); }
.card.text-bg-success { background: linear-gradient(135deg, #16a34a40, #ffffff10); border: 1px solid #16a34a3a; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 10px 24px rgba(22, 163, 74, .25), var(--shadow-1); }
.card.text-bg-info { background: linear-gradient(135deg, #06b6d440, #ffffff10); border: 1px solid #06b6d43a; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 10px 24px rgba(6, 182, 212, .25), var(--shadow-1); }
.card.text-bg-warning::before,
.card.text-bg-success::before,
.card.text-bg-info::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 10% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%); pointer-events: none; }
.card.text-bg-warning .card-title,
.card.text-bg-success .card-title,
.card.text-bg-info .card-title { color: #0f172a; }
.card.text-bg-warning .card-text,
.card.text-bg-success .card-text,
.card.text-bg-info .card-text { color: #0f172a; }
.money-input, #purchaseDateJalali, #receiptDateJalali, #reportFromJ, #reportToJ, #jalaliCalendar, #jcMonth, #jcYear { font-family: var(--font-farsi); }

#jalaliCalendar { width: 20rem; }
#jalaliCalendar .card-header { padding: .5rem; }
#jalaliCalendar .jc-day { width: 2.4rem; }
@media (max-width: 480px) {
  #jalaliCalendar { width: 16rem; }
  #jalaliCalendar .jc-day { width: 2.2rem; padding: .25rem; font-size: .875rem; }
}
#bgCanvas, #bgCanvas2, #bgCanvas3 { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#mobilePeopleToggleBtn { position: relative; z-index: 1; background-color: #ffffff; color: var(--text); border: 1px solid var(--border); }
#personModal .modal-dialog, #purchaseModal .modal-dialog { position: relative; }
.modal-content.modal-glass { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(2,6,23,.25); }
.modal-content.modal-glass .modal-header, .modal-content.modal-glass .modal-body, .modal-content.modal-glass .modal-footer { position: relative; z-index: 1; }
.modal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

#personModal .form-control, #purchaseModal .form-control { background-color: rgba(255,255,255,.96); border-width: 2px; }
#personModal .form-control-lg, #purchaseModal .form-control-lg { padding: .75rem 1rem; border-radius: 12px; }