/* Tenant Styles: sneldruk */
/* Generated: 2026-07-19T04:00:00.500Z */

/* ========== ROOT VARIABLES ========== */
:root {
  /* Status Colors */
  --color-primary: #1890ff;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-danger: #ff4d4f;
  --color-info: #13c2c2;

  /* Typography Colors */
  --color-text: #333333;
  --color-heading: #000000;

  /* Background Colors */
  --color-background: #ffffff;
  --color-background-secondary: #f5f5f5;

  /* Border */
  --border-color: #e0e0e0;
  --border-radius: 8px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size: 16px;
  --font-weight: 400;
  --line-height: 1.6;
  --h1-size: 2.5rem;
  --h2-size: 2.0rem;
  --h3-size: 1.5rem;
  --h4-size: 1.0rem;

  /* Fonts — async & non-blocking: loadFontsAsync() reads --font-urls and loads
     the Google CSS off the critical path (no render-blocking @import). */

  /* Heading Typography */
  --heading-font-family: inherit;
  --heading-font-weight: 700;

  /* Typography (new --typography-* contract, matches frontend appearanceVars.js) */
  --typography-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --typography-font-size: 16px;
  --typography-font-weight: 400;
  --typography-color: #333333;
  --typography-line-height: 1.6;
  --typography-hyphens: manual;
  --typography-overflow-wrap: normal;
  --typography-word-break: normal;
  --typography-heading-font-family: inherit;
  --typography-heading-font-weight: 700;
  --typography-heading-color: #000000;
  --typography-h1-size: 2.5rem;
  --typography-h2-size: 2.0rem;
  --typography-h3-size: 1.5rem;
  --typography-h4-size: 1.0rem;

  /* Button Styles */
  --button-font-size: 14px;
  --button-font-weight: 500;
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;
  --button-border-radius: 6px;
  --button-primary-bg: #1890ff;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #e7f7ff;
  --button-secondary-text: #333333;
  --button-border-color: #d9d9d9;
  --button-hover-bg: #e7f7ff;
  --button-disabled-opacity: 0.5;

  /* Button Styles (new contract — matches frontend appearanceVars.js) */
  /* Shorthand padding: prefer buttons.padding; fall back to paddingY / paddingX pair */
  --buttons-padding:                   0.5rem 1rem;
  --buttons-font-size:                 14px;
  --buttons-font-weight:               500;
  --buttons-border-radius:             6px;
  --buttons-border-style:              solid;
  --buttons-border-width:              1px;
  /* borderSides maps to a border-width shorthand: all sides use <w>, individual sides
     set the others to 0. border-style and border-color stay single-valued. */
  --buttons-border-sides:              1px;
  --buttons-primary-color:             #1890ff;
  --buttons-primary-text-color:        #ffffff;
  --buttons-secondary-color:           #e7f7ff;
  --buttons-secondary-text-color:      #333333;
  --buttons-border-color:              #d9d9d9;
  --buttons-hover-color:               #e7f7ff;
  --buttons-hover-text-color:          #1890ff;
  --buttons-hover-border-color:        var(--button-hover-bg);
  --buttons-hover-shadow:              none;
  --buttons-hover-secondary-color:     #666666;
  --buttons-hover-secondary-text-color:#e7f7ff;
  --buttons-box-shadow:                none;
  --buttons-hover-box-shadow:          none;
  --buttons-disabled-opacity:          0.5;
  /* Link / text button */
  --buttons-link-color:                #1890ff;
  --buttons-link-bg:                   #ffffff;
  --buttons-link-hover-color:          #188fff80;
  --buttons-link-hover-bg:             #f5f5f5;

  /* Per-button border + shadow vars. Each button falls back to the shared
     (deprecated) value when its own field is empty. */
  --buttons-primary-border-style: solid;
  --buttons-primary-border-width: 1px;
  --buttons-primary-border-sides: 1px;
  --buttons-primary-border-color: #1890ff;
  --buttons-primary-shadow:       none;
  --buttons-primary-hover-shadow: 0 2px 8px rgba(0,0,0,0.12);

  --buttons-secondary-border-style: solid;
  --buttons-secondary-border-width: 1px;
  --buttons-secondary-border-sides: 1px;
  --buttons-secondary-border-color: #d9d9d9;
  --buttons-secondary-shadow:       none;
  --buttons-secondary-hover-shadow: none;

  --buttons-link-border-style: none;
  --buttons-link-border-width: 0px;
  --buttons-link-border-sides: 0;
  --buttons-link-border-color: transparent;
  --buttons-link-shadow:       none;
  --buttons-link-hover-shadow: none;

  /* Card Styles */
  --card-bg: #ffffff;
  --card-border-width: 1px;
  --card-border-color: var(--border-color);
  --card-border-radius: 8px;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --card-padding: 1.5rem;
  --card-text-color: #666666;
  --card-title-size: 1.25rem;
  --card-title-weight: 600;
  --card-title-color: #333333;
  /* Card hover state — empty string = no override (browser default) */
  --cards-background-color:       #ffffff;
  --cards-border-color:           var(--border-color);
  --cards-border-radius:          8px;
  --cards-border-width:           1px;
  --cards-padding:                1.5rem;
  --cards-box-shadow:             0 2px 8px rgba(0,0,0,0.1);
  --cards-title-font-size:        1.25rem;
  --cards-title-font-weight:      600;
  --cards-title-color:            #333333;
  --cards-text-color:             #666666;
  --cards-hover-background-color: ;
  --cards-hover-border-color:     ;
  --cards-hover-box-shadow:       ;
  --cards-hover-title-color:      ;
  --cards-hover-text-color:       ;

  /* Form Styles */
  --form-border-radius: 4px;
  --form-font-size: ;
  --form-border-style: solid;
  --form-border-width: 1px;
  --form-border-sides: 1px;
  --form-border-color: #d9d9d9;
  --form-bg: #ffffff;
  --form-text-color: #333333;
  --form-padding: 0.75rem;
  --form-focus-color: #1890ff;
  --form-placeholder-color: #bfbfbf;

  /* Toggle/Switch Styles */
  --toggle-bg: #ffffff;
  --toggle-active-color: #1890ff;
  --toggle-inactive-color: #d9d9d9;
  --toggle-handle-color: #ffffff;
  --toggle-border-color: #d9d9d9;
  --toggle-border-radius: 12px;
  --toggle-width: 44px;
  --toggle-height: 22px;
  --toggle-handle-size: 18px;
  --toggle-handle-shape: circle;
  --toggle-padding: 2px;
  --toggle-margin: 0;
  --toggle-text-color: #ffffff;
  --toggle-text-size: 12px;
  --toggle-transition: all 0.3s ease;

  /* Slider Styles */
  --slider-track-color: #f0f0f0;
  --slider-active-track-color: #1890ff;
  --slider-handle-color: #ffffff;
  --slider-handle-border-color: #1890ff;
  --slider-handle-size: 14px;
  --slider-track-height: 4px;
  --slider-handle-border-width: 2px;
  --slider-hover-handle-size: 16px;

  /* Spacing */
  --max-width: 1200px;

  /* ===== Plural-name aliases =====
     The frontend runtime (appearanceVars.js) sets variables under plural
     names (--forms-*, --toggles-*, --sliders-*); the backend's existing
     scoped rules use singular names (--form-*, --toggle-*, --slider-*).
     Emitting both keeps either convention working — the singular variants
     are what the .public-scope .ant-* rules consume below; the plural
     variants match whatever the frontend sets directly on document.documentElement
     at runtime, so values stay aligned regardless of load order. */
  --forms-border-radius:    var(--form-border-radius);
  --forms-font-size:        var(--form-font-size);
  --forms-padding:          var(--form-padding);
  --forms-border-style:     var(--form-border-style);
  --forms-border-width:     var(--form-border-width);
  --forms-border-sides:     var(--form-border-sides);
  --forms-border-color:     var(--form-border-color);
  --forms-background-color: var(--form-bg);
  --forms-focus-color:      var(--form-focus-color);
  --forms-text-color:       var(--form-text-color);
  --forms-placeholder-color: var(--form-placeholder-color);

  --toggles-background-color: var(--toggle-bg);
  --toggles-active-color:     var(--toggle-active-color);
  --toggles-inactive-color:   var(--toggle-inactive-color);
  --toggles-handle-color:     var(--toggle-handle-color);
  --toggles-border-color:     var(--toggle-border-color);
  --toggles-border-radius:    var(--toggle-border-radius);
  --toggles-width:            var(--toggle-width);
  --toggles-height:           var(--toggle-height);
  --toggles-handle-size:      var(--toggle-handle-size);
  --toggles-padding:          var(--toggle-padding);
  --toggles-margin:           var(--toggle-margin);
  --toggles-text-color:       var(--toggle-text-color);
  --toggles-text-size:        var(--toggle-text-size);
  --toggles-transition:       var(--toggle-transition);

  --sliders-track-color:         var(--slider-track-color);
  --sliders-active-track-color:  var(--slider-active-track-color);
  --sliders-handle-color:        var(--slider-handle-color);
  --sliders-handle-border-color: var(--slider-handle-border-color);
  --sliders-handle-size:         var(--slider-handle-size);
  --sliders-track-height:        var(--slider-track-height);
  --sliders-handle-border-width: var(--slider-handle-border-width);
  --sliders-hover-handle-size:   var(--slider-hover-handle-size);
}

/* ========== GLOBAL STYLES ========== */
:root {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

html, body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: 0.5em;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

h4 {
  font-size: var(--h4-size);
}

/* ========== TYPOGRAPHY (new contract) ========== */
/* Word-wrap on body / paragraphs / typography helpers */
body, p, .ant-typography {
  hyphens: var(--typography-hyphens, auto);
  -webkit-hyphens: var(--typography-hyphens, auto);
  overflow-wrap: var(--typography-overflow-wrap, break-word);
  word-break: var(--typography-word-break, normal);
}

/* Paragraph-specific overrides (fall back to body settings) */
p {
  font-family: var(--typography-paragraph-font-family, var(--typography-font-family));
  font-size:   var(--typography-paragraph-font-size,   var(--typography-font-size));
  font-weight: var(--typography-paragraph-font-weight, var(--typography-font-weight));
  color:       var(--typography-paragraph-color,       var(--typography-color));
  line-height: var(--typography-paragraph-line-height, var(--typography-line-height));
}

/* Per-level heading overrides — chain: per-level → heading default → body default */
h1 {
  font-family: var(--typography-h1-font-family, var(--typography-heading-font-family, var(--typography-font-family)));
  font-weight: var(--typography-h1-font-weight, var(--typography-heading-font-weight));
  font-size:   var(--typography-h1-size);
  color:       var(--typography-h1-color, var(--typography-heading-color));
}
h2 {
  font-family: var(--typography-h2-font-family, var(--typography-heading-font-family, var(--typography-font-family)));
  font-weight: var(--typography-h2-font-weight, var(--typography-heading-font-weight));
  font-size:   var(--typography-h2-size);
  color:       var(--typography-h2-color, var(--typography-heading-color));
}
h3 {
  font-family: var(--typography-h3-font-family, var(--typography-heading-font-family, var(--typography-font-family)));
  font-weight: var(--typography-h3-font-weight, var(--typography-heading-font-weight));
  font-size:   var(--typography-h3-size);
  color:       var(--typography-h3-color, var(--typography-heading-color));
}
h4 {
  font-family: var(--typography-h4-font-family, var(--typography-heading-font-family, var(--typography-font-family)));
  font-weight: var(--typography-h4-font-weight, var(--typography-heading-font-weight));
  font-size:   var(--typography-h4-size);
  color:       var(--typography-h4-color, var(--typography-heading-color));
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary);
  opacity: 0.8;
}

/* ========== BUTTON STYLES (public-scope only) ========== */
/* Scoped so the admin panel keeps default Ant Design styling.            */
/* Only visitor + webshop layouts (.public-scope) receive tenant branding. */
/* Shared button base — font, size, padding, radius, transition only.
   Border and shadow are per-button so each type can differ. */
.public-scope button,
.public-scope input[type="button"],
.public-scope input[type="submit"],
.public-scope input[type="reset"],
.public-scope .ant-btn {
  font-family: var(--font-family) !important;
  font-size: var(--buttons-font-size, var(--button-font-size)) !important;
  font-weight: var(--buttons-font-weight, var(--button-font-weight)) !important;
  padding: var(--buttons-padding) !important;
  border-radius: var(--buttons-border-radius, var(--button-border-radius)) !important;
  height: auto !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Icon spans inside buttons inherit the button's text color */
.public-scope .ant-btn > *,
.public-scope button > * {
  color: inherit !important;
}

/* Primary Button */
.public-scope .ant-btn-primary,
.public-scope button.primary,
.public-scope input[type="submit"] {
  background-color: var(--buttons-primary-color) !important;
  color: var(--buttons-primary-text-color) !important;
  border-style: var(--buttons-primary-border-style) !important;
  border-width: var(--buttons-primary-border-sides) !important;
  border-color: var(--buttons-primary-border-color) !important;
  box-shadow: var(--buttons-primary-shadow) !important;
}

.public-scope .ant-btn-primary:hover,
.public-scope .ant-btn-primary:focus,
.public-scope button.primary:hover,
.public-scope input[type="submit"]:hover {
  background-color: var(--buttons-hover-color) !important;
  border-color: var(--buttons-hover-border-color, var(--buttons-primary-border-color)) !important;
  color: var(--buttons-hover-text-color) !important;
  box-shadow: var(--buttons-primary-hover-shadow) !important;
}

/* Secondary / Default Button */
.public-scope .ant-btn-default,
.public-scope button:not(.ant-btn):not(.primary),
.public-scope input[type="button"] {
  background-color: var(--buttons-secondary-color) !important;
  color: var(--buttons-secondary-text-color) !important;
  border-style: var(--buttons-secondary-border-style) !important;
  border-width: var(--buttons-secondary-border-sides) !important;
  border-color: var(--buttons-secondary-border-color) !important;
  box-shadow: var(--buttons-secondary-shadow) !important;
}

.public-scope .ant-btn-default:hover,
.public-scope .ant-btn-default:focus,
.public-scope button:not(.ant-btn):not(.primary):hover,
.public-scope input[type="button"]:hover {
  background-color: var(--buttons-hover-secondary-color) !important;
  border-color: var(--buttons-hover-border-color, var(--buttons-secondary-border-color)) !important;
  color: var(--buttons-hover-secondary-text-color) !important;
  box-shadow: var(--buttons-secondary-hover-shadow) !important;
}

/* Link / Text Button */
.public-scope .ant-btn-link,
.public-scope .ant-btn-text {
  background-color: var(--buttons-link-bg) !important;
  color: var(--buttons-link-color) !important;
  border-style: var(--buttons-link-border-style) !important;
  border-width: var(--buttons-link-border-sides) !important;
  border-color: var(--buttons-link-border-color) !important;
  box-shadow: var(--buttons-link-shadow) !important;
}

.public-scope .ant-btn-link:hover,
.public-scope .ant-btn-text:hover {
  background-color: var(--buttons-link-hover-bg) !important;
  color: var(--buttons-link-hover-color) !important;
  box-shadow: var(--buttons-link-hover-shadow) !important;
}

/* Disabled Buttons */
.public-scope button:disabled,
.public-scope input[type="button"]:disabled,
.public-scope input[type="submit"]:disabled,
.public-scope .ant-btn:disabled,
.public-scope .ant-btn-disabled {
  opacity: var(--buttons-disabled-opacity, var(--button-disabled-opacity)) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========== ANT DESIGN CARD OVERRIDES (public-scope only) ========== */
.public-scope .ant-card {
  background-color: var(--card-bg) !important;
  border: var(--card-border-width) solid var(--card-border-color) !important;
  border-radius: var(--card-border-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

.public-scope .ant-card-body {
  padding: var(--card-padding) !important;
  color: var(--card-text-color) !important;
}

.public-scope .ant-card-head-title {
  font-size: var(--card-title-size) !important;
  font-weight: var(--card-title-weight) !important;
  color: var(--card-title-color) !important;
}

/* Card hover state — only applied when the tenant has configured hover values */
.public-scope .ant-card:hover {
  background-color: var(--cards-hover-background-color, var(--card-bg)) !important;
  border-color: var(--cards-hover-border-color, var(--card-border-color)) !important;
  box-shadow: var(--cards-hover-box-shadow, var(--card-shadow)) !important;
}

.public-scope .ant-card:hover .ant-card-head-title {
  color: var(--cards-hover-title-color, var(--card-title-color)) !important;
}

.public-scope .ant-card:hover .ant-card-body {
  color: var(--cards-hover-text-color, var(--card-text-color)) !important;
}

/* ========== ANT DESIGN FORM OVERRIDES (public-scope only) ========== */
.public-scope .ant-input,
.public-scope .ant-input-number-input,
.public-scope .ant-select:not(.ant-select-customize-input) .ant-select-selector,
.public-scope .ant-picker,
.public-scope textarea.ant-input {
  border-radius: var(--form-border-radius) !important;
  border-style: var(--form-border-style) !important;
  /* border-sides shorthand: sets per-side width; style and color stay single-valued */
  border-width: var(--form-border-sides) !important;
  border-color: var(--form-border-color) !important;
  background-color: var(--form-bg) !important;
  color: var(--form-text-color) !important;
  padding: var(--form-padding) !important;
  /* font-size: only set when a value is configured (empty var = browser default) */
  /* font-size: inherited from body */
}

.public-scope .ant-input:focus,
.public-scope .ant-input-focused,
.public-scope .ant-input-number:focus-within,
.public-scope .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.public-scope .ant-picker-focused {
  border-color: var(--form-focus-color) !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

.public-scope .ant-input::placeholder,
.public-scope .ant-input-number-input::placeholder,
.public-scope textarea.ant-input::placeholder {
  color: var(--form-placeholder-color) !important;
}

/* ========== CONTAINER ========== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== SCROLLBAR STYLING ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* ========== ANT DESIGN SWITCH/TOGGLE OVERRIDES (public-scope only) ========== */
.public-scope .ant-switch {
  min-width: var(--toggle-width) !important;
  height: var(--toggle-height) !important;
  background-color: var(--toggle-inactive-color) !important;
  border-radius: var(--toggle-border-radius) !important;
  border: 1px solid var(--toggle-border-color) !important;
  margin: var(--toggle-margin) !important;
  transition: var(--toggle-transition) !important;
}

.public-scope .ant-switch-checked {
  background-color: var(--toggle-active-color) !important;
}

.public-scope .ant-switch-handle {
  width: var(--toggle-handle-size) !important;
  height: var(--toggle-handle-size) !important;
  background-color: var(--toggle-handle-color) !important;
  border-radius: 50% !important;
  
  
  top: 50% !important; transform: translateY(-50%) !important;
  transition: var(--toggle-transition) !important;
}

.public-scope .ant-switch-handle::before {
  border-radius: 50% !important;
}

.public-scope .ant-switch-inner {
  color: var(--toggle-text-color) !important;
  font-size: var(--toggle-text-size) !important;
  padding: 0 var(--toggle-padding) !important;
}

/* ========== ANT DESIGN SLIDER OVERRIDES (public-scope only) ========== */
.public-scope .ant-slider-rail {
  background-color: var(--slider-track-color) !important;
  height: var(--slider-track-height) !important;
  border-radius: calc(var(--slider-track-height) / 2) !important;
}

.public-scope .ant-slider-track {
  background-color: var(--slider-active-track-color) !important;
  height: var(--slider-track-height) !important;
  border-radius: calc(var(--slider-track-height) / 2) !important;
}

.public-scope .ant-slider-handle {
  width: var(--slider-handle-size) !important;
  height: var(--slider-handle-size) !important;
  background-color: var(--slider-handle-color) !important;
  /* Ring rendered as box-shadow so the handle size stays exact.
     handleBorderWidth = 0 → no ring (box-shadow: none). */
  border: none !important;
  box-shadow: 0 0 0 var(--slider-handle-border-width) var(--slider-handle-border-color) !important;
  margin-top: calc((var(--slider-handle-size) / 2 + var(--slider-track-height) / 2) * -1) !important;
}

.public-scope .ant-slider-handle:hover,
.public-scope .ant-slider-handle:focus {
  width: var(--slider-hover-handle-size) !important;
  height: var(--slider-hover-handle-size) !important;
  margin-top: calc((var(--slider-hover-handle-size) / 2 + var(--slider-track-height) / 2) * -1) !important;
  border-color: var(--slider-active-track-color) !important;
  box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.2) !important;
}

.public-scope .ant-slider:hover .ant-slider-track {
  background-color: var(--slider-active-track-color) !important;
}