/* =====================================================================
 * ENP Estimator — shared design tokens
 *
 * Source of truth for all HMI surfaces. See HMI_LANDING_V1_DESIGN_NOTE.md
 * for the design rationale and the planned expansion (type, spacing,
 * radii, elevation, motion).
 *
 * PR #1: extracted to a shared file (pure refactor, no visual change).
 * PR #2: re-token to brand colors. --accent now sources from
 *        --brand-red; --brand-red-soft is the hover/light variant.
 * PR #3: vendored Oswald (latin + latin-ext) as --font-display.
 *        Body stays system stack via --font-body.
 * ===================================================================== */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/static/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/static/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette */
  --brand-red: #EE0D09;
  --brand-red-soft: #FFC2C2;

  /* Type */
  --font-display: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, monospace;

  /* Surfaces */
  --bg: #f4f6f8;
  --card: #ffffff;

  /* Ink */
  --ink: #182026;
  --muted: #5c6b73;

  /* Lines / dividers */
  --line: #d8dee2;

  /* Accent — sourced from --brand-red; legacy templates keep using
   * var(--accent) and pick up the new color automatically. */
  --accent: var(--brand-red);
  --accent-ink: #ffffff;

  /* Elevation */
  --shadow: 0 4px 16px rgba(15, 25, 35, 0.08);
  --shadow-hover: 0 8px 28px rgba(15, 25, 35, 0.14);

  /* Status surfaces (used by login form) */
  --error-bg: #ffe7e3;
  --error-ink: #8a1f11;
  --info-bg: #eef3f7;

  /* Spacing scale (4px-based).
   *
   * chat.css and other surfaces reference these as `var(--sp-N)`.
   * Before this section was added, every `var(--sp-*)` was silently
   * undefined and rendered as 0 — the composer had no horizontal
   * padding, the message-list gap collapsed, sidebar items stacked
   * flush. Lock the scale in tokens.css so all surfaces share one
   * source of truth. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Font size scale */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;

  /* Motion / transition durations */
  --motion-fast: 150ms;
  --motion-medium: 250ms;

  /* Border radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* =====================================================================
 * Persistent top bar
 *
 * Used across /, /admin, /estimation, /crm, /procurement, /wip.
 * Markup is in templates/_topbar.html. Brand mark + breadcrumb + nav.
 * Brand mark uses filter:invert(1) on the existing white-on-transparent
 * logo so it reads as a dark mark on the light bar (swap for a real
 * dark-mark variant when ENP supplies one).
 * ===================================================================== */

.top-bar-persistent {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
  min-height: 56px;
}

.top-bar-persistent .brand-mark {
  position: static;          /* override the standalone absolute one */
  display: block;
  line-height: 0;
  flex: 0 0 auto;
}
.top-bar-persistent .brand-mark img {
  display: block;
  height: 32px;
  width: auto;
  filter: invert(1);
}
.top-bar-persistent .brand-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.top-bar-persistent .breadcrumb {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.top-bar-persistent .breadcrumb li { display: inline-flex; align-items: center; }
.top-bar-persistent .breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.top-bar-persistent .breadcrumb a:hover { text-decoration: underline; }
.top-bar-persistent .breadcrumb-sep {
  margin: 0 8px;
  color: var(--line-strong);
}
.top-bar-persistent .breadcrumb [aria-current="page"] {
  color: var(--ink);
}

.top-bar-persistent .top-bar-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ink-muted);
}
.top-bar-persistent .top-bar-nav a {
  /* Quiet link: same muted gray as the surrounding nav, darkens on
   * hover with an underline. The brand-red accent is reserved for
   * primary CTAs and breadcrumb links, not the nav shortcuts. */
  color: var(--ink-muted);
  text-decoration: none;
}
.top-bar-persistent .top-bar-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.top-bar-persistent .top-bar-nav strong { color: var(--ink); margin-right: 6px; }
.top-bar-persistent .top-bar-nav form { display: inline; }
.top-bar-persistent .top-bar-nav button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.top-bar-persistent .top-bar-nav button:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

@media (max-width: 520px) {
  .top-bar-persistent {
    flex-wrap: wrap;
    gap: 12px;
  }
  .top-bar-persistent .breadcrumb { order: 3; flex-basis: 100%; }
}

/* =====================================================================
 * Apps launcher (3x3 dot-grid -> popup with module shortcuts)
 *
 * Mirrors the Google apps-launcher pattern. The launcher button lives
 * in the persistent top bar (.top-bar-nav) and opens a popup panel
 * with one tile per module (Estimation, CRM, WIP, Procurement).
 *
 * Markup is in templates/_topbar.html (inside the top_bar macro).
 * Behaviour lives in static/js/apps-launcher.js.
 *
 * Layout:
 *   .apps-launcher-wrap     position: relative (anchor for the panel)
 *     .apps-launcher-btn    40x40 dot-grid button (3x3 of circles)
 *     .apps-launcher-panel  absolute popup, 2-col grid of tiles
 *       .apps-launcher-tile (one per module)
 *         <svg>             24x24 inline monochrome line icon
 *         .apps-launcher-tile-label  module name
 *
 * The icons are inline SVGs in the same style envelope as the sidebar
 * (viewBox 0 0 24 24, stroke=currentColor, stroke-width=2) so the
 * popup reads as the same icon family as templates/_sidebar.html.
 *
 * Hidden state uses the [hidden] attribute (display:none, no flicker).
 * Open animation: JS removes [hidden] AND adds .is-open so the panel
 * fades in via opacity + transform. Close: JS removes .is-open and
 * (after a 200ms timer matching --motion-fast) re-adds [hidden].
 *
 * Reduced motion: transform/opacity transition is disabled.
 * ===================================================================== */

.apps-launcher-wrap {
  position: relative;
  display: inline-flex;
}

.apps-launcher-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast);
}
.apps-launcher-btn:hover {
  background: var(--line);
  border-color: var(--line-strong);
}
.apps-launcher-btn:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.apps-launcher-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: var(--ink-muted);
  transition: fill var(--motion-fast);
}
.apps-launcher-btn:hover .apps-launcher-icon {
  fill: var(--ink);
}

.apps-launcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition:
    opacity var(--motion-fast),
    transform var(--motion-fast);
}
.apps-launcher-panel[hidden] {
  display: none;
}
.apps-launcher-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.apps-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  min-height: 96px;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}
.apps-launcher-tile:hover {
  background: var(--line);
  border-color: var(--line-strong);
}
.apps-launcher-tile:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.apps-launcher-tile > svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--ink-muted);
  stroke: currentColor;
  transition: color var(--motion-fast);
}
.apps-launcher-tile:hover > svg {
  color: var(--ink);
}

.apps-launcher-tile-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 420px) {
  .apps-launcher-panel {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apps-launcher-btn,
  .apps-launcher-icon,
  .apps-launcher-panel,
  .apps-launcher-tile {
    transition: none;
  }
}