/*
 * Meerdervoort portal theme - global layer (document scope).
 *
 * Loaded once via Experience Builder > Settings > Advanced > Head Markup:
 *   <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/MvPortalTheme" />
 *
 * Defines @font-face (fonts must be declared at document level: native shadow
 * DOM ignores @font-face inside component CSS) and the --mv-* design tokens on
 * :root, which inherit into every LWC. Component-level styling lives in the
 * CSS-only module c/mvTheme, which carries the same fallback values.
 *
 * Source: Meerdervoort Brand Manual 2025 v3.
 */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Sawton Bauhaus';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/sfsites/c/resource/MvFonts/SawtonBauhaus-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Sawton Bauhaus';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/sfsites/c/resource/MvFonts/SawtonBauhaus-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/sfsites/c/resource/MvFonts/WorkSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/sfsites/c/resource/MvFonts/WorkSans-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/sfsites/c/resource/MvFonts/WorkSans-SemiBold.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */

:root {
  /* Brand palette (Brand Manual p.6) */
  --mv-color-vertrouwen: #59cbe8;
  --mv-color-trots: #f3953f;
  --mv-color-perspectief: #1d2728;
  --mv-color-luxe: #e2dac7;
  --mv-color-fundering: #005670;
  --mv-color-ruimte: #3bb1e6;

  /* Derived tints */
  --mv-color-fundering-dark: #003747;
  --mv-color-fundering-tint: #e0f0f2;
  --mv-color-luxe-light: #f1ede3;
  --mv-color-vertrouwen-tint: #eef9fc;
  --mv-color-selected: #d4f3fb;

  /* Semantic colors */
  --mv-color-primary: var(--mv-color-fundering);
  --mv-color-primary-hover: var(--mv-color-fundering-dark);
  --mv-color-primary-contrast: #ffffff;
  --mv-color-accent: var(--mv-color-vertrouwen);
  --mv-color-highlight: var(--mv-color-trots);
  --mv-color-text: var(--mv-color-perspectief);
  --mv-color-text-muted: #5c6466;
  --mv-color-text-subtle: #8a9194;
  --mv-color-link: var(--mv-color-fundering);
  --mv-color-link-hover: var(--mv-color-ruimte);
  --mv-color-surface: #ffffff;
  --mv-color-surface-alt: #fafafa;
  --mv-color-surface-muted: #f3f5f6;
  --mv-color-border: #e5e5e5;
  --mv-color-border-strong: #cfd6d9;
  --mv-color-success: #2e7d32;
  --mv-color-success-bg: #e6f4ea;
  --mv-color-success-border: #c3e6cb;
  --mv-color-warning: var(--mv-color-trots);
  --mv-color-warning-bg: #fff4e8;
  --mv-color-error: #c23934;
  --mv-color-error-bg: #fef3f2;
  --mv-color-error-border: #f5c6c3;

  /* Typography (Brand Manual p.19: Sawton Bauhaus Medium headlines, Work Sans Regular body) */
  --mv-font-heading: 'Sawton Bauhaus', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mv-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mv-font-weight-heading: 500;
  --mv-font-weight-body: 400;
  --mv-font-weight-emphasis: 600;
  --mv-text-h1: 2rem;
  --mv-text-h2: 1.5rem;
  --mv-text-h3: 1.25rem;
  --mv-text-body: 1rem;
  --mv-text-small: 0.875rem;
  --mv-text-xsmall: 0.75rem;
  --mv-line-height-heading: 1.15;
  --mv-line-height-body: 1.5;

  /* Shape and elevation */
  --mv-radius-sm: 4px;
  --mv-radius-md: 8px;
  --mv-radius-lg: 16px;
  --mv-radius-pill: 9999px;
  --mv-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.08);
  --mv-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Spacing */
  --mv-space-xs: 0.25rem;
  --mv-space-sm: 0.5rem;
  --mv-space-md: 1rem;
  --mv-space-lg: 1.5rem;
  --mv-space-xl: 2.5rem;
}

/* ---------- Global overrides for standard (dxp) components ---------- */

/*
 * Rounded card look for standard Record List / Record Detail components.
 * Add the CSS class "roundedListBox" to the component in Experience Builder.
 */
.roundedListBox,
.roundedListBox lightning-card,
.roundedListBox .slds-card {
  border-radius: var(--mv-radius-lg) !important;
  overflow: hidden !important;
  background-color: var(--mv-color-surface);
  box-shadow: var(--mv-shadow-card);
}

.roundedListBox .recordListHeader,
.roundedListBox .slds-card__header,
.roundedListBox header {
  border-top-left-radius: var(--mv-radius-lg) !important;
  border-top-right-radius: var(--mv-radius-lg) !important;
  overflow: hidden;
  clip-path: inset(0 round var(--mv-radius-lg) var(--mv-radius-lg) 0 0);
}

.roundedListBox .slds-card__body,
.roundedListBox table {
  border-bottom-left-radius: var(--mv-radius-lg);
  border-bottom-right-radius: var(--mv-radius-lg);
  overflow: hidden;
}

.roundedListBox ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.roundedListBox ::-webkit-scrollbar-thumb {
  background: var(--mv-color-border-strong);
  border-radius: var(--mv-radius-md);
}

.roundedListBox ::-webkit-scrollbar-thumb:hover {
  background: var(--mv-color-text-subtle);
}

.roundedListBox ::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--mv-radius-lg);
}

.roundedListBox {
  scrollbar-width: thin;
  scrollbar-color: var(--mv-color-border-strong) transparent;
  border-radius: var(--mv-radius-lg);
}

/*
 * Fixed-height, scrollable Record List. Add the CSS class "fixedRecordList"
 * to the component in Experience Builder.
 */
.fixedRecordList .slds-card__body,
.fixedRecordList .record-list-container,
.fixedRecordList {
  min-height: 413px;
  max-height: 413px;
  overflow-y: auto;
  display: block;
  border-radius: var(--mv-radius-lg);
}