/* Module UI: shared styles on the design tokens (css/module-tokens.css).
   Everything here is scoped to a module host, so the older demo pages that define the same vcs-* class names in their own
   style blocks (and run the shell as .mod-legacy) look exactly as they did. */

/* ---- Utilities ---- */
/* Screen-reader-only text, on every page (not scoped: /m/{id} under MainLayout and /embed under EmptyLayout both load this file). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- The light/dark toggle ---- */
.mod-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mod-space-2);
  padding: var(--mod-space-1) var(--mod-space-3);
  min-height: 2rem;
  background: transparent;
  color: var(--mod-header-control, var(--mod-text-muted));
  border: 1px solid var(--mod-border-strong);
  border-radius: var(--mod-radius-pill);
  font: inherit;
  font-size: var(--mod-text-sm);
  cursor: pointer;
}
.mod-theme-toggle:hover { background: var(--mod-hover); color: var(--mod-header-text, var(--mod-text)); }
.mod-theme-toggle[aria-pressed="true"] { border-color: var(--mod-accent); }

/* ---- A host's header row: the title on the left, its actions and the theme toggle on the right ---- */
.mod-host .mod-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mod-space-3);
  flex-wrap: wrap;
}
.mod-host .mod-actions {
  display: flex;
  align-items: center;
  gap: var(--mod-space-3);
  flex-wrap: wrap;
}

/* ---- The dealer's colour (P1.2): a host that writes its brand (Shared DealerBrandStyle) carries one accent per theme in --mod-brand-*.
   The dealer's colour is lightened in dark mode or darkened in light mode, same hue, when it would not read; these rules pick the pair for the
   theme in force, so --mod-accent and --mod-on-accent (and --brand, --brand-ink) are always legible. ---- */
.mod-host[style*="--mod-brand-light"] {
  --mod-accent: var(--mod-brand-light);
  --mod-on-accent: var(--mod-brand-light-on);
}
:root[data-theme="dark"] .mod-host[style*="--mod-brand-dark"] {
  --mod-accent: var(--mod-brand-dark);
  --mod-on-accent: var(--mod-brand-dark-on);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mod-host[style*="--mod-brand-dark"] {
    --mod-accent: var(--mod-brand-dark);
    --mod-on-accent: var(--mod-brand-dark-on);
  }
}

/* ---- The dealer's mark (P1.2): its logo, else its name as written. Never another company's. ---- */
.mod-host .mod-brand-logo {
  display: block;
  height: 2rem;
  max-width: 9rem;
  object-fit: contain;
}
.mod-host .mod-brand-name {
  font-size: var(--mod-text-md);
  font-weight: 700;
  color: var(--mod-header-text, var(--mod-text));
}

/* ---- Buttons, links and fields for the module hosts ---- */
.mod-host .mod-btn {
  padding: 0.5rem 1rem;
  background: var(--mod-surface);
  color: var(--mod-text);
  border: 1px solid var(--mod-border-strong);
  border-radius: var(--mod-radius-md);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mod-host .mod-btn:hover:not(:disabled) { background: var(--mod-hover); }
.mod-host .mod-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mod-host .mod-btn-primary {
  background: var(--mod-accent);
  color: var(--mod-on-accent);
  border-color: var(--mod-accent);
}
.mod-host .mod-btn-primary:hover:not(:disabled) { background: var(--mod-accent); filter: brightness(0.92); }
.mod-host .mod-btn-link {
  padding: 0.25rem 0.5rem;
  background: none;
  border: 0;
  color: var(--mod-link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.mod-host .mod-field {
  min-width: 0;
  padding: 0.45rem 0.6rem;
  background: var(--mod-input-bg);
  color: var(--mod-text);
  border: 1px solid var(--mod-border-strong);
  border-radius: var(--mod-radius-sm);
  font: inherit;
}

/* ---- The side panel of the voice-coach shell (CoachModuleHost's Sidebar) ---- */
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-title {
  margin: 0 0 var(--mod-space-1);
  color: var(--mod-text);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-sub {
  margin: 0 0 var(--mod-space-3);
  color: var(--mod-text-muted);
  font-size: 0.82rem;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-row {
  display: block;
  margin-bottom: var(--mod-space-2);
  color: var(--mod-text);
  font-size: var(--mod-text-sm);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-row-due {
  padding-left: var(--mod-space-2);
  border-left: 3px solid var(--mod-accent);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-note {
  margin: var(--mod-space-2) 0 var(--mod-space-3);
  color: var(--mod-text-muted);
  font-size: var(--mod-text-xs);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-muted {
  display: block;
  color: var(--mod-text-muted);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-group {
  display: grid;
  gap: var(--mod-space-1);
  border: 0;
  margin: 0 0 var(--mod-space-3);
  padding: 0;
  min-width: 0;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-side-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--mod-link);
  font: inherit;
  font-size: var(--mod-text-sm);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-scenario-btn {
  display: block;
  width: 100%;
  margin: 0 0 var(--mod-space-2);
  padding: var(--mod-space-2) var(--mod-space-3);
  background: var(--mod-surface-2);
  color: var(--mod-text);
  border: 1px solid var(--mod-border-strong);
  border-radius: var(--mod-radius-md);
  font: inherit;
  font-size: var(--mod-text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mod-motion-fast) var(--mod-ease), border-color var(--mod-motion-fast) var(--mod-ease);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-scenario-btn:hover:not(:disabled) { background: var(--mod-hover); border-color: var(--mod-accent); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-scenario-btn.active { border-color: var(--mod-accent); background: var(--mod-accent-soft); color: var(--mod-accent-soft-text); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-scenario-btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* Inventory (sales floor): the cards are InventoryPanel's own scoped styles (Module UI PR 13). */

/* Figure tiles (Fixed Ops KPI): buttons, so Tab and Enter work */
.vcs-page.mod-host:not(.mod-legacy) .vcs-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mod-space-2); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-kpi-card {
  display: block;
  width: 100%;
  padding: var(--mod-space-3);
  background: var(--mod-surface-2);
  color: var(--mod-text);
  border: 1px solid var(--mod-border-strong);
  border-top: 3px solid var(--mod-accent);
  border-radius: var(--mod-radius-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--mod-motion-fast) var(--mod-ease), transform var(--mod-motion-fast) var(--mod-ease);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-kpi-card:hover { background: var(--mod-hover); transform: translateY(-1px); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-kpi-label {
  display: block;
  color: var(--mod-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-kpi-value { display: block; margin: 2px 0; color: var(--mod-text); font-size: 1.4rem; font-weight: 700; }

/* Small status labels (replace the Bootstrap badge classes) */
.vcs-page.mod-host:not(.mod-legacy) .vcs-badge {
  display: inline-block;
  margin-left: var(--mod-space-1);
  padding: 1px var(--mod-space-2);
  border-radius: var(--mod-radius-pill);
  font-size: var(--mod-text-xs);
  font-weight: 600;
  border: 1px solid var(--mod-border-strong);
  background: var(--mod-surface-2);
  color: var(--mod-text);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-badge-accent { background: var(--mod-accent-soft); color: var(--mod-accent-soft-text); border-color: var(--mod-accent-soft-border); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-badge-success { background: var(--mod-success-bg); color: var(--mod-success-text); border-color: var(--mod-success-border); }

/* A checkbox with its label (replaces form-check) */
.vcs-page.mod-host:not(.mod-legacy) .vcs-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mod-space-2);
  margin-bottom: var(--mod-space-2);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-check input { margin-top: 0.2rem; accent-color: var(--mod-accent); }
.vcs-page.mod-host:not(.mod-legacy) .vcs-check label { font-size: var(--mod-text-sm); color: var(--mod-text); }

/* Inside the sidebar, native fields and tables take the tokens too */
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar table { border-collapse: collapse; }
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar th,
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar td { padding: 2px var(--mod-space-2) 2px 0; text-align: left; }
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar a { color: var(--mod-link); }

/* ---- The app's layout paints a dark gradient behind every page; while a module host is open the host's surface shows instead ---- */
body.mod-host .app-container { background: var(--mod-bg); color: var(--mod-text); }
body.mod-host .app-main { padding: 0; max-width: none; }
.qz.mod-host, .mpi.mod-host, .vo.mod-host, .amh.mod-host { background: var(--mod-bg); color: var(--mod-text); }

/* ---- Panel forms: fields fill the panel, a row shares its width, a submit is a full-width primary button ---- */
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar .vcs-text-input {
  display: block;
  width: 100%;
  margin-bottom: var(--mod-space-2);
  box-sizing: border-box;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar .vcs-field-row {
  display: flex;
  gap: var(--mod-space-2);
  margin-bottom: var(--mod-space-2);
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar .vcs-field-row .vcs-text-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
}
.vcs-page.mod-host:not(.mod-legacy) .vcs-sidebar .mod-btn {
  display: block;
  width: 100%;
  margin-bottom: var(--mod-space-2);
}

/* ---- The customer notice, Tap to start and the idle countdown (P1.8, P1.9). A layer over the host; touch targets are at least 48 px. ---- */
.men-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mod-space-4);
  background: var(--mod-bg);
  color: var(--mod-text);
  overflow-y: auto;
}
.men-overlay .men-card {
  width: 100%;
  max-width: 34rem;
  background: var(--mod-surface);
  border: 1px solid var(--mod-hairline);
  border-radius: var(--mod-radius-lg);
  padding: var(--mod-space-5);
  text-align: left;
}
.men-overlay .men-tap, .men-overlay .men-countdown { text-align: center; }
.men-overlay .men-mark { margin-bottom: var(--mod-space-3); min-height: 2rem; }
.men-overlay .men-title { margin: 0 0 var(--mod-space-3); font-size: var(--mod-text-xl); line-height: 1.25; color: var(--mod-text); }
.men-overlay .men-text { margin: 0 0 var(--mod-space-3); font-size: var(--mod-text-md); line-height: var(--mod-leading); color: var(--mod-text); }
.men-overlay .men-link { color: var(--mod-link); text-decoration: underline; }
.men-overlay .men-actions { display: flex; flex-wrap: wrap; gap: var(--mod-space-3); margin-top: var(--mod-space-4); }
.men-overlay .men-tap .men-actions, .men-overlay .men-countdown .men-actions { justify-content: center; }
.men-overlay .men-btn { min-height: 48px; min-width: 48px; padding: var(--mod-space-3) var(--mod-space-5); font-size: var(--mod-text-md); }
.men-overlay .men-btn-big { min-height: 64px; min-width: 14rem; font-size: var(--mod-text-lg); }
@media (max-width: 480px) {
  .men-overlay .men-actions { flex-direction: column; }
  .men-overlay .men-btn { width: 100%; }
}