/* Uygulamaya özgü küçük eklemeler; temel stil Bootstrap 5'ten geliyor. */
.amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Satır içi style CSP ile engelli; dar tablo sütunları için. */
.col-w-5 {
    width: 5.5rem;
}

.col-w-6 {
    width: 6.5rem;
}

.min-w-0 {
    min-width: 0;
}

/* Yazdırma / PDF: menü ve formlar gizli (d-print-none), kalan sütun tam genişlik. */
@media print {
    body {
        background: #fff !important;
    }

    .row > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card {
        box-shadow: none !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Koyu tema: Bootstrap'ın "light" varyantları koyu temada da açık kalıyor, yüzeye uydur. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Panel takvimi: kırmızı ödeme, mavi alacak, kahverengi ikisi birden. */
.cal-pay {
    --cal-bg: var(--bs-danger);
}

.cal-receive {
    --cal-bg: #2563eb; /* beyaz yazı her iki temada okunsun */
}

.cal-both {
    --cal-bg: #8b5a2b;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem;
}

.cal-head {
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 3.5rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background: var(--bs-tertiary-bg);
}

a.cal-day:hover {
    outline: 2px solid var(--bs-secondary-color);
}

.cal-empty {
    background: transparent;
}

.cal-day.cal-pay,
.cal-day.cal-receive,
.cal-day.cal-both {
    background: var(--cal-bg);
    color: #fff;
    font-weight: 600;
}

.cal-today {
    box-shadow: inset 0 0 0 2px var(--bs-emphasis-color);
}

.cal-count {
    position: absolute;
    top: .1rem;
    right: .3rem;
    font-size: .65rem;
    opacity: .8;
}

.cal-swatch {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-right: .3rem;
    border-radius: .2rem;
    vertical-align: -.05rem;
    background: var(--cal-bg);
}

.cal-summary {
    border: 0;
    background: var(--cal-bg);
    color: #fff;
}

.cal-summary .amount {
    color: inherit !important;
}

.list-group-flush > .cal-event {
    border-left: .3rem solid transparent;
}

.list-group-flush > .cal-event-pay,
.list-group-flush > .cal-event-receive {
    border-left-color: var(--cal-bg);
}

.cal-event-pay {
    --cal-bg: var(--bs-danger);
}

.cal-event-receive {
    --cal-bg: var(--app-receivable);
}

/*
 * Giriş ekranı (Stitch tasarımı). Plus Jakarta Sans yerelden (SIL Open Font License), sadece bu sayfada.
 * Bölünmüş düzen: lg ve üstünde solda marka paneli %55, sağda form; altında marka paneli kısa bir başlık bandı.
 */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.auth-page {
    --auth-primary: #4f46e5;
    --auth-primary-hover: #4338ca;
    --auth-ring: rgba(79, 70, 229, .2);
    --auth-muted: #64748b;
    --auth-input-bg: #f8fafc;
    --auth-input-border: #e2e8f0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
}

[data-bs-theme="dark"] .auth-page {
    --auth-muted: #94a3b8;
    --auth-input-bg: #111827;
    --auth-input-border: #334155;
    --auth-ring: rgba(129, 140, 248, .3);
}

.auth-split {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Marka paneli */
.auth-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #020617 0%, #1e1b4b 55%, #0f172a 100%);
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .4;
    pointer-events: none;
}

.auth-brand::after {
    content: "";
    position: absolute;
    top: -8rem;
    left: -8rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: rgba(67, 56, 202, .3);
    filter: blur(100px);
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    padding: 1.5rem;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.auth-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 10px 15px -3px rgba(30, 27, 75, .6), inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.auth-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.auth-headline {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.auth-headline-accent {
    background: linear-gradient(90deg, #fff, #c7d2fe, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-lead {
    margin: .75rem 0 0;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Mobilde marka paneli sadece başlık bandı. */
.auth-features,
.auth-preview,
.auth-brand-footer {
    display: none;
}

.auth-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .875rem;
    margin-top: 2rem;
}

.auth-feature {
    padding: .875rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .04);
}

.auth-feature h2 {
    margin: .625rem 0 .125rem;
    font-size: .8125rem;
    font-weight: 600;
}

.auth-feature p {
    margin: 0;
    font-size: .75rem;
    line-height: 1.35;
    color: #94a3b8;
}

.auth-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid;
    border-radius: .5rem;
}

.tone-amber {
    --tone: 245, 158, 11;
    --tone-text: #fcd34d;
}

.tone-blue {
    --tone: 59, 130, 246;
    --tone-text: #93c5fd;
}

.tone-indigo {
    --tone: 99, 102, 241;
    --tone-text: #a5b4fc;
}

.tone-red {
    --tone: 239, 68, 68;
    --tone-text: #fca5a5;
}

.auth-feature-icon,
.auth-metric {
    color: var(--tone-text);
    background: rgba(var(--tone), .15);
    border-color: rgba(var(--tone), .3);
}

.auth-preview {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    backdrop-filter: blur(24px);
}

.auth-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .875rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.auth-preview-title {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.auth-preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    font-size: .875rem;
    background: rgba(67, 56, 202, .8);
}

.auth-preview-badge {
    padding: .2rem .625rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: #cbd5e1;
}

.auth-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
    margin: .875rem 0;
}

.auth-metric {
    padding: .75rem;
    border: 1px solid;
    border-radius: .75rem;
}

.auth-metric-label {
    display: flex;
    justify-content: space-between;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-metric-value {
    margin-top: .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.auth-metric-note {
    font-size: .625rem;
    opacity: .8;
}

.auth-mini-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .25rem;
    padding: .75rem;
    border-radius: .75rem;
    font-size: .625rem;
    text-align: center;
    color: #94a3b8;
    background: rgba(0, 0, 0, .2);
}

.auth-mini-cal b {
    padding: .25rem 0;
    border-radius: .25rem;
    font-weight: 500;
    color: #64748b;
}

.auth-mini-cal .is-receive {
    font-weight: 700;
    color: #bfdbfe;
    background: rgba(59, 130, 246, .3);
}

.auth-mini-cal .is-pay {
    font-weight: 700;
    color: #fecaca;
    background: rgba(239, 68, 68, .25);
}

.auth-brand-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .75rem;
    color: #94a3b8;
}

/* Form paneli */
.auth-panel {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-form-wrap {
    width: 100%;
    max-width: 400px;
}

.auth-form-head {
    margin-bottom: 1.5rem;
}

.auth-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.auth-subtitle {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--auth-muted);
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1.25rem;
    padding: .875rem;
    border: 1px solid #fecaca;
    border-radius: .75rem;
    font-size: .875rem;
    color: #b91c1c;
    background: #fef2f2;
}

.auth-alert .bi {
    font-size: 1.125rem;
    line-height: 1.2;
    color: #dc2626;
}

[data-bs-theme="dark"] .auth-alert {
    border-color: rgba(239, 68, 68, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
}

[data-bs-theme="dark"] .auth-alert .bi {
    color: #f87171;
}

.auth-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
}

.auth-input {
    position: relative;
}

.auth-input > .bi {
    position: absolute;
    top: 50%;
    left: .875rem;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: #94a3b8;
    pointer-events: none;
}

.auth-input .form-control {
    padding: .75rem 1rem .75rem 2.625rem;
    border-color: var(--auth-input-border);
    border-radius: .75rem;
    font-size: .9375rem;
    background-color: var(--auth-input-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.auth-input .form-control.has-toggle {
    padding-right: 2.75rem;
}

.auth-input .form-control:focus {
    border-color: var(--auth-primary);
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 .25rem var(--auth-ring);
}

.auth-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 .875rem;
    border: 0;
    font-size: 1.125rem;
    color: #94a3b8;
    background: none;
}

.auth-toggle:hover {
    color: var(--bs-body-color);
}

.auth-submit {
    padding: .875rem 1rem;
    border: 0;
    border-radius: .75rem;
    font-weight: 600;
    background: var(--auth-primary);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, .25);
}

.auth-submit:hover,
.auth-submit:focus-visible {
    background: var(--auth-primary-hover);
}

.auth-submit .bi {
    display: inline-block;
    margin-left: .375rem;
    transition: transform .15s;
}

.auth-submit:hover .bi {
    transform: translateX(2px);
}

.auth-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: var(--auth-muted);
}

.auth-foot p {
    margin: 0;
}

.auth-foot a {
    font-weight: 600;
    color: var(--auth-primary);
    text-decoration: none;
}

.auth-foot a:hover {
    text-decoration: underline;
}

[data-bs-theme="dark"] .auth-foot a {
    color: #a5b4fc;
}

.auth-note {
    margin-top: .75rem !important;
    font-size: .75rem;
}

/* Kayıt: alan hataları sarmalayıcının dışında, Bootstrap kardeş seçicisi tutmadığı için elle gösterilir. */
.auth-field .invalid-feedback {
    display: flex;
    gap: .375rem;
    margin-top: .375rem;
    font-size: .8125rem;
}

.auth-field .invalid-feedback::before {
    content: "\F33B"; /* bi-exclamation-triangle */
    font-family: "bootstrap-icons";
}

.auth-input .form-control.is-invalid {
    border-color: #dc2626;
    background-image: none;
}

.auth-input:has(.is-invalid) > .bi {
    color: #dc2626;
}

.auth-hint {
    margin-top: .375rem;
    font-size: .75rem;
    color: var(--auth-muted);
}

.auth-steps {
    display: none;
    flex-direction: column;
    gap: .875rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.auth-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .875rem;
    background: rgba(255, 255, 255, .04);
}

.auth-step h2 {
    margin: 0 0 .125rem;
    font-size: 1rem;
    font-weight: 600;
}

.auth-step p {
    margin: 0;
    font-size: .8125rem;
    color: #94a3b8;
}

.auth-step-icon {
    display: inline-flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: 1px solid rgba(129, 140, 248, .35);
    border-radius: .75rem;
    font-size: 1.125rem;
    color: #a5b4fc;
    background: rgba(99, 102, 241, .15);
}

.auth-step.is-current {
    border-color: rgba(129, 140, 248, .45);
    background: rgba(99, 102, 241, .12);
}

.auth-step.is-done .auth-step-icon {
    border-color: rgba(16, 185, 129, .35);
    color: #6ee7b7;
    background: rgba(16, 185, 129, .15);
}

.auth-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    font-size: 1.75rem;
    color: #d97706;
    background: #fffbeb;
}

[data-bs-theme="dark"] .auth-done-icon {
    color: #fcd34d;
    background: rgba(245, 158, 11, .12);
}

@media (min-width: 992px) {
    .auth-steps {
        display: flex;
    }

    .auth-split {
        flex-direction: row;
    }

    .auth-brand {
        flex: 0 0 55%;
    }

    .auth-brand-inner {
        justify-content: space-between;
        min-height: 100vh;
        padding: 3.5rem;
    }

    .auth-headline {
        font-size: 2.25rem;
        line-height: 1.22;
    }

    .auth-lead {
        font-size: 1.0625rem;
    }

    .auth-features {
        display: grid;
    }

    .auth-preview,
    .auth-brand-footer {
        display: block;
    }

    .auth-panel {
        padding: 4rem 3rem;
    }
}

/*
 * Uygulama teması ("Ledger Precision UI", Stitch projesi 6719322563341935204): indigo ana renk,
 * mavi alacak, kırmızı borç, amber altın; açık zeminde beyaz kartlar, koyu yan menü.
 * Bootstrap'ın CSS değişkenleri ezilerek tüm sayfalar view'lara dokunmadan bu görünüme geçer.
 */
:root,
[data-bs-theme="light"] {
    --app-canvas: #f8fafc;
    --app-receivable: #2563eb;
    --app-payable: #dc2626;
    --app-gold: #d97706;
    --app-shadow: 0 1px 3px 0 rgba(15, 23, 42, .04), 0 1px 2px -1px rgba(15, 23, 42, .03);
    --app-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .03);
    --app-ring: rgba(79, 70, 229, .2);
    --app-primary-soft: #eef2ff;
    --app-primary-soft-text: #4338ca;
    --app-primary-soft-border: #c7d2fe;
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-emphasis-color: #020617;
    --bs-secondary-color: #64748b;
    --bs-tertiary-bg: #f8fafc;
    --bs-secondary-bg: #f1f5f9;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(15, 23, 42, .08);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1rem;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #3730a3;
    --bs-primary-bg-subtle: #eef2ff;
    --bs-primary-border-subtle: #c7d2fe;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-focus-ring-color: rgba(79, 70, 229, .25);
}

[data-bs-theme="dark"] {
    --app-canvas: #0b1120;
    --app-receivable: #60a5fa;
    --app-payable: #f87171;
    --app-gold: #fbbf24;
    --app-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3);
    --app-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .45);
    --app-ring: rgba(129, 140, 248, .3);
    --app-primary-soft: rgba(99, 102, 241, .15);
    --app-primary-soft-text: #c7d2fe;
    --app-primary-soft-border: rgba(129, 140, 248, .35);
    --bs-body-bg: #111827;
    --bs-body-bg-rgb: 17, 24, 39;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-bg: #172033;
    --bs-tertiary-bg-rgb: 23, 32, 51;
    --bs-secondary-bg: #1e293b;
    --bs-border-color: #263247;
    --bs-border-color-translucent: rgba(255, 255, 255, .08);
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-primary-text-emphasis: #c7d2fe;
    --bs-primary-bg-subtle: rgba(99, 102, 241, .15);
    --bs-primary-border-subtle: rgba(129, 140, 248, .35);
    --bs-link-color: #a5b4fc;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #c7d2fe;
    --bs-link-hover-color-rgb: 199, 210, 254;
}

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

.amount {
    font-feature-settings: "tnum" 1;
}

.text-receivable {
    color: var(--app-receivable) !important;
}

/* Kabuk */
.app-page {
    background: var(--app-canvas);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    --bs-offcanvas-width: 280px;
    --bs-offcanvas-bg: #0f172a;
    color: #cbd5e1;
}

.app-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    min-height: 100vh;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}

.app-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .5rem;
}

.app-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.app-brand-link:hover {
    color: #fff;
}

.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    font-size: 1.125rem;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border-radius: .75rem;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.app-nav-link .bi {
    font-size: 1.125rem;
    color: #94a3b8;
}

.app-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.app-nav-link.active {
    color: #fff;
    background: #4f46e5;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, .5), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.app-nav-link.active .bi {
    color: #fff;
}

.app-nav-heading {
    margin: 1.25rem .875rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.app-nav-badge {
    margin-left: auto;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #fcd34d;
    background: rgba(245, 158, 11, .2);
}

.app-sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.app-ledger,
.app-user {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    text-align: left;
    color: #e2e8f0;
    background: none;
}

.app-ledger {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
}

.app-ledger:hover,
.app-user:hover,
.app-user.active {
    background: rgba(255, 255, 255, .08);
}

.app-ledger-text,
.app-user-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.app-ledger-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.app-ledger-name,
.app-user-name {
    overflow: hidden;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-ledger-role {
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
}

.app-user-mail {
    overflow: hidden;
    font-size: .75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #94a3b8;
}

.app-avatar {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: 50%;
    font-size: .8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

.app-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--app-canvas) 85%, transparent);
    backdrop-filter: blur(12px);
}

.app-topbar-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.app-topbar-title .bi {
    color: var(--bs-secondary-color);
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.app-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .375rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    background: var(--bs-body-bg);
}

.app-pill:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-secondary-color);
}

.app-pill-primary {
    border-color: var(--app-primary-soft-border);
    color: var(--app-primary-soft-text);
    background: var(--app-primary-soft);
}

.app-pill-primary:hover {
    color: var(--app-primary-soft-text);
}

.app-pill-dot {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: currentColor;
}

.app-pill-count {
    padding: 0 .45rem;
    border-radius: 999px;
    font-size: .75rem;
    background: rgba(var(--bs-primary-rgb), .15);
}

.app-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border: 0;
    border-radius: .75rem;
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    background: none;
}

.app-icon-btn:hover,
.app-icon-btn.active {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}

.app-dot {
    position: absolute;
    top: .45rem;
    right: .5rem;
    width: .5rem;
    height: .5rem;
    border: 2px solid var(--app-canvas);
    border-radius: 50%;
    background: #ef4444;
}

.app-content {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    padding: 1.25rem 1rem 2.5rem;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        flex: 0 0 260px;
        height: 100vh;
    }

    .app-topbar {
        padding: .5rem 2rem;
    }

    .app-content {
        padding: 2rem 2rem 3rem;
    }
}

/* Bileşenler */
h1,
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-weight: 700;
    letter-spacing: -.015em;
}

.app-page a:not(.btn, .app-nav-link, .app-pill, .app-icon-btn, .dropdown-item, .nav-link, .page-link, .list-group-item-action, .cal-day) {
    text-decoration: none;
}

.app-page a:not(.btn, .app-nav-link, .app-pill, .app-icon-btn, .dropdown-item, .nav-link, .page-link, .list-group-item-action, .cal-day):hover {
    text-decoration: underline;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
    --bs-card-cap-padding-y: .875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}

[data-bs-theme="light"] .card {
    --bs-card-border-color: #eef2f7;
}

.card.shadow-sm,
.app-page .card {
    box-shadow: var(--app-shadow) !important;
}

.card-header {
    font-weight: 600;
}

.card-header,
.card-footer {
    border-color: var(--bs-border-color);
}

.card > .list-group-flush > .list-group-item {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
}

.table > thead th {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-secondary-color);
    --bs-table-border-color: var(--bs-border-color);
}

.card .table > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.card .table > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.table:not(.table-sm) > :not(caption) > * > * {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: .625rem;
}

.btn-sm {
    --bs-btn-border-radius: .5rem;
}

.btn-primary {
    --bs-btn-bg: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-disabled-bg: #4f46e5;
    --bs-btn-disabled-border-color: #4f46e5;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 2px rgba(79, 70, 229, .25);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--app-primary-soft-border);
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg: #4338ca;
    --bs-btn-active-border-color: #4338ca;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}

.form-control,
.form-select {
    border-color: var(--bs-border-color);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    border-color: #cbd5e1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem var(--app-ring);
}

.form-check-input:checked {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem var(--app-ring);
}

.form-label {
    font-size: .875rem;
    font-weight: 600;
}

.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: #4f46e5;
}

.nav-pills .nav-link {
    font-weight: 600;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--bs-link-color);
}

.list-group {
    --bs-list-group-active-bg: #4f46e5;
    --bs-list-group-active-border-color: #4f46e5;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-link-active-bg: #4f46e5;
    --bs-dropdown-box-shadow: var(--app-shadow-lg);
    box-shadow: var(--app-shadow-lg);
}

.pagination {
    --bs-pagination-active-bg: #4f46e5;
    --bs-pagination-active-border-color: #4f46e5;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.alert {
    --bs-alert-border-radius: .75rem;
}

@media print {
    .app-page {
        background: #fff !important;
    }

    .app-shell {
        display: block;
    }

    .app-content {
        max-width: none;
        padding: 0;
    }
}

/* Panel parçaları: tür rozetleri, vade kartları, kasa satırları (Stitch paneli). */
.tag {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border: 1px solid var(--tag-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--tag-color);
    background: var(--tag-bg);
}

.tag-pay {
    --tag-bg: #fef2f2;
    --tag-border: #fecaca;
    --tag-color: #b91c1c;
}

.tag-receive {
    --tag-bg: #eff6ff;
    --tag-border: #bfdbfe;
    --tag-color: #1d4ed8;
}

.tag-gold {
    --tag-bg: #fffbeb;
    --tag-border: #fde68a;
    --tag-color: #b45309;
}

.tag-neutral {
    --tag-bg: var(--bs-tertiary-bg);
    --tag-border: var(--bs-border-color);
    --tag-color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .tag-pay {
    --tag-bg: rgba(239, 68, 68, .12);
    --tag-border: rgba(239, 68, 68, .3);
    --tag-color: #fca5a5;
}

[data-bs-theme="dark"] .tag-receive {
    --tag-bg: rgba(59, 130, 246, .12);
    --tag-border: rgba(59, 130, 246, .3);
    --tag-color: #93c5fd;
}

[data-bs-theme="dark"] .tag-gold {
    --tag-bg: rgba(245, 158, 11, .12);
    --tag-border: rgba(245, 158, 11, .3);
    --tag-color: #fcd34d;
}

.due-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
}

.due-pay .due-amount {
    color: var(--app-payable);
}

.due-receive .due-amount {
    color: var(--app-receivable);
}

.due-item.is-overdue.due-pay {
    border-color: #fecaca;
    background: #fef2f2;
}

[data-bs-theme="dark"] .due-item.is-overdue.due-pay {
    border-color: rgba(239, 68, 68, .3);
    background: rgba(239, 68, 68, .08);
}

.list-avatar {
    display: inline-flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
}

.box-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    color: var(--bs-body-color);
}

.app-page a.box-item {
    text-decoration: none;
}

.box-item:hover {
    color: var(--bs-body-color);
    border-color: var(--app-primary-soft-border);
    background: var(--bs-tertiary-bg);
}

.box-icon {
    display: inline-flex;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: 1px solid;
    border-radius: .75rem;
    font-size: 1.125rem;
}

.box-icon-cash {
    border-color: #a7f3d0;
    color: #059669;
    background: #ecfdf5;
}

.box-icon-fx {
    border-color: #c7d2fe;
    color: #4f46e5;
    background: #eef2ff;
}

.box-icon-gold {
    border-color: #fde68a;
    color: #d97706;
    background: #fffbeb;
}

[data-bs-theme="dark"] .box-icon-cash {
    border-color: rgba(16, 185, 129, .3);
    color: #6ee7b7;
    background: rgba(16, 185, 129, .1);
}

[data-bs-theme="dark"] .box-icon-fx {
    border-color: rgba(129, 140, 248, .3);
    color: #a5b4fc;
    background: rgba(99, 102, 241, .12);
}

[data-bs-theme="dark"] .box-icon-gold {
    border-color: rgba(245, 158, 11, .3);
    color: #fcd34d;
    background: rgba(245, 158, 11, .1);
}

.box-add {
    display: block;
    padding: .75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .875rem;
    font-weight: 600;
    text-align: center;
    color: var(--bs-secondary-color);
}

.app-page a.box-add {
    text-decoration: none;
}

.box-add:hover {
    border-color: var(--bs-primary);
    color: var(--bs-link-color);
}

/* Cari detay (Stitch "Cari Detay"): kimlik kartı, bakiye kutuları, ekstre çipleri, hareket formu. */
.contact-hero {
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #4338ca, #2563eb 55%, #f59e0b);
}

.contact-hero .card-body {
    padding: 1.5rem;
}

.contact-avatar {
    display: inline-flex;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    height: 4rem;
    border: 3px solid var(--app-primary-soft-border);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: var(--app-primary-soft);
}

.contact-name {
    margin: 0 0 .375rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.contact-meta .bi {
    margin-right: .3rem;
}

.contact-notes {
    margin-top: .375rem;
    font-size: .8125rem;
    font-style: italic;
    color: var(--bs-secondary-color);
}

.contact-legend {
    margin-top: .625rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.contact-legend .bi {
    margin-right: .3rem;
}

@media (min-width: 992px) {
    .contact-legend {
        text-align: right;
    }
}

.bal-chip {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .875rem;
    border: 1px solid var(--bal-border);
    border-radius: .75rem;
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bal-color);
    background: var(--bal-bg);
}

.bal-chip > span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bal-chip small {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bal-receive {
    --bal-bg: #eff6ff;
    --bal-border: #bfdbfe;
    --bal-color: #1d4ed8;
}

.bal-pay {
    --bal-bg: #fef2f2;
    --bal-border: #fecaca;
    --bal-color: #b91c1c;
}

.bal-gold {
    --bal-bg: #fffbeb;
    --bal-border: #fde68a;
    --bal-color: #b45309;
}

.bal-neutral {
    --bal-bg: var(--bs-tertiary-bg);
    --bal-border: var(--bs-border-color);
    --bal-color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .bal-receive {
    --bal-bg: rgba(59, 130, 246, .12);
    --bal-border: rgba(59, 130, 246, .3);
    --bal-color: #93c5fd;
}

[data-bs-theme="dark"] .bal-pay {
    --bal-bg: rgba(239, 68, 68, .12);
    --bal-border: rgba(239, 68, 68, .3);
    --bal-color: #fca5a5;
}

[data-bs-theme="dark"] .bal-gold {
    --bal-bg: rgba(245, 158, 11, .12);
    --bal-border: rgba(245, 158, 11, .3);
    --bal-color: #fcd34d;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .125rem .5rem;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--chip-color);
    background: var(--chip-bg);
}

.app-page a.chip {
    text-decoration: none;
}

.app-page a.chip:hover {
    text-decoration: underline;
}

.contact-name .chip {
    margin-left: .375rem;
    border-radius: 999px;
    letter-spacing: 0;
}

.chip-neutral {
    --chip-bg: var(--bs-tertiary-bg);
    --chip-color: var(--bs-secondary-color);
}

.chip-primary {
    --chip-bg: #eef2ff;
    --chip-color: #4338ca;
}

.chip-success {
    --chip-bg: #ecfdf5;
    --chip-color: #047857;
}

.chip-warning {
    --chip-bg: #fffbeb;
    --chip-color: #b45309;
}

.chip-danger {
    --chip-bg: #fef2f2;
    --chip-color: #b91c1c;
}

[data-bs-theme="dark"] .chip-primary {
    --chip-bg: rgba(99, 102, 241, .15);
    --chip-color: #a5b4fc;
}

[data-bs-theme="dark"] .chip-success {
    --chip-bg: rgba(16, 185, 129, .12);
    --chip-color: #6ee7b7;
}

[data-bs-theme="dark"] .chip-warning {
    --chip-bg: rgba(245, 158, 11, .12);
    --chip-color: #fcd34d;
}

[data-bs-theme="dark"] .chip-danger {
    --chip-bg: rgba(239, 68, 68, .12);
    --chip-color: #fca5a5;
}

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .125rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
}

.segmented a {
    padding: .3rem .875rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.segmented a:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

.segmented a.active {
    color: #fff;
    background: var(--bs-primary);
}

.statement-table td {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

.statement-sub {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.statement-table .is-uncounted > td {
    opacity: .6;
}

.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    background: none;
}

.row-action:hover {
    color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.row-action-danger {
    color: #dc2626;
}

.row-action-danger:hover {
    color: #b91c1c;
    background: #fef2f2;
}

[data-bs-theme="dark"] .row-action-danger {
    color: #f87171;
}

[data-bs-theme="dark"] .row-action-danger:hover {
    background: rgba(239, 68, 68, .12);
}

.side-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.side-card-icon {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: .625rem;
    font-size: 1.0625rem;
    color: var(--bs-primary);
    background: var(--app-primary-soft);
}

.side-card-icon-primary {
    color: #fff;
    background: var(--bs-primary);
}

.side-card-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    border: 0;
    color: var(--bs-body-color);
    background: none;
}

.side-card-toggle .bi-chevron-down {
    color: var(--bs-secondary-color);
    transition: transform .15s;
}

.side-card-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.link-person {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: .625rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.type-option span {
    font-weight: 600;
}

.type-option small {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.type-option:hover {
    border-color: var(--app-primary-soft-border);
    background: var(--bs-tertiary-bg);
}

.btn-check:focus-visible + .type-option {
    box-shadow: 0 0 0 .25rem var(--app-ring);
}

.btn-check:checked + .type-option {
    border-width: 2px;
    padding: calc(.625rem - 1px) calc(.5rem - 1px);
}

.btn-check:checked + .type-give {
    border-color: #dc2626;
    color: #b91c1c;
    background: #fef2f2;
}

.btn-check:checked + .type-take {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

[data-bs-theme="dark"] .btn-check:checked + .type-give {
    color: #fca5a5;
    background: rgba(239, 68, 68, .12);
}

[data-bs-theme="dark"] .btn-check:checked + .type-take {
    color: #93c5fd;
    background: rgba(59, 130, 246, .12);
}

.type-option > .bi {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: .25rem;
}

.type-option span {
    font-size: 1.0625rem;
}

.btn-check:checked + .type-option small {
    color: inherit;
}

.type-hint {
    display: flex;
    gap: .5rem;
    padding: .625rem .75rem;
    border: 1px solid #fde68a;
    border-radius: .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #92400e;
    background: #fffbeb;
}

.type-hint .bi {
    margin-top: .05rem;
}

[data-bs-theme="dark"] .type-hint {
    border-color: rgba(245, 158, 11, .3);
    color: #fcd34d;
    background: rgba(245, 158, 11, .08);
}

/* Banka logosu (kasa listeleri): beyaz zeminli küçük kutu, koyu temada da logonun kendi renkleri okunur. */
.bank-tile {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .625rem;
    background: #fff;
    overflow: hidden;
}

.bank-tile-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
}

.bank-logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.bank-tile-lg .bank-logo {
    width: 1.75rem;
    height: 1.75rem;
}

.box-iban {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.box-iban-value {
    min-width: 0;
    flex: 0 1 22rem;
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

/* Panel varlık grafikleri: yatay çubuklar (SVG), değer yanında metin renginde. Renkler validate_palette'ten geçti. */
:root,
[data-bs-theme="light"] {
    --chart-cash: #0d9488;
    --chart-receivable: #2563eb;
    --chart-payable: #dc2626;
    --chart-positive: #4f46e5;
    --chart-negative: #dc2626;
    --chart-grid: #e2e8f0;
}

[data-bs-theme="dark"] {
    --chart-cash: #0d9488;
    --chart-receivable: #3b82f6;
    --chart-payable: #ef4444;
    --chart-positive: #6366f1;
    --chart-negative: #ef4444;
    --chart-grid: #334155;
}

.asset-charts {
    margin: 0;
    border-top: 1px solid var(--bs-border-color);
}

.asset-chart-title {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
}

.asset-chart-sub {
    margin: .125rem 0 .75rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.asset-bars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.asset-bar {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .3rem .375rem;
    border-radius: .5rem;
    font-size: .8125rem;
    outline: none;
}

.asset-bar:hover,
.asset-bar:focus-visible {
    background: var(--bs-tertiary-bg);
}

.asset-bar:focus-visible {
    box-shadow: 0 0 0 .2rem var(--app-ring);
}

.asset-bar-label {
    overflow: hidden;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-bar-track {
    display: block;
    width: 100%;
    height: 16px;
    overflow: visible;
}

.asset-bar-fill {
    fill: var(--bar-color);
    transition: opacity .15s;
}

.asset-bar:hover .asset-bar-fill {
    opacity: .8;
}

.asset-bar-zero {
    stroke: var(--chart-grid);
    stroke-width: 1px;
}

.asset-bar-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.asset-bar-value small {
    margin-left: .25rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.asset-bar-cash { --bar-color: var(--chart-cash); }
.asset-bar-receivable { --bar-color: var(--chart-receivable); }
.asset-bar-payable { --bar-color: var(--chart-payable); }
.asset-bar-positive { --bar-color: var(--chart-positive); }
.asset-bar-negative { --bar-color: var(--chart-negative); }

/* ---- Ortak harcama grupları (Stitch "Ortak Harcama Grubu" / "Ortak Harcama Ekle") ---- */

/* Üye baş harfleri; renk sadece ayırt etmeye yardım eder, ad her zaman yanında ya da title'da. */
.member-avatar {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: var(--av-color);
    background: var(--av-bg);
}

.member-tone-0 { --av-bg: #e0e7ff; --av-color: #3730a3; }
.member-tone-1 { --av-bg: #dbeafe; --av-color: #1e40af; }
.member-tone-2 { --av-bg: #d1fae5; --av-color: #065f46; }
.member-tone-3 { --av-bg: #fef3c7; --av-color: #92400e; }
.member-tone-4 { --av-bg: #fce7f3; --av-color: #9d174d; }
.member-tone-5 { --av-bg: #e2e8f0; --av-color: #334155; }

[data-bs-theme="dark"] .member-tone-0 { --av-bg: rgba(99, 102, 241, .25); --av-color: #c7d2fe; }
[data-bs-theme="dark"] .member-tone-1 { --av-bg: rgba(59, 130, 246, .25); --av-color: #bfdbfe; }
[data-bs-theme="dark"] .member-tone-2 { --av-bg: rgba(16, 185, 129, .22); --av-color: #a7f3d0; }
[data-bs-theme="dark"] .member-tone-3 { --av-bg: rgba(245, 158, 11, .22); --av-color: #fde68a; }
[data-bs-theme="dark"] .member-tone-4 { --av-bg: rgba(236, 72, 153, .22); --av-color: #fbcfe8; }
[data-bs-theme="dark"] .member-tone-5 { --av-bg: rgba(148, 163, 184, .22); --av-color: #e2e8f0; }

.member-more {
    --av-bg: var(--bs-secondary-bg);
    --av-color: var(--bs-secondary-color);
}

.avatar-stack {
    display: flex;
    flex-wrap: wrap;
}

.avatar-stack .member-avatar {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
    margin-right: -.375rem;
    border: 2px solid var(--bs-body-bg);
    font-size: .6875rem;
}

.avatar-stack-sm .member-avatar {
    width: 1.5rem;
    height: 1.5rem;
    flex-basis: 1.5rem;
    margin-right: -.25rem;
    font-size: .5625rem;
}

.contact-avatar .bi {
    font-size: 1.5rem;
}

.app-page a.group-card {
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.app-page a.group-card:hover {
    border-color: var(--app-primary-soft-border);
    box-shadow: var(--app-shadow-lg);
}

.group-card.is-archived {
    opacity: .7;
}

.stat-tile .card-body {
    padding: 1.25rem 1.5rem;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.stat-value {
    margin: .25rem 0 .125rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.stat-note {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.stat-tile-accent {
    border-top: 4px solid var(--app-receivable);
}

.stat-tile-accent.is-pay {
    border-top-color: var(--app-payable);
}

.expense-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
    scroll-margin-top: 5rem;
}

.expense-row:target {
    background: var(--app-primary-soft);
}

[data-bs-theme="dark"] .expense-row:target {
    background: rgba(99, 102, 241, .12);
}

.expense-row.is-settlement {
    background: #f0fdf4;
}

[data-bs-theme="dark"] .expense-row.is-settlement {
    background: rgba(16, 185, 129, .07);
}

.date-box {
    display: inline-flex;
    flex: 0 0 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.date-box b {
    font-size: 1rem;
    line-height: 1.1;
    color: var(--bs-body-color);
}

@media (max-width: 575.98px) {
    .expense-row {
        flex-wrap: wrap;
    }

    .expense-row .date-box {
        display: none;
    }

    .expense-row > .flex-grow-1 {
        flex-basis: calc(100% - 7rem);
    }
}

.activity-feed {
    margin: 0;
    padding: 1rem 1.25rem;
    list-style: none;
}

.activity-feed li {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: 1rem;
    font-size: .875rem;
}

.activity-feed li:last-child {
    padding-bottom: 0;
}

/* Olaylar arası dikey çizgi */
.activity-feed li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: .25rem;
    left: .8125rem;
    width: 2px;
    background: var(--bs-border-color);
}

.activity-icon {
    display: inline-flex;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    border-radius: 50%;
    font-size: .8125rem;
    color: #fff;
    background: var(--act-bg, #64748b);
}

.activity-icon.tone-add { --act-bg: #059669; }
.activity-icon.tone-edit { --act-bg: #4f46e5; }
.activity-icon.tone-delete { --act-bg: #dc2626; }
.activity-icon.tone-mail { --act-bg: #2563eb; }

.payment-item {
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
}

.payment-item.is-mine {
    border-color: var(--app-primary-soft-border);
    background: var(--app-primary-soft);
}

[data-bs-theme="dark"] .payment-item.is-mine {
    background: rgba(99, 102, 241, .1);
}

.payer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
}

.payer-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    padding: .625rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.payer-option small {
    color: var(--bs-secondary-color);
}

.payer-option:hover {
    border-color: var(--app-primary-soft-border);
    background: var(--bs-tertiary-bg);
}

.btn-check:focus-visible + .payer-option,
.segmented-radio .btn-check:focus-visible + label {
    box-shadow: 0 0 0 .25rem var(--app-ring);
}

.btn-check:checked + .payer-option {
    border-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
    background: var(--app-primary-soft);
}

[data-bs-theme="dark"] .btn-check:checked + .payer-option {
    background: rgba(99, 102, 241, .12);
}

.payer-box {
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    background: var(--bs-tertiary-bg);
}

.payer-box[hidden] {
    display: none;
}

.segmented-radio label {
    padding: .3rem .875rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.segmented-radio label:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

.segmented-radio .btn-check:checked + label {
    color: #fff;
    background: var(--bs-primary);
}

.split-table {
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    overflow: hidden;
}

.split-table.is-invalid {
    border-color: var(--bs-danger);
}

.split-head,
.split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
}

.split-head {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.split-row + .split-row,
.split-head + .split-row {
    border-top: 1px solid var(--bs-border-color);
}

.split-equal-label {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* Eşitte kutucuk + "1/4 pay"; diğer yöntemlerde girdi kutusu. */
[data-method="equal"] .split-input,
[data-method]:not([data-method="equal"]) .split-check,
[data-method]:not([data-method="equal"]) .split-equal-label {
    display: none;
}

.split-row.is-out {
    color: var(--bs-secondary-color);
}

.split-row.is-out .member-avatar {
    opacity: .5;
}

@media (max-width: 575.98px) {
    .split-head,
    .split-row {
        grid-template-columns: minmax(0, 1fr) 5rem 5.5rem;
        gap: .5rem;
        padding: .5rem .625rem;
    }
}

.split-status {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    font-size: .875rem;
    background: var(--bs-tertiary-bg);
}

.split-status.is-ok {
    border-color: #a7f3d0;
    color: #065f46;
    background: #ecfdf5;
}

.split-status.is-off {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

[data-bs-theme="dark"] .split-status.is-ok {
    border-color: rgba(16, 185, 129, .35);
    color: #6ee7b7;
    background: rgba(16, 185, 129, .1);
}

[data-bs-theme="dark"] .split-status.is-off {
    border-color: rgba(239, 68, 68, .35);
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
}

.split-summary-payer {
    margin-bottom: .875rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .875rem;
    background: var(--bs-tertiary-bg);
}

.split-summary-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    font-size: .875rem;
}

.split-summary-item small {
    display: block;
    color: var(--bs-secondary-color);
}

@media (min-width: 992px) {
    .split-summary {
        position: sticky;
        top: 5.5rem;
    }
}

/* Kasalar: aynı bankadaki hesaplar ağaç görünümü */
.box-tree-head {
    background: var(--bs-tertiary-bg);
}

.card > .list-group-flush > .box-tree-child {
    position: relative;
    padding-left: 4rem;
}

.box-tree-child::before,
.box-tree-child::after {
    content: "";
    position: absolute;
    left: calc(2.375rem - 1px); /* banka logosunun ortası (1,25 padding + 2,25/2) */
    border-color: var(--bs-border-color);
    border-style: solid;
    pointer-events: none;
}

/* dikey çizgi: üstten alta (son hesapta ortada biter) */
.box-tree-child::before {
    top: 0;
    bottom: 0;
    border-width: 0 0 0 2px;
}

.box-tree-child.is-last::before {
    bottom: 50%;
}

/* yatay kol */
.box-tree-child::after {
    top: 50%;
    width: 1.25rem;
    border-width: 2px 0 0;
}

/* Rehberli tur (app.js) */
.tour {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.tour-spot {
    position: fixed;
    border-radius: .75rem;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .62);
    outline: 2px solid rgba(255, 255, 255, .85);
    transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
    pointer-events: none;
}

.tour.is-center {
    background: rgba(15, 23, 42, .62);
}

.tour.is-center .tour-spot {
    display: none;
}

.tour-card {
    position: fixed;
    width: min(22rem, calc(100vw - 1.5rem));
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .3);
    transition: left .25s ease, top .25s ease;
}

.tour.is-center .tour-card {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.tour-step {
    margin-bottom: .25rem;
    color: var(--bs-primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.tour-title {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.tour-text {
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-size: .9375rem;
}

.tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tour-skip {
    padding-left: 0;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.tour-nav {
    display: flex;
    gap: .375rem;
}

@media (prefers-reduced-motion: reduce) {
    .tour-spot,
    .tour-card {
        transition: none;
    }
}

/* Kullanım kılavuzu (/help) */
.help-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.help-hero p {
    max-width: 44rem;
}

.help-toc {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.help-toc a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: .625rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.help-toc a:hover,
.help-toc a:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.help-toc-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.help-toc-mobile a {
    text-decoration: none;
}

.help-section {
    margin-bottom: 3rem;
    scroll-margin-top: 5.5rem; /* yapışkan üst çubuğun altında kalmasın */
}

.help-section h2 {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 1.375rem;
    font-weight: 700;
}

.help-section h2 .bi {
    color: var(--bs-primary);
}

.help-section h3 {
    margin: 1.75rem 0 .75rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.help-body {
    max-width: 52rem;
    line-height: 1.65;
}

.help-figure {
    margin: 1.25rem 0 1.5rem;
}

.help-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08);
}

.help-figure figcaption {
    margin-top: .5rem;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    text-align: center;
}

.help-steps,
.help-list {
    padding-left: 1.25rem;
}

.help-steps > li,
.help-list > li {
    margin-bottom: .5rem;
}

.help-steps ul {
    margin-top: .375rem;
}

.help-tip {
    display: flex;
    gap: .75rem;
    margin: 1.25rem 0;
    padding: .875rem 1rem;
    border: 1px solid rgba(217, 119, 6, .3);
    border-radius: .75rem;
    background: rgba(245, 158, 11, .08);
}

.help-tip > .bi {
    color: #d97706;
    font-size: 1.125rem;
}

.help-table {
    margin: 1rem 0 1.25rem;
}

.help-table th {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 600;
}

.help-figure-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    align-items: start;
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .help-figure-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-figure-phone {
        max-width: 14rem;
        margin-inline: auto;
    }
}

/* Ortak harcama: kalanı otomatik paylaşan kutu (elle girilenden ayırt edilsin) */
.split-input.is-auto {
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Cari hareket: her ay tekrarla (form) ve carideki süren planlar */
.repeat-box {
    padding: .75rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.repeat-box.is-on {
    border-color: var(--app-primary-soft-border);
    background: var(--app-primary-soft);
}

[data-bs-theme="dark"] .repeat-box.is-on {
    background: rgba(99, 102, 241, .1);
}

.repeat-box [hidden] {
    display: none !important;
}

.repeat-plan {
    padding: .625rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
}

/* Profil: web push paneli */
.push-state {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.push-state-success {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.push-state-warning {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.push-state-danger {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.push-panel [hidden] {
    display: none !important;
}

/* ---- Raporlar (/reports): dönemsel çubuk/çizgi grafikler (app.js [data-report-chart]) ---- */
.report-range {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.report-range-text {
    min-width: 0;
    padding: 0 .25rem;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.report-stat-value {
    font-size: 1.375rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .report-stat-value {
        font-size: 1.0625rem;
    }
}

.report-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.report-legend strong {
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

.report-legend small {
    color: var(--bs-secondary-color);
}

.report-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .375rem;
    vertical-align: -.05em;
    border-radius: 3px;
    background: var(--tone);
}

.report-swatch.is-line {
    height: 3px;
    vertical-align: .2em;
    border-radius: 2px;
}

.tone-receivable { --tone: var(--chart-receivable); }
.tone-payable { --tone: var(--chart-payable); }

.report-chart {
    position: relative;
    min-height: 200px;
}

.report-svg {
    display: block;
    overflow: visible;
    touch-action: pan-y;
}

.report-grid line {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

.report-grid line.is-base {
    stroke: var(--bs-border-color);
}

.report-grid text {
    font-size: 11px;
    fill: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.report-hover {
    fill: var(--bs-tertiary-bg);
}

.report-bars path {
    fill: var(--tone);
}

.report-line-path {
    fill: none;
    stroke: var(--tone);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.report-dot {
    fill: var(--tone);
    stroke: var(--bs-card-bg, var(--bs-body-bg));
    stroke-width: 2;
}

.report-hit {
    fill: transparent;
    cursor: crosshair;
}

.report-tip {
    position: absolute;
    z-index: 2;
    min-width: 11rem;
    padding: .5rem .625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: var(--app-shadow-lg);
    font-size: .8125rem;
    pointer-events: none;
}

.report-tip[hidden] {
    display: none;
}

.report-tip-title {
    margin-bottom: .25rem;
    font-weight: 600;
}

.report-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.report-tip-row strong {
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

.report-table td,
.report-table th {
    white-space: nowrap;
}

/* Tekrarlayan hareket rozetindeki "3/12" sayacı */
.chip-repeat .chip-count {
    padding: 0 .3rem;
    border-radius: .25rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

/* Düzensiz tekrar: tarih + tutar satırları (form ve plan düzenleme) */
.schedule-head,
.schedule-row,
.schedule-done li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2rem;
    align-items: center;
    gap: .375rem;
}

.schedule-head {
    margin-bottom: .25rem;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.schedule-no {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.schedule-remove {
    color: var(--bs-secondary-color);
    padding: .25rem;
}

.schedule-remove:hover {
    color: var(--bs-danger);
}

.schedule-done {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .875rem;
}

.schedule-done li {
    padding: .25rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

/* ---------- Envanter: stok kartları ve alış/satış belgeleri ---------- */
.app-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    white-space: nowrap;
}

.app-brand-text small {
    font-size: .6em;
    font-weight: 500;
    letter-spacing: 0;
    opacity: .7;
}

/* Kartela renk görseli (aydinkilinc.com) ve kategori ikonu: listede aynı boyda kare. */
.kartela-thumb,
.product-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: .6rem;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
}

.product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--bs-primary);
    background: var(--app-primary-soft);
    border-color: var(--app-primary-soft-border);
}

.product-icon-sm,
td .kartela-thumb {
    width: 32px;
    height: 32px;
    font-size: .95rem;
}

.product-hero-img {
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--app-primary-soft-border);
}

.contact-avatar .bi {
    font-size: 1.5rem;
}

/* Belge satırları: üstte ürün (tam genişlik), altta miktar, fiyat, KDV, tutar ve sil. */
.doc-line {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 5.5rem minmax(0, 1fr) 2rem;
    gap: .5rem;
    align-items: start;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.doc-line[hidden] {
    display: none;
}

.doc-line-product {
    grid-column: 1 / -1;
}

.doc-line-total {
    padding-top: .3rem;
    white-space: nowrap;
}

.doc-line-remove {
    margin-top: .15rem;
}

@media (max-width: 575.98px) {
    /* ürün | miktar, fiyat | KDV, tutar, sil */
    .doc-line {
        grid-template-columns: 1fr 1fr 2rem;
    }

    .doc-line-price {
        grid-column: 2 / -1;
    }

    .doc-line-total {
        align-self: end;
        padding-bottom: .35rem;
    }

    .doc-line-remove {
        justify-self: end;
        align-self: end;
        margin-bottom: .2rem;
    }
}

.doc-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    margin: 0;
}

.doc-totals dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .doc-summary {
        position: sticky;
        top: 5.5rem;
    }
}