@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

:where( :not(#microproduct-content,
    #microproduct-content *,
    #microproduct-section-accordion iframe,
    #microproduct-section-accordion iframe *)) {
  box-sizing: border-box;
}

:where(:not(#microproduct-content, #microproduct-content *)) {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-sans,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif);
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:where(button:not(#microproduct-content *,
    #microproduct-section-accordion *,
    .btn,
    .btn-primary,
    .btn-secondary,
    .button,
    [class*="btn-"])) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* Form elements inherit font properties but keep their padding */
:where(input:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(optgroup:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(select:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(textarea:not(#microproduct-content *, #microproduct-section-accordion *)) {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* Only apply color: inherit to non-button form elements */
:where(input:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(optgroup:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(select:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(textarea:not(#microproduct-content *, #microproduct-section-accordion *)) {
  color: inherit;
}

button:not(#microproduct-content *, #microproduct-section-accordion *),
select:not(#microproduct-content *, #microproduct-section-accordion *) {
  text-transform: none;
}

button:not(#microproduct-content *,
  #microproduct-section-accordion *,
  .btn,
  .btn-primary,
  .btn-secondary,
  .button,
  [class*="btn-"],
  .stepper-container *,
  .step-circle,
  .step-circle *,
  [class*="stepper-"] *,
  [class*="step-"] *,
  .modal-actions button,
  [class*="modal-"] button),
[type="button"]:not(#microproduct-content *,
  #microproduct-section-accordion *,
  .stepper-container *,
  .step-circle *,
  [class*="stepper-"] *,
  [class*="step-"] *,
  .modal-actions *,
  [class*="modal-"] *),
[type="reset"]:not(#microproduct-content *,
  #microproduct-section-accordion *,
  .stepper-container *,
  .step-circle *,
  [class*="stepper-"] *,
  [class*="step-"] *,
  .modal-actions *,
  [class*="modal-"] *),
[type="submit"]:not(#microproduct-content *,
  #microproduct-section-accordion *,
  .stepper-container *,
  .step-circle *,
  [class*="stepper-"] *,
  [class*="step-"] *,
  .modal-actions *,
  [class*="modal-"] *) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

button:not(#microproduct-content *, #microproduct-section-accordion *) {
  cursor: pointer;
}

button:disabled:not(#microproduct-content *, #microproduct-section-accordion *),
[disabled]:not(#microproduct-content *, #microproduct-section-accordion *) {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

:where(blockquote:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(dl:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(dd:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h1:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h2:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h3:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h4:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h5:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(h6:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(hr:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(figure:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(p:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(pre:not(#microproduct-content *, #microproduct-section-accordion *)) {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

:where(ol:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(ul:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(menu:not(#microproduct-content *, #microproduct-section-accordion *)) {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--color-text-disabled);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

:where(img:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(svg:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(video:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(canvas:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(audio:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(embed:not(#microproduct-content *, #microproduct-section-accordion *)),
:where(object:not(#microproduct-content *, #microproduct-section-accordion *)) {
  display: block;
  vertical-align: middle;
}

/* Allow iframes in microproduct to maintain their styling */
:where(iframe:not(#microproduct-content *,
    #microproduct-section-accordion *,
    #microproduct-section-accordion iframe)) {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

/* Additional resets for better cross-browser consistency */
*,
::before,
::after {
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  cursor: default;
}

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

:where(iframe) {
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

:where(table) {
  border-color: inherit;
  text-indent: 0;
}

/* Optum Sans Font Family */
@font-face {
  font-family: "Optum Sans";
  src: url("fonts/OptumSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans";
  src: url("fonts/OptumSans-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans";
  src: url("fonts/OptumSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans";
  src: url("fonts/OptumSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans";
  src: url("fonts/OptumSans-XBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Optum Sans Condensed Font Family */
@font-face {
  font-family: "Optum Sans Condensed";
  src: url("fonts/OptumSansCond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans Condensed";
  src: url("fonts/OptumSansCond-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans Condensed";
  src: url("fonts/OptumSansCond-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optum Sans Condensed";
  src: url("fonts/OptumSansCond-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-default: initial;
  --font-sans: "Roboto", serif;
  --font-roboto: "Roboto", serif;
  --font-optum-sans: "Optum Sans", "Enterprise Sans VF", sans-serif;
  --font-optum-sans-condensed: "Optum Sans Condensed", "Enterprise Sans VF",
    sans-serif;
  --color-background-default: #f5f5f5;
  --color-background-optum-secondary: #FBF9F4;
  --color-background-paper: #ffffff;
  --color-background-paper-dark: #3e424f;
  --color-text-primary-dark: #e7e9f1;
  --color-text-secondary-dark: #c0c4d3;
  --color-primary-main-dark: #578ad4;
  --color-text-primary: #323334;
  --color-text-secondary: #323334;
  --color-text-disabled: #b1b2b4;
  --color-light-text-disabled: rgba(0, 0, 0, 0.38);
  --color-text-disabled-dark: #b1b2b3;
  --color-transparent: rgba(0, 0, 0, 0);
  --color-text-contrast: #ffffff;
  --color-light-action-switchBackground: #98b5de;
  --color-text-light: #c0c4d3;
  --color-primary-main: #002677;
  --color-primary-light: #0c55b8;
  --color-primary-dark: #001d5b;
  --color-secondary-main: #ff612b;
  --color-secondary-light: #ffa752;
  --color-secondary-dark: #c25608;
  --color-info-main: #002677;
  --color-info-light: #eef4ff;
  --color-info-dark: #002677;
  --color-error-main: #c40000;
  --color-error-light: #fcf0f0;
  --color-error-dark: #c40000;
  --color-error-snackbar-main: #cf0000;
  --color-warning-main: #f5b700;
  --color-warning-light: #fef9ea;
  --color-warning-dark: #f5b700;
  --color-success-main: #007000;
  --color-success-light: #eff6ef;
  --color-success-dark: #007000;
  --color-close-light: #EEF4FF;
  --color-close-dark: #224AA0;
  --color-new-main: #C72887;
  --color-new-light: rgba(199, 40, 135, 0.1);
  --color-new-dark: #C72887;
  --color-grey-50: #fafafa;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #eeeeee;
  --color-grey-300: #e0e0e0;
  --color-grey-400: #b3b3b3;
  --color-grey-500: #959595;
  --color-grey-600: #757575;
  --color-grey-700: #636363;
  --color-grey-800: #444444;
  --color-grey-900: #222222;
  --dark-grey-500: #4d5162;
  --dark-grey-600: #8b90a2;
  --color-container-shadow: rgba(0, 0, 0, 0.25);
  --color-dark-background-default: #2f343f;
  --text-base: 14px;
  --text-xs: 12px;
  --text-sm: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  /* New design token colors */
  --color-accent: #d9f6fa;
  --color-neutral-90: #19191a;
  --color-neutral-80: #323334;
  --color-neutral-70: #4b4d4f;
  --color-neutral-56: #6e7072;
  --color-neutral-42: #929496;
  --color-neutral-30: #b1b2b4;
  --color-neutral-20: #cbcccd;
  --color-neutral-10: #e5e5e6;
  --color-neutral-5: #f2f2f2;
  --color-neutral-2: #fafafa;
  --color-surface-primary-hover: #effafc;
  --color-surface-info-hover: #eff6ff;
  --color-surface-danger: #fef2f2;
  --color-surface-danger-strong: #f8d7da;
  --color-surface-muted: #f8f9fa;
  --color-text-danger-strong: #721c24;
  --color-text-muted-strong: #6c757d;
  --color-focus-primary: var(--color-primary-light);
  --color-focus-primary-soft: rgba(12, 85, 184, 0.1);
  --color-focus-primary-medium: rgba(12, 85, 184, 0.2);
  --color-focus-primary-strong: rgba(12, 85, 184, 0.5);
  --color-state-hover-subtle: rgba(25, 25, 26, 0.04);
  --color-state-hover-muted: rgba(25, 25, 26, 0.08);
  --color-surface-overlay-light: rgba(255, 255, 255, 0.3);
  --color-surface-overlay-medium: rgba(255, 255, 255, 0.5);
  --color-surface-overlay-strong: rgba(255, 255, 255, 0.8);
  --color-surface-overlay-solid: rgba(255, 255, 255, 0.95);
  --color-surface-shade-subtle: rgba(0, 0, 0, 0.02);
  --color-surface-shade-soft: rgba(0, 0, 0, 0.05);
  --color-shadow-xs: rgba(0, 0, 0, 0.05);
  --color-shadow-subtle: rgba(0, 0, 0, 0.06);
  --color-shadow-sm: rgba(0, 0, 0, 0.08);
  --color-shadow-soft: rgba(0, 0, 0, 0.1);
  --color-shadow-card: rgba(0, 0, 0, 0.12);
  --color-shadow-layer: rgba(0, 0, 0, 0.14);
  --color-shadow-raised: rgba(0, 0, 0, 0.15);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);
  --color-shadow-strong: rgba(0, 0, 0, 0.9);
  --color-error-focus-soft: rgba(207, 0, 0, 0.1);
  --color-error-surface-subtle: rgba(207, 0, 0, 0.02);
  --color-error-surface-muted: rgba(207, 0, 0, 0.05);
  --color-error-focus-medium: rgba(220, 38, 38, 0.2);
  --color-error-pulse: rgba(239, 68, 68, 0.4);
  --color-error-pulse-transparent: rgba(239, 68, 68, 0);
  --color-secondary-surface-subtle: rgba(255, 97, 43, 0.1);
  --color-status-purple: #8061bc;
  --color-status-purple-light: rgba(128, 97, 188, 0.1);
  --color-status-violet: #9c27b0;
  --color-priority-critical: #c9730d;
  --color-priority-critical-light: rgba(201, 115, 13, 0.1);

  /* Pagination theme tokens */
  --pagination-container-margin-top: 1rem;
  --pagination-list-gap: 0.5rem;
  --pagination-control-size: 2.25rem;
  --pagination-control-padding-inline: 0.75rem;
  --pagination-control-radius: 0.375rem;
  --pagination-control-font-size: 0.875rem;
  --pagination-control-font-weight: 500;
  --pagination-control-active-font-weight: 700;
  --pagination-control-bg: var(--color-background-paper);
  --pagination-control-bg-hover: var(--color-neutral-2);
  --pagination-control-border: var(--color-neutral-20);
  --pagination-control-border-hover: var(--color-primary-main);
  --pagination-control-text: var(--color-text-primary);
  --pagination-control-accent: var(--color-primary-main);
  --pagination-control-active-bg: var(--color-primary-main);
  --pagination-control-active-border: var(--color-primary-main);
  --pagination-control-active-text: var(--color-text-contrast);
  --pagination-control-disabled-bg: var(--color-neutral-5);
  --pagination-control-disabled-border: var(--color-neutral-10);
  --pagination-control-disabled-text: var(--color-text-disabled);
  --pagination-ellipsis-text: var(--color-neutral-56);

  /* Common component theme tokens */
  --alert-notification-border: var(--color-warning-main);
  --alert-notification-bg: var(--color-warning-light);
  --alert-notification-text: var(--color-text-primary);
  --alert-notification-subtext: var(--color-text-secondary);
  --form-control-accent: var(--color-primary-light);
  --form-control-accent-hover: var(--color-primary-main);
  --form-control-accent-active-hover: var(--color-primary-dark);
  --form-control-border: var(--color-neutral-70);
  --form-control-label: var(--color-neutral-70);
  --form-control-label-hover: var(--color-neutral-90);
  --snackbar-bg: var(--color-text-primary);
  --snackbar-text: var(--color-text-contrast);
  --snackbar-shadow: var(--color-shadow-medium);
}

@layer base {
  .taskmaster h1 {
    @apply text-[36.48px] font-bold leading-[48px] text-[var(--color-primary-main)];
  }

  .taskmaster h2 {
    @apply text-[32.43px] font-bold leading-[40px] text-[var(--color-primary-main)];
  }

  .taskmaster h3 {
    @apply text-[28.83px] font-bold leading-[36px] text-[var(--color-primary-main)];
  }

  .taskmaster h4 {
    @apply text-[25.63px] font-bold leading-[32px] text-[var(--color-text-secondary)];
  }

  .taskmaster h5 {
    @apply text-[22.78px] font-bold leading-[28px] text-[var(--color-text-secondary)];
  }

  .taskmaster h6 {
    @apply text-[20.25px] font-bold leading-[24px] text-[var(--color-text-secondary)];
  }
}

@layer components {

  /* Pagination */
  .taskmaster .pagination-nav {
    @apply flex justify-center;
    margin-top: var(--pagination-container-margin-top);
  }

  .taskmaster .pagination-list {
    @apply flex items-center p-0 m-0 list-none;
    gap: var(--pagination-list-gap);
  }

  .taskmaster .pagination-control {
    @apply inline-flex items-center justify-center border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1;
    min-width: var(--pagination-control-size);
    height: var(--pagination-control-size);
    padding-inline: var(--pagination-control-padding-inline);
    border-radius: var(--pagination-control-radius);
    border-color: var(--pagination-control-border);
    background-color: var(--pagination-control-bg);
    color: var(--pagination-control-text);
    font-size: var(--pagination-control-font-size);
    font-weight: var(--pagination-control-font-weight);
    --tw-ring-color: var(--pagination-control-accent);
  }

  .taskmaster .pagination-control:hover:not(:disabled) {
    border-color: var(--pagination-control-border-hover);
    background-color: var(--pagination-control-bg-hover);
    color: var(--pagination-control-accent);
  }

  .taskmaster .pagination-control:disabled {
    cursor: not-allowed;
    border-color: var(--pagination-control-disabled-border);
    background-color: var(--pagination-control-disabled-bg);
    color: var(--pagination-control-disabled-text);
  }

  .taskmaster .pagination-control--accent {
    color: var(--pagination-control-accent);
  }

  .taskmaster .pagination-control--active,
  .taskmaster .pagination-control--active:disabled {
    cursor: default;
    border-color: var(--pagination-control-active-border);
    background-color: var(--pagination-control-active-bg);
    color: var(--pagination-control-active-text);
    font-weight: var(--pagination-control-active-font-weight);
  }

  .taskmaster .pagination-ellipsis {
    @apply inline-flex items-center justify-center;
    min-width: var(--pagination-control-size);
    height: var(--pagination-control-size);
    padding-inline: var(--pagination-control-padding-inline);
    color: var(--pagination-ellipsis-text);
    font-size: var(--pagination-control-font-size);
  }

  /* Alert Notification */
  .taskmaster .alert-notification {
    display: flex;
    width: 100%;
    padding: var(--Padding-Base-Padding-sm, 16px);
    align-items: flex-start;
    gap: var(--Spacing-spacing-2, 16px);
    align-self: stretch;
    border-radius: var(--Radius-radius-md, 8px);
    border: 1px solid var(--alert-notification-border);
    background: var(--alert-notification-bg);
  }

  .taskmaster .alert-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    flex-grow: 1;
    gap: 8px;
    min-width: 0;
  }

  .taskmaster .alert-message-row {
    display: flex;
    align-items: flex-start;
    gap: var(--Spacing-spacing-2, 16px);
  }

  .taskmaster .alert-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .taskmaster .alert-svg {
    width: 20px;
    height: 20px;
  }

  .taskmaster .alert-message {
    color: var(--alert-notification-text);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .taskmaster .alert-sub-labels {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 4px;
    margin-left: 36px;
    min-width: 0;
  }

  .taskmaster .alert-sub-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    color: var(--alert-notification-subtext);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .taskmaster .alert-sub-item::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--alert-notification-border);
  }

  /* Checkbox Styles */
  .taskmaster .checkbox-container,
  .taskmaster .single-checkbox-container,
  .taskmaster .checkbox-with-label-container {
    padding: 6px 3px 6px 0;
  }

  .taskmaster .single-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .taskmaster .checkbox-with-label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .taskmaster .checkbox-with-label-content {
    flex: 1;
  }

  .taskmaster .checkbox-heading,
  .taskmaster .checkbox-with-label-heading {
    color: var(--color-text-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 8px;
  }

  .taskmaster .checkbox-heading.required:focus,
  .taskmaster .checkbox-with-label-heading.required:focus {
    color: var(--color-error-light);
  }

  .taskmaster .checkbox-container input[type="checkbox"],
  .taskmaster .single-checkbox-container input[type="checkbox"],
  .taskmaster .checkbox-with-label-container input[type="checkbox"] {
    accent-color: var(--form-control-border);
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  .taskmaster .checkbox-with-label-container input[type="checkbox"] {
    margin-top: 2px;
  }

  .taskmaster .checkbox-container input[type="checkbox"]:checked,
  .taskmaster .single-checkbox-container input[type="checkbox"]:checked,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]:checked {
    accent-color: var(--form-control-accent);
    font-size: 16px;
  }

  .taskmaster .checkbox-container input[type="checkbox"]:checked:hover,
  .taskmaster .single-checkbox-container input[type="checkbox"]:checked:hover,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]:checked:hover {
    accent-color: var(--form-control-accent-hover);
    font-size: 16px;
  }

  .taskmaster .checkbox-container input[type="checkbox"]:hover,
  .taskmaster .single-checkbox-container input[type="checkbox"]:hover,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]:hover {
    accent-color: var(--form-control-label-hover);
    color: var(--color-neutral-30);
  }

  .taskmaster .checkbox-container input[type="checkbox"]+label,
  .taskmaster .single-checkbox-container input[type="checkbox"]+label,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]+label {
    color: var(--form-control-label);
    font-size: 16px;
  }

  .taskmaster .checkbox-with-label-container input[type="checkbox"]+label {
    font-weight: 400;
  }

  .taskmaster .checkbox-container input[type="checkbox"]:hover+label,
  .taskmaster .single-checkbox-container input[type="checkbox"]:hover+label,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]:hover+label {
    color: var(--form-control-label-hover);
  }

  .taskmaster .checkbox-container input[type="checkbox"]:disabled+label,
  .taskmaster .single-checkbox-container input[type="checkbox"]:disabled+label,
  .taskmaster .checkbox-with-label-container input[type="checkbox"]:disabled+label {
    color: var(--form-control-label);
  }

  .taskmaster .checkbox-description {
    font-size: 16px;
    color: var(--color-neutral-70);
    line-height: 1.4;
  }

  .taskmaster .single-checkbox-error,
  .taskmaster .checkbox-with-label-error {
    font-size: 14.22px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-error-main);
    margin-top: 4px;
  }

  /* Custom Radio Styles */
  .taskmaster .custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .taskmaster .custom-radio {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    user-select: none;
  }

  .taskmaster .custom-radio .radio-checkmark {
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid var(--form-control-border);
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: transparent;
  }

  .taskmaster .custom-radio input:checked~.radio-checkmark {
    background-color: var(--form-control-accent);
    border-color: var(--form-control-accent);
  }

  .taskmaster .custom-radio .radio-checkmark .checkmark-icon {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .taskmaster .custom-radio input:checked~.radio-checkmark .checkmark-icon {
    opacity: 1;
  }

  .taskmaster .custom-radio:hover .radio-checkmark {
    border-color: var(--form-control-accent);
  }

  .taskmaster .custom-radio input:checked:hover~.radio-checkmark {
    background-color: var(--form-control-accent-active-hover);
    border-color: var(--form-control-accent-active-hover);
  }

  .taskmaster .custom-radio input:disabled~.radio-checkmark,
  .taskmaster .custom-radio input:disabled~.radio-label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .taskmaster .custom-radio .radio-label {
    color: var(--form-control-label);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .taskmaster .custom-radio:hover .radio-label {
    color: var(--form-control-label-hover);
  }

  .taskmaster .radio-heading {
    color: var(--color-neutral-80);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 8px;
  }

  .taskmaster .radio-heading.required:focus {
    color: var(--color-error-light);
  }

  .taskmaster .radio-container {
    padding: 6px 3px 6px 0;
  }

  .taskmaster .radiobutton-wrapper .radio-horizontal {
    gap: 3rem !important;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
  }

  .taskmaster .radiobutton-wrapper .radio-horizontal-option {
    display: flex;
    align-items: center;
    margin-right: 3rem;
    padding: 0;
  }

  .taskmaster .radiobutton-wrapper .radio-horizontal-option:last-child {
    margin-right: 0;
  }

  .taskmaster .error-message {
    font-size: 14.22px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-error-main);
  }

  /* Button Styles */
  .taskmaster .btn-primary {
    @apply flex items-center w-fit h-fit gap-2 py-[10px] px-6 text-[16px] text-white font-bold rounded-[46px] border cursor-pointer bg-[var(--color-primary-main)] border-[var(--color-primary-main)];
    @apply hover:bg-[var(--color-primary-dark)] hover:border-[var(--color-primary-dark)];
    min-width: 145px;
    max-height: 40px;
  }

  .taskmaster .btn-primary:disabled {
    @apply cursor-not-allowed bg-[var(--color-neutral-5)] text-[var(--color-text-disabled)] border-[var(--color-neutral-5)];
  }

  .taskmaster .btn-secondary {
    @apply flex items-center w-fit h-fit gap-2 py-[10px] px-6 text-[16px] text-[var(--color-primary-main)] font-extrabold rounded-[46px] border-2 cursor-pointer bg-white border-[var(--color-primary-main)];
    @apply hover:bg-[var(--color-surface-primary-hover)] hover:border-[var(--color-primary-main)];
    min-width: 145px;
    max-height: 40px;
  }

  .taskmaster .btn-secondary:disabled {
    @apply cursor-not-allowed text-[var(--color-text-disabled)] border-[var(--color-neutral-20)];
  }

  .taskmaster .btn-text {
    @apply flex items-center w-fit h-fit gap-2 py-0.5 px-2 text-[16px] text-[var(--color-primary-light)] font-bold rounded-sm border cursor-pointer bg-transparent border-transparent;
    @apply hover:bg-[var(--color-state-hover-subtle)] hover:rounded-[4px];
  }

  .taskmaster .btn-text:disabled {
    @apply cursor-not-allowed text-[var(--color-text-disabled)];
  }

  .taskmaster .btn-lg {
    @apply py-2 px-5 text-[15px];
  }

  .taskmaster .btn-sm {
    @apply gap-1 py-0 px-1 text-[13px];
  }

  /* Accordion Styles */
  .taskmaster .accordion {
    @apply bg-white border border-[var(--color-neutral-70)] border-solid rounded-none p-6 max-w-[948px];
  }

  .taskmaster .accordion:hover {
    @apply bg-[var(--color-state-hover-muted)];
  }

  .taskmaster .accordion-header {
    @apply text-[20.25px] font-bold leading-6 text-[var(--color-text-secondary)];
  }

  .taskmaster .accordion-content {
    @apply text-[16px] font-normal leading-5 text-[var(--color-text-primary)] p-[16px_24px_24px_24px];
  }

  /* Action Card Styles */
  .taskmaster .action-card {
    @apply bg-white border border-[var(--color-neutral-20)] border-solid rounded-[12px] p-6;
  }

  .taskmaster .action-card-title {
    @apply text-[22.78px] font-bold leading-7 text-[var(--color-primary-main)];
  }

  .taskmaster .action-card-description {
    @apply text-[16px] font-normal leading-5 text-black;
  }

  .taskmaster .action-card-backdrop {
    @apply bg-[var(--color-state-hover-subtle)] rounded-[12px] p-[16px_24px];
  }

  /* Alert Styles Updated */
  .taskmaster .alert {
    @apply flex p-4 text-sm relative rounded-[12px] border border-solid;
  }

  .taskmaster .alert-success {
    @apply bg-[var(--color-success-light)] text-[var(--color-success-main)] border-[var(--color-success-main)];
  }

  .taskmaster .alert-error {
    @apply bg-[var(--color-error-light)] text-[var(--color-error-main)] border-[var(--color-error-main)];
  }

  .taskmaster .alert-warning {
    @apply bg-[var(--color-warning-light)] text-[var(--color-text-secondary)] border-[var(--color-warning-main)];
  }

  .taskmaster .alert-info {
    @apply bg-[var(--color-info-light)] text-[var(--color-info-main)] border-[var(--color-info-main)];
  }

  /* Card Styles */
  .taskmaster .card-base {
    @apply bg-white border border-[var(--color-neutral-30)] border-solid rounded-[12px] p-6;
    box-shadow: 0px 3px 1px -2px var(--color-shadow-medium),
      0px 2px 2px var(--color-shadow-layer), 0px 1px 5px var(--color-shadow-card);
  }

  .taskmaster .card-base:hover {
    @apply bg-[var(--color-neutral-5)];
  }

  .taskmaster .card-nested {
    @apply bg-white border border-[var(--color-neutral-42)] border-solid rounded-[24px] p-8;
  }

  .taskmaster .card-nested-contrast {
    @apply bg-[var(--color-neutral-2)];
  }

  .taskmaster .card-nested-promo {
    @apply bg-[var(--color-accent)];
  }

  /* Chip Styles */
  .taskmaster .chip-filled-sm {
    @apply h-6 px-2 py-1 text-[12.64px] font-normal leading-4 text-[var(--color-text-secondary)] bg-transparent border border-transparent border-solid rounded-[4px];
  }

  .taskmaster .chip-filled-sm.alert {
    @apply bg-[var(--color-error-light)] border-[var(--color-error-light)];
  }

  .taskmaster .chip-filled-sm.info {
    @apply bg-[var(--color-info-light)] border-[var(--color-info-light)];
  }

  .taskmaster .chip-filled-sm.success {
    @apply bg-[var(--color-success-light)] border-[var(--color-success-light)];
  }

  .taskmaster .chip-filled-sm.warning {
    @apply bg-[var(--color-warning-light)] border-[var(--color-warning-light)];
  }

  .taskmaster .chip-filter-sm {
    @apply h-6 px-2 py-1 text-[12.64px] font-bold leading-4 text-[var(--color-primary-light)] bg-white border border-[var(--color-primary-light)] border-solid rounded-[4px];
  }

  .taskmaster .chip-filter-sm:hover {
    @apply bg-white border-[var(--color-primary-main)] text-[var(--color-primary-main)];
  }

  .taskmaster .chip-filter-sm:disabled {
    @apply bg-[var(--color-neutral-5)] border-[var(--color-neutral-5)] text-[var(--color-text-disabled)];
  }

  /* Input Field Styles */
  .taskmaster .input-wrapper {
    @apply relative w-full;
  }

  .taskmaster .input-wrapper label {
    @apply text-[var(--color-text-secondary)] text-[16px] font-bold leading-5 mb-1;
  }

  .taskmaster input[type="text"],
  .taskmaster input[type="email"],
  .taskmaster input[type="password"],
  .taskmaster input[type="number"],
  .taskmaster input[type="date"],
  .taskmaster select,
  .taskmaster textarea {
    @apply relative text-[16px] font-normal leading-5 text-[var(--color-text-primary)] max-w-full h-10 bg-white border border-[var(--color-neutral-56)] border-solid rounded-[4px];
    padding: 10px 12px !important;
  }

  .taskmaster input[type="text"]:hover,
  .taskmaster input[type="email"]:hover,
  .taskmaster input[type="password"]:hover,
  .taskmaster input[type="number"]:hover,
  .taskmaster input[type="date"]:hover,
  .taskmaster select:hover,
  .taskmaster textarea:hover {
    @apply border-[var(--color-neutral-90)];
  }

  .taskmaster input[type="text"]:focus,
  .taskmaster input[type="email"]:focus,
  .taskmaster input[type="password"]:focus,
  .taskmaster input[type="number"]:focus,
  .taskmaster input[type="date"]:focus,
  .taskmaster select:focus,
  .taskmaster textarea:focus {
    @apply border-[var(--color-primary-light)] border-[3px] outline-none;
  }

  .taskmaster input[type="text"]:disabled,
  .taskmaster input[type="email"]:disabled,
  .taskmaster input[type="password"]:disabled,
  .taskmaster input[type="number"]:disabled,
  .taskmaster input[type="date"]:disabled,
  .taskmaster select:disabled,
  .taskmaster textarea:disabled {
    @apply border-[var(--color-text-disabled)] text-[var(--color-neutral-56)];
  }

  .taskmaster .input-error {
    @apply text-[var(--color-error-main)] text-[14.22px] font-normal leading-[18px];
  }

  /* Checkbox Styles */
  .taskmaster .checkbox-wrapper .check-label {
    @apply text-[16px] leading-5 font-normal text-[var(--color-text-primary)];
  }

  .taskmaster .checkbox-wrapper input[type="checkbox"] {
    @apply border-[var(--color-text-primary)];
  }

  .taskmaster .checkbox-wrapper input[type="checkbox"]:hover {
    @apply border-[var(--color-neutral-90)];
  }

  .taskmaster .checkbox-wrapper input[type="checkbox"]:checked {
    @apply bg-[var(--color-primary-light)] border-[var(--color-primary-light)];
  }

  .taskmaster .checkbox-wrapper input[type="checkbox"]:checked:hover {
    @apply bg-[var(--color-primary-main)] border-[var(--color-primary-main)];
  }

  /* Radio Button Styles */
  .taskmaster .radiobutton-wrapper .radiobutton-label {
    @apply text-[16px] leading-5 font-normal text-[var(--color-text-primary)];
  }

  .taskmaster .radiobutton-wrapper input[type="radio"]:checked~.radiobutton-label {
    @apply font-normal text-[var(--color-text-primary)];
  }

  .taskmaster .radiobutton-wrapper input[type="radio"] {
    @apply border-[var(--color-text-primary)];
  }

  .taskmaster .radiobutton-wrapper input[type="radio"]:hover {
    @apply border-[var(--color-neutral-90)];
  }

  .taskmaster .radiobutton-wrapper input[type="radio"]:checked {
    @apply bg-[var(--color-primary-light)] border-[var(--color-primary-light)];
  }

  .taskmaster .radiobutton-wrapper input[type="radio"]:checked:hover {
    @apply bg-[var(--color-primary-main)] border-[var(--color-primary-main)];
  }

  /* Modal Styles */
  .taskmaster .modal-container {
    @apply bg-white rounded-[12px];
    box-shadow: 0px 4px 12px var(--color-shadow-card);
  }

  .taskmaster .modal-header {
    @apply text-[24px] font-bold leading-9 text-[var(--color-primary-main)];
  }

  .taskmaster .modal-body {
    @apply text-[16px] font-normal leading-5 text-[var(--color-text-primary)];
  }

  .taskmaster .modal-curtain {
    @apply bg-[var(--color-neutral-90)] opacity-70;
  }

  /* Tooltip Styles */
  .taskmaster .tooltip-container {
    @apply bg-[var(--color-text-secondary)] rounded-[4px];
  }

  .taskmaster .tooltip-label {
    @apply text-white text-[16px] font-normal leading-5;
  }

  /* Link Styles */
  .taskmaster .link-inline {
    @apply text-[var(--color-primary-light)] text-[16px] font-normal leading-5 underline;
  }

  .taskmaster .link-inline:hover {
    @apply text-[var(--color-primary-main)] no-underline;
  }

  .taskmaster .link-inline:focus {
    @apply outline outline-2 outline-[var(--color-primary-light)];
  }

  .taskmaster .link-standalone {
    @apply text-[var(--color-primary-light)] text-[16px] font-bold leading-5;
  }

  .taskmaster .link-standalone:hover {
    @apply text-[var(--color-primary-main)];
  }

  /* Switch */

  /* Optum Sans Font Utilities */
  .taskmaster .font-optum-sans {
    font-family: var(--font-optum-sans);
  }

  .taskmaster .font-optum-sans-condensed {
    font-family: var(--font-optum-sans-condensed);
  }

  .taskmaster .font-optum-regular {
    font-family: var(--font-optum-sans);
    font-weight: 400;
  }

  .taskmaster .font-optum-bold {
    font-family: var(--font-optum-sans);
    font-weight: 700;
  }

  .taskmaster .font-optum-xbold {
    font-family: var(--font-optum-sans);
    font-weight: 800;
  }

  .taskmaster .font-optum-condensed-regular {
    font-family: var(--font-optum-sans-condensed);
    font-weight: 400;
  }

  .taskmaster .font-optum-condensed-bold {
    font-family: var(--font-optum-sans-condensed);
    font-weight: 700;
  }

}

/* Snackbar nodes are appended directly to body, outside the .taskmaster wrapper. */
.snackbar {
  position: fixed;
  min-width: 280px;
  max-width: 90%;
  background-color: var(--snackbar-bg);
  color: var(--snackbar-text);
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 4px 12px var(--snackbar-shadow);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  z-index: 200000;
}

.snackbar-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.snackbar-top-center {
  top: 20px;
  left: 50%;
  transform: translate(-50%, -100%);
}

.snackbar-bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 100%);
}

.snackbar-top-left {
  top: 20px;
  left: 20px;
  transform: translateY(-100%);
}

.snackbar-top-right {
  top: 20px;
  right: 20px;
  transform: translateY(-100%);
}

.snackbar-bottom-left {
  bottom: 20px;
  left: 20px;
  transform: translateY(100%);
}

.snackbar-bottom-right {
  bottom: 20px;
  right: 20px;
  transform: translateY(100%);
}

.snackbar.show.snackbar-top-center,
.snackbar.show.snackbar-bottom-center {
  transform: translate(-50%, 0);
  opacity: 1;
}

.snackbar.show.snackbar-top-left,
.snackbar.show.snackbar-top-right,
.snackbar.show.snackbar-bottom-left,
.snackbar.show.snackbar-bottom-right {
  transform: translateY(0);
  opacity: 1;
}

.snackbar-success,
.snackbar-error,
.snackbar-info {
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--Font-Line-height-Body-1, 20px);
  width: 35%;
}

.snackbar-success {
  background-color: var(--color-success-light);
  color: var(--color-success-main);
  border: 1px solid var(--color-success-main);
}

.snackbar-error {
  background-color: var(--color-error-light);
  color: var(--color-error-main);
  border: 1px solid var(--color-error-main);
}

.snackbar-info {
  background-color: var(--color-info-light);
  color: var(--color-info-main);
  border: 1px solid var(--color-info-main);
}

.snackbar-warning {
  background-color: var(--color-warning-light);
  color: var(--color-text-primary);
}

/* Dashboard table column select arrow positioning */
#dashboard-table-column-select .select-arrow {
  top: 60% !important;
}

/* More specific selector to ensure it applies */
div#dashboard-table-column-select .select-arrow,
#dashboard-table-column-select>.select-arrow {
  top: 60% !important;
  transform: translateY(-50%) !important;
}

.back-btn button,
.next-btn button {
  font-weight: bold !important;
}