@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/TildaSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/TildaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/TildaSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/TildaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme] {
  --font-ui: 'TildaSans', system-ui, sans-serif;
  --font-display: 'TildaSans', system-ui, sans-serif;
}

/* ── Trim oversized type — the base theme's stat/heading sizes read too
   large for dense numeric values like currency totals (were wrapping). ── */
.page-title h1 { font-size: 22px; }
.stat-val { font-size: 25.5px; }

/* ── Item detail side panel ── */
.side-panel-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  z-index: 1500; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.side-panel-scrim.open { opacity: 1; pointer-events: all; }

.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  background: var(--panel-solid); border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,0.65);
  z-index: 1600; transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.side-panel.open { transform: translateX(0); }
.side-panel-body { flex: 1; overflow-y: auto; }
.side-panel-loading {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-mute); font-size: 15px; gap: 8px;
}

.detail-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--panel-solid); z-index: 2;
}
.detail-head .close-btn {
  margin-left: auto; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; flex: none;
}
.detail-head .close-btn:hover { color: var(--text); border-color: var(--border-strong); }

.detail-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 22px; }

.detail-section { padding: 4px 22px 22px; }
.detail-section h4 {
  display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 800; color: var(--text-dim); margin: 0 0 12px;
}
.detail-section h4 svg { width: 15px; height: 15px; color: var(--accent); }

.wh-row {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.wh-row:last-child { border-bottom: none; }

.mv-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mv-row:last-child { border-bottom: none; }
.mv-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.mv-ico svg { width: 14px; height: 14px; }
.mv-body { flex: 1; min-width: 0; }
.mv-body .t { font-size: 15px; font-weight: 600; color: var(--text); }
.mv-body .s { font-size: 13px; color: var(--text-mute); margin-top: 2px; }
.mv-meta { text-align: right; flex: none; }
.mv-meta .q { font-size: 15px; font-weight: 700; }
.mv-meta .d { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

/* ── Detail panel — compact type scale (~75% of the base sizes above) ── */
.detail-compact .kpi-mini .v { font-size: 23px; }
.detail-compact .kpi-mini .l { font-size: 9px; }
.detail-compact .detail-section h4 { font-size: 10px; }
.detail-compact .wh-row span,
.detail-compact .wh-row b { font-size: 11.5px; }
.detail-compact .mv-body .t { font-size: 11.5px; }
.detail-compact .mv-body .s { font-size: 10px; }
.detail-compact .mv-meta .q { font-size: 11.5px; }
.detail-compact .mv-meta .d { font-size: 9px; }
.detail-compact .badge { font-size: 10px; padding: 3px 7px; }
.detail-compact .empty { font-size: 11.5px; }
.detail-compact .empty svg { width: 22px; height: 22px; }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kv-item { display: flex; flex-direction: column; gap: 2px; }
.kv-item-full { grid-column: 1 / -1; }
.kv-item .k { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.kv-item .v { font-size: 12px; color: var(--text); font-weight: 600; }

/* ── hypermed-web: notification bell dropdown anchor ── */
.notif-wrap { position: relative; }

/* ── hypermed-web: expandable sidebar sub-nav (Inventory/Sales/Finance) —
   gwgps-app's original inventory nav was flat, no grouping needed there.
   This system's nav has real groups (mirrors bienhypermed's Flutter sidebar),
   so the pattern is new here, built to match the existing nav-item language. ── */
.nav-sub {
  display: flex; flex-direction: column; margin: 0 0 4px 30px;
  border-left: 1px solid var(--border); padding-left: 12px;
}
[data-collapsed="true"] .nav-sub { display: none; }
.nav-subitem {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--text-mute); font-size: 15px; font-weight: 600;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-subitem:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.nav-subitem.active { color: var(--accent); background: var(--accent-soft); }

/* ── hypermed-web: placeholder "coming soon" page for not-yet-built modules ── */
.coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px; color: var(--text-mute);
}
.coming-soon .ico {
  width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--panel-2);
  border: 1px solid var(--border); display: grid; place-items: center; margin-bottom: 18px; color: var(--accent);
}
.coming-soon h2 { font-family: var(--font-display); color: var(--text); font-size: 22px; margin: 0 0 6px; }
.coming-soon p { font-size: 15.5px; max-width: 360px; margin: 0; }