/* EMSYS MASTER DESIGN SYSTEM — entry stylesheet
 * The single source of truth for EMSYS software (Sales, Reporting, and beyond).
 * Read guidelines/STYLE-GUIDE.md for the full, binding visual spec. */

/* 1. Brand font — Lato 400 / 700 / 900 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* 2. Design tokens (var(--em-*)) — includes the [data-theme="dark"] overrides */
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/layout.css';

/* 3. Brand base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--em-font-sans);
  background: var(--em-canvas);
  color: var(--em-text-body);
  -webkit-font-smoothing: antialiased;
}
::placeholder { color: var(--em-text-placeholder); }

/* 4. Shared interaction states.
 * Inline styles can't express :hover/:focus, so patterns attach these
 * helper classes. Reuse them verbatim. */
.em-navlink:hover { color: #ffffff !important; }
.em-row:hover     { background: var(--em-row-highlight); }
.em-primary:hover { background: var(--em-primary-hover) !important; }
.em-ghost:hover   { background: var(--em-chip) !important; }
.em-danger:hover  { background: var(--em-danger-tint) !important; }
.em-tab:hover     { color: var(--em-text-heading) !important; }
.em-field:focus {
  border-color: var(--em-primary) !important;
  box-shadow: var(--em-focus-ring);
  outline: none;
}

/* 5. Card surface — the default container for content. */
.em-card {
  background: var(--em-surface);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-card-lg);
  box-shadow: var(--em-shadow-card);
}

/* 6. Aligned numerics — apply to any figure in tables, charts, KPIs. */
.em-num { font-variant-numeric: var(--em-numeric); }

/* 6b. Responsive shell & measure helpers.
 * .em-shell — the page's main container: fills the viewport, honors the
 *   per-tier gutter token, and caps only on ultrawide displays (centered).
 * .em-measure — cap text-heavy blocks (paragraphs, form columns) to a
 *   readable line length even while their container fills the width. */
.em-shell {
  width: 100%;
  max-width: var(--em-shell-max);
  margin-inline: auto;
  padding: var(--em-page-top) var(--em-page-gutter) var(--em-page-bottom);
}
.em-measure { max-width: var(--em-measure); }

/* 6c. Responsive grids — fluid, auto-fitting, and they add columns as width
 * grows (data-dense surfaces fill wide displays). Min track sizes below. */
.em-grid-stats  { display: grid; gap: var(--em-card-gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.em-grid-cards  { display: grid; gap: var(--em-card-gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.em-grid-charts { display: grid; gap: var(--em-card-gap); grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }

/* 6d. Mobile stacking — below tablet, multi-column grids collapse to one. */
@media (max-width: 767px) {
  .em-grid-charts,
  .em-stack-mobile { grid-template-columns: 1fr; }
}

/* 7. Custom scrollbars (nice in dense data tables / charts). */
.em-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.em-scroll::-webkit-scrollbar-thumb { background: rgba(125,145,175,.4); border-radius: 6px; }
.em-scroll::-webkit-scrollbar-track { background: transparent; }