/* Till sections: every tab has its own colour family, taken from its icon in the tab bar.
   The section is one glass container (corner glow in the main tone, a second glow in the neighbour tone);
   the cards inside use the same three tones. Only money direction is green / red.
   This is the single place that paints the glass; the other till files only lay things out. */

#tillContent {
    --sec-green: #1f7a4d;
    --sec-red: #c4553a;
    --sec-ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="dark"] #tillContent {
    --sec-green: #5fd391;
    --sec-red: #f09479;
}

/* palettes: main tone, neighbour tone, light tone */
#till-panel-overview  { --sec-t: #38618c; --sec-n: #2f8aa6; --sec-l: #7aa2cc; }
#till-panel-capital   { --sec-t: #8b4f71; --sec-n: #b0507a; --sec-l: #c48aa8; }
#till-panel-journal   { --sec-t: #39786b; --sec-n: #3f9a5a; --sec-l: #79b5a8; }
#till-panel-owner     { --sec-t: #a45d32; --sec-n: #c58a1b; --sec-l: #cf9a74; }
#till-panel-locations { --sec-t: #665a96; --sec-n: #4f6fe8; --sec-l: #9a90c4; }

html[data-theme="dark"] #till-panel-overview  { --sec-t: #7ea9d6; --sec-n: #5bb4d0; --sec-l: #4a73a6; }
html[data-theme="dark"] #till-panel-capital   { --sec-t: #d38fb2; --sec-n: #e287ac; --sec-l: #9b5f80; }
html[data-theme="dark"] #till-panel-journal   { --sec-t: #6fc4b3; --sec-n: #78d495; --sec-l: #3f8a7b; }
html[data-theme="dark"] #till-panel-owner     { --sec-t: #e0a276; --sec-n: #f0b64a; --sec-l: #a8704f; }
html[data-theme="dark"] #till-panel-locations { --sec-t: #b3aef0; --sec-n: #8fa6ff; --sec-l: #6f69b0; }

/* ---------- the container ---------- */
#tillContent .till-section-panel {
    --c: var(--sec-t);
    position: relative;
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--sec-t) 28%, rgba(232, 220, 192, .8));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec-t) 24%, transparent), transparent 52%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sec-n) 17%, transparent), transparent 56%),
        linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(246, 249, 255, .28));
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    backdrop-filter: blur(10px) saturate(1.5);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--sec-t) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, .92);
}

#tillContent .till-section-panel[hidden] { display: none; }

html[data-theme="dark"] #tillContent .till-section-panel {
    border-color: color-mix(in srgb, var(--sec-t) 30%, #4a3f26);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec-t) 28%, transparent), transparent 52%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sec-n) 20%, transparent), transparent 56%),
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* a card that only frames the whole section is the section itself: no second frame, no white panel */
#mainContent #tillContent .till-section-panel .till-gold-card,
#mainContent #tillContent .till-section-panel .till-pending-handovers-card,
#mainContent #tillContent .till-section-panel .till-journal-card,
#mainContent #tillContent .till-section-panel .ow-page,
#mainContent #tillContent .till-section-panel .pl-page,
#mainContent #tillContent .till-section-panel .cap-card {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#tillContent .till-gold-card,
#tillContent .till-pending-handovers-card { display: grid; gap: 14px; }

/* ---------- card tones ---------- */
#tillContent .till-stat.is-start,
#tillContent .till2-flow-in,
#tillContent .cap-stat:nth-child(1),
#tillContent .cap-acc,
#tillContent .cap-mv,
#tillContent .till-journal-sum:nth-child(1),
#tillContent .till-journal-sum:nth-child(4),
#tillContent .tj-row,
#tillContent .ow-stat:nth-child(1),
#tillContent .ow-row,
#tillContent .pl-stat:nth-child(1),
#tillContent .pl-place,
#tillContent .pl-mv { --c: var(--sec-t); }

#tillContent .till-stat.is-end,
#tillContent .till2-flow-out,
#tillContent .till-pending-tile,
#tillContent .cap-stat:nth-child(2),
#tillContent .cap-acc:nth-child(even),
#tillContent .till-journal-sum:nth-child(2),
#tillContent .ow-stat:nth-child(2),
#tillContent .pl-stat:nth-child(2),
#tillContent .pl-place:nth-child(even) { --c: var(--sec-n); }

#tillContent .till-stat.is-wait,
#tillContent .cap-stat:nth-child(3),
#tillContent .till-journal-sum:nth-child(3),
#tillContent .ow-stat:nth-child(3),
#tillContent .pl-stat:nth-child(3) { --c: var(--sec-l); }

#tillContent .ow-row.is-unassigned { --c: var(--sec-red); }

/* ---------- the card recipe (all-round thin border, corner glow, soft shadow; never a side line) ---------- */
#tillContent .till-stat,
#tillContent .till-pending-tile,
#tillContent .till2-flow-card,
#tillContent .cap-stat,
#tillContent .cap-acc,
#tillContent .cap-mv,
#tillContent .till-journal-sum,
#tillContent .tj-row,
#tillContent .ow-stat,
#tillContent .ow-row,
#tillContent .pl-stat,
#tillContent .pl-place,
#tillContent .pl-mv {
    border: 1px solid color-mix(in srgb, var(--c) 24%, rgba(232, 220, 192, .8));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 50%),
        linear-gradient(145deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 11%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .3s var(--sec-ease), box-shadow .3s;
}

html[data-theme="dark"] #tillContent .till-stat,
html[data-theme="dark"] #tillContent .till-pending-tile,
html[data-theme="dark"] #tillContent .till2-flow-card,
html[data-theme="dark"] #tillContent .cap-stat,
html[data-theme="dark"] #tillContent .cap-acc,
html[data-theme="dark"] #tillContent .cap-mv,
html[data-theme="dark"] #tillContent .till-journal-sum,
html[data-theme="dark"] #tillContent .tj-row,
html[data-theme="dark"] #tillContent .ow-stat,
html[data-theme="dark"] #tillContent .ow-row,
html[data-theme="dark"] #tillContent .pl-stat,
html[data-theme="dark"] #tillContent .pl-place,
html[data-theme="dark"] #tillContent .pl-mv {
    border-color: color-mix(in srgb, var(--c) 30%, #4a3f26);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 50%),
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* small cards lift; the big ones stay put */
#tillContent .till-stat:hover,
#tillContent .till-pending-tile:hover,
#tillContent .till2-flow-card:hover,
#tillContent .cap-stat:hover,
#tillContent .cap-acc:hover,
#tillContent .till-journal-sum:hover,
#tillContent .tj-row:hover,
#tillContent .ow-stat:hover,
#tillContent .ow-row:hover,
#tillContent .pl-stat:hover,
#tillContent .pl-place:hover { transform: translateY(-3px); }

/* the icon chips take the card tone */
#tillContent .till-stat .till-stat-icon,
#tillContent .till2-flow-card .till2-sec-icon,
#tillContent .cap-stat .cap-ico,
#tillContent .cap-acc .cap-ico,
#tillContent .cap-mv .cap-ico,
#tillContent .till-journal-sum .till-journal-sum-ico,
#tillContent .tj-row .tj-ico,
#tillContent .ow-stat .ow-stat-ico,
#tillContent .ow-row .ow-ico,
#tillContent .pl-stat .pl-ico,
#tillContent .pl-place .pl-ico,
#tillContent .pl-mv .pl-ico {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent);
}

/* values take the card tone; only money direction is green or red */
#tillContent .till-stat .till-stat-value,
#tillContent .cap-stat b,
#tillContent .till-journal-sum b,
#tillContent .ow-stat b,
#tillContent .pl-stat b,
#tillContent .pl-bal b,
#tillContent .cap-left b { color: var(--c); }

#tillContent .tj-row.is-in .tj-box.is-mid span,
#tillContent .till2-flow-in .till2-sec-hint,
#tillContent .till2-flow-in .till2-sec-hint b,
#tillContent .cap-mv .cap-mv-amt,
#tillContent .pl-mv.is-in .pl-amt { color: var(--sec-green); }

#tillContent .tj-row.is-out .tj-box.is-mid span,
#tillContent .till2-flow-out .till2-sec-hint,
#tillContent .till2-flow-out .till2-sec-hint b,
#tillContent .cap-mv.is-out .cap-mv-amt,
#tillContent .pl-mv.is-out .pl-amt { color: var(--sec-red); }

#tillContent .tj-row .tj-box.is-mid {
    background: color-mix(in srgb, var(--c) 14%, transparent);
    border-color: color-mix(in srgb, var(--c) 32%, transparent);
}

/* breathing room between the summary cards and the list below them */
#tillContent .till-journal-sums,
#tillContent .cap-stats,
#tillContent .ow-stats,
#tillContent .pl-stats { margin-bottom: 14px; }

#tillContent .till-journal-records { margin-top: 6px; }

/* the buttons of a section use the section tones */
#tillContent .till-act.is-count { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .till-act.is-close { --c: var(--sec-n); --c2: var(--sec-l); }
#tillContent .till-act.is-transfer { --c: var(--sec-t); --c2: var(--sec-l); }
#tillContent .till-act.is-print { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .till-jbtn.is-print,
#tillContent .till-journal-more { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .cap-btn.is-print { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .cap-btn.is-in { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .ow-btn.is-main,
#tillContent .ow-btn.is-print { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .pl-btn.is-add,
#tillContent .pl-btn.is-print,
#tillContent .pl-btn.is-hist { --c: var(--sec-t); --c2: var(--sec-n); }
#tillContent .ow-chip.active,
#tillContent .till-jchip.active { background: linear-gradient(135deg, var(--sec-n), var(--sec-t)); }

/* no coloured line on one edge of a card */
#tillContent .work-record-row,
#tillContent .cash-history-entry {
    border-inline-start-width: 1px !important;
    border-inline-start-style: solid !important;
    border-inline-start-color: color-mix(in srgb, var(--work-tone, var(--border)) 26%, var(--border)) !important;
}

@media (prefers-reduced-motion: reduce) {
    #tillContent .till-stat:hover,
    #tillContent .till-pending-tile:hover,
    #tillContent .till2-flow-card:hover,
    #tillContent .cap-stat:hover,
    #tillContent .cap-acc:hover,
    #tillContent .tj-row:hover,
    #tillContent .ow-row:hover,
    #tillContent .pl-place:hover { transform: none; }
}

/* icon chips that carried their own old colour follow the section tone */
#tillContent .cap-acc .cap-ico,
#tillContent .cap-head .cap-ico,
#tillContent .cap-sec .cap-ico { --c: inherit; }
#tillContent .cap-head .cap-ico { --c: var(--sec-t); }
#tillContent .cap-sec .cap-ico { --c: var(--sec-n); }
#tillContent .ow-head-ico,
#tillContent .till-journal-ico,
#tillContent .pl-head > .pl-ico {
    --c: var(--sec-t);
    background: linear-gradient(145deg, color-mix(in srgb, var(--sec-t) 70%, #fff), var(--sec-t));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--sec-t) 30%, transparent);
}