/* Shared surfaces; keep typography, controls, gestures and state colors. */
:root {
  /* Legacy components and inline cards use the same palette as new surfaces. */
  --bg: var(--visual-panel);
  --bg2: var(--visual-panel);
  --bg3: var(--visual-inset);
  --blu-bg: color-mix(in srgb, var(--blu) 16%, var(--visual-panel));
  --acc-bg: var(--blu-bg);
  --visual-canvas: color-mix(in srgb, var(--blu) 3%, var(--visual-base-canvas));
  --visual-panel: color-mix(in srgb, var(--blu) 7%, var(--visual-base-panel));
  --visual-inset: color-mix(in srgb, var(--blu) 9%, var(--visual-base-inset));
  --visual-base-canvas: #eeede9;
  --visual-base-panel: #ffffff;
  --visual-base-inset: #f3f3f1;
  --visual-line: rgba(37,43,56,.12);
}
:root[data-theme="dark"] {
  --visual-base-canvas: #1c1b2b;
  --visual-base-panel: #252238;
  --visual-base-inset: #302c43;
  --visual-line: rgba(240,238,247,.13);
}
:root[data-theme="gray"] {
  --visual-base-canvas: #303034;
  --visual-base-panel: #39393f;
  --visual-base-inset: #424249;
  --visual-line: rgba(240,238,247,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="gray"]) {
    --visual-base-canvas: #1c1b2b;
    --visual-base-panel: #252238;
    --visual-base-inset: #302c43;
    --visual-line: rgba(240,238,247,.13);
  }
}
/* No accent selected: neutral surfaces, independent of the default blue actions. */
:root:is(:not([data-color]),[data-color="none"]) {
  --visual-canvas: #ededed;
  --visual-panel: #ffffff;
  --visual-inset: #f3f3f3;
  --visual-line: rgba(37,37,37,.12);
  --text: #202020;
  --text2: #606060;
  --text3: #808080;
}
:root:is(:not([data-color]),[data-color="none"])[data-theme="dark"] {
  --visual-canvas: #1c1c1c;
  --visual-panel: #262626;
  --visual-inset: #323232;
  --visual-line: rgba(240,240,240,.13);
  --text: #eeeeee;
  --text2: #b8b8b8;
  --text3: #969696;
}
:root:is(:not([data-color]),[data-color="none"])[data-theme="gray"] {
  --visual-canvas: #303030;
  --visual-panel: #3a3a3a;
  --visual-inset: #454545;
  --visual-line: rgba(240,240,240,.14);
  --text: #eeeeee;
  --text2: #b8b8b8;
  --text3: #969696;
}
@media (prefers-color-scheme: dark) {
  :root:is(:not([data-color]),[data-color="none"]):not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="gray"]) {
    --visual-canvas: #1c1c1c;
    --visual-panel: #262626;
    --visual-inset: #323232;
    --visual-line: rgba(240,240,240,.13);
    --text: #eeeeee;
    --text2: #b8b8b8;
    --text3: #969696;
  }
}
/* Section frames share the base .card rule; no duplicate paint declarations. */
#ozet,#proj {
  /* Header, bottom navigation, section heading/padding and floating period. */
  --card-list-max-height:max(120px,calc(100dvh - var(--hdr-h) - var(--nav-h) - 72px - var(--summary-scroll-offset,0px)));
}
:is(#oz-hesaplar-kart,#oz-gelirler-kart,#oz-giderler-kart,#oz-butceler-kart,#oz-kovalar-kart,#oz-birikim-kart,#oz-faiz-kart,#proj-sirasi-kart,#proj-aylik-kart,#proj-kapanis-kart,#getiri-proj-kart,#proj-netvarlik-kart,#proj-yatirim-kart),
#duzenle .duz-sec > .card,
#islem-chart-kart,
#duzenle .archive-section {
  --section-surface: transparent;
  --section-line: transparent;
  --section-padding: var(--padding-section) 0;
  --section-border-width: 1px 0;
}
#duz-proj > .card + .card { --section-line:var(--visual-line);--section-border-width:1px 0 0;border-radius:0; }
.home-monthly-details,#getiri-proj-rows,#nv-proj-rows,#proj-rows { background:var(--visual-panel);border:1px solid var(--visual-line);border-radius:var(--rl);padding:var(--padding-section); }
.visual-section-total {
  margin-inline-start: auto;
  font-size: var(--font-amount);
  font-weight: var(--weight-strong);
  text-align: end;
  min-width: 0;
  overflow-wrap: anywhere;
}
.visual-section-heading { flex: 1; }
body #ozet .visual-section-heading>[id^="acc-arr-"] { order:10; margin-inline-start:auto; margin-inline-end:0; }
body #ozet .visual-section-heading:has(>.visual-section-total)>[id^="acc-arr-"] { margin-inline-start:0; }
/* Retain source nodes for calculations and the floating section caption. */
html body .visual-has-total > .hlr { display: none; }
.ui-detail-icon { width:1em; height:1em; flex:0 0 1em; vertical-align:middle; }
.home-interest-badge,.home-yield-badge { display:inline-flex; align-items:center; gap:4px; }
/* Nested controls and records must remain distinct from their panel. */
:is(#duzenle .ei,.quick-sheet,#islem-sablonlari-overlay,#islem-gecmisi-overlay,#bakiye-etiket-yonet-overlay) {
  --bg:var(--visual-inset);
  --bg2:var(--visual-inset);
}
#oz-borc-ilerleme-kart .pbw { background:var(--visual-inset); }
/* Picker close controls share the quick-entry close button's geometry and surface. */
html body :is(#hizli-islem-overlay .quick-close,#record-icon-dialog [data-close],#butce-etiket-secim-overlay .quick-close,#bucktory-kayit-secim-overlay .select-panel-close,.app-dialog-close):not(.intro-banner-close){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--scaled-icon-control)!important;min-width:var(--scaled-icon-control)!important;max-width:var(--scaled-icon-control)!important;height:var(--scaled-icon-control)!important;min-height:var(--scaled-icon-control)!important;max-height:var(--scaled-icon-control)!important;flex:0 0 var(--scaled-icon-control)!important;padding:0!important;border:1px solid var(--bdr2)!important;border-radius:12px!important;background:var(--visual-inset)!important;color:var(--text2)!important}
html body :is(#hizli-islem-overlay .quick-close,#record-icon-dialog [data-close],#butce-etiket-secim-overlay .quick-close,#bucktory-kayit-secim-overlay .select-panel-close,.app-dialog-close)>svg{display:block;width:calc(16px * var(--app-control-scale,1))!important;height:calc(16px * var(--app-control-scale,1))!important;flex:0 0 calc(16px * var(--app-control-scale,1));margin:0!important}

#bucktory-kayit-secim-overlay .select-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;margin:-12px -12px 12px;padding:12px 16px;background:var(--visual-inset);border-radius:calc(var(--r) + 5px) calc(var(--r) + 5px) 0 0}

/* Outer card frames only. Keep descendant dividers, controls and drag/focus outlines. */
html body :is(#oz-ay-kart,#ozet-stat-kart,#oz-borc-ilerleme-kart,#proj-hero-kart,
  #islem-donem-kart,#islem-chart-kart,#islem-chart-scroll),
html body #ozet :is(.home-account-card,.home-flow-card,.ozet-hedef-kart,.home-monthly-details),
html body :is(#ozet-bu-ay-gelirler,#ozet-bu-ay-giderler) > .row,
html body #proj :is(.target-order-row,.target-order-card,.odeme-donem-karti),
html body #odeme-plan-rows > .tli,
html body :is(#getiri-proj-rows,#nv-proj-rows,#proj-rows),
html body #islem-kalem-grafik > .islem-kalem-bolum,
html body #duzenle .duz-nav,
html body #duz-vertical-nav,
html body #duz-vertical-nav > .card,
html body :is(.islem-sablon-satir,.islem-sablon-kart,.islem-gecmisi-satir,.islem-durum-ozet),
html body #duzenle :is(#hesap-edit-container,#gelir-edit-container,#gider-edit-container,#butce-edit-container,#kova-edit-container) > :is(.ei,.record-delete-pending),
html body.sirala-kompakt :is(#ozet,#proj) .kart-sira-baslik {
  border: 0 !important;
}
html body :is(#oz-ay-kart,#ozet-stat-kart,#islem-donem-kart).summary-sticky > .summary-month-row,
html body .summary-section-caption {
  outline: none;
}

#islem-gecmisi-liste:has(>.history-empty-state){padding-top:8px}

/* Keep payment badges together with the result when the name needs its own row. */
body .odeme-donem-hedef-satiri{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px}
body .odeme-donem-hedef-satiri>.payment-target-name{flex:0 0 auto;max-width:100%;min-width:0;overflow-wrap:anywhere}
body .payment-target-details{display:flex;flex:1 0 auto;max-width:100%;min-width:0;align-items:center;flex-wrap:wrap;gap:6px 12px}
body .payment-target-badges{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%}
body .payment-target-badges:empty{display:none}
body .payment-target-result{margin-inline-start:auto;text-align:end;max-width:100%}
body .payment-target-result .projection-bucket-amount{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:3px}
body .payment-target-result .projection-bucket-amount>span{display:inline-flex;align-items:center;gap:3px}

/* Account symbols are neutral in financial summaries and transaction records. */
body :is(#ozet,#hesap-kapama-sirasi,#odeme-plan-aylik,#odeme-plan-rows,.islem-gecmisi-satir,#islem-gecmisi-altbaslik) [data-icon-type="hesap"] .record-icon{color:var(--text)}
body #ozet .home-account-icon{color:var(--text)}
body #ozet .gecmis-kisayol{color:var(--text);border-color:var(--text)}

/* Neutral badges remain distinct from the transaction card in every theme. */
:root{--history-neutral-badge-bg:color-mix(in srgb,var(--text) 12%,transparent)}

/* Light transaction surfaces need separation from the canvas without borders. */
:root[data-theme="light"] body :is(.islem-gecmisi-satir,.islem-durum-ozet:not(.is-active),.islem-gecmisi-satir .islem-gecmisi-planla,.islem-gecmisi-satir .islem-gecmisi-sil,.islem-sablon-kart .islem-sablon-sil){background:var(--transaction-card-surface,var(--visual-panel))!important}
@media (prefers-color-scheme: light){
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="gray"]) body :is(.islem-gecmisi-satir,.islem-durum-ozet:not(.is-active),.islem-gecmisi-satir .islem-gecmisi-planla,.islem-gecmisi-satir .islem-gecmisi-sil,.islem-sablon-kart .islem-sablon-sil){background:var(--transaction-card-surface,var(--visual-panel))!important}
}

/* History opens on a panel surface, so its cards use the inset surface. */
:is(#islem-gecmisi-overlay:not(.islem-gecmisi-sayfa),#islem-sablonlari-overlay){--transaction-card-surface:var(--visual-inset)}

/* Savings growth uses a lighter green surface than payments from capacity. */
.payment-bucket-growth-badge{background:var(--bucket-growth-bg)}

:root{--bucket-growth-color:color-mix(in srgb,var(--grn) 65%,white);--bucket-growth-bg:color-mix(in srgb,var(--grn-bg) 85%,white)}
body .archive-record[data-archive-type="hesap"] [data-icon-type="hesap"] .record-icon{color:var(--text)}
body :is(.intro-banner,#ozet-rehber-bilgi,#islem-gecmisi-rehber-bilgi){color:var(--text)!important}
body :is(.intro-banner,#ozet-rehber-bilgi,#islem-gecmisi-rehber-bilgi) a{color:var(--text)!important}
body #bildirim-pil-uyari>span{color:var(--text)}