/* @import must be the FIRST rule in the file: a browser ignores one that
   appears after any other rule, which silently fell back to the kit's Inter. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap");

/* ============================================================================
   FORLANN — PER-CLIENT BRAND OVERRIDES
   ----------------------------------------------------------------------------
   The ONLY stylesheet this client copy edits. Loaded after theme.css, so
   anything set here wins. Every value below is traceable to a client document:

     accent  #C0541B  "Forlann Orange"  01-brand/colors/colors forlann.pdf
     beige   #F8F6F2  "Warm Beige"      same
     display Montserrat                 01-brand/fonts/Typografie forlann.pdf
     body    Nunito                     same

   Do NOT add structural overrides here (ink weights, lines, status colours,
   shadows, spacing). Those are locked so a client copy cannot drift the design
   system, and a locked value is what lets theme.css be replaced wholesale when
   the upstream build improves.
   ============================================================================ */

/* Montserrat and Nunito are the webshop's faces, so the dashboard matches what
   Rune, Dries and Tiemen already look at every day. Self-hosting would be
   better for an EU-hosted deployment with no third-party calls -- noted as a
   follow-up; see docs/DECISIONS.md. */

:root {
  /* ---- ACCENT: Forlann Orange ------------------------------------------- */
  --client-accent:      #C0541B;
  /* darkened for text sitting on an accent tint -- keeps AA contrast */
  --client-accent-ink:  #96400F;
  --client-accent-glow: rgba(192, 84, 27, .16);
  --client-gradient:    linear-gradient(110deg, #C0541B, #D97A45);

  /* ---- TYPE ------------------------------------------------------------- */
  --client-font-display: "Montserrat", "Inter", system-ui, sans-serif;
  --client-font-sans:    "Nunito", "Inter", system-ui, sans-serif;
  /* the kit's mono default is kept: Forlann has no mono face specified, and
     inventing one would be a design decision the brand book did not make */
}

/* ----------------------------------------------------------------------------
   The webshop's heading treatment, from 01-brand/design/dashboard:
   uppercase, size factor 0.8, letter spacing 18%. Applied to the page
   furniture only -- data in tables and cards stays sentence case, because
   uppercase hurts scanning for numbers and SKUs, which is most of this UI.
   ---------------------------------------------------------------------------- */
h1, h2, h3, .page-header h1 {
  font-family: var(--client-font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: calc(1em * .8);
}

/* Warm Beige is the brand's background. The kit's light canvas is a cool
   off-white, so this is the one surface value worth re-pointing: it is what
   makes the dashboard read as Forlann rather than as 187N. */
:root:not([data-theme="dark"]) {
  --canvas:   #F8F6F2;
  --canvas-2: #EFEBE4;
}

/* Connection notice bar — rood bij missende/kapotte live connecties */
.mc-conn-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.mc-conn-bar-inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-conn-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.mc-conn-bar-text { flex: 1; min-width: 200px; }
.mc-conn-bar-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.mc-conn-bar--alert {
  background: #7f1d1d;
  color: #fff;
  border-bottom-color: #991b1b;
}
.mc-conn-bar--alert .mc-conn-bar-icon { background: #fff; color: #7f1d1d; }
.mc-conn-bar--warn {
  background: #78350f;
  color: #fffbeb;
  border-bottom-color: #92400e;
}
.mc-conn-bar--warn .mc-conn-bar-icon { background: #fde68a; color: #78350f; }
body.mc-conn-bar-visible .app { margin-top: 44px; }
body.mc-conn-bar-visible .sidebar { top: 44px; height: calc(100vh - 44px); }