/* DFC Factory Hub — design tokens (Pillar 9). Additive to theme.css; maps the
   semantic status palette + side-rail layout onto the existing --color-* vars. */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-md:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px;

  --status-success: var(--color-success);   --status-success-bg: var(--color-success-bg);
  --status-warn:    var(--color-warning);   --status-warn-bg:    var(--color-warning-bg);
  --status-danger:  var(--color-danger);    --status-danger-bg:  var(--color-danger-bg);
  --status-info:    var(--color-info);      --status-info-bg:    var(--color-info-bg);
  --status-muted:   var(--color-muted);     --status-muted-bg:   var(--color-border);

  --motion-fast:120ms; --motion-normal:200ms; --ease:cubic-bezier(.2,.8,.2,1);
  --z-rail:50; --z-banner:100; --z-modal:200;
  --rail-w:240px; --topbar-h:60px;
}

/* ── App shell: topbar on top, side-rail + main below ─────────────────────── */
.hub-shell { display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:calc(100vh - var(--topbar-h)); }
@media (max-width:880px){ .hub-shell{ grid-template-columns:1fr; } .hub-shell oh-side-rail{ display:none; } }
.hub-main { padding:var(--space-5); min-width:0; }
.hub-main > header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.hub-main > header h1 { margin:0; font-size:var(--text-xl); color:var(--color-primary); }

.primary-action { background:var(--color-primary); color:#fff; border:none; padding:10px 18px;
  border-radius:8px; font-size:var(--text-base); font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:filter var(--motion-fast) var(--ease); }
.primary-action:hover { filter:brightness(1.08); }

.screen { display:none; } .screen.active { display:block; }

/* Skeleton loader (never spinners). */
.skeleton { background:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.09) 50%,rgba(0,0,0,.05) 100%);
  background-size:200% 100%; animation:sk 1.4s ease-in-out infinite; border-radius:6px; min-height:14px; display:block; }
@keyframes sk { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* Test-mode banner. */
#testModeBanner { background:var(--status-danger); color:#fff; padding:8px 14px; text-align:center;
  font-weight:600; font-size:13px; letter-spacing:.3px; position:sticky; top:0; z-index:var(--z-banner); }

/* Row action buttons + toolbar. */
.btn-sm { font-size:12px; padding:4px 10px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface); cursor:pointer; color:var(--color-text); }
.btn-sm:hover { background:var(--color-bg); }
.btn-sm.danger { color:var(--status-danger); border-color:var(--status-danger-bg); }
.btn-sm.primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }

/* Modal. */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,42,31,.45); z-index:var(--z-modal); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal { background:var(--color-surface); border-radius:12px; box-shadow:var(--shadow-lg); width:520px; max-width:100%; }
.modal h3 { margin:0; padding:16px 20px; border-bottom:1px solid var(--color-border); color:var(--color-primary); font-size:16px; }
.modal .modal-body { padding:18px 20px; max-height:65vh; overflow:auto; }
.modal .modal-foot { padding:14px 20px; border-top:1px solid var(--color-border); display:flex; gap:10px; justify-content:flex-end; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--color-muted); margin-bottom:4px; }
.field input[type=text], .field input[type=number], .field input[type=email], .field select, .field textarea {
  width:100%; padding:8px 10px; border:1px solid var(--color-border); border-radius:6px; font-size:14px; font-family:inherit; background:var(--color-surface); color:var(--color-text); }
.field select[multiple] { min-height:120px; }
.field .hint { font-size:11px; color:var(--color-faint); margin-top:3px; }
.field-check { display:flex; align-items:center; gap:8px; }
.field-check input { width:16px; height:16px; }

/* Matrix table. */
.access-tbl { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.access-tbl th, .access-tbl td { padding:8px 10px; border-bottom:1px solid var(--color-border); text-align:center; }
.access-tbl th:first-child, .access-tbl td:first-child { text-align:left; }
.access-tbl tr:hover { background:var(--color-bg); }
.access-tbl td.override { background:var(--status-warn-bg); }