/* ========================================
   IMPORTS
   ======================================== */
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Mono:wght@300;500&family=Roboto+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");

/* ========================================
   CSS VARIABLES & DESIGN SYSTEM
   ======================================== */
:root {
  /* Grayscale Palette */
  --color-grayscale-0: rgba(255, 255, 255, 100%);
  --color-grayscale-10: rgba(248, 248, 248, 100%);
  --color-grayscale-20: rgba(237, 238, 238, 100%);
  --color-grayscale-30: rgba(221, 222, 225, 100%);
  --color-grayscale-40: rgba(197, 201, 206, 100%);
  --color-grayscale-50: rgba(167, 173, 182, 100%);
  --color-grayscale-60: rgba(130, 138, 150, 100%);
  --color-grayscale-70: rgba(89, 98, 112, 100%);
  --color-grayscale-80: rgba(49, 57, 69, 100%);
  --color-grayscale-90: rgba(19, 24, 33, 100%);
  --color-grayscale-100: rgba(0, 0, 0, 100%);

  /* Brand Colors */
  --color-brand-group: rgba(99, 99, 99, 100%);
  --color-brand-bms: rgba(33, 78, 146, 100%);
  --color-brand-kiefel: rgba(22, 125, 149, 100%);
  --color-brand-servtec: rgba(243, 161, 32, 100%);
  --color-brand-packsys: rgba(0, 158, 73, 100%);

  /* Group Color Scale */
  --color-group-10: rgba(237, 237, 237, 100%);
  --color-group-20: rgba(225, 225, 226, 100%);
  --color-group-30: rgba(199, 199, 199, 100%);
  --color-group-40: rgba(173, 173, 174, 100%);
  --color-group-50: rgba(148, 148, 148, 100%);
  --color-group-60: hsl(0, 0%, 51%);
  --color-group-80: hsl(0, 0%, 33%);
  --color-group-90: hsl(0, 0%, 24%);
  --color-group-100: rgba(38, 38, 38, 100%);

  /* BMS Color Scale */
  --color-bms-10: rgba(225, 238, 251, 100%);
  --color-bms-20: rgba(205, 225, 246, 100%);
  --color-bms-30: rgba(135, 188, 232, 100%);
  --color-bms-40: rgba(88, 157, 213, 100%);
  --color-bms-100: rgba(0, 54, 95, 100%);
  --color-bms-200: rgba(0, 38, 66, 100%);

  /* Servtec Color Scale */
  --color-servtec-10: rgba(255, 250, 228, 100%);
  --color-servtec-20: rgba(253, 235, 186, 100%);
  --color-servtec-30: rgba(250, 209, 82, 100%);
  --color-servtec-40: rgba(251, 190, 0, 100%);
  --color-servtec-100: rgba(226, 127, 32, 100%);
  --color-servtec-200: rgba(209, 67, 0, 100%);

  /* Kiefel Color Scale */
  --color-kiefel-10: rgba(236, 252, 254, 100%);
  --color-kiefel-20: rgba(210, 248, 252, 100%);
  --color-kiefel-30: rgba(153, 227, 234, 100%);
  --color-kiefel-40: rgba(110, 214, 223, 100%);
  --color-kiefel-100: rgba(0, 79, 103, 100%);
  --color-kiefel-200: rgba(7, 50, 61, 100%);

  /* Packsys Color Scale */
  --color-packsys-10: rgba(229, 241, 232, 100%);
  --color-packsys-20: rgba(199, 226, 205, 100%);
  --color-packsys-30: rgba(147, 207, 174, 100%);
  --color-packsys-40: rgba(120, 184, 149, 100%);
  --color-packsys-100: rgba(0, 78, 45, 100%);
  --color-packsys-200: rgba(0, 46, 26, 100%);

  /* Neutral Scale */
  --color-neutral-0: rgba(255, 255, 255, 100%);
  --color-neutral-50: rgba(250, 250, 250, 100%);
  --color-neutral-100: rgba(239, 239, 239, 100%);
  --color-neutral-200: rgba(220, 220, 220, 100%);
  --color-neutral-300: rgba(189, 189, 189, 100%);
  --color-neutral-400: rgba(152, 152, 152, 100%);
  --color-neutral-500: rgba(124, 124, 124, 100%);
  --color-neutral-600: rgba(101, 101, 101, 100%);
  --color-neutral-700: rgba(82, 82, 82, 100%);
  --color-neutral-800: rgba(70, 70, 70, 100%);
  --color-neutral-900: rgba(61, 61, 61, 100%);
  --color-neutral-950: rgba(41, 41, 41, 100%);

  /* Semantic Colors */
  --color-positive-0: #ccffceff;
  --color-positive-10: #82d785ff;
  --color-positive-20: #4caf50ff;
  --color-positive-30: #3a8f3dff;
  --color-positive-40: #2d6f2fff;
  --color-positive-50: #224f23ff;

  --color-negative-0: #fccf;
  --color-negative-10: #ff8b8bff;
  --color-negative-20: #ff5252ff;
  --color-negative-30: #cf3b3bff;
  --color-negative-40: #9e2e2eff;
  --color-negative-50: #6e2323ff;

  --color-notice-0: #e6dea3ff;
  --color-notice-10: #e6da7fff;
  --color-notice-20: #e6d660ff;
  --color-notice-30: #d0c152ff;
  --color-notice-40: #b9ac4aff;
  --color-notice-50: #a39845ff;

  --color-informative-0: #a1c5e6ff;
  --color-informative-10: #7eb5e6ff;
  --color-informative-20: #60a7e6ff;
  --color-informative-30: #4e8cc4ff;
  --color-informative-40: #4174a2ff;
  --color-informative-50: #365d80ff;

  /* Composite / Semantic Aliases */
  --active-primary-color: #545454;
  --color-primary: var(--color-group-80);
  --color-primary-light: var(--color-group-70);
  --color-bg-light: var(--color-group-10);
  --color-bg-dark: var(--color-group-30);
  --color-highlight: var(--color-group-40);
  --color-dark: var(--color-group-80);
  --color-darkest: var(--color-group-100);
  --color-brand: var(--color-brand-group);
  --color-highlight-translucent: rgba(173, 173, 174, 20%);
  --color-highlight-semi-translucent: rgba(173, 173, 174, 40%);
  --color-text-dark: var(--color-group-100);
  --color-text-lighter: var(--color-group-90);
  --color-text-light: var(--color-group-60);
  --color-text: var(--color-text-dark);
  --color-white: #fff;
  --color-black: #000;
  --color-error: var(--color-negative-20);
  --color-warning: var(--color-notice-20);
  --color-success: var(--color-positive-20);
  --color-info: var(--color-informative-20);
  --color-link: var(--color-primary);
  --color-border: var(--color-neutral-600);

  /* Spacing Scale */
  --space-xxxsmall: 0.25rem;
  --space-xxsmall: 0.5rem;
  --space-xsmall: 0.75rem;
  --space-small: 1rem;
  --space-medium: 1.5rem;
  --space-large: 2.25rem;
  --space-xlarge: 3rem;
  --space-xxlarge: 4.5rem;
  --space-xxxlarge: 7.5rem;

  /* Border Radius Scale */
  --border-radius-sharp: 0.48px;
  --border-radius-small: 6px;
  --border-radius-medium: 12px;
  --border-radius-large: 18px;
  --border-radius-full: 200vmax;

  /* Layout Widths */
  --wrapper-width-large: 90rem;
  --wrapper-width-medium: 75rem;
  --wrapper-width-small: 50rem;
  --text-max-width: 830px;
  --layout-max-width: 1600px;
  --layout-min-width: 360px;

  /* Focus / Interaction */
  --focus-color-raw: 94, 158, 214;
  --focus-color: rgba(var(--focus-color-raw), 100%);
  --focus-shadow-color: rgba(var(--focus-color-raw), 50%);
  --focus-shadow-spread: 3px;

  /* Transitions */
  --transition-duration: 0.3s;
  --transition-ease: ease-in-out;

  /* Typography */
  --font-family-default: "Roboto", "Helvetica", "Arial", system-ui, sans-serif;
  --font-family-serif: "Roboto Serif", "Helvetica", "Arial", system-ui, serif;
  --font-family-mono: "Roboto Mono", "Courier New", courier, monospace;
  --font-family: var(--font-family-default);
  --font-family-body: var(--font-family-default);
  --font-family-headline: var(--font-family-default);

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Component Specific */
  --header-main-height: 100px;
  --primary-color: #434a4e;
  --primary-color-darker: #2a2f31;
  --primary-color-lighter: #c4c7c8;
  --primary-color-hover: red;
  --accent-color: #e27f20;
  --accent-color-transparent: rgba(56, 90, 104, 0.85);
  --text-color: #2a2f31;
  --text-color-muted: gray;
  --border-radius: 0.375rem;
  --gray-light: #d3d5d4;
  --card-size: 310px;
  --font-size-small: 10pt;
  --header-text-color: black;
}

/* ========================================
   BASE STYLES & RESETS
   ======================================== */
* {
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-family-default);
  height: 100%;
}

body {
  margin: 0;
  background-size: cover;
  overflow: auto;
}

body:has(main.main) {
  overflow: hidden;
}

ol,
ul,
dl {
  margin-top: unset;
  margin-bottom: unset;
}

a {
  color: var(--text-color);
}

a:active,
a:hover {
  color: var(--accent-color);
}

h1:focus {
  outline: none;
}

/* ========================================
   LAYOUT & CONTAINER
   ======================================== */
.container {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr;
  font-family: var(--font-family-default);
}

.spacer {
  margin: 0 0.5rem;
}

main {
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  font-family: var(--font-family-default);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.loggedIn-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 100px);
}

.mainContent {
  width: 100%;
  height: 100%;
  padding: 1rem;
}

/* ========================================
   HEADER STYLES
   ======================================== */
header {
  color: var(--header-text-color);
  border-left: var(--color-brand-servtec) 1rem solid;
  font-family: var(--font-family-default);
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.header-first-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1rem;
  width: 100%;
  height: 100px;
}

.header-second-line {
  color: var(--color-white);
  background-color: var(--color-servtec-100);
  border-left: var(--color-brand-servtec) 1rem solid;
  width: 100%;
  display: flex;
  align-items: center;
}

.header-third-line {
  margin-left: 1rem;
}

.header-content {
  max-width: var(--layout-max-width);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.header-title {
  font-size: 72px;
  font-weight: 300;
  padding: 5rem;
  padding-bottom: 0rem;
  margin: 0;
  line-height: 120%;
  letter-spacing: -1.5%;
  color: var(--color-white);
  display: none;
}

.header-title2 {
  font-size: 72px;
  font-weight: 300;
  padding: 5rem;
  margin: 0;
  line-height: 120%;
  letter-spacing: -1.5%;
  color: var(--color-white);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.header-subtitle {
  font-size: 45px;
  font-weight: 300;
  padding: 5rem;
  padding-bottom: 2rem;
  padding-top: 3rem;
  margin: 0;
  opacity: 0.9;
  color: var(--color-darkest);
  text-align: left;
  line-height: 160%;
  display: none;
}

.header__logo {
  height: 1.5rem;
}

.header_actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Header Titles */
.title {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-text-dark);
  position: fixed;
  line-height: 125%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 500;
  display: none;
}

.loggedInTitle {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 125%;
  text-align: center;
  display: none; /* Hidden on desktop */
}

/* ========================================
   FOOTER STYLES
   ======================================== */
.footer {
  color: var(--header-text-color);
  border-left: var(--color-brand-servtec) 1rem solid;
  width: 100%;
  font-family: var(--font-family-default);
}

.footer__bottom {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 1rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--color-grayscale-30);
  color: var(--header-text-color);
}

.footer__bottom_nav {
  flex: 1;
  min-width: 0;
}

.footer__bottom__list {
  justify-content: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__bottom a {
  color: var(--header-text-color);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer__bottom a:hover,
.footer__bottom a:active {
  color: var(--accent-color);
}

.footer__bottom ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  min-width: 0;
}

/* ========================================
   GRID & LAYOUT COMPONENTS
   ======================================== */
.grid {
  display: grid;
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(453px, 453px));
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: white;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  transition:
    color 0.15s,
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}

.btn:hover {
  background-color: var(--primary-color-darker);
}

/* ========================================
   ERROR & EXCEPTION UI
   ======================================== */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* ========================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ======================================== */

/* Small screens: max 489px */
@media only screen and (max-width: 489px) {
  .grid {
    grid-template-columns: 1fr;
    padding: 0 8px;
  }

  .header__logo {
    height: 1.5rem;
  }

  .title {
    font-size: 20px;
    margin-left: 2rem;
  }

  .loggedInTitle {
    display: block;
  }

  .header-title {
    padding: 1rem 3rem 0rem 3rem;
  }

  .header-title2 {
    padding: 1rem 3rem 2rem 3rem;
    position: static;
  }

  .header-first-line {
    height: 70px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 2rem;
  }

  .footer__bottom_nav {
    width: 100%;
  }

  .footer__bottom__list {
    justify-content: flex-start;
    gap: 1rem;
  }

  .footer__bottom ul {
    justify-content: flex-start;
    gap: 1rem;
  }
}

/* Small to medium: 490px - 599px */
@media only screen and (min-width: 490px) and (max-width: 599px) {
  .header__logo {
    height: 1.2rem;
  }

  .loggedInTitle {
    display: block;
  }

  .footer__bottom__list {
    gap: 1.5rem;
  }

  .footer__bottom ul {
    gap: 1.5rem;
  }
}

/* Medium: 600px - 767px */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .header__logo {
    height: 1.5rem;
  }

  .title {
    font-size: 22px;
  }

  .loggedInTitle {
    display: block;
  }
}

/* Medium to large: 768px - 959px */
@media only screen and (min-width: 768px) {
  .header__logo {
    height: 2rem;
  }

  .title {
    font-size: 26px;
  }
}

@media only screen and (min-width: 490px) and (max-width: 959px) {
  .grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    padding: 0 16px;
  }

  .loggedInTitle {
    display: block;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .header-title {
    font-size: 48px;
    padding: 1rem 3rem 0rem 3rem;
  }

  .header-title2 {
    font-size: 64px;
    padding: 2rem 3rem 3rem 3rem;
    margin-top: 1rem;
  }

  .header-subtitle {
    font-size: 20px;
    padding: 2rem 3rem 3rem 3rem;
    text-align: left;
  }

  .header-first-line {
    height: 70px;
  }
}

/* Landscape orientation with limited height */
@media only screen and (orientation: landscape) and (max-height: 480px) {
  .header-title2 {
    padding: 0rem 3rem 0.5rem 3rem;
    font-size: 60px;
  }
}

/* Large screens: 960px - 1399px */
@media only screen and (min-width: 960px) and (max-width: 1399px) {
  .grid {
    grid-template-columns: repeat(2, 453px);
    max-width: 950px;
    padding: 0 16px;
  }
}

/* Extra large: 1000px+ */
@media only screen and (min-width: 1000px) {
  .header__logo {
    height: 3rem;
  }

  .title {
    font-size: 28px;
  }

  .footer__bottom {
    font-size: var(--font-size-small);
  }

  .footer-main {
    padding: 5rem 3rem 3rem 3rem;
  }
}

/* Wide screens: 1200px+ */
@media only screen and (max-width: 1200px) {
  .loggedInTitle {
    display: block;
  }
}

/* Large screens: 1400px+ */
@media only screen and (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(3, 453px);
    max-width: 1450px;
  }
}

/* Extra wide: 1921px+ */
@media only screen and (min-width: 1921px) {
  .grid {
    max-width: 1600px;
    grid-template-columns: repeat(auto-fit, minmax(453px, 453px));
  }

  .container {
    grid-template-rows: auto 1fr auto;
  }

  .footer__bottom {
    font-size: var(--font-size-small);
  }
}

/* Footer styling for smaller screens */
@media only screen and (min-width: 920px) {
  .footer__bottom {
    font-size: var(--font-size-small);
  }
}

/* Limited height adjustment */
@media only screen and (max-height: 900px) and (min-width: 900px) {
  .header-first-line {
    height: 70px;
  }

  .header-title2 {
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 60px;
  }
}