/* =====================================================================
   CSM SHARED STYLES  —  https://www.csmcenter.com/shared/csm-ui.css
   One file that every CSM Center app loads. Change a style here, redeploy
   CSM Center, and every app picks it up on its next page load.

   It ONLY touches elements that carry one of these labels, so anything
   else in an app can never be affected:
     .csm-header            the dark top bar (every app)
     .csm-header--csm       ...standard CSM app (CSM logo on the right)
     .csm-header--reslynx   ...ResLynx-managed app (keeps "Powered by" image)
     .csm-header-right      right-hand group in the top bar (app items + logo)
     .csm-logo              the CSM logo image in the top bar
     .csm-home              Home / Back button in the top bar
     .csm-menu .csm-card    menu buttons — ONLY on an app's first menu screen
                            (CSM Center, Supplier Net Rates, Voucher Generator,
                            ResLynx Tools)

   Each app also carries a copy of the header + Home rules as a fallback,
   so if this file ever fails to load the apps still look normal.
   CSM logo file: https://www.csmcenter.com/shared/csm-logo.png
   ===================================================================== */

/* ---------- TOP BAR (header) ---------- */
.csm-header {
  background: #1C1C1C;
  height: 68px;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.csm-header .topbar-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 600; color: #F0EDE6;
  letter-spacing: 0.04em; line-height: 1; margin: 0;
}
.csm-header .topbar-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: #AAA; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1; margin-top: 3px;
}
.csm-header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.csm-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
/* CSM logo shows on CSM Center pages only (their logo also has .topbar-logo).
   Hidden in every other app — delete this rule to bring it back everywhere. */
.csm-logo:not(.topbar-logo) { display: none; }

/* ---------- HOME / BACK BUTTON ---------- */
.csm-home {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  margin-right: 1.25rem;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
}
.csm-home:hover { background: rgba(255,255,255,0.08); }
.csm-home span {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: #F0EDE6; letter-spacing: 0.05em;
}

/* ---------- MENU BUTTONS (first menu screen only) ----------
   Nothing here yet on purpose: each menu app keeps its current card look.
   To restyle all menu buttons at once, add rules here using
   ".csm-menu .csm-card" (and ".csm-menu .csm-card:hover"), e.g.
     .csm-menu .csm-card { border-radius: 14px; }
   They will only ever apply to the four menu screens listed above. */

/* ---------- CATEGORY HEADINGS (menu screens only) ----------
   Large serif heading with a thin gold line underneath (chosen 2026-11-07).
   Applies to section headings on CSM Center, Supplier Net Rates and
   ResLynx Tools. The red "Draft version" heading keeps its warning look. */
.csm-menu .tools-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px !important; font-weight: 600 !important;
  letter-spacing: 0.01em; text-transform: none;
  color: #1C1C1C !important;
  padding-bottom: 8px;
  border-bottom: 2px solid #B8943F;
  margin: 2rem 0 16px !important;
}
.csm-menu .tools-label.draft {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: #C0392B !important; border-bottom-color: #C0392B;
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 760px) {
  .csm-header { padding: 0 1rem; }
  .csm-home { margin-right: 0.5rem; }
}