/* Management > Bookkeeping, V1.44 (Theme 2, Money): the bank statements, the vendor invoices, the matching, the spending and
   the categories (Client\Apps\Management: Bookkeeping*.razor). The shared rules of the Management pages (mg-*, pm-*) are in
   management.css and PayTabs.razor. Theme variables only: light and dark both work. */

.bk-page .pm-tabs.bk-tabs { margin-bottom: 12px; }

/* The drop zone: the file input covers it (transparent), so dropping works without any script */
.bk-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 112px; padding: 16px; margin: 0 0 12px; text-align: center;
    border: 2px dashed var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.bk-drop:hover, .bk-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.bk-drop.disabled { opacity: 0.6; }
.bk-drop-icon { color: var(--accent); }
.bk-drop-title { font-weight: 600; }
.bk-drop-hint { font-size: 12px; color: var(--muted); max-width: 640px; }
.bk-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bk-drop.disabled .bk-drop-input { cursor: progress; }

/* What each dropped file gave */
.bk-results { list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bk-results li { padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); font-size: 13px; }
.bk-results li.good { border-color: var(--good); background: var(--good-soft); }
.bk-results li.bad { border-color: var(--warn); background: var(--warn-soft); }

/* The statement shown, the long lists, a deposit */
tr.bk-current td { background: var(--accent-soft); }
.bk-scroll { max-height: 420px; overflow-y: auto; }
td.bk-deposit { color: var(--good-text); }

/* A category: the select and its Accept; a suggestion not confirmed yet */
.bk-cat { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bk-cat select { max-width: 240px; }
select.bk-suggested { border-style: dashed; color: var(--accent-strong); }
select.bk-pick { max-width: 320px; }

/* The automatic sources of the invoices page and of the categories page */
.bk-sources { display: flex; flex-direction: column; gap: 6px; }
.bk-source { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-source .spacer { flex: 1; }
.bk-missing { margin: -2px 0 4px 4px; }
.bk-setup { display: flex; flex-direction: column; gap: 10px; }
.bk-setup-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.bk-setup-row .hint { flex-basis: 100%; }

/* The categories page */
.bk-suggestions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.bk-newcat { margin-bottom: 12px; align-items: end; }

/* The spending table: twelve months side by side */
.bk-spending td, .bk-spending th { white-space: nowrap; }
.pm-card .value.bk-small { font-size: 15px; }

@media (max-width: 720px) {
    .bk-drop { min-height: 96px; }
    .bk-cat select, select.bk-pick { max-width: 100%; }
}