/* Tables of the Kit board (plan, prepare, today). Moved as they were from laundryTable.css: the selectors keep their
   weight, so the board looks the same. Not paginated and not ServerGrid on purpose: expandable rows, own empty states. */

/*========================= BADGE TABLE =========================*/
.badge-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px; /* altezza fissa */
    padding: 0 10px;
    font-size: .8125rem;
    font-weight: 500;
    border-radius: var(--ld-radius-pill);
    white-space: nowrap;
}

.table-container td .badge-table {
    margin: auto;
}


/*========================= KIT BOARD TABLES =========================*/
/* Shared by the Kit tab sections: same column widths everywhere so stacked tables line up. */

.kit-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 2rem 0 .75rem; }
.kit-section-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; font-size: 1.15rem; font-weight: 600; }
/* Card title of the mockup: 17/500 (the theme sets h2 to 22). */
.loondry-ui .kit-section-head h2 { font-size: 17px; font-weight: 500; }
.kit-section-sub { font-size: .8125rem; font-weight: 400; color: var(--ld-neutral-500); }
.kit-step { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ld-primary-light); color: var(--ld-primary-foreground); font-size: .8125rem; font-weight: 500; }

/* Each queue of the board is a card: head with step, title, count and hint, then its table. */
.kit-queue-card { margin-top: .75rem; padding: 1rem; scroll-margin-top: 16px; }
.kit-queue-card .kit-section-head { margin: 0 0 .75rem; align-items: flex-start; }
.kit-queue-card .kit-section-sub { margin: .25rem 0 0; }
.kit-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .5rem; border-radius: var(--ld-radius-pill); background: var(--ld-neutral-100); color: var(--ld-neutral-600); font-size: .75rem; font-weight: 500; }
.kit-prepare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.table-container .hover-scroll-x.kit-scroll { min-height: 0; }

.table-container table.items-table.kit-table[theme="loondry"] { table-layout: fixed; min-width: 800px; }

.table-container table.items-table.kit-table[theme="loondry"] thead th {
    padding: .65rem 1rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--ld-neutral-500);
    background-color: color-mix(in srgb, var(--ld-neutral-900) 3%, var(--app-bg-layout));
    white-space: nowrap;
}

.table-container table.items-table.kit-table[theme="loondry"] tbody td { padding: .7rem 1rem; font-size: .8125rem; }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr:last-child td { border-bottom: 0; }

/* Rows are only "clickable" when they open something. */
.table-container table.items-table.kit-table[theme="loondry"] tbody tr { cursor: default; }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kc-click { cursor: pointer; }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr:hover td { background-color: color-mix(in srgb, var(--primary-color) 12%, var(--app-bg)); }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr:has(td.kc-empty):hover td { background-color: transparent; }

/* Late rows: red bar on the left, no tinted row. The bar is always reserved (transparent) so rows do not shift. */
.table-container table.items-table.kit-table[theme="loondry"] tbody td:first-child { border-left: 3px solid transparent; }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kit-row-late td:first-child { border-left-color: var(--ld-danger-text); }

/* Badges sit next to the text, not centered in the cell. */
.table-container table.items-table.kit-table td .badge-table { margin: 0; height: 24px; }

/* Column types: the same class always has the same width. */
.kit-table th.kc-when, .kit-table td.kc-when { width: 7.5rem; white-space: nowrap; }
.kit-table th.kc-sets, .kit-table td.kc-sets { width: 24%; }
.kit-table th.kc-state, .kit-table td.kc-state { width: 11rem; }
.kit-table th.kc-where, .kit-table td.kc-where { width: 16rem; }
.kit-table th.kc-actions, .kit-table td.kc-actions { width: 9rem; text-align: right; white-space: nowrap; }
.kit-table th.kc-qty, .kit-table td.kc-qty { width: 7rem; text-align: center; }
.kit-table th.kc-count, .kit-table td.kc-count { width: 10rem; }
.kit-table th.kc-fit, .kit-table td.kc-fit { width: 13rem; }

.kit-table td.kc-prop { overflow: hidden; }
.kit-table .kc-name { display: block; font-weight: 600; text-align: left; }
.kit-table .kc-sub { display: block; font-size: .8125rem; color: var(--ld-neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-table .kc-qty-num { font-weight: 600; }
.kit-table .kc-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.kit-table .kc-select { display: flex; align-items: center; gap: .75rem; }

/* Child rows of an expanded kit: same columns as the parent, quieter. */
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kc-child td { padding: .5rem 1rem; font-size: .8125rem; background-color: color-mix(in srgb, var(--ld-neutral-900) 2.5%, var(--app-bg-layout)); }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kc-child:hover td { background-color: color-mix(in srgb, var(--primary-color) 12%, var(--app-bg)); }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kc-child td.kc-child-name { padding-left: 2.6rem; }
.kit-table tr.kc-child .btn { font-size: inherit; }

/* Menu rows: show which one is under the pointer. */
.kit-table .dropdown-item { border-radius: .4rem; }
.kit-table .dropdown-item:hover, .kit-table .dropdown-item:focus-visible { background-color: color-mix(in srgb, var(--primary-color) 18%, var(--app-bg)); }
.kit-table .dropdown-item.text-danger:hover { background-color: color-mix(in srgb, var(--ld-danger-text) 14%, var(--app-bg)); }
.kit-table .dropdown-menu { padding: .35rem; }

/* A filter change reloads only the rows: they stay in place, dimmed, until the new ones arrive. */
.kit-table tbody.kit-reloading { opacity: .5; pointer-events: none; transition: opacity .15s; }

.kc-empty { padding: 2rem 1rem !important; text-align: center; color: var(--ld-neutral-500); font-size: .8125rem; }
.kc-foot { padding: .75rem 1rem; font-size: .8125rem; color: var(--ld-neutral-500); border-top: 1px solid var(--app-border-color); }
.kit-table .kc-icon-button { width: 31px; height: 31px; padding: 0; }

/* Cells may be empty on purpose (no state, no late, no location): never hide the row. The theme hides rows with an empty cell
   (.loondry-ui ... tr:has(td:empty)) and is loaded after this file, so the override carries .loondry-ui to win. */
.loondry-ui .table-container table.items-table.kit-table[theme="loondry"] tbody tr:has(td:empty) { display: table-row !important; }
.kit-table .kc-sub-red { color: var(--ld-danger-text); }
.kc-empty-line { margin: 0 0 .5rem; padding: .25rem 0 0; font-size: .8125rem; color: var(--ld-neutral-500); }

/*========================= KIT BOARD v7: ROWS OF THE QUEUES =========================*/
/* The rows of the five queues are a grid, as in the mockup (docs/superpowers/specs/2026-11-04-kit-tab-logistics-mockup-v7.html):
   one grid per queue, columns in --cols, a header strip and a row per task; below 880px of width a row becomes a card.
   Only --ld-* tokens. "Per kit" and the plan keep the .kit-table above. */
.kit-grid { container-type: inline-size; }
.kit-grid-head, .kit-grid-row { display: grid; grid-template-columns: var(--cols); gap: .25rem 1rem; align-items: center; padding: .65rem 1rem; }
.kit-grid-head { border-radius: var(--ld-radius-md); background: color-mix(in srgb, var(--ld-neutral-900) 3%, var(--app-bg-layout)); color: var(--ld-neutral-500); font-size: .6875rem; font-weight: 600; }
.kit-grid-row { border-bottom: 1px solid var(--ld-neutral-200); border-left: 3px solid transparent; font-size: .8125rem; }
.kit-grid-row:last-child { border-bottom: 0; }
.kit-grid-row.kit-grid-click { cursor: pointer; }
.kit-grid-row:hover { background: color-mix(in srgb, var(--ld-primary) 8%, var(--ld-surface)); }
.kit-grid-row.kit-row-late, .kit-grid-row.kit-row-problem { border-left-color: var(--ld-danger-text); }
.kit-grid-row.kit-row-prepared > .kc:not(:last-child) { opacity: .55; }
.kit-grid .kc { min-width: 0; }
.kit-grid .kc-name { display: block; min-height: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; line-height: 1.25rem; text-align: left; color: inherit; }
.kit-grid .kc-name:hover { color: var(--ld-primary-foreground); }

/* Toolbar of the board: the selects take their own width (the theme stretches each to 160px and a full line). */
.loondry-ui .kit-toolbar .ld-filter-row > * { flex: 0 0 auto; }
.loondry-ui .kit-toolbar .ld-filter-row .form-select { width: auto; min-width: 160px; }
.kit-grid .kc-sub { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; color: var(--ld-neutral-500); }
.kit-grid .kc-sub-red { color: var(--ld-danger-text); }
.kit-grid .kc-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.kit-grid .kc-time.kc-sub-red { color: var(--ld-danger-text); }
.kit-grid .kc-select { display: flex; align-items: center; gap: .75rem; }
.kit-grid .kc-actions { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; }
/* The theme gives every .btn a 40/44px minimum height: in a row the buttons are 31px, the icon one a circle. */
.loondry-ui .kit-grid .kc-actions .btn-sm { height: 31px; min-height: 31px; flex-shrink: 0; white-space: nowrap; }
.loondry-ui .kit-grid .kc-actions .btn.kc-icon-button { width: 31px; min-width: 31px; height: 31px; min-height: 31px; padding: 0; }
.kit-grid .badge-table { height: 24px; margin: 0; }
.kit-grid-foot { padding: .6rem 1rem 0; font-size: .8125rem; color: var(--ld-neutral-500); }
.kit-grid-empty { padding: 2rem 1rem; text-align: center; color: var(--ld-neutral-500); font-size: .8125rem; }
.kit-grid-busy { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* Column widths. The mockup frame has no sidebar and 1320px; in the app the grid is about 1000px on a laptop, so the fixed
   columns are sized for their content (a time, a pill with its line, one or two buttons) and name and sets get the rest. */
.kit-cols-prepare { --cols: 8rem minmax(0, 1.3fr) minmax(0, 1.4fr) 14rem 7rem; }
.kit-cols-queue { --cols: 7rem minmax(0, 1.3fr) minmax(0, 1.4fr) 14rem 11rem; }
.kit-cols-wash { --cols: 9rem minmax(0, 1.3fr) minmax(0, 1.4fr) 7rem; }
.kit-cols-recent { --cols: 7rem minmax(0, 1.3fr) minmax(0, 1.4fr) 14rem; }

@container (max-width: 880px) {
    .kit-grid-head { display: none; }
    .kit-grid-row { grid-template-columns: 1fr; gap: .35rem; padding: .85rem 1rem; }
    .kit-grid .kc[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 600; color: var(--ld-neutral-500); }
    .kit-grid .kc-actions { justify-content: flex-start; }
}

/* Pills of the board: where a kit is, who carries it, what is done. */
.kit-pill { display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .6rem; border-radius: var(--ld-radius-pill); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.kit-pill-info { background: var(--ld-info-bg); color: var(--ld-info-text); }
.kit-pill-warn { background: var(--ld-warning-bg); color: var(--ld-warning-text); }
.kit-pill-danger { background: var(--ld-danger-bg); color: var(--ld-danger-text); }
.kit-pill-ok { background: var(--ld-success-bg); color: var(--ld-success-text); }
.kit-pill-neutral { background: var(--ld-neutral-100); color: var(--ld-neutral-700); }
.kit-pill-own { background: var(--ld-primary-light); color: var(--ld-primary-foreground); }

/* Week strip and stock line inside "Da preparare". */
.kit-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.kit-day { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--ld-neutral-200); border-radius: var(--ld-radius-md); background: var(--ld-surface); color: inherit; text-align: left; font: inherit; font-size: .8125rem; transition: border-color var(--ld-transition); }
.kit-day:hover { border-color: var(--ld-primary-border); }
.kit-day.active { border-color: var(--ld-primary); background: var(--ld-primary-light); }
.kit-day strong { font-size: .875rem; font-weight: 500; }
.kit-day-meta { font-size: .8125rem; color: var(--ld-text-subtle); }
.kit-need { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .8125rem; }
.kit-need-label { margin-right: .25rem; color: var(--ld-neutral-500); }
.kit-chip { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .75rem; border: 1px solid var(--ld-neutral-300); border-radius: var(--ld-radius-pill); background: var(--ld-surface); color: var(--ld-neutral-700); font-size: .8125rem; font-weight: 500; }
.kit-chip:hover { border-color: var(--ld-primary-border); }

/* "Per kit": one block per kit type, with the bar of where its sets are, the verdict for the day and the tasks that hold them. */
.kit-block { padding: 1rem 0; border-bottom: 1px solid var(--ld-neutral-200); }
.kit-block:last-child { border-bottom: 0; }
.kit-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.loondry-ui .kit-block-head h3 { margin: 0; font-size: 17px; font-weight: 500; }
.kit-block-meta { font-size: .8125rem; color: var(--ld-text-subtle); }
.kit-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--ld-radius-pill); overflow: hidden; background: var(--ld-neutral-100); }
.kit-legend { display: flex; flex-wrap: wrap; margin-top: .5rem; font-size: .8125rem; }
.kit-legend-item { display: inline-flex; align-items: center; gap: .25rem; margin-right: 1rem; }
.kit-legend-item i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.kit-legend-item strong { font-weight: 500; }
.kit-seg-ready { background: var(--ld-primary); }
.kit-seg-delivery { background: var(--ld-info-text); }
.kit-seg-use { background: var(--ld-neutral-400); }
.kit-seg-return { background: var(--ld-warning-text); }
.kit-seg-wash { background: var(--ld-success-text); }
.kit-verdict { margin-top: .5rem; font-size: .875rem; }
.kit-grid-hint { font-size: .8125rem; color: var(--ld-neutral-500); }
.kit-cols-bykit { --cols: minmax(0, 1.3fr) 9rem minmax(0, 1.5fr) 4rem; }

/* Kit board v7: a row to look at (failed, nobody carries it, not collected) has the same red bar as a late one; a kit marked as prepared is quieter. */
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kit-row-problem td:first-child { border-left-color: var(--ld-danger-text); }
.table-container table.items-table.kit-table[theme="loondry"] tbody tr.kit-row-prepared td:not(.kc-actions) { opacity: .55; }
.kit-table .kc-time.kc-sub-red { color: var(--ld-danger-text); }