/* "Preview My Hub" — the in-app look of ESW Safety Hub, plus the configurator
   entry points. The original styles.css and styles-extensions.css are
   unchanged. Everything in the preview is scoped under .hub. */

/* ── Configurator entry points ─────────────────────────────────────────── */
.header-inner nav .nav-preview{color:#fff;background:var(--accent);padding:8px 13px;border-radius:999px}
.header-inner nav .nav-preview:hover{color:#fff;background:#a2441f}
.preview-cta{width:100%;justify-content:space-between;background:#c8693d;color:#fff;margin-bottom:10px;text-align:left}
.preview-cta:hover{background:#b95027}
.preview-cta-text{display:flex;flex-direction:column;gap:2px}
.preview-cta-text small{font-size:9px;font-weight:400;opacity:.85}
.preview-bar{display:flex;align-items:center;gap:18px;margin-top:22px;padding:20px 22px;border-radius:11px;background:var(--forest);color:#eef2e6;background-image:radial-gradient(#ffffff12 .7px,transparent .7px);background-size:12px 12px}
.preview-bar .eyebrow{font-size:8px;color:#c6d4b3}
.preview-bar h3{font-size:20px;font-weight:500;margin-top:5px}
.preview-bar p:last-child{font-size:11px;line-height:1.6;color:#bccbbb;margin-top:6px;max-width:440px}
.preview-bar .button{margin-left:auto;background:#edf0db;color:var(--forest);white-space:nowrap}
.preview-bar .button:hover{background:#fff}
.preview-bar-icon{width:44px;height:44px;border-radius:10px;background:#2b5446;display:grid;place-items:center;flex-shrink:0;color:#dce4c9}
@media(max-width:850px){.header-inner nav .nav-preview{padding:6px 10px}}
@media(max-width:650px){.preview-bar{flex-wrap:wrap}.preview-bar .button{margin-left:0;width:100%}}

/* ── The preview application ───────────────────────────────────────────── */
body.hub-open{overflow:hidden}
.hub{--h-canvas:#f3f5f1;--h-surface:#fff;--h-line:#e2e7df;--h-ink:#15302a;--h-muted:#64736b;--h-side:#0f241c;--h-side-ink:#c9d7cd;--h-accent:#c8693d;--h-primary:#173e33;
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--h-canvas);color:var(--h-ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;letter-spacing:0}
.hub[hidden]{display:none!important}
.hub *{box-sizing:border-box}
.hub h1,.hub h2,.hub h3,.hub h4{letter-spacing:-.01em;margin:0;line-height:1.2}
.hub a{color:inherit;text-decoration:none}
.hub button{font:inherit;color:inherit}
.hub svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hub :focus-visible{outline:3px solid #e09a6f;outline-offset:2px;border-radius:6px}

/* Preview ribbon */
.hub-ribbon{display:flex;align-items:center;gap:14px;padding:9px 18px;background:#fbefe2;border-bottom:1px solid #efd5bb;color:#7a4317;font-size:12px}
.hub-ribbon strong{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.hub-back{margin-left:auto;border:1px solid #d9a77e;background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap;color:#6b3a12!important}
.hub-back:hover{background:#fff6ee}

/* Layout */
.hub-app{flex:1;min-height:0;display:grid;grid-template-columns:252px minmax(0,1fr)}
.hub-sidebar{background:var(--h-side);color:var(--h-side-ink);display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:18px 12px}
.hub-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;border-bottom:1px solid #ffffff14;margin-bottom:12px}
.hub-brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#c8693d,#9d4a24);display:grid;place-items:center;color:#fff}
.hub-brand strong{display:block;color:#fff;font-size:14px}
.hub-brand small{display:block;font-size:11px;color:#9fb3a6;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.hub-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#7f968a;margin:14px 10px 6px}
.hub-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--h-side-ink);border:0;background:none;width:100%;text-align:left;cursor:pointer;position:relative}
.hub-nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-nav-item:hover{background:#ffffff0d;color:#fff}
.hub-nav-item.is-active{background:#ffffff14;color:#fff;font-weight:600}
.hub-nav-item.is-active:before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--h-accent)}
.hub-sidebar-foot{border-top:1px solid #ffffff14;padding-top:10px;margin-top:12px;display:flex;flex-direction:column;gap:2px}
.hub-scrim{display:none}
.hub-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.hub-topbar{display:flex;align-items:center;gap:14px;padding:12px 26px;background:var(--h-surface);border-bottom:1px solid var(--h-line)}
.hub-menu-btn{display:none!important}
.hub-company strong{display:block;font-size:14px}
.hub-company small{display:block;font-size:11px;color:var(--h-muted)}
.hub-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--h-canvas);border:1px solid var(--h-line);border-radius:9px;padding:0 12px;width:min(340px,32vw);color:var(--h-muted)}
.hub-search input{border:0;background:transparent;margin:0;padding:9px 0;min-height:0;width:100%;font-size:13px;color:var(--h-ink);outline:none}
.hub-icon-btn{position:relative;width:38px;height:38px;border-radius:9px;border:1px solid var(--h-line);background:var(--h-surface);display:grid;place-items:center;cursor:pointer}
.hub-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--h-accent);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.hub-user{display:flex;align-items:center;gap:9px}
.hub-avatar{width:36px;height:36px;border-radius:50%;background:#dfe8d6;color:#2b4a36;font-weight:700;font-size:12px;display:grid;place-items:center}
.hub-user-text strong{display:block;font-size:13px}
.hub-user-text small{display:block;font-size:11px;color:var(--h-muted)}
.hub-content{flex:1;overflow-y:auto;padding:28px 30px 48px}

/* Page header */
.hub-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.hub-page-head h1{font-size:26px;font-weight:650;outline:none}
.hub-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--h-muted);margin:0 0 6px}
.hub-sub{color:var(--h-muted);margin:6px 0 0;max-width:640px}
.hub-page-title{display:flex;gap:14px;align-items:flex-start}
.hub-actions{display:flex;gap:8px;flex-shrink:0}
.hub-btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:9px 14px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--h-line)}
.hub-btn-primary{background:var(--h-primary);border-color:var(--h-primary);color:#fff!important}
.hub-btn-primary:hover{background:#21523f}
.hub-btn-ghost{background:var(--h-surface)}
.hub-btn-ghost:hover{background:var(--h-canvas)}
.hub-crumbs{display:flex;gap:8px;font-size:12px;color:var(--h-muted);margin-bottom:14px}
.hub-crumbs a:hover{color:var(--h-ink);text-decoration:underline}
.hub-origin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;font-weight:600;color:#8a4a22;background:#fbefe2;border-radius:999px;padding:4px 10px}
.hub-origin svg{width:13px;height:13px}
.hub-origin-core{color:#2f5b3d;background:#e5efe1}

/* Stats */
.hub-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.hub-stat{background:var(--h-surface);border:1px solid var(--h-line);border-radius:12px;padding:14px 16px;min-width:0}
.hub-stat-sub{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8a4a22;font-weight:650;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-stat-label{display:block;font-size:12px;color:var(--h-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-stat-value{display:block;font-size:24px;font-weight:700;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-stat-wide .hub-stat-value{font-size:16px;margin-top:10px}
.hub-text-ok{color:#2f7a4b}.hub-text-warn{color:#a8630f}.hub-text-danger{color:#b23a2d}.hub-text-info{color:#275f8c}.hub-text-neutral{color:var(--h-ink)}

/* Cards */
.hub-card{background:var(--h-surface);border:1px solid var(--h-line);border-radius:12px;padding:16px 18px;min-width:0}
.hub-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.hub-card-head h3{font-size:15px;font-weight:650}
.hub-count{font-size:12px;font-weight:700;background:var(--h-canvas);border-radius:999px;padding:2px 9px}
.hub-dash-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:28px}
.hub-sections{display:grid;gap:16px}
.hub-section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.hub-section-title h2{font-size:17px;font-weight:650}
.hub-section-title span{font-size:12px;color:var(--h-muted)}
.hub-list,.hub-feed,.hub-progress{list-style:none;margin:0;padding:0}
.hub-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--h-line)}
.hub-list li:first-child{border-top:0}
.hub-list li>div{flex:1;min-width:0}
.hub-list strong{display:block;font-size:13px;font-weight:600}
.hub-list small{display:block;font-size:12px;color:var(--h-muted);margin-top:2px}
.hub-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hub-link{font-size:12px;font-weight:600;color:#a2441f!important}
.hub-link:hover{text-decoration:underline}
.hub-feed li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--h-line)}
.hub-feed li:first-child{border-top:0}
.hub-feed strong{display:block;font-size:13px;font-weight:500}
.hub-feed small{display:block;font-size:12px;color:var(--h-muted);margin-top:2px}
.hub-feed-icon,.hub-module-icon{width:34px;height:34px;border-radius:9px;background:#eef3ea;color:#3f6648;display:grid;place-items:center;flex-shrink:0}
.hub-module-icon-lg{width:46px;height:46px;border-radius:11px}
.hub-module-icon-lg svg{width:22px;height:22px}
.hub-empty{color:var(--h-muted);font-size:12px;padding:6px 0}

/* Module cards on the dashboard */
.hub-module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hub-module-card{display:flex;flex-direction:column;gap:12px;background:var(--h-surface);border:1px solid var(--h-line);border-radius:12px;padding:16px;transition:border-color .15s,box-shadow .15s,transform .15s}
.hub-module-card:hover{border-color:#b9c9b5;box-shadow:0 8px 24px -16px #0f241c66;transform:translateY(-1px)}
.hub-module-text strong{display:block;font-size:14px;font-weight:650}
.hub-module-text small{display:block;font-size:12px;color:var(--h-muted);margin-top:4px;line-height:1.5}
.hub-module-stats{display:flex;gap:18px;margin-top:auto;padding-top:10px;border-top:1px solid var(--h-line)}
.hub-module-stats span{font-size:11px;color:var(--h-muted);display:flex;flex-direction:column}
.hub-module-stats b{font-size:17px}
.hub-module-card .hub-origin{margin-top:0;align-self:flex-start}

/* Tables */
.hub-table-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px}
.hub-table{width:100%;border-collapse:collapse;font-size:13px}
.hub-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--h-muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--h-line);white-space:nowrap}
.hub-table td{padding:11px 10px;border-bottom:1px solid #edf0eb;vertical-align:middle}
.hub-table tr:last-child td{border-bottom:0}
.hub-table tbody tr:hover{background:#f8faf6}
.hub-table tr[hidden]{display:none}
.hub-pill{display:inline-block;font-size:11px;font-weight:650;padding:3px 9px;border-radius:999px;white-space:nowrap}
.hub-tone-ok{background:#e4f2e8;color:#246a3e}.hub-tone-warn{background:#fbefd9;color:#8f530b}.hub-tone-danger{background:#f9e2de;color:#a12f23}.hub-tone-info{background:#e2edf7;color:#225984}.hub-tone-neutral{background:#eef1ec;color:#4e5d55}
.hub-dot.hub-tone-ok{background:#3e9a5f}.hub-dot.hub-tone-warn{background:#e0a03a}.hub-dot.hub-tone-danger{background:#d0503f}.hub-dot.hub-tone-info{background:#4a86bd}.hub-dot.hub-tone-neutral{background:#9aa79f}
.hub-chips{display:flex;gap:6px;flex-wrap:wrap}
.hub-chip{border:1px solid var(--h-line);background:var(--h-surface);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer}
.hub-chip[aria-pressed="true"]{background:var(--h-primary);border-color:var(--h-primary);color:#fff!important}

/* Progress */
.hub-progress li{padding:9px 0}
.hub-progress-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.hub-bar{height:8px;border-radius:999px;background:#edf1ea;overflow:hidden}
.hub-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3f7a55,#5c9a6e)}

/* Board */
.hub-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hub-board-col{background:var(--h-canvas);border-radius:10px;padding:10px;min-height:120px}
.hub-board-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--h-muted);margin-bottom:10px;display:flex;justify-content:space-between}
.hub-board-card{background:var(--h-surface);border:1px solid var(--h-line);border-radius:9px;padding:10px 11px;margin-bottom:8px}
.hub-board-card strong{display:block;font-size:13px}
.hub-board-card small{display:block;font-size:12px;color:var(--h-muted);margin-top:3px}
.hub-board-card span{display:block;font-size:11px;color:#8a4a22;margin-top:6px}

/* Toast */
.hub-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:#15302a;color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px #0b1d1655;max-width:calc(100% - 32px);text-align:center}
.hub-toast[hidden]{display:none}

/* ── Tablet & mobile ───────────────────────────────────────────────────── */
@media(max-width:1100px){.hub-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-board{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-user-text{display:none}}
@media(max-width:900px){
  .hub-app{grid-template-columns:1fr}
  .hub-sidebar{position:fixed;top:0;bottom:0;left:0;width:min(280px,84vw);z-index:65;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px #0006}
  .hub-menu-open .hub-sidebar{transform:none}
  .hub-menu-open .hub-scrim{display:block;position:fixed;inset:0;z-index:64;background:#0b1d1666}
  .hub-menu-btn{display:grid!important}
  .hub-topbar{padding:10px 14px;gap:10px}
  .hub-search{display:none}
  .hub-company{flex:1;min-width:0}
  .hub-company strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hub-content{padding:20px 16px 40px}
  .hub-dash-grid{grid-template-columns:1fr}
  .hub-page-head{flex-direction:column}
}
@media(max-width:700px){
  .hub-ribbon{flex-wrap:wrap;gap:8px;padding:8px 12px;font-size:11px}
  .hub-back{margin-left:0;width:100%;text-align:center}
  .hub-page-head h1{font-size:22px}
  .hub-stat{padding:12px}
  .hub-stat-value{font-size:20px}
  .hub-board{grid-template-columns:1fr}
  .hub-table-wrap{margin:0;padding:0;overflow:visible}
  .hub-table thead{display:none}
  .hub-table,.hub-table tbody,.hub-table tr,.hub-table td{display:block;width:100%}
  .hub-table tr{border:1px solid var(--h-line);border-radius:10px;padding:6px 12px;margin-bottom:10px}
  .hub-table td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #edf0eb;text-align:right}
  .hub-table td:before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--h-muted);text-align:left;flex-shrink:0}
  .hub-table tr:last-child td{border-bottom:1px dashed #edf0eb}
  .hub-table td:last-child{border-bottom:0}
  .hub-actions{width:100%}
  .hub-actions .hub-btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.hub-sidebar,.hub-module-card{transition:none}}
@media print{.hub{display:none!important}}
/* Headings receive focus for screen readers when a page opens; no visible ring needed. */
.hub [tabindex="-1"]:focus{outline:none}