/* Money keeping places: page, the three dialogs and the history page. No coloured edge lines anywhere. */

.pl-page, .pl-history, .pl-modal {
    --pl-indigo: #4f4a8a;
    --pl-indigo2: #7b76c4;
    --pl-green: #1f7a4d;
    --pl-green2: #3fae7a;
    --pl-red: #c4553a;
    --pl-red2: #e5896f;
    --pl-navy: #2f5077;
    --pl-navy2: #5d86b6;
    --pl-violet: #6d57c9;
    --pl-teal: #2f7f7a;
    --pl-line: #e8dcc0;
    --pl-ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="dark"] .pl-page,
html[data-theme="dark"] .pl-history,
html[data-theme="dark"] .pl-modal {
    --pl-indigo: #b3aef0;
    --pl-indigo2: #6f69b0;
    --pl-green: #5fd391;
    --pl-green2: #2f9a64;
    --pl-red: #f09479;
    --pl-red2: #c4553a;
    --pl-navy: #8fb4e3;
    --pl-navy2: #4a73a6;
    --pl-violet: #a898f0;
    --pl-teal: #6fd0c8;
    --pl-line: #4a3f26;
}

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

.pl-page, .pl-history { display: grid; gap: 14px; min-width: 0; }

.pl-ico {
    --c: var(--pl-green);
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 68%, #fff), var(--c));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent);
}

.pl-ico.is-indigo { --c: var(--pl-indigo); }
.pl-ico.is-navy { --c: var(--pl-navy); }
.pl-ico.is-green { --c: var(--pl-green); }

/* ---------- header and buttons ---------- */
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pl-head-text { flex: 1; min-width: 200px; }
.pl-head-text h2 { margin: 0; font-size: 20px; }
.pl-head-text p { margin: 0; color: var(--text2); font-size: 12.5px; }

.pl-actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; order: 3; }
@media (min-width: 760px) { .pl-actions { width: auto; order: 0; } }

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

.pl-btn i, .pl-fbtn i { font-size: 18px; color: #fff; display: inline-block; }
.pl-btn span { overflow: hidden; text-overflow: ellipsis; }
.pl-btn:hover, .pl-fbtn:hover { transform: translateY(-3px); filter: brightness(1.07); }
.pl-btn:active, .pl-fbtn:active { transform: scale(.96); }
.pl-btn.is-add { --c: var(--pl-indigo); --c2: var(--pl-indigo2); }
.pl-btn.is-out { --c: var(--pl-red); --c2: var(--pl-red2); }
.pl-btn.is-hist { --c: var(--pl-teal); --c2: var(--pl-green2); }
.pl-btn.is-print { --c: var(--pl-navy); --c2: var(--pl-navy2); }
.pl-btn.is-excel { --c: #3c9a6a; --c2: #79cfa1; }

.pl-btn.is-ghost, .pl-fbtn.is-ghost {
    flex: none;
    color: var(--text);
    background: color-mix(in srgb, var(--panel, #fff) 70%, transparent);
    border: 1px solid var(--pl-line);
    box-shadow: none;
}

.pl-btn.is-ghost i, .pl-fbtn.is-ghost i { color: var(--text); }
.pl-fbtn.is-main { --c: var(--tone, var(--pl-indigo)); --c2: var(--tone2, var(--pl-indigo2)); }

/* ---------- glass cards (all-round border, glow, shadow; never a side line) ---------- */
.pl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .pl-stats { grid-template-columns: 1fr; } }

.pl-stat, .pl-place, .pl-mv, .pl-card {--c: var(--pl-green);
    border-radius: 20px;
    transition: transform .3s var(--pl-ease), box-shadow .3s;
}

.is-green { --c: var(--pl-green); }
.is-navy { --c: var(--pl-navy); }
.is-violet { --c: var(--pl-violet); }
.is-red { --c: var(--pl-red); }
.is-indigo { --c: var(--pl-indigo); }

.pl-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; animation: pl-up .5s var(--pl-ease) both; }
.pl-stat:hover, .pl-place:hover { transform: translateY(-3px); }
.pl-stat small { display: block; color: var(--text2); font-size: 12px; }
.pl-stat b { font-size: 20px; color: var(--c); }
.pl-stat .pl-ico { --c: inherit; }

.pl-list { display: grid; gap: 12px; }

.pl-place {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    animation: pl-up .5s var(--pl-ease) both;
}

.pl-place-body { min-width: 0; }
.pl-place h4 { margin: 0; font-size: 16px; }
.pl-place small { display: block; color: var(--text2); font-size: 12px; line-height: 1.5; }
.pl-bal { text-align: center; }
.pl-bal b { display: block; font-size: 19px; color: var(--c); }
.pl-bal small { display: block; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-acts .pl-btn { flex: none; padding: 8px 14px; font-size: 13px; }

@media (max-width: 820px) {
    .pl-place { grid-template-columns: auto minmax(0, 1fr); }
    .pl-bal, .pl-acts { grid-column: 1 / -1; }
}

/* ---------- history page ---------- */
.pl-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pl-crumb .pl-actions { margin-inline-start: auto; width: auto; order: 0; }
.pl-sec { display: flex; align-items: center; gap: 10px; }
.pl-sec h3 { margin: 0; font-size: 16px; }
.pl-sec .pl-ico { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
.pl-sec em { font-style: normal; padding: 0 12px; border-radius: 99px; background: color-mix(in srgb, var(--pl-navy) 14%, transparent); color: var(--pl-navy); }
.pl-rows { display: grid; gap: 10px; }

.pl-mv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    animation: pl-up .45s var(--pl-ease) both;
}

.pl-mv .pl-ico { --c: inherit; }
.pl-mv-body { min-width: 0; }
.pl-mv-body b { display: block; font-size: 15px; }
.pl-mv-body small { display: block; color: var(--text2); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.pl-desc { margin-top: 2px; }
.pl-amt { font-weight: 700; font-size: 17px; color: var(--c); white-space: nowrap; }

.pl-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 3px 12px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--c) 30%, var(--pl-line));
    background: color-mix(in srgb, var(--c) 8%, transparent);
    color: var(--c);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* ---------- dialogs ---------- */
.overlay .modal.pl-modal {
    --tone: var(--pl-indigo);
    --tone2: var(--pl-indigo2);
    width: min(900px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 14px;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--pl-line));
    background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: pl-up .45s var(--pl-ease);
}

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

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

.pl-mhead .pl-ico { --c: var(--tone); width: 42px; height: 42px; }
.pl-mhead h3 { margin: 0; font-size: 18px; }
.pl-mhead small { color: var(--text2); }

.pl-x {
    margin-inline-start: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pl-line);
    background: var(--panel, #fff);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}

.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.pl-side, .pl-form { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pl-form .field { margin: 0; }
.pl-form .field > label { display: flex; align-items: center; gap: 6px; }
.pl-form .field > label i { color: var(--tone); }
.pl-form .pl-big { min-height: 58px; font-size: 26px; font-weight: 700; text-align: center; }

.pl-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pl-card.is-after { border-style: dashed; }
.pl-card small { display: block; color: var(--text2); font-size: 12px; }
.pl-card b { font-size: 21px; color: var(--c); }
.pl-card .pl-ico { --c: inherit; width: 42px; height: 42px; }

.pl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pl-seg button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--pl-line));
    background: color-mix(in srgb, var(--panel, #fff) 60%, transparent);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform .2s var(--pl-ease);
}

.pl-seg button:hover { transform: translateY(-2px); }

.pl-seg button.is-on {
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    background: linear-gradient(135deg, var(--pl-indigo2), var(--pl-indigo));
}

.pl-seg button.is-on i { color: #fff; }

.pl-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 12px; }
.pl-foot .pl-fbtn { width: 100%; }

@media (max-width: 820px) {
    .pl-cols, .pl-foot { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-stat, .pl-place, .pl-mv, .overlay .modal.pl-modal { animation: none; }
}

/* on wide screens a button is as wide as its text, never cut */
@media (min-width: 760px) {
    .pl-actions .pl-btn { flex: 0 0 auto; }
}