/* Capital accounts tab, its wide dialogs and its printed sheet. */

.cap-page,
.cap-modal {
    --cp-line: #e3d6b8;
    --cp-panel: #ffffff;
    --cp-panel2: #fffdf8;
    --cp-ink: #2a2433;
    --cp-mut: #7a7160;
    --cp-gold: #c58a1b;
    --cp-gold2: #e5b04a;
    --cp-goldsoft: #fff8e8;
    --cp-green: #1f7a4d;
    --cp-green2: #3fae7a;
    --cp-red: #c4553a;
    --cp-red2: #e5896f;
    --cp-navy: #2f5077;
    --cp-navy2: #5d86b6;
    --cp-ease: cubic-bezier(.22, 1, .36, 1);
    color: var(--cp-ink);
}

html[data-theme="dark"] .cap-page,
html[data-theme="dark"] .cap-modal {
    --cp-line: #4a3f26;
    --cp-panel: #211c12;
    --cp-panel2: #2a2316;
    --cp-ink: #f3eddc;
    --cp-mut: #b0a58a;
    --cp-gold: #f0b64a;
    --cp-gold2: #c58a1b;
    --cp-goldsoft: #2f2813;
    --cp-green: #5fd391;
    --cp-green2: #2f9a64;
    --cp-red: #f09479;
    --cp-red2: #c4553a;
    --cp-navy: #8fb4e3;
    --cp-navy2: #4a73a6;
}

@keyframes cap-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes cap-fill {
    from { width: 0; }
}

@keyframes cap-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ---------- shared bits ---------- */
.cap-ico {
    --c: var(--cp-navy);
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 32%, transparent);
}

.cap-ico.is-gold { --c: var(--cp-gold); }
.cap-ico.is-green { --c: var(--cp-green); }
.cap-ico.is-red { --c: var(--cp-red); }
.cap-ico.is-navy { --c: var(--cp-navy); }

.cap-btn {
    --c: var(--cp-navy);
    --c2: var(--cp-navy2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--c2), var(--c));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 30%, transparent);
    transition: transform .25s var(--cp-ease), filter .25s;
}

.cap-btn i {
    flex: none;
    display: inline-block;
    font-size: 18px;
    color: #fff;
}

.cap-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cap-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.07);
}

.cap-btn:active { transform: scale(.96); }

.cap-btn .short { display: none; }

.cap-btn.is-in { --c: var(--cp-green); --c2: var(--cp-green2); animation: cap-ring 2.4s ease-out 3; }
.cap-btn.is-print { --c: var(--cp-navy); --c2: var(--cp-navy2); }

.cap-btn.is-excel { --c: #3c9a6a; --c2: #79cfa1; }

.cap-btn.is-out { --c: var(--cp-red); --c2: var(--cp-red2); }

@keyframes cap-ring {
    0% { box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
    70%, 100% { box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 30%, transparent), 0 0 0 12px transparent; }
}

@keyframes cap-spin {
    0%, 70% { transform: rotate(0); }
    100% { transform: rotate(180deg); }
}

@keyframes cap-paper {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes cap-sheet {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

@keyframes cap-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

@keyframes cap-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.cap-btn.is-ghost {
    color: var(--cp-ink);
    background: var(--cp-panel2);
    border: 1px solid var(--cp-line);
    box-shadow: none;
    animation: none;
}

.cap-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    order: 3;
}

.cap-actions .cap-btn {
    flex: 1 1 0;
    font-size: clamp(11.5px, 3.3vw, 14px);
}

@media (min-width: 760px) {
    .cap-actions { width: auto; order: 0; }
    .cap-actions .cap-btn { flex: none; }
}

@media (max-width: 520px) {
    .cap-actions { gap: 6px; }
    .cap-actions .cap-btn { padding: 10px 6px; gap: 4px; font-size: 12px; }
    .cap-actions .cap-btn i { font-size: 16px; }
    .cap-actions .cap-btn .long { display: none; }
    .cap-actions .cap-btn .short { display: inline; }
}

/* ---------- page ---------- */
.cap-page {
    display: grid;
    gap: 14px;
}

.cap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.cap-head-text {
    flex: 1;
    min-width: 220px;
}

.cap-head-text h2 {
    margin: 0;
    font-size: 20px;
}

.cap-head-text p {
    margin: 0;
    color: var(--cp-mut);
    font-size: 12.5px;
}

.cap-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cap-stat {
    --c: var(--cp-navy);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    animation: cap-up .6s var(--cp-ease) both;
    transition: transform .3s var(--cp-ease);
}

.cap-stat:hover { transform: translateY(-3px); }
.cap-stat:nth-child(2) { animation-delay: .08s; }
.cap-stat:nth-child(3) { animation-delay: .16s; }
.cap-stat .cap-ico { --c: inherit; width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
.cap-stat small { display: block; color: var(--cp-mut); font-size: 12px; }
.cap-stat b { color: var(--c); font-size: 20px; }

.cap-card {
    padding: 14px;
    border-radius: 22px;
    display: grid;
    gap: 10px;
}

.cap-acc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    animation: cap-up .6s var(--cp-ease) both;
    transition: transform .3s var(--cp-ease), border-color .3s;
}

.cap-acc:hover { transform: translateY(-2px); border-color: var(--cp-gold); }
.cap-acc.is-done {
    ;
}
.cap-acc h4 { margin: 0; font-size: 16px; }
.cap-acc-meta { color: var(--cp-mut); font-size: 12.5px; }

.cap-bar {
    height: 8px;
    margin-top: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: color-mix(in srgb, var(--cp-gold) 16%, var(--cp-panel));
}

.cap-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--cp-green2), var(--cp-green));
    animation: cap-fill 1.2s var(--cp-ease);
}

.cap-acc-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cap-left {
    min-width: 120px;
    text-align: center;
}

.cap-left small { display: block; color: var(--cp-mut); }
.cap-left b { font-size: 19px; color: var(--cp-gold); }
.cap-acc.is-done .cap-left b { color: var(--cp-green); font-size: 15px; }

.cap-sec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.cap-sec h3 { margin: 0; font-size: 16px; }
.cap-sec .cap-ico { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }

.cap-sec em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: normal;
    font-size: 11.5px;
    padding: 1px 10px;
    border-radius: 99px;
    color: var(--cp-gold);
    background: color-mix(in srgb, var(--cp-gold) 14%, var(--cp-panel));
}

.cap-moves {
    display: grid;
    gap: 10px;
}

.cap-mv {
    --c: var(--cp-green);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 18px;
    cursor: pointer;
    animation: cap-up .5s var(--cp-ease) both;
    transition: transform .25s var(--cp-ease), box-shadow .25s;
}

.cap-mv:hover { transform: translateX(-4px); box-shadow: 0 12px 28px rgba(60, 40, 10, .1); }
.cap-mv .cap-ico { width: 40px; height: 40px; font-size: 20px; border-radius: 13px; }
.cap-mv-body b { display: block; font-size: 14.5px; }
.cap-mv-body small { color: var(--cp-mut); }
.cap-mv-amt { font-weight: 700; color: var(--c); }

.cap-mv-more {
    grid-column: 1 / -1;
    display: none;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 8px;
    border-top: 1px dashed var(--cp-line);
    font-size: 13px;
}

.cap-mv.is-open .cap-mv-more { display: flex; animation: cap-up .35s var(--cp-ease); }
.cap-mv-more div { display: flex; align-items: center; gap: 8px; }
.cap-mv-more span { color: var(--cp-mut); }

.cap-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    border: 1px solid var(--cp-line);
    background: var(--cp-panel2);
    color: var(--cp-navy);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.cap-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 16px;
    border-radius: 22px;
    border: 1px dashed var(--cp-line);
    color: var(--cp-mut);
}

.cap-empty i { font-size: 44px; color: var(--cp-gold); animation: cap-float 3.2s ease-in-out infinite; }

/* ---------- wide dialogs ---------- */
.cap-modal {
    --tone: var(--cp-green);
    --tone2: var(--cp-green2);
    width: min(900px, 95vw);
    max-width: 900px;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--cp-line));
    background: color-mix(in srgb, var(--cp-panel) 93%, transparent);
    backdrop-filter: blur(16px);
    animation: cap-up .5s var(--cp-ease);
}

.cap-modal.is-out { --tone: var(--cp-red); --tone2: var(--cp-red2); }

.cap-mhead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--cp-line));
    background: linear-gradient(120deg, color-mix(in srgb, var(--tone) 18%, var(--cp-panel)), var(--cp-panel));
}

.cap-mhead .cap-ico { --c: var(--tone); animation: cap-float 3.2s ease-in-out infinite; }
.cap-mhead h3 { margin: 0; font-size: 18px; }
.cap-mhead small { color: var(--cp-mut); }

.cap-x {
    margin-inline-start: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cp-line);
    background: var(--cp-panel2);
    color: var(--cp-ink);
    font-size: 18px;
    cursor: pointer;
}

.cap-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 16px;
    align-items: start;
}

.cap-side,
.cap-form {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.cap-sum {
    --c: var(--tone);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--c) 30%, var(--cp-line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 16%, var(--cp-panel)), var(--cp-panel));
}

.cap-sum .cap-ico { --c: inherit; grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 22px; }
.cap-sum.is-gold { --c: var(--cp-gold); }
.cap-sum.is-green { --c: var(--cp-green); }
.cap-sum.is-navy { --c: var(--cp-navy); }
.cap-sum > span:not(.cap-ico) { color: var(--cp-mut); font-size: 12px; }
.cap-sum b { color: var(--c); font-size: 22px; }
.cap-sum.is-after { border-style: dashed; }

.cap-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.cap-field > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cp-mut);
    font-size: 13px;
}

.cap-field > span i { color: var(--tone); }

.cap-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--cp-line);
    background: var(--cp-panel2);
    color: var(--cp-ink);
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.cap-input:focus {
    outline: 0;
    border-color: var(--tone);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent);
}

.cap-input:disabled { opacity: .6; }
.cap-input.is-big { min-height: 58px; font-size: 24px; font-weight: 700; text-align: center; }
textarea.cap-input { min-height: 88px; resize: vertical; }

.cap-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cap-quick button {
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--cp-line));
    background: color-mix(in srgb, var(--tone) 9%, var(--cp-panel));
    color: var(--tone);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: transform .2s;
}

.cap-quick button:hover { transform: translateY(-2px); }

.cap-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--cp-gold) 16%, var(--cp-panel));
    color: var(--cp-gold);
    font-size: 12.5px;
}

.cap-warn[hidden] { display: none; }

.cap-modal .till-form-error:empty { display: none; }
.cap-modal .till-form-error { margin: 10px 0 0; }

.cap-foot {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin-top: 16px;
}

.cap-btn.is-main { --c: var(--tone); --c2: var(--tone2); }

@media (max-width: 760px) {
    .cap-stats,
    .cap-cols,
    .cap-foot { grid-template-columns: 1fr; }
    .cap-acc { grid-template-columns: auto minmax(0, 1fr); }
    .cap-acc-side { grid-column: 1 / -1; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .cap-page *, .cap-modal, .cap-modal * { animation: none !important; }
}

/* ---------- chest-with-coins icon (replaces the old savings icon everywhere) ---------- */
.ti.ti-chest-coins::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12V9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Ccircle cx='8.6' cy='8.6' r='2.4' fill='black' fill-opacity='.35'/%3E%3Ccircle cx='12' cy='7.2' r='2.4' fill='black' fill-opacity='.35'/%3E%3Ccircle cx='15.4' cy='8.6' r='2.4' fill='black' fill-opacity='.35'/%3E%3Cpath d='M3.5 12h17v6a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z' fill='black' fill-opacity='.35'/%3E%3Crect x='10.3' y='14.2' width='3.4' height='3' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12V9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Ccircle cx='8.6' cy='8.6' r='2.4' fill='black' fill-opacity='.35'/%3E%3Ccircle cx='12' cy='7.2' r='2.4' fill='black' fill-opacity='.35'/%3E%3Ccircle cx='15.4' cy='8.6' r='2.4' fill='black' fill-opacity='.35'/%3E%3Cpath d='M3.5 12h17v6a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z' fill='black' fill-opacity='.35'/%3E%3Crect x='10.3' y='14.2' width='3.4' height='3' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ---------- printed sheet: four boxes, same thin-line look as the till report ---------- */
@media print {
    #reportPrintTemplate .cp-sheet .tr-sum {
        grid-template-columns: repeat(4, 1fr);
    }

    /* The currency note: in the "printed on" line, under the signatures, or as the last row of the sheet. */
    #reportPrintTemplate .afn-note {
        color: #5c7270;
        font-size: 7.5pt;
        line-height: 1.5;
    }

    #reportPrintTemplate .afn-closing {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8mm;
        break-inside: avoid;
    }

    #reportPrintTemplate .afn-closing .afn-note {
        text-align: end;
    }

    #reportPrintTemplate .finance-print-footer > .afn-note {
        grid-column: 1 / -1;
        margin-bottom: -5mm;
    }

    #reportPrintTemplate .er-sign > .afn-note {
        grid-column: 1 / -1;
        margin-top: -4mm;
    }

    #reportPrintTemplate .afn-note.afn-block {
        display: block;
        margin-top: 3mm;
        padding-top: 1.5mm;
        border-top: 0.5pt solid #d8d8d8;
        break-before: avoid;
        break-inside: avoid;
    }

    #reportPrintTemplate .sp-sheet.is-slip:has(.afn-note) {
        min-height: 262mm;
    }
}