/* پنل آنیار ۹/۹ — حساب‌های مالی فاز یک */
/* === Phase 1: compact financial accounts === */
.connected .account-rail {
  min-width: 0;
  margin: -2px 0 2px;
}
.connected .account-rail-head,
.connected .accounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
.connected .account-rail-head h3 { margin: 0; font-size: 13px; font-weight: 720; }
.connected .account-rail-head button {
  border: 0;
  background: transparent;
  color: var(--app-aqua);
  font: inherit;
  font-size: 12px;
  min-height: 40px;
  padding-inline: 8px;
}
.connected .account-rail-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.connected .account-rail-track::-webkit-scrollbar { display: none; }
.connected .money-account {
  --account-tint: 84, 230, 210;
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, rgb(var(--account-tint)) 22%, var(--app-border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0, rgba(var(--account-tint),.12), transparent 42%),
    color-mix(in srgb, var(--app-night) 83%, rgb(var(--account-tint)) 3%);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.connected .account-rail .money-account {
  flex: 0 0 min(270px, 78vw);
  scroll-snap-align: start;
  border-radius: 16px;
}
.connected .money-account.color-violet { --account-tint: 160, 128, 255; }
.connected .money-account.color-amber { --account-tint: 255, 185, 84; }
.connected .money-account.color-rose { --account-tint: 255, 111, 145; }
.connected .money-account.color-blue { --account-tint: 88, 157, 255; }
.connected .money-account.color-slate { --account-tint: 145, 165, 173; }
.connected .money-account.is-archived { opacity: .64; filter: saturate(.6); }
.connected .money-account-main {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  grid-template-areas: "icon name amount" "icon name mark";
  align-items: center;
  gap: 2px 10px;
  padding: 11px 12px;
  border: 0;
  color: var(--app-text);
  background: transparent;
  font: inherit;
  text-align: right;
}
.connected .money-account-icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: rgb(var(--account-tint));
  background: rgba(var(--account-tint),.11);
}
.connected .money-account svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.connected .money-account-name { grid-area: name; min-width: 0; display: grid; gap: 3px; }
.connected .money-account-name b,
.connected .money-account-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connected .money-account-name b { font-size: 13px; }
.connected .money-account-name small { color: var(--app-muted); font-size: 10.5px; direction: ltr; text-align: right; }
.connected .money-account-main > strong { grid-area: amount; font-size: 13px; white-space: nowrap; direction: rtl; }
.connected .default-mark { grid-area: mark; justify-self: end; color: rgb(var(--account-tint)); font-size: 9.5px; font-style: normal; }
.connected .account-rail-add {
  flex: 0 0 66px;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed color-mix(in srgb, var(--app-aqua) 38%, var(--app-border));
  border-radius: 16px;
  background: transparent;
  color: var(--app-aqua);
  font: inherit;
  font-size: 10px;
}
.connected .account-rail-add svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.connected .accounts-toolbar {
  margin: 4px 0 10px;
  color: var(--app-muted);
  font-size: 12px;
}
.connected .accounts-toolbar label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.connected .accounts-toolbar input { width: 18px; height: 18px; accent-color: var(--app-aqua); }
.connected .accounts-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.connected .accounts-list .money-account-main { min-height: 82px; }
.connected .money-account-actions {
  display: flex;
  gap: 3px;
  padding: 0 8px 8px;
  border-top: 1px solid color-mix(in srgb, var(--app-border) 68%, transparent);
}
.connected .money-account-actions button {
  flex: 1;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font: inherit;
  font-size: 10.5px;
}
.connected .money-account-actions button:not(:disabled):hover { color: var(--app-aqua); }
.connected .money-account-actions .danger-link { color: color-mix(in srgb, var(--aurora-coral) 82%, var(--app-text)); }
.connected .accounts-empty {
  grid-column: 1/-1;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 30px 16px;
  border: 1px dashed var(--app-border);
  border-radius: 20px;
  text-align: center;
}
.connected .accounts-empty > span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--app-aqua); border-radius: 15px; background: color-mix(in srgb, var(--app-aqua) 10%, transparent); }
.connected .accounts-empty h3,.connected .accounts-empty p { margin: 0; }
.connected .accounts-empty p { color: var(--app-muted); font-size: 12px; }
.connected .account-dialog { width: min(620px,calc(100vw - 24px)); }
.connected .account-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.connected .account-dialog label,.connected .transfer-dialog label { display: grid; gap: 6px; font-size: 12px; }
.connected .account-dialog :is(input,select),.connected .transfer-dialog :is(input,select) { width: 100%; min-width: 0; min-height: 44px; margin: 0; }
.connected .payment-details { margin: 12px 0; border: 1px solid var(--app-border); border-radius: 15px; padding: 0 12px 12px; }
.connected .payment-details summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.connected .payment-details summary small,.connected .payment-details > p { color: var(--app-muted); font-size: 10.5px; }
.connected .payment-details > p { margin: 0 0 10px; }
.connected .payment-details input { direction: ltr; text-align: left; }
.connected .account-switches { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.connected .account-switches label { min-height: 40px; display: flex; grid-template-columns: 18px auto; align-items: center; }
.connected .account-switches input { width: 18px; min-height: 18px; accent-color: var(--app-aqua); }
.connected .account-statement-dialog { width: min(560px,calc(100vw - 24px)); }
.connected #statement-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid var(--app-border); border-radius: 15px; }
.connected #statement-summary span,.connected #statement-summary small { color: var(--app-muted); font-size: 11px; }
.connected #statement-summary strong { margin-inline-start: auto; color: var(--app-aqua); }
.connected #statement-list { max-height: min(56vh,520px); overflow: auto; }
.connected .statement-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 3px; border-bottom: 1px solid var(--app-border); }
.connected .statement-row > span { min-width: 0; display: grid; gap: 3px; }
.connected .statement-row b { font-size: 12px; }
.connected .statement-row small { color: var(--app-muted); font-size: 10.5px; }
.connected .statement-row > strong { flex: 0 0 auto; font-size: 12px; }
.connected .statement-row.income > strong { color: var(--app-aqua); }
.connected .statement-row.expense > strong { color: var(--aurora-coral); }

@media (max-width: 590px) {
  .connected .accounts-page .page-title { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
  .connected .accounts-page .page-title > div:first-child span { display: none; }
  .connected .accounts-page .page-title .page-actions { width: auto; flex-wrap: nowrap; }
  .connected .accounts-page .page-title button { min-height: 40px; padding-inline: 10px; font-size: 11px; }
  .connected .accounts-list { grid-template-columns: 1fr; gap: 8px; }
  .connected .accounts-list .money-account-main { min-height: 72px; }
  .connected .money-account-actions { padding-bottom: 4px; }
  .connected .account-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .connected .account-dialog { padding: 15px; border-radius: 22px; }
  .connected .account-dialog .dialog-heading { margin-bottom: 10px; }
  .connected .payment-details { margin-block: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .connected .account-rail-track { scroll-behavior: auto; }
}

/* One compact person dossier: summary, ledger, documents. */
.relation-summary {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px;margin-block:10px;border:1px solid var(--app-border);border-radius:18px;background:var(--app-surface)}
.relation-summary strong {font-size:1.2rem;font-variant-numeric:tabular-nums}
.relation-summary p {flex-basis:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.relation-summary a {min-height:44px;display:inline-flex;align-items:center;color:var(--app-aqua)}
.relation-toolbar {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block:10px}
.relation-toolbar button,.relation-toolbar a,.relation-row button {min-height:44px;padding:8px 12px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface);color:inherit;text-decoration:none;cursor:pointer;font:inherit}
.relation-toolbar input {min-width:0;flex:1}
.relation-tabs {display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin-block:14px;padding:4px;background:rgba(0,0,0,.15);border-radius:18px}
.relation-tabs button {min-height:44px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;font-weight:650;cursor:pointer}
.relation-tabs button[aria-selected=true] {background:linear-gradient(120deg,#d9ff5d,#a7cc40);color:#082c32;box-shadow:0 3px 12px #041e2433}
.relation-rows {display:grid;gap:8px}
.relation-row {display:flex;align-items:center;gap:10px;min-height:62px;padding:8px 10px;border:1px solid var(--app-border);border-radius:16px;background:var(--app-surface)}
.relation-row>div,.relation-row>button:first-child {min-width:0;flex:1}
.relation-row b {display:block;overflow-wrap:anywhere;font-size:.92rem;line-height:1.6}
.relation-row small {display:block;opacity:.72;font-size:.78rem;line-height:1.6}
.relation-row strong {font-size:.85rem;font-variant-numeric:tabular-nums}
.relation-row button {flex-shrink:0;padding:7px 10px}
.relation-row>button:first-child {text-align:start}
.document-preview {display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:14px}
.document-note {white-space:pre-wrap;overflow-wrap:anywhere}
.relation-tabs button:focus-visible,.relation-toolbar button:focus-visible,.relation-row button:focus-visible {outline:2px solid #d9ff5d;outline-offset:3px}
@media(max-width:420px){.relation-row{gap:6px;padding:7px}.relation-row button{padding:7px}.relation-toolbar button,.relation-toolbar a{font-size:.84rem}.relation-tabs button{font-size:.8rem}}
@media(prefers-reduced-motion:no-preference){.relation-tabs button{transition:background .18s ease,box-shadow .18s ease}.relation-row{animation:relation-enter .18s ease-out}@keyframes relation-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}}
/* Collection and inventory tools: compact rows within the established dark palette. */
.ops-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.ops-toolbar button,.ops-toolbar a,.ops-row button{min-height:44px;padding:9px 14px;border:1px solid var(--app-border);border-radius:999px;background:var(--app-surface);color:var(--app-text);font:inherit;cursor:pointer;transition:background .16s ease,transform .16s ease}
.ops-toolbar button:hover,.ops-row button:hover{background:color-mix(in srgb,var(--app-aqua) 12%,var(--app-surface))}
.ops-toolbar button:active{transform:scale(.98)}
.ops-toolbar label{display:grid;gap:4px;min-width:140px;flex:1}
.ops-list{display:grid;gap:8px;margin:12px 0}
.ops-list .empty-row{padding:24px 12px;min-height:0}
.ops-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--app-border);border-radius:18px;background:var(--app-surface);min-width:0}
.ops-row>div,.ops-row b,.ops-select span{min-width:0;overflow-wrap:anywhere}
.ops-row small,.ops-return small{display:block;opacity:.8;font-size:13px;line-height:1.6}
.ops-row p{margin:4px 0;line-height:1.7;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.ops-row strong{font-size:14px;white-space:nowrap}
.ops-row img{border-radius:12px;object-fit:cover}
.ops-pill{border:1px solid var(--app-border);border-radius:999px;padding:6px 10px;font-size:13px;line-height:1.6}
.ops-balance{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;border:1px solid var(--app-border);border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--app-aqua) 12%,var(--app-surface)),var(--app-surface))}
.ops-balance strong{font-size:22px;margin-inline-start:auto}
.ops-balance small{flex-basis:100%}
.ops-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ops-metrics>span{display:grid;gap:8px;border:1px solid var(--app-border);border-radius:18px;padding:14px;font-size:13px;line-height:1.6}
.ops-metrics strong{font-size:16px;overflow-wrap:anywhere}
.ops-select{display:flex;gap:8px;align-items:center;min-height:44px;flex:1;cursor:pointer}
.ops-select input{width:20px;height:20px;flex:none;accent-color:var(--app-aqua)}
.feature-dialog .ops-select input[type="checkbox"]{width:20px!important;min-width:20px;max-width:20px;height:20px;min-height:20px;flex:0 0 20px;padding:0;margin:0;appearance:auto}
.feature-dialog .ops-select span{flex:1;min-width:0}
.feature-dialog .ops-select b{color:var(--app-text);font-weight:650}
.ops-return{display:grid;grid-template-columns:minmax(0,1fr) 80px;align-items:center;gap:12px;border-bottom:1px solid var(--app-border);padding:10px 0}
.ops-return input{width:100%;min-width:0;min-height:44px}
.ops-batch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--app-border);border-radius:16px}
.ops-batch>b{grid-column:1/-1}.ops-batch label{min-width:0}.ops-batch input{min-width:0;width:100%}
.ops-message{font-size:17px;font-weight:600;line-height:2.1;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;padding:18px;border:1px solid var(--app-border);border-radius:22px;background:var(--app-surface)}
.ops-camera{width:100%;max-height:300px;object-fit:cover;border-radius:18px}
.ops-toolbar :focus-visible,.ops-row :focus-visible{outline:2px solid var(--app-aqua);outline-offset:3px}
@media(max-width:420px){.ops-row{gap:8px;padding:10px}.ops-row strong{white-space:normal;max-width:40%;text-align:end}.ops-toolbar button{flex:1}.ops-pill{max-width:45%}}
@media(prefers-reduced-motion:reduce){.ops-toolbar button,.ops-row button{transition:none;transform:none}}