/* Takings and bank reconciliation (/reports/takings). Builds on the ab- artboard classes; everything new is prefixed tk- so nothing else is touched.
   Colours and sizes come from the ck- tokens only. */

.tk { max-width: 1440px; }
.tk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ck-space-4); margin-bottom: var(--ck-space-4); }
.tk-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ck-primary-hover); }
.tk .tk-title { margin: 0.125rem 0 0.25rem; font-size: 1.75rem; font-weight: 600; line-height: 2.25rem; letter-spacing: normal; }

.tk-tabs { display: flex; flex-wrap: wrap; gap: var(--ck-space-1); margin-bottom: var(--ck-space-4); border-bottom: 1px solid var(--ck-border); }
.tk-tab { padding: 0.45rem var(--ck-space-3); border: 0; border-radius: var(--ck-radius-md) var(--ck-radius-md) 0 0; background: transparent; color: var(--ck-ink); font: inherit; font-weight: 500; cursor: pointer; }
.tk-tab:hover { background: var(--ck-primary-soft); }
.tk-tab.tk-active { background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 650; box-shadow: inset 0 -2px 0 var(--ck-primary); }
.tk-tab:focus-visible, .tk-link:focus-visible, .tk-check input:focus-visible, .tk-picklist input:focus-visible, .tk-radios input:focus-visible, .ab-switcher button:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }

.tk-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); }
.tk-fixed { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--ck-control-md); padding-bottom: 0.3rem; }
.tk-fixed-label { font-size: 0.75rem; color: var(--ck-slate); }
.tk-fixed-value { font-weight: 600; }

.tk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); }
.tk-tile { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--ck-space-3) var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-panel); }
.tk-import .tk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tk-value.tk-muted { color: var(--ck-slate); }
.tk-link { padding: 0; border: 0; background: none; color: var(--ck-primary-hover); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.tk-viewhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); margin: var(--ck-space-4) 0 var(--ck-space-2); }
.tk-viewhead h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: normal; }
.tk-viewhead .ab-switcher, .tk-viewhead .ab-btn { margin-left: auto; }
.tk-sub { margin: var(--ck-space-4) 0 var(--ck-space-2); font-size: 0.9375rem; font-weight: 600; letter-spacing: normal; }

.tk-gridwrap { overflow-x: auto; border-radius: var(--ck-radius-lg); }
.tk-grid.e-grid { border-color: var(--ck-border); border-radius: var(--ck-radius-lg); }
.tk-col-adjust { background: var(--ck-warning-soft); }
.tk-grid .report-row-total, .tk-grid .report-row-total .e-rowcell { font-weight: 700; background: var(--ck-canvas); }

.tk-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-3); margin-top: var(--ck-space-4); }
.tk-notes .ab-hint { grid-column: 1 / -1; margin: 0; }
.tk-notice-warm { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.tk-recon-note { margin-bottom: var(--ck-space-3); }

.tk-state { text-align: left; }
.tk-state h2 { font-size: 1rem; }
.tk-confirm { margin-bottom: var(--ck-space-3); }

.tk-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.tk-chip.tk-ok { background: var(--ck-success-soft); color: var(--ck-success-text); }
.tk-chip.tk-warn { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.tk-chip.tk-none { background: var(--ck-border); color: var(--ck-ink); }
.tk-chip.tk-bad { background: var(--ck-critical-soft); color: var(--ck-critical-text); }

.ab-btn.tk-small { min-height: var(--ck-control-sm); padding: 0 var(--ck-space-2); font-size: 0.8125rem; margin-right: var(--ck-space-1); }

.tk-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-4); }
.tk-accounts { grid-template-columns: 1.35fr .65fr; align-items: start; }
.tk-accounts-stack { display: grid; gap: var(--ck-space-4); }
.tk-history .tk-sub { margin: 0; }
.tk-pager { margin-top: var(--ck-space-2); }
.tk-addrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); }

/* Dialogs */
.tk-dialog { max-width: 96vw; }
.tk-picklist { margin: 0; padding: 0; list-style: none; max-height: 16rem; overflow-y: auto; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); }
.tk-picklist li { display: flex; align-items: center; gap: var(--ck-space-2); padding: 0.4rem var(--ck-space-3); border-bottom: 1px solid var(--ck-border); }
.tk-picklist li:last-child { border-bottom: 0; }
.tk-picklist label { display: flex; flex: 1; justify-content: space-between; gap: var(--ck-space-3); cursor: pointer; }
.tk-num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tk-matchsum { display: flex; flex-wrap: wrap; gap: var(--ck-space-6); margin: var(--ck-space-3) 0; padding: var(--ck-space-3); border-radius: var(--ck-radius-lg); background: var(--ck-primary-soft); }
.tk-matchsum > div { display: flex; flex-direction: column; }
.tk-matchreason { display: flex; flex-wrap: wrap; gap: var(--ck-space-3); align-items: flex-end; }
.tk-note { flex: 1; min-width: 14rem; }

.tk-steps { display: flex; gap: var(--ck-space-2); margin: 0 0 var(--ck-space-3); padding: 0; list-style: none; }
.tk-steps li { padding: 0.2rem var(--ck-space-3); border-radius: 999px; background: var(--ck-border); color: var(--ck-slate); font-size: 0.75rem; font-weight: 600; }
.tk-steps li.tk-on { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }
.tk-import-file { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-4); }
.tk-upload { flex: 1; min-width: 16rem; }
.tk-mapgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ck-space-3); align-items: end; margin-bottom: var(--ck-space-3); }
.tk-fieldset { margin: 0 0 var(--ck-space-3); padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-md); }
.tk-fieldset legend { padding: 0 var(--ck-space-1); font-size: 0.75rem; font-weight: 700; }
.tk-radios { display: flex; flex-wrap: wrap; gap: var(--ck-space-4); margin-bottom: var(--ck-space-3); }
.tk-radios label, .tk-check { display: inline-flex; align-items: center; gap: var(--ck-space-2); }
.tk-sample th, .tk-sample td { white-space: nowrap; font-size: 0.75rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) {
    .tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .tk-split, .tk-accounts, .tk-notes { grid-template-columns: 1fr; }
    .tk-mapgrid { grid-template-columns: 1fr; }
    .tk-viewhead .ab-switcher, .tk-viewhead .ab-btn { margin-left: 0; }
    .tk .tk-title { font-size: 1.5rem; line-height: 2rem; }
}

@media (max-width: 520px) {
    .tk-tiles { grid-template-columns: 1fr; }
    .tk-toolbar > * { flex: 1 1 100%; max-width: 100%; }
}

.tk-head button.e-btn.tk-export:focus-visible, .tk-head .tk-export.e-btn:focus-visible { outline: none; box-shadow: var(--ck-focus-ring) !important; }