/* ==========================================================================
   Charges Page — Premium Redesign
   Design tokens: Navy #0F172A, Gold #C8A968, Gold Light #F6E7C2
   ========================================================================== */

/* ---------- Design tokens (charges scope) ---------- */
.charges-page {
  --ch-navy: #0F172A;
  --ch-gold: #C8A968;
  --ch-gold-light: #F6E7C2;
  --ch-bg: #F7F9FC;
  --ch-white: #FFFFFF;
  --ch-border: #E6ECF2;
  --ch-text: #0F172A;
  --ch-text-secondary: #64748B;
  --ch-text-light: #94A3B8;
  --ch-success: #22C55E;
  --ch-danger: #EF4444;
  --ch-warning: #F59E0B;
  --ch-page-pad: 16px;
  --ch-radius-card: 20px;
  --ch-radius-input: 14px;
  --ch-radius-badge: 999px;
  --ch-shadow-primary: 0 20px 60px rgba(15, 23, 42, 0.06);
  --ch-shadow-medium: 0 12px 30px rgba(15, 23, 42, 0.08);
  --ch-shadow-fab: 0 20px 40px rgba(15, 23, 42, 0.25);
  --ch-transition: 300ms ease;
  --pd-pad: var(--ch-page-pad);
  --pd-bg: var(--ch-bg);
  --pd-primary: var(--ch-navy);
  --pd-gold: var(--ch-gold);
  --pd-muted: var(--ch-text-secondary);
  --pd-border: var(--ch-border);
  --pd-card: var(--ch-white);
  --pd-fs-2xs: 10px;
  --pd-fs-lg: 15px;
  --pd-fs-xl: 17px;
  --pd-r-sm: 12px;
  --pd-r-md: 16px;
  --pd-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  --pd-transition: var(--ch-transition);
  --pd-touch: 40px;
  font-family: Vazirmatn, inherit;
}

/* ---------- Layout integration ---------- */
.layout--charges {
  min-height: 100vh;
  min-height: 100dvh;
}

.layout--charges .main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.layout--charges .topbar {
  display: none !important;
}

.content.charges-content-host {
  background: var(--ch-bg, #F7F9FC);
  padding: 0 !important;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: Vazirmatn, inherit;
}

.vp-mobile .layout--charges .content.charges-content-host {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

@media (min-width: 721px) {
  .vp-desktop .layout--charges .charges-page > .pd-header {
    width: auto;
    inset-inline-start: 272px;
    inset-inline-end: 0;
  }
}

/* ---------- Page shell ---------- */
.charges-page {
  position: relative;
  min-height: 100%;
  padding: var(--ch-page-pad);
  padding-top: calc(58px + env(safe-area-inset-top, 0) + var(--ch-page-pad));
  background: var(--ch-bg);
  font-family: Vazirmatn, inherit;
  color: var(--ch-text);
}

.charges-page::before {
  content: "";
  position: absolute;
  top: -60px;
  inset-inline: 10%;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(200, 169, 104, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.charges-page > * {
  position: relative;
  z-index: 1;
}

/* ---------- Header (same pattern as dashboard) ---------- */
.layout--charges .charges-page > .pd-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 90;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top, 0)) var(--ch-page-pad) 8px;
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

/* legacy ch-header (unused) */
.ch-header { display: none; }

/* ---------- Hero ---------- */
.ch-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 16px;
}

.ch-hero--compact {
  margin-bottom: 14px;
}

.ch-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--ch-navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ch-hero__sub {
  margin: 0;
  font-size: 13px;
  color: var(--ch-text-secondary);
  line-height: 1.45;
  max-width: 320px;
}

.ch-hero__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ch-hero__toolbar .btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 16px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}

.ch-hero__toolbar .btn:hover {
  transform: scale(1.02);
}

.ch-hero__toolbar .btn.primary {
  background: var(--ch-navy);
  border-color: var(--ch-navy);
}

/* ---------- Filters container ---------- */
.charges-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ch-filters-row {
  display: block;
}

.ch-filters-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: var(--ch-radius-card);
  background: #ffffff;
  border: 1px solid rgba(214, 169, 79, 0.18);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  font-family: Vazirmatn, inherit;
  box-sizing: border-box;
}

.ch-filters-panel__periods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ch-filter-field {
  min-width: 0;
}

.ch-filter-field__heading,
.ch-filter-card__heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #24324a;
  line-height: 1.3;
  font-family: Vazirmatn, inherit;
}

.ch-filter-field--month {
  position: relative;
}

.ch-filters-panel__stats {
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ch-filters-panel__stats-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ch-filters-panel__stats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff8ea;
  flex-shrink: 0;
}

.ch-filters-panel__stats-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  line-height: 1.35;
}

.ch-period-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.ch-period-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 4px;
  text-align: center;
}

.ch-period-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

.ch-period-stat__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.ch-period-stat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ch-period-stat--all .ch-period-stat__dot { background: #cbd5e1; }
.ch-period-stat--paid .ch-period-stat__dot { background: #22c55e; }
.ch-period-stat--unpaid .ch-period-stat__dot { background: #ef4444; }
.ch-period-stat--pending .ch-period-stat__dot { background: #d4a64a; }

.ch-period-stat__label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-period-stat__num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ch-period-stat--all .ch-period-stat__num { color: #0f172a; }
.ch-period-stat--paid .ch-period-stat__num { color: #22c55e; }
.ch-period-stat--unpaid .ch-period-stat__num { color: #ef4444; }
.ch-period-stat--pending .ch-period-stat__num { color: #d4a64a; }

.ch-period-stats__hint {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
}

/* Period filter card (legacy alias) */
.ch-filter-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px;
  border-radius: var(--ch-radius-card);
  background: #ffffff;
  border: 1px solid rgba(214, 169, 79, 0.18);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  font-family: Vazirmatn, inherit;
}

.ch-filter-card__col {
  flex: none;
  width: 100%;
  min-width: 0;
}

.ch-filter-card__heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #24324a;
  line-height: 1.3;
  font-family: Vazirmatn, inherit;
}

.ch-period-dd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--ch-radius-input);
  background: #ffffff;
  border: 1.5px solid rgba(214, 169, 79, 0.3);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 300ms ease, box-shadow 300ms ease;
  font-family: Vazirmatn, inherit;
  text-align: start;
}

.ch-period-dd--field {
  cursor: text;
}

button.ch-period-dd {
  appearance: none;
  -webkit-appearance: none;
}

.ch-period-dd:hover,
.ch-period-dd:focus-within {
  border-color: #d6a94f;
  box-shadow: 0 12px 28px rgba(214, 169, 79, 0.18);
}

.ch-period-dd:focus-within {
  border-width: 2px;
  padding: 8px 13px;
}

.ch-period-dd__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(214, 169, 79, 0.1);
}

.ch-period-dd__text,
.ch-period-dd__input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  font-family: Vazirmatn, inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  cursor: pointer;
}

.ch-period-dd__input {
  cursor: text;
  outline: none !important;
}

.ch-period-dd__chev {
  flex-shrink: 0;
  color: #64748b;
  pointer-events: none;
}

/* Month picker dropdown */
.ch-filter-field--month,
.ch-filter-card__col--month {
  position: relative;
}

.ch-month-picker {
  position: relative;
}

.ch-month-picker.is-open .ch-period-dd {
  border-color: #d6a94f;
  box-shadow: 0 12px 28px rgba(214, 169, 79, 0.18);
}

.ch-month-picker__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 80;
  min-width: min(100%, 280px);
  width: max(100%, 260px);
  padding: 14px;
  border-radius: 22px;
  background: #ffffff;
  border: 1.5px solid rgba(214, 169, 79, 0.25);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}

.ch-month-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ch-month-picker__item {
  min-height: 40px;
  padding: 8px 4px;
  border: 1px solid #e6ecf2;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  font-family: Vazirmatn, inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease;
}

.ch-month-picker__item:hover {
  border-color: #d6a94f;
  transform: scale(1.02);
}

.ch-month-picker__item.is-today {
  border-color: rgba(214, 169, 79, 0.55);
  background: rgba(214, 169, 79, 0.08);
}

.ch-month-picker__item.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

/* Status summary card — compact 4-column grid */
.ch-status-card {
  width: 100%;
  padding: 14px;
  border-radius: var(--ch-radius-card);
  background: #ffffff;
  border: 1px solid rgba(210, 220, 235, 0.45);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  font-family: Vazirmatn, inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ch-status-card__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.ch-status-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff8ea;
}

.ch-status-card__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  line-height: 1.35;
}

.ch-status-card__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.ch-status-card__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 2px;
  border-radius: 12px;
  transition: background 250ms ease;
}

.ch-status-card__col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

.ch-status-card__col:hover {
  background: rgba(212, 166, 74, 0.06);
}

.ch-status-card__label-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.ch-status-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ch-status-card__col--all .ch-status-card__dot { background: #cbd5e1; }
.ch-status-card__col--paid .ch-status-card__dot { background: #22c55e; }
.ch-status-card__col--unpaid .ch-status-card__dot { background: #ef4444; }
.ch-status-card__col--pending .ch-status-card__dot { background: #d4a64a; }

.ch-status-card__label {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}

.ch-status-card__num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.ch-status-card__col--all .ch-status-card__num { color: #0f172a; }
.ch-status-card__col--paid .ch-status-card__num { color: #22c55e; }
.ch-status-card__col--unpaid .ch-status-card__num { color: #ef4444; }
.ch-status-card__col--pending .ch-status-card__num { color: #d4a64a; }

.ch-filters-row .ch-status-card__head {
  margin-bottom: 8px;
}

.ch-filters-row .ch-status-card__grid {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 6px;
}

.ch-filters-row .ch-status-card__col:not(:last-child)::after {
  display: none;
}

.ch-filters-row .ch-status-card__col:nth-child(odd)::after {
  display: block;
  height: 32px;
}

.ch-filters-row .ch-status-card__col:nth-child(2)::after {
  display: none;
}

.ch-status-card__suffix {
  font-size: 9px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.2;
}

.ch-scope-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(214, 169, 79, 0.22);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.ch-scope-banner__hero {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.06), rgba(200, 169, 107, 0.14));
}

.ch-scope-banner__count {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ch-scope-banner__label {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  line-height: 1.35;
  max-width: 72px;
}

.ch-scope-banner__content {
  flex: 1;
  min-width: 0;
}

.ch-scope-banner__hint {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #334155;
}

.ch-scope-banner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ch-scope-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Search row — filter + search as separate boxes */
.ch-search-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ch-search-row__filter {
  flex-shrink: 0;
  width: auto;
  min-width: 52px;
  height: 52px;
  padding: 4px 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-input);
  background: var(--ch-gold-light);
  color: var(--ch-navy);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: transform var(--ch-transition), background var(--ch-transition);
  font-family: Vazirmatn, inherit;
}

.ch-search-row__filter-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--ch-navy);
  pointer-events: none;
}

.ch-search-row__filter:hover {
  transform: scale(1.02);
  background: #f0ddb0;
}

.ch-search-row__wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 0 12px;
  cursor: text;
  border-radius: var(--ch-radius-input);
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: border-color var(--ch-transition);
}

.ch-search-row__wrap:focus-within {
  outline: none;
  border-color: rgba(200, 169, 104, 0.55);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.ch-search-row__wrap:focus-within .ch-search-row__icon {
  color: var(--ch-gold);
}

.ch-search-row__icon {
  flex-shrink: 0;
  color: var(--ch-text-light);
}

.ch-search-row__input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  min-height: auto !important;
  font-family: Vazirmatn, inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ch-navy);
  width: 100%;
  outline: none !important;
  caret-color: var(--ch-navy);
}

.ch-search-row__input:focus,
.ch-search-row__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.ch-search-row__input::placeholder {
  color: var(--ch-text-light);
}

/* Building dropdown */
.ch-building-dd {
  position: relative;
}

.ch-building-dd__trigger,
.charges-unit-tree__trigger.ch-building-dd__trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--ch-radius-input);
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ch-navy);
  cursor: pointer;
  transition: border-color var(--ch-transition), box-shadow var(--ch-transition), transform var(--ch-transition);
}

.ch-building-dd__trigger:hover,
.charges-unit-tree.is-open .ch-building-dd__trigger {
  border-color: var(--ch-gold);
  box-shadow: var(--ch-shadow-medium);
}

.ch-building-dd__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ch-gold-light);
  color: var(--ch-gold);
}

.ch-building-dd__label {
  flex: 1;
  min-width: 0;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-building-dd__chev {
  flex-shrink: 0;
  color: var(--ch-text-secondary);
  transition: transform var(--ch-transition);
}

.charges-unit-tree.is-open .ch-building-dd__chev {
  transform: rotate(180deg);
}

/* Unit tree filter dropdown */
.charges-filters,
.charges-unit-tree {
  overflow: visible;
}

.charges-unit-tree {
  position: relative;
  flex: 0 1 100%;
  min-width: 0;
}

.charges-unit-tree__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  z-index: 60;
  max-height: min(380px, 55vh);
  overflow-y: auto;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  box-shadow: var(--ch-shadow-medium);
}

.charges-unit-tree__panel[hidden] {
  display: none !important;
}

.charges-unit-tree.is-open .charges-unit-tree__panel:not(.charges-unit-tree__panel--overlay) {
  display: block;
}

/* Professional floating overlay (portaled to body) */
.charges-unit-tree__panel.charges-unit-tree__panel--overlay {
  position: fixed !important;
  display: block !important;
  inset-inline: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1000 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #ffffff !important;
  border: 1px solid var(--ch-border) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18) !important;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.charges-unit-tree__panel--overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.charges-unit-tree__panel--overlay.is-above {
  transform: translateY(8px);
}

.charges-unit-tree__panel--overlay.is-above.is-visible {
  transform: translateY(0);
}

.charges-unit-tree__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: transparent;
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ch-navy);
  cursor: pointer;
  text-align: start;
  transition: background var(--ch-transition);
}

.charges-unit-tree__item:hover {
  background: var(--ch-bg);
}

.charges-unit-tree__item.is-selected {
  background: rgba(200, 169, 104, 0.15);
  color: var(--ch-navy);
  font-weight: 700;
}

.charges-unit-tree__item-icon {
  flex-shrink: 0;
  color: var(--ch-gold);
}

.charges-unit-tree__floor {
  margin-top: 6px;
}

.charges-unit-tree__block {
  margin-top: 8px;
}

.charges-unit-tree__block-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: rgba(200, 169, 104, 0.1);
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-navy);
  cursor: pointer;
  text-align: start;
}

.charges-unit-tree__block-chevron {
  flex-shrink: 0;
  transition: transform var(--ch-transition);
  color: var(--ch-text-secondary);
}

.charges-unit-tree__block.is-expanded .charges-unit-tree__block-chevron {
  transform: rotate(180deg);
}

.charges-unit-tree__block-body {
  padding: 4px 4px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.charges-unit-tree__block-body[hidden] {
  display: none;
}

.charges-unit-tree__floor-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: var(--ch-bg);
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-navy);
  cursor: pointer;
  text-align: start;
}

.charges-unit-tree__floor-chevron {
  flex-shrink: 0;
  transition: transform var(--ch-transition);
  color: var(--ch-text-secondary);
}

.charges-unit-tree__floor.is-expanded .charges-unit-tree__floor-chevron {
  transform: rotate(180deg);
}

.charges-unit-tree__floor-units {
  padding: 4px 4px 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.charges-unit-tree__floor-units[hidden] {
  display: none;
}

.charges-unit-tree__floor-units .charges-unit-tree__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
}

.charges-unit-tree__unit-id {
  font-weight: 700;
  font-size: 14px;
}

.charges-unit-tree__unit-name {
  font-size: 12px;
  color: var(--ch-text-secondary);
  font-weight: 500;
}

/* Status tabs */
.charges-status-tabs {
  display: flex;
  gap: 4px;
  height: 52px;
  padding: 4px;
  border-radius: 16px;
  background: #EEF2F7;
  border: 1px solid var(--ch-border);
  overflow: hidden;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

.charges-status-tabs__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ch-text-secondary);
  font-family: Vazirmatn, inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ch-transition), color var(--ch-transition), box-shadow var(--ch-transition), transform var(--ch-transition);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .charges-status-tabs__btn:hover {
    transform: scale(1.02);
  }
}

.charges-status-tabs__btn:active {
  transform: scale(0.98);
}

.charges-status-tabs__btn.is-active {
  background: var(--ch-navy);
  color: var(--ch-white);
  box-shadow: var(--ch-shadow-medium);
}

.charges-status-tabs__btn.is-active:active {
  transform: none;
}

.charges-status-tabs__count {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
}

/* Legacy filter helpers (shared class names) */
.charges-filters__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.charges-filters__period-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.charges-filters__period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 0;
}

.charges-filters__period-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ch-text-secondary);
}

.charges-filters__period-input {
  min-height: 44px;
}

.charges-filters__search-wrap {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: var(--ch-radius-input);
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  box-shadow: var(--ch-shadow-primary);
}

.charges-filters__search-icon {
  color: var(--ch-text-light);
  flex-shrink: 0;
}

.charges-filters__search {
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  background: transparent !important;
  width: 100%;
  min-height: auto !important;
  font-family: Vazirmatn, inherit;
}

.charges-filters__unit {
  flex: 0 1 220px;
  min-height: 44px;
  border-radius: var(--ch-radius-input);
}

.charges-period-summary {
  padding: 14px 18px;
  border-radius: var(--ch-radius-input);
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
}

.charges-period-summary__title {
  font-size: 13px;
  color: var(--ch-text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.charges-period-summary__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
}

.charges-period-summary__stat strong { font-weight: 700; }
.charges-period-summary__stat--paid strong { color: var(--ch-success); }
.charges-period-summary__stat--unpaid strong { color: var(--ch-danger); }
.charges-period-summary__stat--muted strong { color: var(--ch-text-secondary); }

.unit-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  line-height: 1.45;
}

.unit-display__id {
  font-weight: 700;
  color: var(--ch-navy);
}

.unit-display__sep {
  color: var(--ch-text-light);
  font-weight: 400;
}

.unit-display__name {
  font-weight: 500;
  color: var(--ch-text-secondary);
}

.unit-display__name.is-unknown {
  color: var(--ch-text-light);
  font-size: 12px;
  font-style: italic;
}

/* ---------- Desktop / mobile views ---------- */
.charges-desktop { display: none; }
.charges-mobile { display: block; }

.charges-page .card.table-wrap.charges-desktop {
  border-radius: var(--ch-radius-card);
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  box-shadow: var(--ch-shadow-primary);
  overflow: hidden;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}

.charges-page .card.table-wrap.charges-desktop:hover {
  transform: translateY(-2px);
  box-shadow: var(--ch-shadow-medium);
}

/* ---------- Charges table (desktop) ---------- */
.charges-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: Vazirmatn, inherit;
}

.charges-table th,
.charges-table td {
  padding: 14px 16px;
  text-align: start;
  border-bottom: 1px solid var(--ch-border);
  vertical-align: middle;
}

.charges-table th {
  color: var(--ch-text-secondary);
  font-weight: 600;
  font-size: 13px;
  background: var(--ch-bg);
  white-space: nowrap;
}

.charge-group-row {
  cursor: pointer;
  transition: background var(--ch-transition);
}

.charge-group-row:hover td { background: rgba(247, 249, 252, 0.8); }
.charge-group-row.is-open td { background: var(--ch-bg); }

.charge-group-row__toggle {
  width: 44px;
  padding-inline-start: 10px !important;
}

.charge-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ch-text-light);
  cursor: pointer;
  transition: transform var(--ch-transition), background var(--ch-transition), color var(--ch-transition);
}

.charge-expand:hover {
  background: var(--ch-bg);
  color: var(--ch-navy);
}

.charge-group-row.is-open .charge-expand {
  transform: rotate(180deg);
  color: var(--ch-gold);
}

.charge-group-row__title { font-weight: 700; color: var(--ch-navy); }

.charge-sub-wrap {
  padding: 0 !important;
  border-bottom: 1px solid var(--ch-border);
  background: var(--ch-bg);
}

.charge-sub-wrap[hidden] { display: none; }

.charge-sub-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--ch-transition), opacity var(--ch-transition);
}

.charge-sub-panel.is-visible {
  max-height: 800px;
  opacity: 1;
}

.charge-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.charge-subtable th,
.charge-subtable td {
  padding: 10px 16px 10px 44px;
  border-bottom: 1px solid var(--ch-border);
  background: transparent;
}

.charge-subtable tr:last-child td { border-bottom: none; }

.charge-subtable th {
  font-size: 12px;
  color: var(--ch-text-secondary);
  font-weight: 600;
  background: rgba(15, 23, 42, 0.02);
}

.charge-subtable__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  white-space: normal;
}

.charge-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--ch-text-light);
  cursor: help;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
}

.charge-info:hover,
.charge-info:focus {
  color: var(--ch-gold);
  outline: none;
}

.charge-info__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ch-navy);
  color: var(--ch-white);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  text-align: start;
  box-shadow: var(--ch-shadow-medium);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 5;
}

[dir="rtl"] .charge-info__tip { transform: translateX(50%); }

.charge-info:hover .charge-info__tip,
.charge-info:focus .charge-info__tip {
  opacity: 1;
  visibility: visible;
}

.charges-table .badge.green,
.charge-mcard .badge.green {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ch-success);
}

.charges-table .badge.red,
.charge-mcard .badge.red {
  background: rgba(239, 68, 68, 0.1);
  color: var(--ch-danger);
}

.charges-table .badge.orange,
.charge-mcard .badge.orange {
  background: rgba(245, 158, 11, 0.12);
  color: var(--ch-warning);
}

.charges-page .badge.gray {
  background: #FFF7E8;
  color: #B8943F;
  border-radius: var(--ch-radius-badge);
}

/* ---------- Compact unit row ---------- */
.charge-unit-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}

.charge-unit-compact__unit {
  font-weight: 700;
  color: var(--ch-navy);
}

.charge-unit-compact__floor {
  color: var(--ch-text-secondary);
  font-size: 12px;
}

.charge-unit-compact__resident {
  color: var(--ch-navy);
  font-weight: 500;
}

.charge-unit-compact__resident.is-unknown {
  color: var(--ch-text-light);
  font-style: italic;
  font-weight: 400;
}

.charge-unit-compact__sep {
  color: var(--ch-border);
  font-size: 11px;
  user-select: none;
}

/* ---------- Mobile card list ---------- */
.charges-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  max-width: 920px;
}

.charge-mcard {
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}

.charge-mcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--ch-shadow-medium);
}

.charge-mcard.is-open {
  box-shadow: var(--ch-shadow-medium);
}

/* Premium unit cards */
.charge-mcard--premium {
  min-height: 0;
  border-radius: 16px;
}

.charge-mcard--premium .charge-mcard__header {
  padding: 12px 14px;
}

.charge-mcard--premium .charge-mcard__header:hover {
  background: transparent;
}

.charge-mcard__building-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ch-gold-light);
}

.charge-mcard__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  transition: background var(--ch-transition);
}

.charge-mcard__summary {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.charge-mcard__head-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.charge-mcard__head-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.charge-mcard__head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.charge-mcard__head-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.charge-mcard__unit-id {
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-navy);
  line-height: 1.35;
}

.charge-mcard__floor {
  font-size: 11px;
  font-weight: 500;
  color: var(--ch-text-secondary);
}

.charge-mcard__status-badge .badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--ch-radius-badge);
}

.charge-mcard__resident {
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-text-secondary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.charge-mcard__resident.is-unknown {
  color: var(--ch-text-light);
  font-style: italic;
}

.charge-mcard__period {
  font-size: 12px;
  color: var(--ch-text-light);
}

.charge-mcard__head-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--ch-border);
}

.charge-mcard__head-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.charge-mcard__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.charge-mcard__installment-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ch-text-secondary, #64748b);
}

.charge-mcard__installment-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 169, 107, 0.16);
  color: #92682a;
  font-size: 10px;
  font-weight: 700;
}

.charge-mcard__installment-amount strong {
  color: var(--ch-navy, #0f172a);
  font-weight: 800;
}

.charge-mcard__head-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ch-border);
}

.charge-mcard__balance {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--ch-text-secondary);
  white-space: nowrap;
}

.charge-mcard__balance-label {
  flex-shrink: 0;
}

.charge-mcard__balance strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ch-navy);
}

.charge-mcard__summary-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.charge-mcard__summary-heading {
  font-weight: 700;
  font-size: 15px;
  color: var(--ch-navy);
  line-height: 1.45;
}

.charge-mcard__summary-title .badge {
  font-size: 11px;
  padding: 3px 9px;
  flex-shrink: 0;
}

.charge-mcard__summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--ch-text-secondary);
}

.charge-mcard__summary-meta strong {
  color: var(--ch-navy);
  font-weight: 700;
}

.charge-mcard__summary-dot { opacity: 0.5; }

.charge-mcard--resident .charge-mcard__header {
  padding: 12px 14px;
}

.charge-mcard__settle-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  min-height: 0;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--ch-navy);
  color: var(--ch-white);
  font-size: 10px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none;
  transition: background var(--ch-transition), transform var(--ch-transition);
}

.charge-mcard__settle-mini svg {
  flex-shrink: 0;
}

.charge-mcard__settle-mini:hover {
  transform: none;
  background: #1a2d4a;
}

.charge-mcard__settle-mini--ghost {
  background: #fff;
  color: var(--ch-navy, #0f172a);
  border: 1px solid var(--ch-border, #e6ecf2);
  box-shadow: none;
}

.charge-mcard__settle-mini--ghost:hover {
  background: #f8fafc;
}

.charge-mcard__aside-pending {
  font-size: 10px;
  padding: 6px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--ch-radius-badge);
}

.charge-mcard__summary-aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.charge-mcard__chev {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ch-text-light);
  transition: transform var(--ch-transition), color var(--ch-transition);
}

.charge-mcard.is-open .charge-mcard__chev {
  transform: rotate(180deg);
  color: var(--ch-gold);
}

.charge-mcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ch-border);
}

.charge-mcard__act-btn {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  color: var(--ch-navy);
  font-size: 13px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ch-transition), border-color var(--ch-transition), transform var(--ch-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.charge-mcard__act-btn:hover {
  background: var(--ch-bg);
  transform: scale(1.02);
}

.charge-mcard__act-btn--primary {
  background: var(--ch-navy);
  border-color: var(--ch-navy);
  color: var(--ch-white);
}

.charge-mcard__act-btn--primary:hover {
  filter: brightness(1.05);
}

.charge-mcard__pending {
  width: 100%;
  text-align: center;
  padding: 12px;
}

.charge-mcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.charge-mcard__head-right { flex: 1; min-width: 0; }

.charge-mcard__unit {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ch-navy);
  line-height: 1.45;
  word-break: break-word;
}

.charge-mcard__title-sub {
  font-size: 12px;
  color: var(--ch-text-light);
  margin-top: 4px;
}

.charge-mcard__badge { flex-shrink: 0; }

.charge-mcard__body {
  padding: 0 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.charge-mcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.charge-mcard__row strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ch-navy);
}

.charge-mcard__row--muted {
  font-size: 13px;
  color: var(--ch-text-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--ch-border);
}

.charge-mcard__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  border: none;
  border-top: 1px solid var(--ch-border);
  background: var(--ch-bg);
  color: var(--ch-text-secondary);
  cursor: pointer;
  transition: background var(--ch-transition), color var(--ch-transition);
  order: 10;
}

.charge-mcard__expand:hover { color: var(--ch-gold); }

.charge-mcard.is-open .charge-mcard__expand svg {
  transform: rotate(180deg);
}

.charge-mcard__expand svg {
  transition: transform var(--ch-transition);
}

.charge-mcard__details {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity var(--ch-transition);
  background: var(--ch-bg);
}

.charge-mcard__details.is-visible {
  max-height: 2400px;
  opacity: 1;
}

.charge-mcard__details-inner {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.charge-mcard__details-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ch-text-secondary);
  margin-bottom: 2px;
  padding-inline: 4px;
}

.charge-mcard__sub { display: none; }

.charge-mcard__foot {
  display: flex;
  gap: 10px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--ch-border);
}

.charge-mcard__foot .btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Vazirmatn, inherit;
  transition: transform var(--ch-transition);
}

.charge-mcard__foot .btn:hover { transform: scale(1.02); }

.charge-mcard__foot .btn.primary {
  background: var(--ch-navy);
  border-color: var(--ch-navy);
}

/* ---------- Mobile sub-charge detail cards ---------- */
.charge-sub-card {
  background: var(--ch-white);
  border-radius: 22px;
  box-shadow: var(--ch-shadow-primary);
  padding: 16px 16px 14px;
  margin-bottom: 0;
  border: 1px solid var(--ch-border);
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}

.charge-sub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ch-shadow-medium);
}

.charge-sub-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.charge-sub-card__header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.charge-sub-card__icon-box {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--ch-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.charge-sub-card__title-wrap { flex: 1; min-width: 0; }

.charge-sub-card__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.charge-sub-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-navy);
  line-height: 1.45;
  word-break: break-word;
}

.charge-sub-card__kind {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ch-text-light);
  font-weight: 500;
}

.charge-sub-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--ch-radius-badge);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.charge-sub-card__pill--paid {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ch-success);
}

.charge-sub-card__pill--unpaid {
  background: rgba(239, 68, 68, 0.1);
  color: var(--ch-danger);
}

.charge-sub-card__pill--pending {
  background: rgba(200, 169, 104, 0.18);
  color: #B8943F;
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 12px;
}

.charge-sub-card__pill--installment {
  background: rgba(200, 169, 107, 0.16);
  color: #92682a;
}

.charge-sub-card__installments {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ch-text-secondary, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.charge-sub-card__actions--installments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.charge-sub-card__actions--installments .charge-sub-card__btn--ghost {
  background: #fff;
  border: 1px solid var(--ch-border, #e6ecf2);
  color: var(--ch-navy, #0f172a);
}

.charge-sub-card__actions--unpaid.charge-sub-card__actions--installments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.charge-sub-card__actions--unpaid.charge-sub-card__actions--installments .charge-sub-card__btn--primary {
  grid-column: 1 / -1;
}

.charge-sub-card__body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.charge-sub-card__orbit {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.charge-sub-card__orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed var(--ch-border);
}

.charge-sub-card__orbit-core {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.charge-sub-card__orbit-core.is-paid {
  background: rgba(34, 197, 94, 0.1);
}

.charge-sub-card__orbit-core.is-unpaid {
  background: rgba(239, 68, 68, 0.08);
}

.charge-sub-card__finance { flex: 1; min-width: 0; }

.charge-sub-card__amounts {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ch-text-secondary);
}

.charge-sub-card__amounts strong {
  font-weight: 700;
  color: var(--ch-navy);
}

.charge-sub-card__dot {
  margin: 0 6px;
  color: var(--ch-border);
}

.charge-sub-card__paid-line {
  color: var(--ch-text-secondary);
  font-weight: 500;
}

.charge-sub-card__due {
  margin: 0;
  font-size: 12px;
  color: var(--ch-text-light);
}

.charge-sub-card__actions {
  display: flex;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--ch-bg);
}

.charge-sub-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 14px;
  font-family: Vazirmatn, inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 8px;
  min-height: 42px;
  transition: background var(--ch-transition), color var(--ch-transition), border-color var(--ch-transition), transform var(--ch-transition);
  background: transparent;
  color: var(--ch-navy);
}

.charge-sub-card__btn:hover { transform: scale(1.02); }
.charge-sub-card__btn:active { transform: scale(0.98); }

.charge-sub-card__actions--paid { flex-wrap: nowrap; }

.charge-sub-card__actions--paid .charge-sub-card__btn--edit {
  flex: 2 1 0;
  background: var(--ch-bg);
  color: var(--ch-navy);
}

.charge-sub-card__actions--paid .charge-sub-card__btn--ghost {
  flex: 1 1 0;
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
}

.charge-sub-card__actions--paid .charge-sub-card__btn--danger {
  color: var(--ch-danger);
  border-color: rgba(239, 68, 68, 0.25);
}

.charge-sub-card__actions--unpaid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.charge-sub-card__actions--unpaid .charge-sub-card__btn {
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  font-size: 11px;
  min-height: 58px;
}

.charge-sub-card__actions--unpaid .charge-sub-card__btn span {
  line-height: 1.2;
  text-align: center;
}

.charge-sub-card__btn--edit-sm {
  background: var(--ch-bg);
  color: var(--ch-text-secondary);
}

.charge-sub-card__btn--primary {
  background: var(--ch-navy);
  color: var(--ch-white);
  border: none;
}

.charge-sub-card__btn--ghost {
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
}

.charge-sub-card__btn--danger {
  color: var(--ch-danger);
  border-color: rgba(239, 68, 68, 0.25);
}

.charge-sub-card__actions--resident { justify-content: stretch; }

.charge-sub-card__actions--resident .charge-sub-card__btn--primary {
  flex: 1;
  flex-direction: row;
  min-height: 44px;
  font-size: 13px;
}

.charge-sub-card .charge-info {
  width: 20px;
  height: 20px;
  color: var(--ch-text-light);
}

/* ---------- FAB + mobile manager actions ---------- */
.charges-fab-wrap {
  display: none;
  position: fixed;
  inset-inline-end: 24px;
  bottom: 24px;
  z-index: 40;
  width: 56px;
  height: 56px;
  pointer-events: none;
}

.charges-fab-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--ch-transition), transform var(--ch-transition), visibility var(--ch-transition);
}

.charges-fab-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.charges-fab-menu .btn {
  box-shadow: var(--ch-shadow-medium);
  white-space: nowrap;
  font-size: 13px;
  font-family: Vazirmatn, inherit;
  border-radius: 16px;
  transition: transform var(--ch-transition);
}

.charges-fab-menu .btn:hover { transform: scale(1.02); }

.charges-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--ch-navy);
  color: var(--ch-gold);
  box-shadow: var(--ch-shadow-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}

.charges-fab:hover { transform: scale(1.02); }
.charges-fab:active { transform: scale(0.96); }
.charges-fab.is-open { transform: rotate(45deg); }

@media (min-width: 769px) {
  .ch-filters-panel {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .ch-filters-panel__periods {
    flex: 0 0 300px;
    align-content: start;
  }

  .ch-filters-panel__stats {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    border-top: none;
    border-inline-start: 1px solid rgba(15, 23, 42, 0.08);
    padding-inline-start: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ch-filters-panel__stats-head {
    margin-bottom: 12px;
  }

  .ch-period-stat__num {
    font-size: 24px;
  }

  .ch-period-stat__label {
    font-size: 11px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .charges-page {
    --ch-page-pad: 16px;
    padding: var(--ch-page-pad);
    padding-top: calc(58px + env(safe-area-inset-top, 0) + var(--ch-page-pad));
  }

  .ch-filters-row {
    margin: 0;
  }

  .ch-filters-panel {
    padding: 12px;
    gap: 10px;
  }

  .ch-filters-panel__periods {
    gap: 8px;
  }

  .ch-filter-field__heading,
  .ch-filter-card__heading {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .ch-period-dd {
    min-height: 44px;
    padding: 5px 8px;
    gap: 6px;
  }

  .ch-period-dd:focus-within {
    padding: 4px 7px;
  }

  .ch-period-dd__icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .ch-period-dd__text,
  .ch-period-dd__input {
    font-size: 13px;
  }

  .ch-period-stat__num {
    font-size: 17px;
  }

  .ch-period-stat__label {
    font-size: 9px;
  }

  .ch-period-stats__hint {
    font-size: 9px;
  }

  .ch-hero__title {
    font-size: 26px;
  }

  .ch-hero__toolbar,
  .ch-hero .toolbar--desktop {
    display: none !important;
  }

  .ch-month-picker__panel.ch-month-picker__panel--floating {
    position: fixed;
    inset-inline: auto;
    max-height: min(280px, calc(100dvh - 32px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 120;
  }

  .ch-month-picker__item {
    font-size: 12px;
    min-height: 36px;
    padding: 6px 2px;
  }

  .ch-building-dd .ch-building-dd__trigger {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Hidden unit-tree trigger must not block status tabs below */
  .charges-unit-tree {
    position: static;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .charges-unit-tree .charges-unit-tree__trigger.ch-building-dd__trigger {
    display: none !important;
    pointer-events: none !important;
  }

  .charges-status-tabs {
    margin-top: 0;
  }

  .charges-status-tabs__btn {
    font-size: 11px;
    padding: 8px 6px;
  }

  .charges-mobile-list {
    padding-bottom: 100px;
  }

  .charges-page .card.table-wrap.charges-desktop {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .charges-fab-wrap {
    display: block;
    bottom: calc(88px + env(safe-area-inset-bottom, 0));
    z-index: 55;
  }
}

@media (min-width: 769px) {
  .charges-desktop {
    display: block;
  }

  .charges-mobile {
    display: none;
  }

  .charges-fab-wrap {
    display: none !important;
  }

  .ch-search-row__filter {
    display: none;
  }

  .ch-building-dd .ch-building-dd__trigger {
    display: flex;
  }

  .charges-unit-tree {
    display: block;
  }
}

@media (max-width: 480px) {
  .ch-status-card__num {
    font-size: 26px;
  }

  .ch-status-card__label {
    font-size: 11px;
  }
}

/* ── New charge modal form ── */
.modal--charge {
  max-width: 520px;
}

.charge-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
}

.charge-form__type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.charge-form__type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-family: Vazirmatn, inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.charge-form__type-btn svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.charge-form__type-btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.charge-form__type-btn.is-active svg {
  color: #7a6238;
  opacity: 1;
}

.charge-form__type-btn:active {
  transform: scale(0.98);
}

.charge-form__unit-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.charge-form__unit-scope-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-family: Vazirmatn, inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.charge-form__unit-scope-btn.is-active {
  background: #fff;
  color: #0f172a;
  border-color: rgba(200, 169, 107, 0.45);
  box-shadow: 0 0 0 2px rgba(200, 169, 107, 0.12);
}

.charge-form__unit-scope-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.charge-form__unit-select {
  margin-top: 2px;
}

.charge-form__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

.charge-form__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.charge-form__section--accent {
  border-color: rgba(200, 169, 107, 0.24);
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
}

.charge-form__section--preview {
  padding-bottom: 12px;
}

.charge-form__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.charge-form__section-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 169, 107, 0.14);
  color: #7a6238;
}

.charge-form__section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.charge-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.charge-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.charge-form__field--full {
  grid-column: 1 / -1;
}

.charge-form__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.charge-form__input,
.charge-form__select,
.charge-form__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 11px;
  background: #f8fafc;
  padding: 11px 12px;
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.charge-form__select {
  appearance: none;
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px;
}

.charge-form__textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.55;
}

.charge-form__input:focus,
.charge-form__select:focus,
.charge-form__textarea:focus {
  outline: none;
  border-color: rgba(200, 169, 107, 0.65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 169, 107, 0.14);
}

.charge-form__input::placeholder,
.charge-form__textarea::placeholder {
  color: #94a3b8;
}

.charge-form .amount-input {
  width: 100%;
  border-radius: 11px;
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.charge-form .amount-input:focus-within {
  border-color: rgba(200, 169, 107, 0.65);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 169, 107, 0.14);
}

.charge-form .amount-input__field {
  width: 100%;
  box-sizing: border-box;
}

.charge-form__input--amount,
.charge-form .amount-input__field.charge-form__input--amount {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: left;
}

@media (max-width: 480px) {
  .charge-form {
    padding: 14px 14px 16px;
    gap: 12px;
  }

  .charge-form__grid {
    grid-template-columns: 1fr;
  }

  .charge-form__type-btn span {
    font-size: 12px;
  }
}

.charge-expense-preview {
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.charge-expense-preview__summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary, #1e293b);
  margin-bottom: 10px;
  line-height: 1.6;
}
.charge-expense-preview__list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.charge-expense-preview__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
}
.charge-expense-preview__empty {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.charge-expense-preview__more {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}
.charge-entry-panel { display: none; }
.charge-entry-panel.is-active { display: contents; }

.charge-sub-card--empty {
  opacity: 0.92;
  border: 1px dashed #e2e8f0;
  box-shadow: none;
}
.charge-sub-card__icon-box--muted {
  background: #f1f5f9 !important;
}
.charge-sub-card__title--muted {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}
.charge-sub-card__pill--pending-slot {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
  border: 1px dashed #cbd5e1;
}
.charge-sub-card__orbit--empty .charge-sub-card__orbit-core.is-empty {
  background: #f8fafc;
  color: #cbd5e1;
  font-size: 18px;
  font-weight: 600;
}
.charge-subtable__placeholder td {
  color: var(--muted);
  font-style: italic;
}
.charge-subtable__title--muted {
  color: var(--muted);
  font-weight: 500;
}

.bulk-unit-picks[hidden] {
  display: none !important;
}

.bulk-unit-picks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.bulk-unit-picks__toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-unit-picks__search {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
  padding: 8px 10px;
}

.bulk-unit-picks__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.bulk-unit-picks__action {
  border: none;
  background: transparent;
  color: #b8923f;
  font-family: Vazirmatn, inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}

.bulk-unit-picks__action:hover {
  background: rgba(200, 169, 107, 0.12);
  color: #8a6d2b;
}

.bulk-unit-picks__list {
  display: flex;
  flex-direction: column;
  max-height: min(32dvh, 200px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}

.bulk-unit-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: background 0.12s ease;
}

.bulk-unit-pick:last-child {
  border-bottom: none;
}

.bulk-unit-pick:hover {
  background: #f8fafc;
}

.bulk-unit-pick[hidden] {
  display: none !important;
}

.bulk-unit-pick input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.bulk-unit-pick__label {
  flex: 1;
  min-width: 0;
}

.bulk-unit-pick__label .charge-unit-compact {
  font-size: 12px;
}

.bulk-modal { max-width: 640px !important; }
.bulk-modal.modal--charge {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 92vh);
}
.bulk-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.bulk-modal .modal-body.bulk-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.bulk-modal__intro {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.65;
  color: #64748b;
}
.bulk-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}
.bulk-form .charge-form__type-btn span {
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.bulk-form .charge-entry-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.bulk-form .charge-entry-panel.is-active {
  display: flex;
}
.bulk-form .charge-form__type-switch {
  margin-bottom: 4px;
}
.bulk-form .charge-form__section {
  margin: 0;
}
.bulk-modal .modal-foot--card-pay {
  flex-shrink: 0;
}
.bulk-modal--records {
  max-height: min(88dvh, 88vh);
  display: flex;
  flex-direction: column;
}
.bulk-records-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}
.bulk-records-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.bulk-records-tabs__btn {
  flex: 1;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.bulk-records-tabs__btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bulk-records-panel[hidden] { display: none !important; }
.bulk-main-tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
  margin: 0 -4px 16px;
}
.bulk-main-tabs__btn {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.bulk-main-tabs__btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bulk-main-panel[hidden] { display: none !important; }
.bulk-batch-list,
.bulk-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bulk-batch-list::-webkit-scrollbar,
.bulk-history-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.bulk-batch-row,
.bulk-history-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card);
}
.bulk-batch-row__top,
.bulk-history-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.bulk-batch-row__title,
.bulk-history-row__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.4;
}
.bulk-batch-row__meta,
.bulk-history-row__meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.bulk-batch-row__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.bulk-batch-row__actions .btn { padding: 6px 10px; font-size: 12px; }
.bulk-kind-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.bulk-kind-pill--monthly { background: #eff6ff; color: #2563eb; }
.bulk-kind-pill--expense { background: #fef3c7; color: #b45309; }
.bulk-action-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.bulk-action-pill--created { background: #dcfce7; color: #16a34a; }
.bulk-action-pill--updated { background: #e0f2fe; color: #0284c7; }
.bulk-action-pill--deleted { background: #fee2e2; color: #dc2626; }
.bulk-history-row__time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  display: block;
}
.bulk-list-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 14px;
}

.statement-filters .charges-filters__toolbar {
  align-items: center;
}

.statement-filters .charges-filters__toolbar > .btn {
  min-height: 44px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

/* ---------- Unit statement page ---------- */
.layout--statement {
  min-height: 100vh;
  min-height: 100dvh;
}

.layout--statement .main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.content.statement-content-host {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vp-mobile .layout--statement .content.statement-content-host {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

.statement-filters--resident {
  margin-bottom: 12px;
}

.statement-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.statement-toolbar__exports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

.statement-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  color: var(--ch-navy, #0f172a);
  font-size: 12px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.statement-export-btn:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.16);
}

.statement-export-btn--primary {
  background: var(--ch-navy, #0f172a);
  border-color: var(--ch-navy, #0f172a);
  color: #fff;
}

.statement-export-btn--primary:hover {
  background: #1a2d4a;
}

.statement-filters__toolbar {
  align-items: center;
}

.statement-filters__toolbar .statement-toolbar {
  margin-bottom: 0;
  flex-shrink: 0;
}

.statement-unit-tree {
  flex: 1 1 280px;
  max-width: 100%;
}

.statement-card {
  background: var(--surface);
  border: 1px solid var(--ch-border, #e6ecf2);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.statement-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1a2d4a 0%, #243b5c 100%);
  color: #fff;
}

.statement-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.statement-hero__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(200, 169, 107, 0.2);
}

.statement-hero__info {
  min-width: 0;
}

.statement-hero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.statement-hero__unit {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.statement-hero__resident {
  margin: 3px 0 0;
  font-size: 12px;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statement-hero__status {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

.statement-hero__status--debt {
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.statement-hero__status--ok {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.statement-hero__status-label {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.85;
  color: #fecaca;
}

.statement-hero__status-value {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.2;
}

.statement-hero__status--ok .statement-hero__status-value {
  font-size: 11px;
  font-weight: 700;
  color: #bbf7d0;
}

.statement-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--ch-border, #e6ecf2);
}

.statement-stats--four {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .statement-stats--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.statement-stats__hint {
  margin: 0;
  padding: 0 14px 12px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ch-text-secondary, #64748b);
  background: #f8fafc;
  border-bottom: 1px solid var(--ch-border, #e6ecf2);
}

.statement-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ch-border, #e6ecf2);
  text-align: center;
}

.statement-stats__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ch-text-secondary, #64748b);
  line-height: 1.35;
}

.statement-stats__value {
  font-size: 12px;
  font-weight: 800;
  color: var(--ch-navy, #0f172a);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.statement-stats__item--paid .statement-stats__value {
  color: #16a34a;
}

.statement-stats__item--debt .statement-stats__value {
  color: #dc2626;
}

.statement-stats__item--fund .statement-stats__value {
  color: #7c3aed;
}

.statement-entries {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
}

.statement-entries__empty {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 12px;
}

.statement-entry {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.statement-entry--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.statement-entry--clickable:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.statement-entry--clickable:active {
  transform: scale(0.995);
}

.statement-entry--charge {
  border-inline-start: 3px solid #f59e0b;
}

.statement-entry--payment {
  border-inline-start: 3px solid #22c55e;
}

.statement-entry--fund {
  border-inline-start: 3px solid #a78bfa;
}

.statement-entry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.statement-entry__date {
  font-size: 11px;
  font-weight: 600;
  color: var(--ch-text-secondary, #64748b);
  font-variant-numeric: tabular-nums;
}

.statement-entry__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ch-navy, #0f172a);
}

.statement-entry--payment .statement-entry__badge {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.statement-entry--charge .statement-entry__badge {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.statement-entry--fund .statement-entry__badge {
  background: rgba(167, 139, 250, 0.16);
  color: #6d28d9;
}

.statement-entry__fund-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.1);
  color: #5b21b6;
  font-size: 12px;
  line-height: 1.55;
}

.statement-entry__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ch-navy, #0f172a);
}

.statement-entry__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.statement-entry__amount {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.statement-entry__amount--debit {
  color: #dc2626;
}

.statement-entry__amount--credit {
  color: #16a34a;
}

.statement-entry__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ch-text-secondary, #64748b);
  font-size: 11px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  cursor: pointer;
}

.statement-entry__more:hover {
  color: var(--ch-navy, #0f172a);
}

.statement-entry__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--ch-navy, #0f172a);
  border-radius: 10px;
  background: var(--ch-navy, #0f172a);
  color: var(--ch-white, #fff);
  font-size: 12px;
  font-family: Vazirmatn, inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}

.statement-entry__pay:hover {
  background: #1a2d4a;
  border-color: #1a2d4a;
}

.statement-entry__pay:active {
  transform: scale(0.98);
}

.statement-table-wrap {
  padding: 0 12px 12px;
}

.statement-table-wrap--desktop {
  display: block;
}

.statement-table {
  font-size: 14px;
}

.statement-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.statement-table__title {
  white-space: normal;
  min-width: 140px;
  max-width: 280px;
}

.statement-table__debit {
  color: var(--danger);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.statement-table__credit {
  color: var(--success);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.statement-table__balance {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.stmt-detail__debit {
  color: var(--danger);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.stmt-detail__credit {
  color: var(--success);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.stmt-detail__balance {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-profile-sheet__row dd .stmt-detail__debit,
.dash-profile-sheet__row dd .stmt-detail__credit,
.dash-profile-sheet__row dd .stmt-detail__balance {
  display: inline-block;
}

.statement-table__amounts-print,
.statement-table th.statement-table__amounts-print {
  display: none;
}

.statement-table__actions {
  text-align: center;
}

.statement-table__empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px !important;
}

@media (max-width: 720px) {
  .statement-stats__value {
    font-size: 11px;
  }

  .statement-hero__unit {
    font-size: 20px;
  }

  .statement-entries {
    display: flex;
  }

  .statement-table-wrap--desktop {
    display: none;
  }

  .statement-filters__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .statement-unit-tree {
    flex: 1 1 auto;
  }

  .statement-toolbar__exports {
    max-width: none;
  }
}

@media (min-width: 721px) {
  .statement-stats__value {
    font-size: 15px;
  }

  .statement-stats__label {
    font-size: 11px;
  }
}

@media print {
  .statement-filters,
  .statement-page-head .page-head__actions,
  .statement-toolbar,
  .statement-actions {
    display: none !important;
  }

  .statement-entries {
    display: none !important;
  }

  .statement-table-wrap--desktop {
    display: block !important;
  }

  .statement-table__amounts-print,
  .statement-table th.statement-table__amounts-print {
    display: table-cell;
  }

  .statement-table__actions {
    display: none;
  }

  .statement-card {
    border: none;
    box-shadow: none;
  }

  .statement-hero {
    background: #fff;
    color: var(--text);
    border-bottom: 2px solid var(--border);
  }

  .statement-hero__icon {
    background: var(--surface-2);
  }

  .statement-hero__status--debt {
    background: #fef2f2;
    border-color: #fecaca;
  }

  .statement-hero__status--debt .statement-hero__status-label {
    color: #b91c1c;
  }

  .statement-hero__status--debt .statement-hero__status-value {
    color: #dc2626;
  }

  .statement-hero__status--ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

  .statement-hero__status--ok .statement-hero__status-value {
    color: #15803d;
  }
}

/* ---------- Card-to-card payment card (InstaTrack-inspired) ---------- */
.pay-card-wrap {
  margin-bottom: 12px;
}

.pay-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pay-card {
  --pay-card-brand: #307fe2;
  --pay-card-brand-light: #4b93ea;
  --pay-card-brand-deep: #2569c7;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  padding: 14px 16px 12px;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(145deg, var(--pay-card-brand-light) 0%, var(--pay-card-brand) 52%, var(--pay-card-brand-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 105, 199, 0.22);
}

.pay-card-stack:not(:has(.pay-card-sheba)) .pay-card {
  border-radius: 16px;
}

.pay-card__glow {
  position: absolute;
  right: -40px;
  bottom: -48px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.pay-card__bank {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.pay-card__empty {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  opacity: 0.9;
}

.pay-card__pan {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pay-card__pan-value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pay-card__icon-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.pay-card__icon-copy--light {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.pay-card__icon-copy--dark {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.06);
  color: var(--ch-navy, #0f172a);
}

.pay-card__details {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  padding-top: 2px;
}

.pay-card__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pay-card__detail--amount {
  align-items: flex-end;
  text-align: left;
}

.pay-card__detail-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

.pay-card__detail-value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-card__detail-value--amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.pay-card-sheba {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ch-border, #e6ecf2);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #f8fafc;
  color: var(--ch-navy, #0f172a);
}

.pay-card-sheba__label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--ch-text-secondary, #64748b);
}

.pay-card-sheba__value {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-card__note {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(200, 169, 107, 0.12);
  border: 1px dashed rgba(200, 169, 107, 0.4);
  font-size: 12px;
  line-height: 1.55;
  color: #475569;
}

.pay-card-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(48, 127, 226, 0.08);
  border: 1px solid rgba(48, 127, 226, 0.16);
}

.pay-card-notice__icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
  color: #307fe2;
}

.pay-card-notice__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #334155;
}

.pay-card__hint {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ch-text-secondary, #64748b);
}

.modal--card-pay {
  max-width: 440px;
  max-height: min(92dvh, 92vh);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal--card-pay form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.modal-head--card-pay {
  flex-shrink: 0;
  padding: 14px 16px;
  background: #f8fafc;
}

.modal-head--card-pay h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ch-navy, #0f172a);
}

.modal-body--card-pay {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.pay-card-form-section {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #f8fafc;
}

.pay-card-form-section__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.pay-card-form-section__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--ch-navy, #0f172a);
  border: 1px solid var(--ch-border, #e6ecf2);
}

.pay-card-form-section__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ch-navy, #0f172a);
}

.pay-card-form-section__sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ch-text-secondary, #64748b);
}

.pay-card-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pay-card-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pay-card-field--full {
  grid-column: 1 / -1;
}

.pay-card-field__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ch-text-secondary, #64748b);
}

.pay-card-field__input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  color: var(--ch-navy, #0f172a);
  font-size: 13px;
  font-family: Vazirmatn, inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pay-card-field__input:focus {
  outline: none;
  border-color: rgba(48, 127, 226, 0.45);
  box-shadow: 0 0 0 3px rgba(48, 127, 226, 0.12);
}

.pay-card-field__input::placeholder {
  color: #94a3b8;
  font-size: 12px;
}

.pay-card-field__static {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #eef2f7;
  color: var(--ch-navy, #0f172a);
  font-size: 14px;
  font-weight: 700;
}

.pay-card-field__hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}

.pay-card-field__req {
  color: #dc2626;
}

.pay-card-receipt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px dashed rgba(15, 23, 42, 0.16);
  background: #fff;
  color: var(--ch-navy, #0f172a);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pay-card-receipt:hover {
  border-color: rgba(48, 127, 226, 0.35);
  background: rgba(48, 127, 226, 0.04);
}

.pay-card-receipt__icon {
  display: inline-flex;
  color: #64748b;
}

.pay-card-receipt__text {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  word-break: break-all;
}

.pay-card-receipt__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.modal-foot--card-pay {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.pay-card-foot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-family: Vazirmatn, inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.pay-card-foot-btn--ghost {
  background: #fff;
  border: 1px solid var(--ch-border, #e6ecf2);
  color: var(--ch-navy, #0f172a);
}

.pay-card-foot-btn--ghost:hover {
  background: #f8fafc;
}

.pay-card-foot-btn--primary {
  background: var(--ch-navy, #0f172a);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.pay-card-foot-btn--primary:hover {
  transform: translateY(-1px);
}

@media (max-width: 400px) {
  .modal-foot--card-pay {
    grid-template-columns: 1fr;
  }
}

.pay-card-form__receipt {
  grid-column: 1 / -1;
}

.pay-card-pay-stage.is-submitting .pay-card-form-section {
  opacity: 0.72;
}

.pay-card-pay-stage[hidden],
.pay-card-pay-result[hidden] {
  display: none !important;
}

.pay-card-pay-status {
  margin-top: 12px;
}

.pay-card-pay-result {
  margin-top: 4px;
}

/* ---------- Installments modal (mobile-first) ---------- */
.modal--installments {
  width: min(100%, 420px);
  max-height: min(92dvh, 92vh);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-head--installments {
  flex-shrink: 0;
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--ch-border, #e6ecf2);
}

.modal-head--installments__text {
  min-width: 0;
}

.modal-head--installments h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ch-navy, #0f172a);
}

.modal-head--installments__sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ch-text-secondary, #64748b);
}

.modal-body--installments {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
  background: #f1f5f9;
}

.modal-foot--installments {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
}

.inst-modal-close-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  color: var(--ch-navy, #0f172a);
  font-family: Vazirmatn, inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.inst-modal-summary {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  margin-bottom: 12px;
}

.inst-modal-summary__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.inst-modal-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.inst-modal-summary__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ch-text-secondary, #64748b);
}

.inst-modal-summary__stat strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--ch-navy, #0f172a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inst-modal-summary__paid {
  color: #16a34a !important;
}

.inst-modal-summary__rem {
  color: #dc2626 !important;
}

.inst-modal-progress {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.inst-modal-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c8a968, #dfc38a);
  transition: width 0.25s ease;
}

.inst-modal-summary__hint {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ch-text-secondary, #64748b);
}

.inst-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inst-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--ch-border, #e6ecf2);
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.inst-card.is-due {
  border-color: rgba(200, 169, 107, 0.55);
  box-shadow: 0 4px 14px rgba(200, 169, 107, 0.14);
}

.inst-card--paid {
  opacity: 0.88;
}

.inst-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.inst-card__seq {
  font-size: 11px;
  font-weight: 700;
  color: var(--ch-text-secondary, #64748b);
}

.inst-card__status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.inst-card__status--paid {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.inst-card__status--partial {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.inst-card__status--unpaid {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.inst-card.is-due .inst-card__status--unpaid {
  background: rgba(200, 169, 107, 0.18);
  color: #92682a;
}

.inst-card__amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--ch-navy, #0f172a);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.inst-card__meta {
  margin: 0;
  display: grid;
  gap: 6px;
}

.inst-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.inst-card__meta-row dt {
  margin: 0;
  color: var(--ch-text-secondary, #64748b);
  font-weight: 600;
}

.inst-card__meta-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--ch-navy, #0f172a);
  font-variant-numeric: tabular-nums;
}

.inst-card__meta-row--rem dd {
  color: #dc2626;
}

.inst-card__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: var(--ch-navy, #0f172a);
  color: #fff;
  font-family: Vazirmatn, inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.inst-card__pay:active {
  transform: scale(0.99);
}