/* ============================================================================
   Dwyer Allocation — module-specific components ONLY.

   Link order (index.php): design-tokens.css → app-shell.css → THIS FILE.
   The shell classes (.content/.title-row/.tab-row/.toolbar/.table/.btn/.input/
   .badge) ship in app-shell.css and are consumed as-is — never restyled here.
   Everything below is built on the tokens (no hard-coded colours/spacing) and
   follows the onboarding v3 grammar: a light canvas with white cards floating,
   a sticky canonical header, shadcn-style dropdowns, full-bleed gridded tables.
   ============================================================================ */

/* ---- v3 canvas: the module owns the whole page ---------------------------- */
html, body { background: var(--color-app-bg); }
.app { background: var(--color-app-bg); }
.app-canvas { min-height: 100vh; background: var(--color-app-bg); }
.app-canvas .content { padding-top: 0; padding-bottom: var(--space-8); }

/* Sticky canonical header on the canvas; bleeds full-width behind the content
   inset so the tab underline reaches the page edges (DESIGN.md main-page rule). */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-app-bg);
  margin: 0 calc(-1 * var(--space-8));
  padding: var(--space-4) var(--space-8) 0;
}
.app-header .tab-row {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  margin-bottom: 0;
}
.view-body { padding-top: var(--space-4); }

/* ---- Status pills (per-module, per DESIGN.md § Color usage) ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.pill--blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text); }
.pill--gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.pill--green  { background: var(--pill-green-bg);  color: var(--pill-green-text); }
.pill--red    { background: var(--pill-red-bg);    color: var(--pill-red-text); }
.pill--amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

.btn--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }
.btn--danger:hover { filter: brightness(0.97); }

/* ---- Cards (white surfaces floating on the canvas) ------------------------ */
.card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-faint);
  flex-wrap: wrap;
}
.card-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.card-title .icon { color: var(--color-label); }
.card-sub { color: var(--color-label); font-size: var(--fs-sm); }
.card-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card-empty { padding: var(--space-6) var(--space-4); color: var(--color-muted); text-align: center; }
.grid-legend { padding: var(--space-2) var(--space-4); color: var(--color-label); font-size: var(--fs-sm); background: var(--color-canvas); }

/* A table living inside a card: bleed its hairlines to the card edges, first/
   last cells pad back to the card inset (DESIGN.md full-bleed rule). */
.table--card { margin: 0; }
.table--card th:first-child, .table--card td:first-child { padding-left: var(--space-4); }
.table--card th:last-child,  .table--card td:last-child  { padding-right: var(--space-4); }
.table--grid th, .table--grid td { border-right: 1px solid var(--color-border-faint); }
.table--grid th:last-child, .table--grid td:last-child { border-right: none; }

/* ---- Workbench header (plan drilldown) ------------------------------------ */
.wb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.wb-crumbs { display: flex; align-items: center; gap: var(--space-2); }
.wb-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.crumb { appearance: none; background: none; border: none; cursor: pointer; color: var(--color-accent); font: inherit; font-size: var(--fs-md); padding: 0; }
.crumb:hover { text-decoration: underline; }
.crumb-sep { color: var(--color-muted); width: 14px; height: 14px; }
.wb-head-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Requirement grid ----------------------------------------------------- */
.req-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.req-name { color: var(--color-label); font-size: var(--fs-sm); margin-left: var(--space-1); }
.req-tree { color: var(--color-muted); width: 14px; height: 14px; }
.req-fg td { background: var(--color-canvas); }
.input--qty { width: 72px; height: 28px; text-align: right; padding: 0 var(--space-2); }
.num-danger { color: var(--color-danger-text); font-weight: var(--fw-medium); }

/* ---- Tether chip (what an MO / allocation is bound to) -------------------- */
.tether { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text); font-size: var(--fs-sm); }
.tether .icon { width: 14px; height: 14px; color: var(--color-label); }
.src-icon { width: 14px; height: 14px; color: var(--color-label); vertical-align: -2px; }

/* ---- Add-line controls ---------------------------------------------------- */
.add-manual { display: flex; align-items: center; gap: var(--space-2); }

/* ---- MO / pick board grid ------------------------------------------------- */
.mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--space-4); }
.mo-card { margin-bottom: 0; }
.conflict-list { margin: var(--space-3) 0; padding-left: var(--space-5); font-size: var(--fs-base); }
.conflict-list li { margin-bottom: var(--space-1); }

.toolbar-note { color: var(--color-label); font-size: var(--fs-sm); }

/* ---- Fields (label above value) ------------------------------------------- */
.field { margin-bottom: var(--space-3); }
.field-label { font-size: var(--fs-sm); color: var(--color-label); margin-bottom: var(--space-1); }
.field-value { font-size: var(--fs-base); color: var(--color-text); }

/* ============================================================================
   Dropdown — the shared shadcn-style menu (DESIGN.md rule 5). Trigger mirrors
   the shell input; menu is a token-built popover.
   ============================================================================ */
.dd-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: var(--control-height); min-width: 160px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--fs-base);
  cursor: pointer; text-align: left;
}
.dd-trigger:hover { border-color: var(--color-muted); }
.dd-trigger--open { border-color: var(--color-accent); }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-placeholder { color: var(--color-muted); }
.dd-caret { width: 15px; height: 15px; color: var(--color-label); flex: none; }
.dd-menu {
  position: fixed; z-index: 200; max-height: 320px; overflow-y: auto; padding: 4px;
  background: var(--color-bg); border: 1px solid var(--color-border-faint);
  border-radius: 10px; box-shadow: var(--shadow-md); font-size: var(--fs-base);
}
.dd-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--color-text);
}
.dd-item--active { background: var(--color-hover); }
.dd-check { width: 16px; height: 16px; color: var(--color-accent); flex: none; display: inline-flex; }
.dd-check .icon { width: 16px; height: 16px; }
.dd-item-label { display: flex; flex-direction: column; line-height: 1.3; }
.dd-item-sub { color: var(--color-muted); font-size: var(--fs-xs); }

/* ============================================================================
   Modal / toast / banner / empty / loading / busy — module chrome.
   ============================================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12, 10, 9, 0.35);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: var(--space-4);
}
.modal {
  background: var(--color-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal--wide { max-width: 720px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border-faint); }
.modal-title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.modal-body { padding: var(--space-4); overflow-y: auto; }
.modal-text { color: var(--color-label); margin: 0 0 var(--space-3); line-height: var(--lh-base); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-faint); }

.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 400; display: flex; flex-direction: column; gap: var(--space-2); max-width: 380px; }
.toast { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-input); background: var(--color-bg); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); font-size: var(--fs-base); }
.toast .icon { flex: none; margin-top: 1px; }
.toast-body { flex: 1; }
.toast--error { border-color: var(--pill-red-bg); }
.toast--error .icon { color: var(--pill-red-text); }
.toast--success .icon { color: var(--pill-green-text); }
.toast--info .icon { color: var(--color-accent); }

.banner { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-input); font-size: var(--fs-base); margin-bottom: var(--space-3); }
.banner .icon { flex: none; margin-top: 1px; }
.banner--info { background: var(--banner-bg); border: 1px solid var(--banner-border); color: var(--banner-text); }
.banner--warn { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.banner--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }
.banner--success { background: var(--pill-green-bg); color: var(--pill-green-text); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-4); gap: var(--space-2); }
.empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-canvas); display: flex; align-items: center; justify-content: center; color: var(--color-label); }
.empty-icon .icon { width: 22px; height: 22px; }
.empty-title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.empty-detail { color: var(--color-label); max-width: 520px; line-height: var(--lh-base); }
.empty .btn { margin-top: var(--space-2); }

.loading { display: flex; align-items: center; gap: var(--space-2); color: var(--color-label); padding: var(--space-6); justify-content: center; }
.icon--spin { animation: da-spin 0.9s linear infinite; }
@keyframes da-spin { to { transform: rotate(360deg); } }

.busy-overlay { position: fixed; inset: 0; background: rgba(249,249,249,0.6); display: flex; align-items: center; justify-content: center; z-index: 350; }
.busy-card { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); box-shadow: var(--shadow-md); }
.busy-label { font-weight: var(--fw-medium); }

.setup-help { margin-top: var(--space-4); color: var(--color-label); }
.setup-help ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.setup-help li { margin-bottom: var(--space-1); }

/* Slim custom scrollbars app-wide (DESIGN.md). */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }