/* پنل آنیار ۶/۹ — اشخاص، دسته‌بندی‌ها، نرخ ارز و دفتر فشرده */
/* === People ledgers, category catalog and manual exchange quotes === */
.connected .transaction-dialog.feature-dialog {
  padding: 24px;
  scrollbar-color: #3b6b70 #102c33;
}
.connected .feature-dialog .feature-form {
  padding: 0;
}
.connected .feature-dialog .dialog-heading h2 {
  overflow-wrap: anywhere;
}
.connected .person-search {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  font-size: 14px;
}
.connected .person-search input,
.connected .feature-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: #092129;
  color: var(--app-text);
  font: inherit;
  font-size: 16px;
}
.connected .feature-form textarea {
  min-height: 90px;
  resize: vertical;
}
.connected .person-account {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 4px;
  text-align: right;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  cursor: pointer;
  border-radius: 8px;
  font: inherit;
}
.connected .person-account:hover {
  background: rgba(102, 242, 217, 0.05);
}
.connected :is(.person-identity, .person-balance) {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.connected .person-identity b {
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: 16px;
}
.connected :is(.person-account, .person-report-head, .ledger-entry) small {
  font-size: 13px;
  color: var(--app-muted);
}
.connected .person-balance {
  text-align: left;
}
.connected .person-balance strong {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
}
.connected .person-balance.receivable strong {
  color: #7bf1d9;
}
.connected .person-balance.payable strong {
  color: #ffb1bb;
}
.connected .person-report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.connected .person-report-head p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.connected .person-ledger-balance {
  display: grid;
  gap: 8px;
  padding: 24px;
  margin-block: 18px;
  border: 1px solid rgba(102, 242, 217, 0.24);
  border-radius: 18px;
  background: linear-gradient(120deg, #133a40, #0b242d);
}
.connected .person-ledger-balance strong {
  font-family: var(--font-data);
  font-size: clamp(24px, 5vw, 34px);
}
.connected .person-ledger-balance > :not(strong) {
  font-size: 14px;
  font-weight: 400;
}
.connected :is(.ledger-entry-title, .ledger-entry-amount, .ledger-totals) {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.connected .ledger-totals {
  font-size: 14px;
  color: var(--app-muted);
}
.connected .ledger-entry {
  border-inline-start: 2px solid rgba(102, 242, 217, 0.4);
  padding: 18px;
  margin-block: 16px;
  background: #0c242d;
  border-radius: 4px 14px 14px 4px;
}
.connected .ledger-entry p {
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.connected .ledger-entry-title span {
  font-size: 13px;
  color: var(--app-muted);
}
.connected .ledger-entry-amount {
  margin-top: 12px;
}
.connected .ledger-entry-amount strong {
  font-family: var(--font-data);
  font-size: 18px;
}
.connected .ledger-entry-amount span {
  color: var(--app-muted);
  font-size: 13px;
}
.connected .category-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #7bf1d9;
  background: rgba(123, 241, 217, 0.09);
}
.connected .category-icon svg {
  width: 23px;
  height: 23px;
}
.connected .category-icon.tone-violet {
  color: #c4b5ff;
  background: rgba(164, 140, 255, 0.12);
}
.connected .category-icon.tone-amber {
  color: #ffdc91;
  background: rgba(255, 194, 83, 0.12);
}
.connected .category-icon.tone-rose {
  color: #ffb1bb;
  background: rgba(255, 130, 151, 0.12);
}
.connected .category-icon.tone-blue {
  color: #9ccfff;
  background: rgba(114, 179, 255, 0.12);
}
.connected .category-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}
.connected .category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.connected .category-card {
  display: flex;
  gap: 12px;
  padding: 20px;
  align-items: center;
  text-align: right;
  background: #0d2831;
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
}
.connected .category-card b {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.connected .category-card > span:last-child {
  margin-inline-start: auto;
  font-size: 12px;
  white-space: nowrap;
  color: #7bf1d9;
}
.connected .category-select-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 16px;
}
.connected .category-select-actions button {
  min-height: 44px;
}
.connected .category-settings-link {
  margin-block: 0 20px;
}
.connected .feature-form .category-icon-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 10px 0;
}
.connected .category-icon-picker legend {
  margin-bottom: 8px;
}
.connected .category-icon-picker label {
  position: relative;
  cursor: pointer;
}
.connected .category-icon-picker input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
}
.connected .category-icon-picker label > span {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
}
.connected .category-icon-picker svg {
  width: 24px;
  height: 24px;
}
.connected .category-icon-picker small {
  font-size: 12px;
  color: inherit;
}
.connected .category-icon-picker input:checked + span {
  border-color: #7bf1d9;
  background: rgba(123, 241, 217, 0.12);
  color: #7bf1d9;
}
.connected .category-icon-picker input:focus-visible + span {
  outline: 2px solid #7bf1d9;
  outline-offset: 3px;
}
.connected .admin-rates {
  padding: 20px;
  margin-block: 20px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: #0c242d;
}
.connected :is(.admin-rates, #rate-history) > summary {
  cursor: pointer;
  min-height: 44px;
  line-height: 44px;
  font-size: 16px;
}
.connected .rate-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--app-border);
}
.connected .rate-card small {
  color: var(--app-muted);
  font-size: 13px;
}
.connected .rate-equation {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.connected .rate-equation strong {
  font: 600 17px var(--font-data);
}
.connected .conversion-result {
  display: grid;
  gap: 8px;
}
.connected .conversion-result strong {
  font: 600 26px var(--font-data);
  color: #7bf1d9;
}
.connected .conversion-result small {
  color: var(--app-muted);
}
input[data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1000px) {
  .connected .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 590px) {
  .connected .transaction-dialog.feature-dialog {
    padding: 16px;
  }
  .connected .person-account {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 10px;
  }
  .connected .person-balance {
    grid-column: 2;
    text-align: right;
  }
  .connected .person-account > span:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .connected .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .connected .feature-form .category-icon-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .connected .person-report-head {
    align-items: start;
    flex-wrap: wrap;
  }
  .connected .rate-card {
    align-items: start;
    flex-direction: column;
  }
  .connected .ledger-entry {
    padding: 14px;
  }
}

/* === Dense ledger refresh: compact financial information, expandable actions === */
.connected .transaction-page-title {
  align-items: center;
  margin-bottom: 10px;
}
.connected .transaction-page-title .page-actions { flex-wrap: nowrap; }
.connected .transaction-page-title .page-actions > button {
  min-height: 42px;
  border-radius: 13px;
}
.connected .export-compact { min-width: 70px; padding-inline: 11px; }
.connected .export-compact svg { width: 17px; height: 17px; }
.connected .transaction-summary {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.connected .transaction-summary > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aurora-card) 82%, transparent);
}
.connected .transaction-summary span {
  overflow: hidden;
  color: var(--aurora-muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected .transaction-summary b {
  margin-top: 1px;
  overflow: hidden;
  font: 680 12.5px/1.5 var(--font-data);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected [data-panel="transactions"] .toolbar {
  gap: 7px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 16px;
}
.connected [data-panel="transactions"] .toolbar label > span { font-size: 10.5px; }
.connected [data-panel="transactions"] .toolbar :is(input, select) { min-height: 42px; }
.connected .transaction-ledger { display: grid; gap: 7px; }
.connected .ledger-ribbon {
  --ledger-tone: var(--aurora-coral);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--aurora-border);
  border-radius: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ledger-tone) 7%, transparent), transparent 35%),
    color-mix(in srgb, var(--aurora-card) 91%, var(--aurora-bg));
  box-shadow: 0 9px 24px -24px rgba(0,0,0,.95);
  transition: border-color var(--aurora-fast), background var(--aurora-fast);
}
.connected .ledger-ribbon.income { --ledger-tone: var(--aurora-aqua); }
.connected .ledger-ribbon:has(.ledger-ribbon-main[aria-expanded="true"]) {
  border-color: color-mix(in srgb, var(--ledger-tone) 34%, var(--aurora-border));
}
.connected .ledger-ribbon-main {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 54px minmax(110px,1fr) minmax(120px,auto) 88px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  color: var(--aurora-text);
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.connected .ledger-ribbon-main:active { background: color-mix(in srgb, var(--ledger-tone) 7%, transparent); }
.connected .ledger-type {
  display: inline-flex;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--ledger-tone) 30%, transparent);
  border-radius: 999px;
  color: var(--ledger-tone);
  background: color-mix(in srgb, var(--ledger-tone) 9%, transparent);
  font-size: 10.5px;
  font-weight: 760;
}
.connected .ledger-detail {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--aurora-muted) 13%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--aurora-bg) 38%, transparent);
}
.connected .ledger-detail .category-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.connected .ledger-detail .category-icon svg { width: 16px; height: 16px; }
.connected .ledger-detail > span:last-child { min-width: 0; }
.connected .ledger-detail b,
.connected .ledger-detail small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connected .ledger-detail b { font-size: 12.5px; line-height: 1.45; }
.connected .ledger-detail small { color: var(--aurora-muted); font-size: 9.5px; line-height: 1.35; }
.connected .ledger-amount {
  overflow: hidden;
  color: var(--ledger-tone);
  font: 720 12.5px/1.5 var(--font-data);
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected .ledger-ribbon time {
  color: var(--aurora-muted);
  font-size: 10.5px;
  text-align: end;
  white-space: nowrap;
}
.connected .ledger-ribbon-actions {
  padding: 0 10px 8px;
  animation: ledger-actions-in 180ms var(--aurora-spring) both;
}
.connected .ledger-ribbon-actions > .record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--aurora-border);
}
.connected .ledger-ribbon-actions .record-actions button {
  min-width: 76px;
  min-height: 40px;
  border-radius: 11px;
}
@keyframes ledger-actions-in { from { opacity: 0; transform: translateY(-5px); } }

/* Dashboard section cards: the numbers are the interface, not decoration. */
.connected .section-status-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 40px minmax(130px,.7fr) minmax(0,1.5fr);
  grid-template-areas: "glyph info figures";
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 17px;
}
.connected .section-status-card .status-glyph {
  grid-area: glyph;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.connected .section-status-card .status-info { grid-area: info; min-width: 0; }
.connected .section-status-card .status-info b { font-size: 13.5px; }
.connected .section-status-card .status-info small {
  overflow: hidden;
  margin-top: 1px;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected .section-status-card .status-figures {
  grid-area: figures;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.connected .section-status-card .figure {
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--aurora-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--aurora-bg) 42%, transparent);
}
.connected .section-status-card .figure small,
.connected .section-status-card .figure strong {
  display: block;
  overflow: hidden;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected .section-status-card .figure small { font-size: 9.5px; }
.connected .section-status-card .figure strong { font: 670 11.5px var(--font-data); }
.connected .section-status-card .status-go { display: none !important; }

/* Parent/child category catalog */
.connected .category-groups { display: grid; gap: 10px; }
.connected .category-family {
  padding: 10px;
  border: 1px solid var(--aurora-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--aurora-card) 82%, transparent);
}
.connected .category-family > header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--aurora-muted);
}
.connected .category-family > header b { color: var(--aurora-text); font-size: 12px; }
.connected .category-family > header span { padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--aurora-muted) 9%, transparent); font: 10px var(--font-data); }
.connected .category-family > div { display: flex; flex-wrap: wrap; gap: 6px; }
.connected .category-family .category-card {
  width: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
}
.connected .category-family .category-card .category-icon { width: 30px; height: 30px; border-radius: 50%; }
.connected .category-family .category-card .category-icon svg { width: 15px; height: 15px; }
.connected .category-family .category-card b { font-size: 11.5px; }
.connected .category-family .category-card > span:last-child { display: none; }

@media (max-width: 590px) {
  .connected .transaction-page-title { align-items: center; }
  .connected .transaction-page-title .page-actions { width: auto; }
  .connected .transaction-page-title .page-actions > * { width: auto; flex: 0 0 auto; }
  .connected .transaction-summary { gap: 5px; }
  .connected .transaction-summary > div { padding: 7px 8px; }
  .connected .transaction-summary span { font-size: 9.5px; }
  .connected .transaction-summary b { font-size: 10.5px; }
  .connected [data-panel="transactions"] .toolbar { padding: 7px; }
  .connected [data-panel="transactions"] .toolbar .connected-filter { flex: 1 1 42%; }
  .connected [data-panel="transactions"] .filter-tabs { order: 3; flex: 1 1 auto; }
  .connected #clear-transaction-filters { order: 4; min-height: 42px; }
  .connected .ledger-ribbon-main {
    min-height: 60px;
    grid-template-columns: 47px minmax(0,1fr) minmax(94px,auto);
    grid-template-areas: "type detail amount" "type detail date";
    gap: 2px 6px;
    padding: 6px 8px;
  }
  .connected .ledger-type { grid-area: type; padding-inline: 6px; }
  .connected .ledger-detail { grid-area: detail; padding: 3px 5px; }
  .connected .ledger-detail .category-icon { width: 28px; height: 28px; }
  .connected .ledger-detail b { font-size: 11.5px; }
  .connected .ledger-detail small { font-size: 9px; }
  .connected .ledger-amount { grid-area: amount; align-self: end; font-size: 11px; }
  .connected .ledger-ribbon time { grid-area: date; align-self: start; font-size: 9.5px; }
  .connected .ledger-ribbon-actions .record-actions button { min-height: 44px; }
  .connected .section-status-card {
    grid-template-columns: 38px minmax(0,1fr);
    grid-template-areas: "glyph info" "figures figures";
    gap: 7px 9px;
    padding: 10px;
  }
  .connected .section-status-card .status-info small { display: none; }
  .connected .section-status-card .status-figures { justify-content: stretch; gap: 5px; }
  .connected .section-status-card .figure { flex: 1 1 0; padding: 5px 7px; }
  .connected .section-status-card .figure small { font-size: 9px; }
  .connected .section-status-card .figure strong { font-size: 10.5px; }
  .connected .category-family { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .connected .ledger-ribbon-actions { animation: none; }
}

/* Trustworthy account overview: real data, quiet navigation, visible actions. */
body:not(.connected) .connected-filter { display: none; }
.connected .balance-card { min-height: 0; padding-bottom: 24px; }
.connected .overview-grid > .quick-add-card { align-self: start; }
.connected .account-unit #account-currency { width: 160px; flex: 0 1 160px; }
.connected .account-unit { gap: 10px 14px; }
.connected .account-unit small { margin-inline-start: auto; }
.connected .balance-explanation { color: var(--app-muted); font-size: 13px; margin: 12px 0 24px; }
.connected .cashflow-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.connected .cashflow-toolbar h3 { font-size: 18px; margin: 0; }
.connected .cashflow-toolbar label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.connected :is(.cashflow-toolbar, .toolbar) select {
  min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--app-border);
  border-radius: 10px; background: var(--legacy-ink); color: var(--app-text); font: inherit;
}
.connected .flow-chart { position: relative; inset: auto; height: auto; display: block; min-height: 245px; margin-top: 16px; }
.connected .cashflow-figure { margin: 0; }
.connected .cashflow-figure figcaption { color: var(--app-muted); font-size: 13px; }
.connected .cashflow-figure svg { display: block; width: 100%; height: auto; min-height: 155px; direction: ltr; }
.connected .cashflow-figure svg text { fill: var(--app-muted); font: 14px var(--font-data); }
.connected .cashflow-grid { stroke: var(--app-border); stroke-dasharray: 4 6; fill: none; }
.connected .cashflow-income { fill: var(--app-aqua); }
.connected .cashflow-expense { fill: var(--app-gold); }
.connected .cashflow-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
.connected .cashflow-legend span { font-size: 13px; border-inline-start: 3px solid var(--app-aqua); padding-inline-start: 8px; }
.connected .cashflow-legend span + span { border-color: var(--app-gold); }
.connected .cashflow-legend b { display: block; font: 500 15px var(--font-data); margin-top: 4px; }
.connected .cashflow-table summary { min-height: 44px; display: flex; align-items: center; color: var(--app-aqua); cursor: pointer; font-size: 14px; }
.connected .cashflow-table .data-table { max-height: 220px; overflow: auto; }
.connected .cashflow-table table { min-width: 0; width: 100%; font-size: 13px; }
.connected .cashflow-table th, .connected .cashflow-table td { white-space: normal; min-width: 0; }
.connected .toolbar { flex-wrap: wrap; align-items: end; }
.connected .toolbar label { display: grid; gap: 6px; flex: 1; min-width: 180px; }
.connected .toolbar label span { position: static; width: auto; height: auto; font-size: 14px; }
.connected .toolbar input { width: 100%; min-height: 44px; }
.connected .toolbar .filter-tabs { align-self: end; }
.connected .category-filter-chip {
  justify-self: start; padding: 8px 10px; min-height: 44px; max-width: 100%; border: 1px solid var(--app-border);
  border-radius: 10px; background: transparent; color: var(--app-aqua); font: inherit; font-size: 14px;
  text-align: start; cursor: pointer; overflow-wrap: anywhere;
}
.connected .category-filter-chip:hover { border-color: var(--app-aqua); }
.connected .record-actions .settle-entry { color: var(--app-aqua); }
.connected .voice-coming-soon { opacity: .8; }
.connected .coming-soon-page { max-width: 1000px; }
.connected .coming-soon-page h3 { margin-top: 20px; }
.connected .coming-soon-page .professional-card p { font-size: 16px; color: var(--app-muted); }
.connected .coming-soon-page .page-actions { margin-top: 24px; }
.connected .coming-soon-page a { display: inline-flex; align-items: center; min-height: 44px; }
.connected .toast { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: min(560px, calc(100vw - 32px)); font-size: 14px; }
.connected .toast:not(.show) { visibility: hidden; pointer-events: none; }
.connected .toast > span { flex: 1; min-width: 150px; }
.connected .toast button { min-height: 44px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 9px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.connected .toast .toast-dismiss { padding: 8px; min-width: 44px; border: 0; font-size: 22px; }
.connected .toast button:focus-visible { outline: 2px solid var(--legacy-ink); outline-offset: 2px; }
@media (max-width: 720px) {
  .connected .table-row .transaction-date { display: block; text-align: end; }
  .connected .toolbar label { width: 100%; min-width: 0; }
  .connected .cashflow-toolbar label { width: 100%; justify-content: space-between; }
  .connected .cashflow-toolbar select { flex: 1; }
  .connected .toast { bottom: calc(90px + env(safe-area-inset-bottom)); left: 16px; right: 16px; }
  .connected dialog .toast { bottom: 16px; }
}