/* Sổ Kế Toán Lên Nguyễn (tenant minhnhat): styles for the one upload place (S2, S3) and the folder view of Chứng từ (S9 Thư mục).
   Linked after minhnhat.css, only from S2-*.html, S3-*.html and S9-chung-tu-thu-muc*.html.
   Every colour, space, radius, type size and shadow is a var(--*) token from tokens.css / kit.css; no kit class is restyled
   (a tenant modifier sits next to the kit class). New classes use the mn-up- (upload) and mn-fold- (folder view) prefixes. */

/* -- S2: the one drop zone (a tenant modifier on the kit .dropzone, taller; -sm for the strip shown over a result) ----- */
.mn-up-drop { padding-block: var(--sp-8); }
.mn-up-drop-sm { padding-block: var(--sp-4); }
.mn-up-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.mn-up-types { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }

/* "Lấy file ở đâu?": the guides of the old source cards, in one folded panel */
.mn-up-guide { --mn-up-guide-min: 24rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mn-up-guide-min)), 1fr)); gap: var(--sp-5) var(--sp-6); margin: 0; padding: 0; list-style: none; }
.mn-up-guide-item { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.mn-up-guide-item > div { display: grid; gap: var(--sp-1); min-width: 0; }

/* The batch table (one row per file) */
.mn-up-file { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.mn-up-file > .icon { flex: none; margin-top: var(--sp-1); color: var(--muted); }
.mn-up-file > div { min-width: 12rem; }
.mn-up-name { font-weight: 600; overflow-wrap: anywhere; }
.mn-up-type { display: grid; justify-items: start; gap: var(--sp-2); }
.mn-up-select { --field-w: 100%; min-width: 14rem; }
.mn-up-path { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.mn-up-flag { display: flex; align-items: flex-start; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--mn-brass-ink); }
.mn-up-flag .icon { flex: none; margin-top: var(--sp-1); }
.mn-up-skip td, .mn-up-skip th { background: var(--surface-2); }
.mn-up-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.mn-up-totals { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.mn-up-totals strong { color: var(--text); }
.mn-up-group { display: grid; gap: var(--sp-3); }

/* -- S9 Thư mục: tree on the start side, the opened folder beside it ---------------------------------------------------- */
.mn-fold { --mn-fold-tree-w: 22rem; display: grid; grid-template-columns: var(--mn-fold-tree-w) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 64rem) { .mn-fold { grid-template-columns: minmax(0, 1fr); } }

.mn-tree, .mn-tree ul { margin: 0; padding: 0; list-style: none; }
.mn-tree ul { margin-inline-start: var(--sp-2); padding-inline-start: var(--sp-2); border-inline-start: var(--mn-line) solid var(--panel-border); }
.mn-tree li { min-width: 0; }
.mn-tree summary, .mn-tree a.mn-tree-row { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-7); padding: var(--sp-1) var(--sp-2); color: var(--text); text-decoration: none; cursor: pointer; border-radius: var(--radius-sm); }
.mn-tree summary { list-style: none; }
.mn-tree summary::-webkit-details-marker { display: none; }
.mn-tree summary:hover, .mn-tree a.mn-tree-row:hover { background: var(--surface-hover); }
.mn-tree summary:focus-visible, .mn-tree a.mn-tree-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.mn-tree .icon { flex: none; }
.mn-tree-caret { color: var(--muted); transition: transform var(--dur-1) var(--ease); }
.mn-tree details[open] > summary > .mn-tree-caret { transform: rotate(90deg); }
.mn-tree-name { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.mn-tree-name small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.mn-tree-end { display: inline-flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.mn-tree-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.mn-tree a.mn-tree-row[aria-current="page"] { font-weight: 600; background: var(--primary-tint); color: var(--on-primary-tint); }
.mn-tree a.mn-tree-row[aria-current="page"] .mn-tree-count, .mn-tree a.mn-tree-row[aria-current="page"] .mn-tree-name small { color: inherit; }

/* The Facebook ads chain: Meta receipt, then the agent's service invoice, then the transfer screenshot */
.mn-fold-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--sp-2); align-items: stretch; }
.mn-fold-link { display: grid; gap: var(--sp-1); padding: var(--sp-3); background: var(--surface-2); border: var(--mn-line) solid var(--panel-border); border-radius: var(--radius); }
.mn-fold-link b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; color: var(--heading); }
.mn-fold-link span { font-size: var(--fs-sm); color: var(--muted); }
.mn-fold-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--fs-sm); }
.mn-fold-path .icon { color: var(--muted); }