/* ============================================================================
 * HEGEL SHELL V2 — canonical shared shell + component system
 * Single source of truth. Byte-identical in every Hegel app (checksum-gated).
 * All selectors are namespaced `.h-*` so they never collide with an app's own
 * business-content CSS. No @font-face here — each app supplies Inter locally
 * (its own /static/fonts or /fonts path) so THIS file stays identical everywhere.
 * Dimensions/colours/type are exact and MUST NOT be overridden per app.
 * ========================================================================== */
:root{
  --h-navy:#0F2747; --h-blue:#2563EB; --h-bg:#F5F7FA; --h-surface:#FFFFFF;
  --h-text:#111827; --h-muted:#6B7280; --h-border:#E5E7EB; --h-input-border:#D1D5DB;
  --h-success:#16A34A; --h-warning:#D97706; --h-danger:#DC2626; --h-info:#2563EB;
  --h-side-ink:#CDD6E4; --h-side-label:#93A4BD;
  --h-sidebar-w:240px; --h-drawer-w:280px; --h-header-h:60px; --h-radius:8px;
  --h-font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.h-shell,.h-shell *{box-sizing:border-box}
.h-shell{font-family:var(--h-font);background:var(--h-bg);color:var(--h-text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}

/* ---- Sidebar : 240px navy, fixed ---- */
.h-nav-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.h-sidebar{position:fixed;inset:0 auto 0 0;width:var(--h-sidebar-w);background:var(--h-navy);
  color:#fff;display:flex;flex-direction:column;overflow-y:auto;z-index:40}
.h-brand{padding:20px 16px 16px}
.h-brand-name{font-size:18px;font-weight:700;color:#fff;line-height:1.1;display:block}
.h-brand-app{display:block;font-size:14px;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:var(--h-side-label);margin-top:3px}
.h-section-label{padding:12px 20px 6px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--h-side-label)}
.h-app-nav,.h-switch-system{display:flex;flex-direction:column}
.h-nav-item{display:flex;align-items:center;height:42px;margin:2px 12px;padding:0 12px;
  border-radius:var(--h-radius);color:var(--h-side-ink);font-size:15px;font-weight:500;
  text-decoration:none}
.h-nav-item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.h-nav-item-active,.h-nav-item.active{background:var(--h-blue);color:#fff;font-weight:600}
.h-nav-item-active:hover,.h-nav-item.active:hover{background:var(--h-blue);color:#fff}
.h-divider{height:1px;background:rgba(255,255,255,.10);margin:10px 16px}
.h-context{padding:0 16px 4px}
.h-context-select{width:100%;height:38px;padding:0 10px;border-radius:var(--h-radius);
  border:1px solid rgba(255,255,255,.18);background:#16345A;color:#fff;font:inherit;font-size:13px}
.h-user-footer{margin-top:auto;padding:14px 16px 16px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:10px}
.h-user-name{font-size:14px;font-weight:600;color:#fff}
.h-user-role{font-size:12px;font-weight:500;color:var(--h-side-label)}
.h-logout{width:100%;height:40px;border-radius:var(--h-radius);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.h-logout:hover{background:rgba(255,255,255,.12)}

/* ---- Page column + header ---- */
.h-page{margin-left:var(--h-sidebar-w)}
.h-header{position:sticky;top:0;height:var(--h-header-h);display:flex;align-items:center;gap:12px;
  padding:0 32px;background:var(--h-surface);border-bottom:1px solid var(--h-border);z-index:20}
.h-header-title{font-size:24px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-header-user{font-size:13px;color:var(--h-muted)}
.h-burger{display:none;width:40px;height:40px;border:1px solid var(--h-border);
  border-radius:var(--h-radius);background:var(--h-surface);color:var(--h-text);font-size:18px;
  align-items:center;justify-content:center;cursor:pointer}
.h-scrim{display:none}
.h-main{padding:28px 32px;max-width:1440px}

/* ---- Typography helpers (content) ---- */
.h-section-title{font-size:18px;font-weight:600;margin:0 0 12px}
.h-muted{color:var(--h-muted)}

/* ---- Card ---- */
.h-card{background:var(--h-surface);border:1px solid var(--h-border);border-radius:var(--h-radius);padding:20px}
.h-card-title{font-size:16px;font-weight:600;margin:0 0 6px}

/* ---- Buttons ---- */
.h-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;
  border-radius:var(--h-radius);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;text-decoration:none;line-height:1}
.h-btn:hover{text-decoration:none}
.h-btn-primary{background:var(--h-blue);color:#fff}
.h-btn-primary:hover{filter:brightness(.95)}
.h-btn-secondary{background:var(--h-surface);border-color:var(--h-input-border);color:var(--h-text)}
.h-btn-secondary:hover{background:#F2F4F7}
.h-btn-danger{background:var(--h-danger);color:#fff}
.h-btn-block{width:100%}

/* ---- Inputs ---- */
.h-input,.h-select{width:100%;height:40px;padding:0 11px;border:1px solid var(--h-input-border);
  border-radius:var(--h-radius);background:var(--h-surface);font:inherit;font-size:14px;color:var(--h-text)}
.h-input:focus,.h-select:focus{outline:2px solid #bfd3ff;border-color:var(--h-blue)}

/* ---- Table ---- */
.h-table-wrap{overflow-x:auto;border:1px solid var(--h-border);border-radius:var(--h-radius)}
.h-table{width:100%;border-collapse:collapse;background:var(--h-surface)}
.h-table th,.h-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--h-border);font-size:14px}
.h-table th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--h-muted);background:#F9FAFB}
.h-table tr:last-child td{border-bottom:none}

/* ---- Status chips (one semantic system) ---- */
.h-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.h-chip-info{background:#EFF4FF;color:#1D4ED8}
.h-chip-success{background:#E7F6EC;color:#15803D}
.h-chip-warning{background:#FEF5E7;color:#B45309}
.h-chip-danger{background:#FDECEC;color:#B91C1C}
.h-chip-gray{background:#F2F4F7;color:#475467}

/* ---- Action card (Inventory shortcuts, standardized) ---- */
.h-action-card{display:flex;flex-direction:column;gap:6px;min-height:84px;padding:16px;
  border:1px solid var(--h-border);border-radius:var(--h-radius);background:var(--h-surface);
  text-decoration:none;color:var(--h-text)}
.h-action-card:hover{border-color:var(--h-blue);text-decoration:none}
.h-action-ic{width:34px;height:34px;border-radius:var(--h-radius);display:flex;align-items:center;
  justify-content:center;background:#EFF4FF;color:var(--h-blue);font-weight:700}
.h-action-title{font-size:14px;font-weight:600}
.h-action-sub{font-size:12px;color:var(--h-muted)}

/* ---- Mobile: 280px off-canvas drawer + overlay ---- */
@media(max-width:768px){
  .h-sidebar{width:var(--h-drawer-w);transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 10px 40px rgba(15,39,71,.25)}
  .h-nav-cb:checked ~ .h-sidebar{transform:translateX(0)}
  .h-nav-cb:checked ~ .h-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:30}
  .h-page{margin-left:0}
  .h-burger{display:inline-flex}
  .h-header{padding:0 16px}
  .h-main{padding:20px 16px}
}