/* nguyenthuong · Phân Bổ Máy Cắt · Sổ Tổ Cắt
   The tenant's own stylesheet, linked after the kit files. It holds only (a) components the kit lacks and (b) layout glue
   for this tenant's screens. Every colour, space, radius, size and shadow is a var(--*) kit token; no kit class is restyled.
   Gaps are numbered as in KIT_GAPS.md. */

/* ---------- Brand mark (gap 1): the old tool's ruler, drawn in the brand-mark slot ---------- */
.nguyenthuong-mark { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Ruler strip under the header (gap 1): decoration only, aria-hidden ---------- */
.nguyenthuong-ruler {
  height: var(--sp-2);
  background-image:
    repeating-linear-gradient(90deg, var(--nguyenthuong-ruler) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, var(--nguyenthuong-ruler-soft) 0 1px, transparent 1px 10px);
  background-size: 100% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-position: var(--sp-5) 0, var(--sp-5) 0;
  border-bottom: 1px solid var(--panel-border);
}

/* ---------- Layout glue: page width for the planning board and the reports, a wrapping row of controls ---------- */
.nguyenthuong-wide { --container-w: 88rem; }
.nguyenthuong-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.nguyenthuong-row-end { margin-inline-start: auto; }

/* ---------- Planning board S2 (gap 2): kho chờ is the kit .page-side placed first (sticky by the kit); its list scrolls inside the panel ---------- */
.nguyenthuong-plan-pool .panel-body.nguyenthuong-scroll { max-height: calc(100vh - var(--topbar-real-h, 4rem) - 15rem); overflow: auto; }
.nguyenthuong-pool-tools { padding: var(--sp-3) var(--sp-4) 0; }
.nguyenthuong-stack-3 { --stack-gap: var(--sp-3); }
/* Part 1 of S2: spread figures, the week switch and the summary strip on one row, wrapping */
.nguyenthuong-params { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4) var(--sp-7); }
.nguyenthuong-params-dl { flex: 1 1 15rem; }
.nguyenthuong-params-week { flex: 0 0 auto; }
.nguyenthuong-params-strip { flex: 2 1 30rem; }
/* Part 3 of S2: the day tabs and the bar of the chosen machine-day */
.nguyenthuong-day-head { padding: var(--sp-3) var(--sp-4) 0; }
.nguyenthuong-day-bar { padding: var(--sp-4) 0 var(--sp-2); }

/* ---------- Machine card (gap 3): the old tool's "thẻ máy" with a week load bar; a radio card ---------- */
.nguyenthuong-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--sp-3); }
.nguyenthuong-machine {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.nguyenthuong-machine:hover { border-color: var(--field-border); }
.nguyenthuong-machine:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--sh-2); }
.nguyenthuong-machine:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.nguyenthuong-machine[data-state="off"] { background: var(--surface-2); }
.nguyenthuong-machine-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; white-space: nowrap; }
.nguyenthuong-machine-name { font-weight: 700; font-size: var(--fs-base); color: var(--heading); }
.nguyenthuong-machine-count { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.nguyenthuong-machine-fig { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nguyenthuong-machine-fig strong { font-family: var(--font-figure, inherit); font-size: var(--fs-lg); color: var(--text); }
.nguyenthuong-machine-bar { display: block; padding-top: calc(var(--fs-xs) + var(--sp-2)); }
.nguyenthuong-machine-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* Ruler scale under a load bar (gap 1): ticks every 10 % of the scale, decoration only */
.nguyenthuong-scale {
  display: block;
  height: 5px;
  margin-top: 2px;
  background-image: repeating-linear-gradient(90deg, var(--nguyenthuong-ruler) 0 1px, transparent 1px 10%);
  background-size: calc(100% + 1px) 100%;
}

/* ---------- Drop target of a machine-day and the drag grip beside a row (gap 4) ---------- */
.nguyenthuong-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 4rem;
  margin: var(--sp-3) var(--sp-4) var(--sp-4);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  border: 2px dashed var(--field-border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.nguyenthuong-drop[data-over] { color: var(--text); border-color: var(--primary); background: var(--notice-bg); }

/* A drag handle beside a draggable row: decoration, the ⋯ menu is the keyboard and touch way */
.nguyenthuong-grip { color: var(--muted); cursor: grab; }

/* ---------- Sign-in drawing (gap 1): a ruler laid across the card top ---------- */
.nguyenthuong-login-ruler { --login-art-w: 100%; height: 2.5rem; }

/* ---------- Excel sheet preview on A4 landscape paper (gap 5): the file's title rows above the grid ---------- */
.nguyenthuong-sheet { display: grid; align-content: start; gap: var(--sp-2); }
.nguyenthuong-sheet-title { margin: 0; font-weight: 700; font-size: var(--fs-md); }
.nguyenthuong-sheet-meta { margin: 0; font-size: var(--fs-xs); }