/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* CSS Variables - Matching iot-radoff theme */
/* src/app/shared/stylebook/colors/_theme.scss */
:root {
  --grey-00: #ffffff;
  --grey-50: #f6f7f9;
  --grey-100: #ededf1;
  --grey-200: #d6d8e1;
  --grey-300: #b2b6c7;
  --grey-400: #8990a7;
  --grey-500: #6a718d;
  --grey-600: #555a74;
  --grey-700: #43475b;
  --grey-800: #3c3f50;
  --grey-900: #353745;
  --grey-950: #23252e;
  --blue-50: #eff4ff;
  --blue-100: #dbe6fe;
  --blue-200: #bfd4fe;
  --blue-300: #93b9fd;
  --blue-400: #6093fa;
  --blue-500: #3b6df6;
  --blue-600: #274eeb;
  --blue-700: #1d39d8;
  --blue-800: #1e2faf;
  --blue-900: #1e2e8a;
  --blue-950: #171e54;
  --emerald-50: #edfff8;
  --emerald-100: #d5fff0;
  --emerald-200: #aeffe0;
  --emerald-300: #70ffca;
  --emerald-400: #2bfdad;
  --emerald-500: #00d584;
  --emerald-600: #00c072;
  --emerald-700: #00965d;
  --emerald-800: #06754c;
  --emerald-900: #076040;
  --emerald-950: #003723;
  --green-500: #2a9f7f;
  --green-700: #18725e;
  --red-50: #fff1f1;
  --red-100: #ffe4e4;
  --red-200: #fecdcf;
  --red-300: #fca5a8;
  --red-400: #fa727a;
  --red-500: #f2414f;
  --red-600: #df1f38;
  --red-700: #c2142f;
  --red-800: #9e132e;
  --red-900: #87142d;
  --yellow-50: #fffeea;
  --yellow-100: #fffac5;
  --yellow-400: #ffd91b;
  --yellow-500: #ffb900;
  --yellow-700: #bb6402;
  --orange-500: #fa863c;
  --orange-700: #c44414;
  --turquoise-50: #e8fffd;
  --turquoise-500: #00e5ff;
  --turquoise-700: #008fab;
  --turquoise-800: #016b81;
  --turquoise-900: #065c73;
  --indigo-50: #efebf1;
  --indigo-100: #f6e5ff;
  --indigo-500: #b83eff;
  --indigo-700: #910ae8;
  --sem-excellent-fill: var(--emerald-400);
  --sem-excellent-bg: rgba(43, 253, 173, 0.10);
  --sem-excellent-stroke: var(--emerald-700);
  --sem-good-fill: var(--emerald-500);
  --sem-good-bg: rgba(0, 213, 132, 0.10);
  --sem-good-stroke: var(--emerald-800);
  --sem-medium-fill: var(--yellow-500);
  --sem-medium-bg: rgba(255, 185, 0, 0.10);
  --sem-medium-stroke: var(--yellow-700);
  --sem-high-fill: var(--red-600);
  --sem-high-bg: rgba(223, 31, 56, 0.10);
  --sem-high-stroke: var(--red-700);
  --sem-very-high-fill: var(--red-900);
  --sem-very-high-bg: rgba(135, 20, 45, 0.10);
  --sem-very-high-stroke: var(--red-900);
  --sem-text-primary: var(--grey-900);
  --sem-text-secondary: var(--grey-600);
  --sem-icon-stroke: var(--turquoise-800);
  --sem-icon-bg: rgba(1, 107, 129, 0.10);
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --font-family: "Aria Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-light: 250;
  --fw-regular: 350;
  --fw-medium: 450;
  --fs-h1: 34px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --lh-heading: 1.3;
  --ls-heading: 0.003em;
  --fs-p1: 20px;
  --fs-p2: 18px;
  --fs-p3: 16px;
  --fs-p4: 14px;
  --fs-caption: 12px;
  --lh-body: 1.4;
  --ls-body: 0.003em;
  --lh-label: 1.1;
  --ls-label: 0.04em;
  --lh-interactive: 1;
  --ls-interactive: 0.003em;
  /* Scaffold / Background */
  --scaffold-background: var(--grey-50);
  /* Shapes & Shadows (Matching BorderRadius.circular(10)) */
  --radoff-border-radius: 10px;
  --radoff-elevation-none: none;
  --radoff-dialog-bg: var(--grey-00);
  /* Action Icons */
  --icon-color: var(--grey-950);
  --icon-size-base: 24px;
}

/* Base Body Styling (Flutter's scaffoldBackgroundColor) */
body {
  background-color: var(--scaffold-background);
  margin: 0;
  font-family: "Roboto", sans-serif; /* Placeholder for RadoffTypography */
}

/* src/app/shared/stylebook/colors/_theme.scss */
/* Dark mode overrides */
.dark-theme {
  --scaffold-background: var(--grey-950);
  --theme-surface: var(--grey-900);
  --text-primary: var(--grey-00);
  --text-secondary: var(--grey-300);
  /* Update the seed color / primary to dark brightness if needed */
  --theme-primary: var(--green-600);
}

/* colors.scss — generated from radoff-design-tokens.json */
:root {
  /* =====================
     GREYS
  ===================== */
  --grey-00: #ffffff;
  --grey-50: #f6f7f9;
  --grey-100: #ededf1;
  --grey-200: #d6d8e1;
  --grey-300: #b2b6c7;
  --grey-400: #8990a7;
  --grey-500: #6a718d;
  --grey-600: #555a74;
  --grey-700: #43475b;
  --grey-800: #3c3f50;
  --grey-900: #353745;
  --grey-950: #23252e;
  /* =====================
     BLUE
  ===================== */
  --blue-50: #eff4ff;
  --blue-100: #dbe6fe;
  --blue-200: #bfd4fe;
  --blue-300: #93b9fd;
  --blue-400: #6093fa;
  --blue-500: #3b6df6;
  --blue-600: #274eeb;
  --blue-700: #1d39d8;
  --blue-800: #1e2faf;
  --blue-900: #1e2e8a;
  --blue-950: #171e54;
  /* =====================
     EMERALD
  ===================== */
  --emerald-50: #edfff8;
  --emerald-100: #d5fff0;
  --emerald-200: #aeffe0;
  --emerald-300: #70ffca;
  --emerald-400: #2bfdad;
  --emerald-500: #00d584;
  --emerald-600: #00c072;
  --emerald-700: #00965d;
  --emerald-800: #06754c;
  --emerald-900: #076040;
  --emerald-950: #003723;
  /* =====================
     GREEN
  ===================== */
  --green-50: #effaf6;
  --green-100: #d7f4e7;
  --green-200: #b3e7d2;
  --green-300: #80d5b8;
  --green-400: #4cbb99;
  --green-500: #2a9f7f;
  --green-600: #1b8067;
  --green-700: #18725e;
  --green-800: #135244;
  --green-900: #114339;
  --green-950: #082621;
  /* =====================
     RED
  ===================== */
  --red-50: #fff1f1;
  --red-100: #ffe4e4;
  --red-200: #fecdcf;
  --red-300: #fca5a8;
  --red-400: #fa727a;
  --red-500: #f2414f;
  --red-600: #df1f38;
  --red-700: #c2142f;
  --red-800: #9e132e;
  --red-900: #87142d;
  --red-950: #4b0613;
  /* =====================
     YELLOW
  ===================== */
  --yellow-50: #fffeea;
  --yellow-100: #fffac5;
  --yellow-200: #fff585;
  --yellow-300: #ffe946;
  --yellow-400: #ffd91b;
  --yellow-500: #ffb900;
  --yellow-600: #e28e00;
  --yellow-700: #bb6402;
  --yellow-800: #984d08;
  --yellow-900: #7c3f0b;
  --yellow-950: #482000;
  /* =====================
     ORANGE
  ===================== */
  --orange-50: #fff7ed;
  --orange-100: #f2e2cd;
  --orange-200: #fdd7ab;
  --orange-300: #fdb974;
  --orange-400: #fca663;
  --orange-500: #fa863c;
  --orange-600: #ea5815;
  --orange-700: #c44414;
  --orange-800: #9b3515;
  --orange-900: #7d2d13;
  --orange-950: #431408;
  /* =====================
     TURQUOISE
  ===================== */
  --turquoise-50: #e8fffd;
  --turquoise-100: #c5fffb;
  --turquoise-200: #93fff8;
  --turquoise-300: #49fff3;
  --turquoise-400: #00fffb;
  --turquoise-500: #00e5ff;
  --turquoise-600: #00b5d5;
  --turquoise-700: #008fab;
  --turquoise-800: #016b81;
  --turquoise-900: #065c73;
  --turquoise-950: #003d50;
  /* =====================
     INDIGO
  ===================== */
  --indigo-50: #efebf1;
  --indigo-100: #f6e5ff;
  --indigo-200: #edcfff;
  --indigo-300: #dfa9ff;
  --indigo-400: #cb73ff;
  --indigo-500: #b83eff;
  --indigo-600: #a61aff;
  --indigo-700: #910ae8;
  --indigo-800: #7a0ebc;
  --indigo-900: #5b0c89;
  --indigo-950: #460072;
  /* =====================
     BROWN
  ===================== */
  --brown-50: #f8f7f4;
  --brown-100: #eeece6;
  --brown-200: #ddd7cb;
  --brown-300: #c7bdaa;
  --brown-400: #ae9d85;
  --brown-500: #9f8970;
  --brown-600: #927a64;
  --brown-700: #7a6454;
  --brown-800: #645348;
  --brown-900: #52453c;
  --brown-950: #2b231f;
  /* =====================
     SEMANTIC — Quality / Badge levels
  ===================== */
  /* Excellent — Emerald/400, /700 */
  --quality-excellent-fill: var(--emerald-400); /* #2bfdad */
  --quality-excellent-bg: rgba(43, 253, 173, 0.1);
  --quality-excellent-stroke: var(--emerald-700); /* #00965d */
  /* Good — Emerald/500, /800 */
  --quality-good-fill: var(--emerald-500); /* #00d584 */
  --quality-good-bg: rgba(0, 213, 132, 0.1);
  --quality-good-stroke: var(--emerald-800); /* #06754c */
  /* Medium — Yellow/500, /700 */
  --quality-medium-fill: var(--yellow-500); /* #ffb900 */
  --quality-medium-bg: rgba(255, 185, 0, 0.1);
  --quality-medium-stroke: var(--yellow-700); /* #bb6402 */
  /* High — Red/600, /700 */
  --quality-high-fill: var(--red-600); /* #df1f38 */
  --quality-high-bg: rgba(223, 31, 56, 0.1);
  --quality-high-stroke: var(--red-700); /* #c2142f */
  /* Very high — Red/900 */
  --quality-very-high-fill: var(--red-900); /* #87142d */
  --quality-very-high-bg: rgba(135, 20, 45, 0.1);
  --quality-very-high-stroke: var(--red-900); /* #87142d */
  /* Freddo secco — Blue/400, /800 */
  --quality-freddo-fill: var(--blue-400); /* #6093fa */
  --quality-freddo-bg: rgba(96, 147, 250, 0.1);
  --quality-freddo-stroke: var(--blue-800); /* #1e2faf */
  /* Aliases brevi (backward compat) */
  --quality-excellent: var(--quality-excellent-fill);
  --quality-good: var(--quality-good-fill);
  --quality-medium: var(--quality-medium-fill);
  --quality-high: var(--quality-high-fill);
  --quality-very-high: var(--quality-very-high-fill);
  --quality-freddo-secco: var(--quality-freddo-fill);
  /* =====================
     SEMANTIC — Text
  ===================== */
  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-600);
  --text-primary-inverse: var(--grey-00);
  --text-hint: var(--grey-400);
  --text-link: var(--turquoise-800);
  /* =====================
     SEMANTIC — Icons
  ===================== */
  --icon-stroke: var(--turquoise-800);
  --icon-background: rgba(1, 107, 129, 0.1); /* turquoise-800 @ 10% */
  /* =====================
     SEMANTIC — Theme general
  ===================== */
  --theme-background: var(--grey-50);
  --theme-surface: var(--grey-00);
  --theme-primary: var(--green-600);
  --divider-color: var(--grey-200);
  --light-background: var(--grey-00);
  /* =====================
     SEMANTIC — Buttons
  ===================== */
  --btn-primary-bg: var(--grey-950);
  --btn-primary-text: var(--grey-00);
  --btn-primary-disabled: var(--grey-300);
  --btn-secondary-bg: var(--grey-00);
  --btn-secondary-text: var(--grey-950);
  --btn-secondary-border: var(--grey-950);
  --btn-secondary-disabled-text: var(--grey-300);
  /* =====================
     SEMANTIC — Inputs
  ===================== */
  --input-fill: var(--grey-00);
  --input-border: var(--grey-400);
  --input-border-focused: var(--green-700);
  --input-error: var(--red-600);
  /* =====================
     SPACING
  ===================== */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  /* =====================
     TYPOGRAPHY — Heading
  ===================== */
  --font-family-base: "Aria Display", sans-serif;
  --typography-h1-size: 34px;
  --typography-h1-weight: 350;
  --typography-h1-line-height: 130%;
  --typography-h1-letter-spacing: 0.3%;
  --typography-h2-size: 32px;
  --typography-h2-weight: 350;
  --typography-h2-line-height: 130%;
  --typography-h2-letter-spacing: 0.3%;
  --typography-h3-size: 24px;
  --typography-h3-weight: 350;
  --typography-h3-line-height: 130%;
  --typography-h3-letter-spacing: 0.3%;
  /* =====================
     TYPOGRAPHY — Paragraph
  ===================== */
  --typography-p1-size: 20px;
  --typography-p2-size: 18px;
  --typography-p3-size: 16px;
  --typography-p4-size: 14px;
  --typography-caption-size: 12px;
  --typography-weight-reg: 350;
  --typography-weight-med: 450;
  --typography-p-line-height: 140%;
  --typography-p-letter-spacing: 0.3%;
  /* =====================
     TYPOGRAPHY — Label Uppercase
  ===================== */
  --typography-label1-size: 18px;
  --typography-label2-size: 16px;
  --typography-label3-size: 14px;
  --typography-label4-size: 12px;
  --typography-label-line-height: 110%;
  --typography-label-letter-spacing: 4%;
  /* =====================
     TYPOGRAPHY — Interactive (buttons)
  ===================== */
  --typography-btn-s-size: 14px;
  --typography-btn-m-size: 16px;
  --typography-btn-l-size: 18px;
  --typography-btn-weight: 350;
  --typography-btn-line-height: 100%;
  --typography-btn-letter-spacing: 0.3%;
  /* =====================
     SEMANTIC — UI Accent
  ===================== */
  --logo-height: 24px;
  --ui-accent: #1a1d2e;
  --ui-accent-60: rgba(26, 29, 46, 0.60);
  --ui-accent-20: rgba(26, 29, 46, 0.20);
  --ui-accent-16: rgba(26, 29, 46, 0.16);
  --ui-accent-15: rgba(26, 29, 46, 0.15);
  --ui-accent-10: rgba(26, 29, 46, 0.10);
  --ui-accent-08: rgba(26, 29, 46, 0.08);
  --ui-accent-05: rgba(26, 29, 46, 0.05);
  --ui-accent-hover-icon: brightness(0);
}

/* _typography.scss */
/* Theming system — token semantici + override per tema */
:root {
  --main-bg: #f4f6fa;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --header-bg: #ffffff;
  --border-color: #edf2f7;
  --text-main: #1a1d2e;
  --text-muted: #64748b;
  --widget-bg: #ffffff;
  --chart-bg: #ffffff;
  --filter-bg: #ffffff;
  --img-filter: none;
  --sensor-icon-filter: none;
  --status-success: #0f9d58;
  --status-success-bg: #e6f9f0;
  --status-error: #d93025;
  --status-error-bg: #fdecea;
  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.12);
  --status-info: #3b82f6;
  --status-info-bg: rgba(59, 130, 246, 0.12);
}

[data-theme=night] {
  --main-bg: #0f1117;
  --card-bg: #1a1b2e;
  --sidebar-bg: #12131f;
  --header-bg: #12131f;
  --widget-bg: #1e2035;
  --chart-bg: #181928;
  --filter-bg: #1e2035;
  --border-color: rgba(255, 255, 255, 0.08);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --grey-00: #1a1b2e;
  --input-fill: #1e2035;
  --input-border: rgba(255, 255, 255, 0.12);
  --input-border-focused: rgba(255, 255, 255, 0.3);
  --radoff-dialog-bg: #1e2035;
  --scaffold-background: #0f1117;
  --img-filter: brightness(0.85) saturate(0.9);
  --sensor-icon-filter: brightness(1.1);
  --status-success: #34d399;
  --status-success-bg: rgba(52, 211, 153, 0.12);
  --status-error: #f87171;
  --status-error-bg: rgba(248, 113, 113, 0.12);
  --status-warning: #fbbf24;
  --status-warning-bg: rgba(251, 191, 36, 0.12);
  --status-info: #60a5fa;
  --status-info-bg: rgba(96, 165, 250, 0.12);
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

[data-theme=night] ::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme=night] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

[data-theme=night] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Variables mapping to your Dart RadoffColors */
.radoff-input-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.radoff-input-container .radoff-label {
  font-size: 14px;
  color: #333333;
}
.radoff-input-container .input-wrapper {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 0.75px solid #cccccc;
  border-radius: 8px;
  padding: 0 16px;
  transition: border-color 0.2s;
}
.radoff-input-container .input-wrapper:focus-within {
  border-color: #007bff;
}
.radoff-input-container .input-wrapper.error {
  border-color: #ff4d4d;
}
.radoff-input-container .input-wrapper input {
  border: none;
  background: transparent;
  padding: 16px 0;
  flex: 1;
  font-size: 14px;
  color: #333333;
  outline: none;
}
.radoff-input-container .input-wrapper input:disabled {
  color: #9e9e9e;
}
.radoff-input-container .footer-text {
  font-size: 12px;
  margin-top: 4px;
}
.radoff-input-container .footer-text .error-style {
  color: #ff4d4d;
}
.radoff-input-container .footer-text .helper-style {
  color: #9e9e9e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.radoff-input-container .footer-text .helper-icon {
  width: 12px;
  height: 12px;
}
.radoff-input-container.disabled .radoff-label, .radoff-input-container.disabled .input-wrapper {
  color: #9e9e9e;
  border-color: #9e9e9e;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* src/app/shared/stylebook/button/radoff-button.component.scss */
/* _typography.scss */
.radoff-btn {
  width: 100%;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, filter 0.2s ease;
}
.radoff-btn.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.radoff-btn.btn-primary:hover:not(:disabled) {
  background-color: var(--grey-800);
}
.radoff-btn.btn-primary:disabled {
  background-color: var(--btn-primary-disabled);
  opacity: 1;
  cursor: not-allowed;
}
.radoff-btn.btn-secondary {
  background: transparent;
  color: var(--grey-950);
  border: 1px solid var(--grey-950);
}
.radoff-btn.btn-secondary:hover {
  background: var(--grey-950);
  color: var(--grey-00);
}
.radoff-btn.btn-large {
  height: 52px;
  font-family: "Aria Display", sans-serif;
  font-style: normal;
  font-display: swap;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
}

/* Fixes the white spinner against the green background */
::ng-deep .mat-mdc-progress-spinner {
  --mdc-circular-progress-active-indicator-color: #ffffff !important;
}

/* Use your Radoff Theme Variables */
.radoff-checkbox-container {
  display: block;
  cursor: pointer;
  padding: 12px 0;
  -webkit-user-select: none;
          user-select: none;
  /* Accessibility: standard way to hide input but keep it focusable */
}
.radoff-checkbox-container .checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.radoff-checkbox-container .label-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}
.radoff-checkbox-container .prefix-icon {
  width: 18px;
  height: 18px;
}
.radoff-checkbox-container .custom-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-out;
  background-color: transparent;
}
.radoff-checkbox-container .custom-checkbox.checked {
  background-color: #007bff;
  border-color: #007bff;
}
.radoff-checkbox-container .custom-checkbox .check-icon {
  width: 18px;
  height: 18px;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: brightness(0) invert(1);
}
.radoff-checkbox-container .custom-checkbox .check-icon.show {
  transform: scale(1);
}
.radoff-checkbox-container .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.multi-selection-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.selection-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease-out;
  -webkit-user-select: none;
          user-select: none;
}

.selection-item.bordered {
  border: 0.75px solid var(--radio-border-color);
  border-radius: 8px;
  padding: 12px 16px;
}

.selection-item.selected-border {
  border-color: var(--radio-selected-border-color);
}

.option-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.label {
  flex: 1;
  font-size: 16px; /* p3Regular */
  color: var(--grey-600);
}

/* The Animated Checkbox Container */
.checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid var(--checkbox-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-out;
  background-color: transparent;
}

.checkbox-box.checked {
  background-color: var(--checkbox-selected-color);
  border-color: var(--checkbox-selected-color);
}

/* The Animated Check Icon (Scale Effect) */
.check-icon {
  width: 18px;
  height: 18px;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic Out */
}

.check-icon.visible {
  transform: scale(1);
}

.spacer {
  height: 12px;
}

.single-selection-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.selection-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease-out;
}

.selection-item.bordered {
  border: 0.75px solid var(--radio-border-color);
  border-radius: 8px;
  padding: 12px 16px;
}

.selection-item.selected-border {
  border-color: var(--radio-selected-border-color);
}

.label-wrapper {
  flex: 1;
  margin: 0 12px;
}

/* Radio Button Visuals */
.radio-outer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--radio-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease-out;
}

.radio-outer.selected {
  border-color: var(--radio-selected-color);
}

.radio-inner {
  width: 12px;
  height: 12px;
  background-color: var(--radio-selected-color);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic Out */
}

.radio-inner.visible {
  transform: scale(1);
}

.spacer {
  height: 12px;
}

.shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.mdc-line-ripple {
  display: none !important;
}

/* ... other global styles ... */
:root {
  --primary-color: #535257;
  --accent-color: #4caf50;
  --warn-color: #f46565;
  --success-color: #8bdd7c;
  --warning-color: #ffe484;
  --light-background: #e8f2f0;
  --light-foreground: #353339;
  --dark-background: #353339;
  --dark-foreground: white;
  --body-font-size: 14px;
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s;
}

*:hover {
  scrollbar-color: rgba(35, 37, 46, 0.4) transparent;
}

html, body {
  font-family: "Aria Display", sans-serif;
  height: 100%;
}

body {
  font-size: var(--body-font-size);
  color: var(--light-foreground);
  background-color: var(--light-background);
}

app-root {
  display: block;
  height: 100%;
}

/* Utility Classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.min-h-screen {
  min-height: 100vh;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

/* Buttons */
button {
  cursor: pointer;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Forms */
input,
textarea,
select {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* Error States */
.error {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px;
}

/* Loading State */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Custom */
/* --- Dialog & Popup Menu Theme --- */
.mat-mdc-dialog-container .mdc-dialog__surface {
  background-color: var(--radoff-dialog-bg) !important;
  border-radius: var(--radoff-border-radius) !important;
  box-shadow: var(--radoff-elevation-none) !important; /* Elevation 0 */
}

.mat-mdc-menu-panel {
  border-radius: var(--radoff-border-radius) !important;
  box-shadow: var(--radoff-elevation-none) !important;
}

/* --- Date Picker Theme --- */
.mat-datepicker-content {
  background-color: var(--theme-date-picker-bg, var(--grey-00)) !important;
  box-shadow: var(--radoff-elevation-none) !important;
}
.mat-datepicker-content .mat-calendar-header {
  background-color: var(--theme-date-picker-header-bg, var(--grey-00));
}

/* --- Action Icon Theme (Back Button) --- */
.mat-back-button {
  color: var(--icon-color);
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

/* Import del font Aria Display locale */
@font-face {
  font-family: "Aria Display";
  src: url('Aria-Display-250.woff2') format("woff2"), url('Aria-Display-250.woff') format("woff");
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aria Display";
  src: url('Aria-Display-350.woff2') format("woff2"), url('Aria-Display-350.woff') format("woff");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aria Display";
  src: url('Aria-Display-450.woff2') format("woff2"), url('Aria-Display-450.woff') format("woff");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
.error-alert {
  width: 100%;
  min-height: 83px;
  padding: 16px;
  margin-top: 16px;
  background: var(--red-600);
  border: 1px solid #ffa39e;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  color: var(--grey-00);
}

.success-alert {
  width: 100%;
  min-height: 83px;
  padding: 16px;
  margin-top: 16px;
  background: var(--Green-600, #1B8067);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  color: var(--grey-00);
}

.warning-alert {
  width: 100%;
  min-height: 83px;
  padding: 16px;
  margin-top: 16px;
  background: var(--yellow-500);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  color: var(--grey-900);
}
.warning-alert .alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.warning-alert .text-container-generic, .warning-alert .text-wrapper .text-container-generic {
  color: var(--grey-900);
}
.warning-alert .text-container, .warning-alert .text-wrapper .text-container {
  color: var(--grey-900);
}

.error-alert .text-wrapper, .success-alert .text-wrapper, .warning-alert .text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.error-alert .alert-icon, .success-alert .alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.error-alert .text-container-generic, .error-alert .text-wrapper .text-container-generic, .success-alert .text-container-generic, .success-alert .text-wrapper .text-container-generic {
  text-align: left;
  white-space: pre-line;
  color: var(--content-content-on-color, #FFF);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.054px;
}
.error-alert .text-container, .error-alert .text-wrapper .text-container, .success-alert .text-container, .success-alert .text-wrapper .text-container {
  text-align: left;
  align-self: center;
  color: var(--Greys-00, #FFF);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.048px;
}

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

:hover::-webkit-scrollbar-thumb {
  background: rgba(35, 37, 46, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(35, 37, 46, 0.6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Browser autofill override — removes the native blue background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--grey-00) inset !important;
  -webkit-text-fill-color: var(--grey-950) !important;
  caret-color: var(--grey-950);
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}

[data-theme=night] input:-webkit-autofill,
[data-theme=night] input:-webkit-autofill:hover,
[data-theme=night] input:-webkit-autofill:focus,
[data-theme=night] input:-webkit-autofill:active {
  -webkit-text-fill-color: #e2e8f0 !important;
  caret-color: #e2e8f0;
}

/*# sourceMappingURL=styles.css.map*/