.flex-wrap {
  flex-wrap: wrap;
}

/* ******************************************************************************************************************************************** */
/* Custom styles for field-unit__field and field-unit__label : pour les éléments de la gemme Administrate */
/* ******************************************************************************************************************************************** */
.field-unit__field, .field-unit__label {
  margin-left: 0 !important;
}

.field-unit__label {
  font-weight: 600 !important;
  font-size: .875rem !important;
  line-height: 1.25rem !important;
  text-align: left !important;
  margin-bottom: .5rem !important;
  width: 100% !important;
}

.field-unit__field select, .field-unit__field input {
  border-radius: 5px;
  line-height: 1.25rem;
}

/* Administrate-style form inputs - moved to application.tailwind.css */

/* ******************************************************************************************************************************************** */
/* Pour correctement centrer l'icon eye et eye-slash sur la page de login */
/* ******************************************************************************************************************************************** */
#toggle-password-visibility {
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  height: 100%;
  transform: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#eye-icon, #eye-slash-icon {
  width: 1.5rem; /* Adjust size as needed */
  height: 1.5rem; /* Adjust size as needed */
}
#password-field {
  height: 2.5rem;
  padding-right: 2.75rem;
}

/* ******************************************************************************************************************************************** */
/* For Mozilla PDF.js viewer */
/* ******************************************************************************************************************************************** */
.document-canvas {
  background-color: rgba(0, 0, 0, 0.05);
  height: auto;
  max-height: 65vh;
  max-width: 100%;
  width: auto;
}

.document-loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: black;
  padding: 5px;
  border-radius: 3px;
}

/* Limiter la taille maximale de l'image */
.img-viewer {
  max-width: 100%;
  max-height: 60vh; /* 65% de la hauteur de la fenêtre */
  /* object-fit: contain; Pour s'assurer que l'image garde ses proportions */
}

/* Limiter la taille maximale du canvas */
.canvas-viewer {
  max-width: 100%;
  max-height: 65vh; /* 65% de la hauteur de la fenêtre */
}

/* Centrer le PDF dans le canvas */
.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* ******************************************************************************************************************************************** */
/* Eléments de la page employee/show */
/* ******************************************************************************************************************************************** */
  [data-type="view-selector"] {
    color: white;
    font-weight: bold;
  }
  [data-type="view-selector"].selected {
    opacity: 1;
    border-color: black;
    pointer-events: none;
    outline: none; /* For focus state */
    background-color: #4299e1; /* Example color, adjust as needed */
  }

  [data-type="view-selector"].not-selected {
    opacity: 0.6;
    border-color: transparent;
    background-color: #718096; /* Example color, adjust as needed */
  }


/* ******************************************************************************************************************************************** */
/* TdS - Activity Report  */
/* ******************************************************************************************************************************************** */
  .calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(2px, 1vw, 6px);
  }

  /* make the last odd tile span full width (good for 3 tiles in 2-col grid) */
  .show-card-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .show-card-grid > .card-type-1 {
    overflow-x: auto;
  }

  /* En-tetes jours de la semaine */
  .calendar > .calendar-day-header {
    text-align: center;
    font-size: clamp(0.5rem, 2vw, 0.85rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6e50b2;
    border: none;
    padding: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Cases jour (conteneur AM + PM) */
  .calendar > .calendar-day-cell {
    position: relative;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    padding: 2px 0 4px;
  }

  /* Numero du jour */
  .calendar-day-cell .calendar-day-number {
    font-size: clamp(0.55rem, 2vw, 0.9rem);
    font-weight: 600;
    color: #374151;
    padding: 4px 0 3px;
    line-height: 1;
  }

  .calendar-day-expense-required-marker {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: #dc2626;
  }

  .calendar-day-cell .calendar-day-expense-required-marker {
    position: absolute;
    top: 5px;
    right: 5px;
    box-shadow: 0 0 0 2px #fff;
  }

  /* Slots AM/PM */
  div.calendar-slot {
    border-radius: 4px;
    margin: 2px 3px;
    transition: background-color 0.15s ease;
  }

  div.calendar-slot label {
    font-size: clamp(0.35rem, 1.5vw, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: clamp(1px, 0.5vw, 3px) clamp(2px, 1vw, 6px);
  }

  /* Disabled state */
  div.disabled {
    background-color: #d4d5d6;
    opacity: 0.6;
  }

  .type_day_selector {
    font-family: 'Roboto', sans-serif;
    min-width: clamp(80px, 20vw, 120px);
    height: auto;
    padding: clamp(0.25rem, 1vw, 0.375rem) clamp(0.5rem, 1.5vw, 0.75rem);
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 2.5vw, 13px);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .type_day_selector:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }

  /* 9 types de journees */
  [data-type-day="blank"] {
    background-color: white;
  }

  [data-type-day="public_holiday"],
  div.calendar-slot:has(>input[value="public_holiday"]) {
    background-color: #969BA7;
  }

  /* Jour travaillé */
  [data-type-day="working"]:not([data-no-style="true"]),
  [data-type-day="working"]:hover:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="working"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="working"]):hover:not([data-no-style="true"]) {
    background-color: #69BE28;
  }

  button.type_day_selector[data-type-day="working"] {
    background-color: #69BE28;
    color: #002244;
  }

  button.type_day_selector[data-type-day="working"][data-selected="true"] {
    border-color: #69BE28;
    box-shadow: 0 0 0 3px rgba(105, 190, 40, 0.2);
  }

  /* Télétravail */
  [data-type-day="teleworking"]:not([data-no-style="true"]),
  [data-type-day="teleworking"]:hover:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="teleworking"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="teleworking"]):hover:not([data-no-style="true"]) {
    background-color: #3a8ad1;
  }

  button.type_day_selector[data-type-day="teleworking"] {
    background-color: #3a8ad1;
    color: #002244;
  }

  button.type_day_selector[data-type-day="teleworking"][data-selected="true"] {
    border-color: #3a8ad1;
    box-shadow: 0 0 0 3px rgba(0, 76, 84, 0.2);
  }

  /* Congés payés */
  [data-type-day="paid_day_off"]:not([data-no-style="true"]),
  [data-type-day="paid_day_off"]:hover:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="paid_day_off"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="paid_day_off"]):hover:not([data-no-style="true"]) {
    background-color: #FFB612;
  }

  button.type_day_selector[data-type-day="paid_day_off"] {
    background-color: #FFB612;
    color: #000; /* texte noir pour meilleure lisibilité */
  }

  button.type_day_selector[data-type-day="paid_day_off"][data-selected="true"] {
    border-color: #FFB612;
    box-shadow: 0 0 0 3px rgba(179, 153, 93, 0.2);
  }

  /* Absences spécifiques (mapped from WorkStoppage.reason via WorkStoppage.css_class_for_reason) */
  div.calendar-slot.sick_leave:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="sick_leave"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="sick_leave"]):hover:not([data-no-style="sick_leave"])  {
    background-color: #ab0967;
  }

  div.calendar-slot.work_accident:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="work_accident"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="work_accident"]):hover:not([data-no-style="work_accident"])  {
    background-color: #eb094d;
  }

  div.calendar-slot.work_related_disease:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="work_related_disease"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="work_related_disease"]):hover:not([data-no-style="work_related_disease"])  {
    background-color: #eb094d;
  }

  div.calendar-slot.commuting_accident:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="commuting_accident"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="commuting_accident"]):hover:not([data-no-style="commuting_accident"])  {
    background-color: #eb094d;
  }

  div.calendar-slot.family_event_leave:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="family_event_leave"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="family_event_leave"]):hover:not([data-no-style="family_event_leave"])  {
    background-color: #b4a7d6;
  }

  div.calendar-slot.paternity_leave:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="paternity_leave"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="paternity_leave"]):hover:not([data-no-style="paternity_leave"])  {
    background-color: #674ea7;
  }

  div.calendar-slot.maternity_leave:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="maternity_leave"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="maternity_leave"]):hover:not([data-no-style="maternity_leave"])  {
    background-color: #fa52f2;
  }

  div.calendar-slot.additional_birth_leave:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="additional_birth_leave"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="additional_birth_leave"]):hover:not([data-no-style="additional_birth_leave"])  {
    background-color: #00a99d;
  }

  /* Synthèse du calendrier CRA dans les suites de tests TDS.
     Les couleurs reprennent celles des slots du calendrier Activity Report. */
  .tds-calendar-day {
    position: relative;
    display: block;
    border-radius: 4px;
    padding: 2px 1px;
    color: #002244;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }
  .tds-calendar-day--blank { background-color: white; }
  .tds-calendar-day--public_holiday { background-color: #969BA7; }
  .tds-calendar-day--working { background-color: #69BE28; }
  .tds-calendar-day--teleworking { background-color: #3a8ad1; }
  .tds-calendar-day--paid_day_off { background-color: #FFB612; }
  .tds-calendar-day--sick_leave { background-color: #ab0967; color: white; }
  .tds-calendar-day--work_accident,
  .tds-calendar-day--work_related_disease,
  .tds-calendar-day--commuting_accident { background-color: #eb094d; color: white; }
  .tds-calendar-day--family_event_leave { background-color: #b4a7d6; }
  .tds-calendar-day--paternity_leave { background-color: #674ea7; color: white; }
  .tds-calendar-day--maternity_leave { background-color: #fa52f2; }
  .tds-calendar-day--additional_birth_leave { background-color: #00a99d; color: white; }
  .tds-calendar-day--rtt { background-color: #ffd966; }

  .tds-calendar-tooltip {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 50%;
    width: max-content;
    max-width: 13rem;
    transform: translateX(-50%);
    border-radius: 4px;
    background: #002244;
    color: white;
    padding: 4px 7px;
    font-size: 11px;
    line-height: 1.25;
    pointer-events: none;
    white-space: normal;
  }

  [data-type-day="rtt"]:not([data-no-style="true"]),
  [data-type-day="rtt"]:hover:not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="rtt"]):not([data-no-style="true"]),
  div.calendar-slot:has(>input[value="rtt"]):hover:not([data-no-style="true"]) {
    background-color: #ffd966;  /* bleu */
  }

  button.type_day_selector[data-type-day="rtt"] {
    background-color: #ffd966;
    color: white;
  }

  button.type_day_selector[data-type-day="rtt"][data-selected="true"] {
    border-color: #ffd966;
    box-shadow: 0 0 0 3px rgba(93, 173, 244, 0.2);
  }

  /* Boutons utilitaires */
  button.type_day_selector--utility {
    background-color: #002244;
    color: white;
  }

  button.type_day_selector--utility:hover {
    background-color: #1a2840;
  }

  /* Bouton Réinitialiser - #AA0000 */
  button.type_day_selector--reset,
  .type_day_selector--reset > button {
    background-color: #AA0000;
    color: white;
  }

  button.type_day_selector--reset:hover,
  .type_day_selector--reset > button:hover {
    background-color: #880000;
  }

  [data-selected="true"]{
    outline-width: 1px;
    outline-color: #1f2937;
    outline-style: solid;
  }

  .hidden-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .hidden-scroll::-webkit-scrollbar {
    display: none;
  }

  .accessible-scroll,
  html.accessibility-mode {
    --scroll-thumb: #64748b;
    --scroll-track: #e2e8f0;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .accessible-scroll {
    overflow-y: scroll;
  }

  html.accessibility-mode * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .dark .accessible-scroll,
  html.dark.accessibility-mode {
    --scroll-thumb: #94a3b8;
    --scroll-track: #1e293b;
  }

  .accessible-scroll::-webkit-scrollbar,
  html.accessibility-mode::-webkit-scrollbar,
  html.accessibility-mode ::-webkit-scrollbar {
    display: block;
    width: 16px;
    height: 16px;
  }

  .accessible-scroll::-webkit-scrollbar-track,
  html.accessibility-mode::-webkit-scrollbar-track,
  html.accessibility-mode ::-webkit-scrollbar-track {
    background: var(--scroll-track);
  }

  .accessible-scroll::-webkit-scrollbar-thumb,
  html.accessibility-mode::-webkit-scrollbar-thumb,
  html.accessibility-mode ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border: 3px solid var(--scroll-track);
    border-radius: 8px;
  }

  .accessible-scroll:focus-visible,
  html.accessibility-mode #main:focus-visible {
    outline: 2px solid var(--scroll-thumb);
    outline-offset: -2px;
  }

.scroll-shadow {
  box-shadow: 0px -10px 20px 15px var(--color-sidebar-bg, white);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

html.dark .scroll-shadow {
  box-shadow: 0px -10px 20px 15px var(--color-sidebar-bg-dark, #181818);
}

.scroll-shadow.is-visible {
  opacity: 1;
}

@media (max-width: 1279px) {
  #mobile-sidebar-toggle, #site-icon-mobile { height: 66px; }
}
@media (max-width: 768px) {
  #global-filter-button { height: 66px; }
}

html:not(.dark) .bg-gray-50 input,
html:not(.dark) .bg-gray-50 .selectize-input,
html:not(.dark) .bg-gray-50 select {
  background-color: white !important;
}

body.termination-information-panel-open .selectize-control,
body.termination-information-panel-open .selectize-dropdown {
  z-index: 0 !important;
}

.paternity-first-period-notice {
  background-color: #fffbeb;
  color: #78350f;
  border: 1px solid #f59e0b;
  border-left-width: 5px;
  box-shadow: 0 2px 6px rgb(120 53 15 / 12%);
}

.dark .paternity-first-period-notice {
  background-color: #451a03;
  color: #fef3c7;
  border-color: #fbbf24;
}

.work-stoppage-info-help,
.additional-birth-leave-help {
  background-color: var(--color-card-bg);
}

.dark .work-stoppage-info-help,
.dark .additional-birth-leave-help {
  background-color: var(--color-card-bg-dark);
}

.work-stoppage-info-card,
.additional-birth-leave-card {
  background-color: var(--color-card-bg);
  border-color: color-mix(in srgb, var(--color-primary) 25%, #d1d5db);
}

.dark .work-stoppage-info-card,
.dark .additional-birth-leave-card {
  background-color: var(--color-card-bg-dark);
  border-color: color-mix(in srgb, var(--color-primary-dark) 38%, #4b5563);
}

.work-stoppage-info-card-header,
.additional-birth-leave-card-header {
  background-color: color-mix(in srgb, var(--color-card-bg) 86%, var(--color-primary) 14%);
  color: var(--color-primary);
}

.dark .work-stoppage-info-card-header,
.dark .additional-birth-leave-card-header {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 76%, var(--color-primary-dark) 24%);
  color: var(--color-secondary-dark);
}

.work-stoppage-info-accent,
.additional-birth-leave-accent {
  color: var(--color-primary);
}

.dark .work-stoppage-info-accent,
.dark .additional-birth-leave-accent {
  color: var(--color-secondary-dark);
}

.additional-birth-leave-info-link:focus {
  outline: none;
  box-shadow: none;
}

.additional-birth-leave-info-link:focus-visible {
  border-radius: 9999px;
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
}

.dark .additional-birth-leave-info-link:focus-visible {
  outline-color: color-mix(in srgb, var(--color-secondary-dark) 65%, transparent);
}

.work-stoppage-info-button,
.additional-birth-leave-button {
  border-color: color-mix(in srgb, var(--color-primary) 28%, #d1d5db) !important;
  color: var(--color-primary) !important;
  background-color: color-mix(in srgb, var(--color-card-bg) 96%, var(--color-primary) 4%) !important;
}

.work-stoppage-info-button:hover,
.additional-birth-leave-button:hover {
  color: var(--color-primary) !important;
  background-color: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-primary) 12%) !important;
}

.dark .work-stoppage-info-button,
.dark .additional-birth-leave-button {
  border-color: color-mix(in srgb, var(--color-primary-dark) 38%, #4b5563) !important;
  color: var(--color-secondary-dark) !important;
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 90%, var(--color-primary-dark) 10%) !important;
}

.dark .work-stoppage-info-button:hover,
.dark .additional-birth-leave-button:hover {
  color: var(--color-secondary-dark) !important;
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 80%, var(--color-primary-dark) 20%) !important;
}

.work-stoppage-info-tile,
.additional-birth-leave-tile {
  background-color: color-mix(in srgb, var(--color-card-bg) 90%, var(--color-primary) 10%);
  border-color: color-mix(in srgb, var(--color-primary) 22%, #d1d5db);
}

.dark .work-stoppage-info-tile,
.dark .additional-birth-leave-tile {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 82%, var(--color-primary-dark) 18%);
  border-color: color-mix(in srgb, var(--color-primary-dark) 34%, #4b5563);
}

.work-stoppage-info-tile-emphasis {
  background-color: color-mix(in srgb, var(--color-card-bg) 84%, var(--color-primary) 16%);
  border-color: color-mix(in srgb, var(--color-primary) 32%, #d1d5db);
}

.dark .work-stoppage-info-tile-emphasis {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 74%, var(--color-primary-dark) 26%);
  border-color: color-mix(in srgb, var(--color-primary-dark) 45%, #4b5563);
}

.work-stoppage-info-table-header {
  background-color: color-mix(in srgb, var(--color-card-bg) 90%, var(--color-primary) 10%);
  color: var(--color-primary);
}

.dark .work-stoppage-info-table-header {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 80%, var(--color-primary-dark) 20%);
  color: var(--color-secondary-dark);
}

.work-stoppage-info-table-body > tr + tr {
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 18%, #e5e7eb);
}

.dark .work-stoppage-info-table-body > tr + tr {
  border-top-color: color-mix(in srgb, var(--color-primary-dark) 30%, #374151);
}

.work-stoppage-info-row-highlight {
  background-color: color-mix(in srgb, var(--color-card-bg) 82%, var(--color-primary) 18%);
}

.dark .work-stoppage-info-row-highlight {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 70%, var(--color-primary-dark) 30%);
}

.onboarding-themed-card {
  background-color: var(--color-card-bg);
  border-color: color-mix(in srgb, var(--color-primary, #292e68) 38%, #d1d5db);
}

.dark .onboarding-themed-card {
  background-color: var(--color-card-bg-dark);
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 48%, #4b5563);
}

.contract-functional-section-heading {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 68%, #0f172a));
  color: #fff;
}

.dark .contract-functional-section-heading {
  background: linear-gradient(135deg, var(--color-primary-dark), color-mix(in srgb, var(--color-primary-dark) 68%, #0f172a));
}

.contract-mission-section > .contract-functional-section-heading {
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

.onboarding-themed-surface {
  background-color: color-mix(in srgb, var(--color-card-bg) 84%, var(--color-primary, #292e68) 16%);
  border-color: color-mix(in srgb, var(--color-primary, #292e68) 30%, #e5e7eb);
}

.dark .onboarding-themed-surface {
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 70%, var(--color-primary-dark, #292e68) 30%);
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 46%, #374151);
}

.onboarding-themed-header {
  background-color: var(--color-primary, #292e68);
  border-bottom: 2px solid var(--color-secondary, #fdc531);
  border-radius: 0.25rem;
  color: var(--color-btn-label, #ffffff);
  padding: 0.5rem 0.75rem !important;
}

.dark .onboarding-themed-header {
  background-color: var(--color-primary-dark, #292e68);
  border-bottom-color: var(--color-secondary-dark, #fdc531);
  color: var(--color-btn-label-dark, #ffffff);
}

.onboarding-themed-header > .flex {
  align-items: center;
  gap: 0.75rem;
  min-height: 1.75rem;
}

.onboarding-themed-header p {
  color: color-mix(in srgb, var(--color-btn-label, #ffffff) 86%, var(--color-secondary, #fdc531)) !important;
}

.dark .onboarding-themed-header p {
  color: color-mix(in srgb, var(--color-btn-label-dark, #ffffff) 86%, var(--color-secondary-dark, #fdc531)) !important;
}

.onboarding-themed-header .onboarding-accent-text {
  color: var(--color-btn-label, #ffffff) !important;
}

.dark .onboarding-themed-header .onboarding-accent-text {
  color: var(--color-btn-label-dark, #ffffff) !important;
}

.onboarding-themed-header .onboarding-chip {
  border-color: var(--color-secondary, #fdc531);
  border-radius: 0.1875rem !important;
  background-color: var(--color-secondary, #fdc531);
  color: var(--color-primary, #292e68);
  line-height: 1.1;
  padding: 0.25rem 0.55rem !important;
}

.dark .onboarding-themed-header .onboarding-chip {
  border-color: var(--color-secondary-dark, #fdc531);
  background-color: var(--color-secondary-dark, #fdc531);
  color: var(--color-primary-dark, #292e68);
}

.onboarding-title-panel {
  background-color: var(--color-primary, #292e68);
  border-color: var(--color-secondary, #fdc531);
  color: var(--color-btn-label, #ffffff);
}

.dark .onboarding-title-panel {
  background-color: var(--color-primary-dark, #292e68);
  border-color: var(--color-secondary-dark, #fdc531);
  color: var(--color-btn-label-dark, #ffffff);
}

.onboarding-title-panel.onboarding-action-panel {
  background-color: #fdc531;
  border-color: #d6a514;
  color: #451a03;
}

.dark .onboarding-title-panel.onboarding-action-panel {
  background-color: #fdc531;
  border-color: #ffe08a;
  color: #451a03;
}

.onboarding-title-panel.onboarding-action-panel .onboarding-accent-text,
.dark .onboarding-title-panel.onboarding-action-panel .onboarding-accent-text {
  color: #78350f !important;
}

.onboarding-title-panel.onboarding-action-panel p:not(.onboarding-primary-badge),
.dark .onboarding-title-panel.onboarding-action-panel p:not(.onboarding-primary-badge) {
  color: #451a03 !important;
}

.onboarding-title-panel .onboarding-accent-text,
.onboarding-title-panel .onboarding-muted-text {
  color: var(--color-secondary, #fdc531) !important;
}

.onboarding-title-panel p:not(.onboarding-primary-badge) {
  color: color-mix(in srgb, var(--color-btn-label, #ffffff) 90%, var(--color-secondary, #fdc531)) !important;
}

.dark .onboarding-title-panel .onboarding-accent-text,
.dark .onboarding-title-panel .onboarding-muted-text {
  color: var(--color-secondary-dark, #fdc531) !important;
}

.dark .onboarding-title-panel p:not(.onboarding-primary-badge) {
  color: color-mix(in srgb, var(--color-btn-label-dark, #ffffff) 90%, var(--color-secondary-dark, #fdc531)) !important;
}

.onboarding-title-text {
  color: var(--color-btn-label, #ffffff) !important;
}

.dark .onboarding-title-text {
  color: var(--color-btn-label-dark, #ffffff) !important;
}

.onboarding-title-panel .onboarding-primary-badge {
  border-color: var(--color-secondary, #fdc531);
  background-color: var(--color-secondary, #fdc531);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-title-panel .onboarding-primary-badge {
  border-color: var(--color-secondary-dark, #fdc531);
  background-color: var(--color-secondary-dark, #fdc531);
  color: var(--color-primary-dark, #292e68);
}

.onboarding-profile-status-panel {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 28%, #d1d5db);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--color-card-bg) 94%, var(--color-secondary, #fdc531) 6%);
  color: var(--color-primary, #292e68);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary, #292e68) 10%, transparent);
}

.dark .onboarding-profile-status-panel {
  border-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 38%, #4b5563);
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 90%, var(--color-primary-dark, #292e68) 10%);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 78%, #ffffff);
  box-shadow: none;
}

.onboarding-profile-status-panel-approved {
  border-color: color-mix(in srgb, #16a34a 48%, #d1fae5);
  background-color: color-mix(in srgb, var(--color-card-bg) 91%, #22c55e 9%);
  color: #166534;
}

.dark .onboarding-profile-status-panel-approved {
  border-color: color-mix(in srgb, #86efac 50%, #14532d);
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 88%, #22c55e 12%);
  color: #bbf7d0;
}

.onboarding-profile-status-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.onboarding-profile-status-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.65rem 0 0.4rem;
  padding: 0;
  list-style: none;
}

.onboarding-profile-status-step {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: color-mix(in srgb, var(--color-primary, #292e68) 62%, #6b7280);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.dark .onboarding-profile-status-step {
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 58%, #d1d5db);
}

.onboarding-profile-status-dot {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 35%, #d1d5db);
  border-radius: 9999px;
  background-color: var(--color-card-bg);
  color: color-mix(in srgb, var(--color-primary, #292e68) 70%, #6b7280);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.dark .onboarding-profile-status-dot {
  border-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 34%, #6b7280);
  background-color: var(--color-card-bg-dark);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 62%, #d1d5db);
}

.onboarding-profile-status-step-complete,
.onboarding-profile-status-step-current,
.onboarding-profile-status-step-alert {
  color: var(--color-primary, #292e68);
}

.dark .onboarding-profile-status-step-complete,
.dark .onboarding-profile-status-step-current,
.dark .onboarding-profile-status-step-alert {
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 82%, #ffffff);
}

.onboarding-profile-status-step-complete .onboarding-profile-status-dot,
.onboarding-profile-status-step-current .onboarding-profile-status-dot,
.onboarding-profile-status-step-alert .onboarding-profile-status-dot {
  border-color: var(--color-secondary, #fdc531);
  background-color: var(--color-secondary, #fdc531);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-profile-status-step-complete .onboarding-profile-status-dot,
.dark .onboarding-profile-status-step-current .onboarding-profile-status-dot,
.dark .onboarding-profile-status-step-alert .onboarding-profile-status-dot {
  border-color: var(--color-secondary-dark, #fdc531);
  background-color: var(--color-secondary-dark, #fdc531);
  color: var(--color-primary-dark, #292e68);
}

.onboarding-profile-status-panel-approved .onboarding-profile-status-step-complete,
.onboarding-profile-status-panel-approved .onboarding-profile-status-step-current,
.onboarding-profile-status-panel-approved .onboarding-profile-status-step-alert {
  color: #166534;
}

.onboarding-profile-status-panel-approved .onboarding-profile-status-step-complete .onboarding-profile-status-dot,
.onboarding-profile-status-panel-approved .onboarding-profile-status-step-current .onboarding-profile-status-dot,
.onboarding-profile-status-panel-approved .onboarding-profile-status-step-alert .onboarding-profile-status-dot {
  border-color: #16a34a;
  background-color: #16a34a;
  color: #ffffff;
}

.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-complete,
.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-current,
.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-alert {
  color: #bbf7d0;
}

.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-complete .onboarding-profile-status-dot,
.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-current .onboarding-profile-status-dot,
.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-step-alert .onboarding-profile-status-dot {
  border-color: #86efac;
  background-color: #86efac;
  color: #14532d;
}

.onboarding-profile-status-step-upcoming .onboarding-profile-status-dot {
  background-color: var(--color-card-bg);
}

.dark .onboarding-profile-status-step-upcoming .onboarding-profile-status-dot {
  background-color: var(--color-card-bg-dark);
}

.onboarding-profile-status-hint {
  margin: 0;
  color: color-mix(in srgb, var(--color-primary, #292e68) 78%, #4b5563) !important;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

.dark .onboarding-profile-status-hint {
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 72%, #ffffff) !important;
}

.onboarding-profile-status-panel-approved .onboarding-profile-status-hint {
  color: #166534 !important;
}

.dark .onboarding-profile-status-panel-approved .onboarding-profile-status-hint {
  color: #bbf7d0 !important;
}

@media (max-width: 640px) {
  .onboarding-profile-status-steps {
    grid-template-columns: 1fr;
  }

  .onboarding-profile-status-step {
    justify-content: flex-start;
  }
}

.onboarding-accent-text {
  color: var(--color-primary, #292e68) !important;
}

.dark .onboarding-accent-text {
  color: var(--color-secondary-dark, #fdc531) !important;
}

.onboarding-muted-text {
  color: color-mix(in srgb, var(--color-primary, #292e68) 76%, #4b5563) !important;
}

.dark .onboarding-muted-text {
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 82%, #ffffff) !important;
}

.onboarding-chip {
  border-color: color-mix(in srgb, var(--color-secondary, #fdc531) 74%, var(--color-primary, #292e68));
  background-color: color-mix(in srgb, var(--color-card-bg) 58%, var(--color-secondary, #fdc531) 42%);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-chip {
  border-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 68%, var(--color-primary-dark, #292e68));
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 58%, var(--color-secondary-dark, #fdc531) 42%);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 84%, #ffffff);
}

.onboarding-primary-badge {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-btn-label);
}

.dark .onboarding-primary-badge {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark);
  color: var(--color-btn-label-dark);
}

.onboarding-note {
  border-color: color-mix(in srgb, var(--color-secondary, #fdc531) 70%, var(--color-primary, #292e68));
  background-color: color-mix(in srgb, var(--color-card-bg) 64%, var(--color-secondary, #fdc531) 36%);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-note {
  border-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 62%, #374151);
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 58%, var(--color-secondary-dark, #fdc531) 42%);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 88%, #ffffff);
}

.onboarding-status-success {
  border-color: color-mix(in srgb, var(--color-primary, #292e68) 58%, #d1d5db);
  background-color: color-mix(in srgb, var(--color-card-bg) 74%, var(--color-primary, #292e68) 26%);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-status-success {
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 60%, #4b5563);
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 60%, var(--color-primary-dark, #292e68) 40%);
  color: var(--color-secondary-dark, #fdc531);
}

.onboarding-status-pending {
  border-color: color-mix(in srgb, var(--color-secondary, #fdc531) 72%, var(--color-primary, #292e68));
  background-color: color-mix(in srgb, var(--color-card-bg) 62%, var(--color-secondary, #fdc531) 38%);
  color: var(--color-primary, #292e68);
}

.dark .onboarding-status-pending {
  border-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 64%, #4b5563);
  background-color: color-mix(in srgb, var(--color-card-bg-dark) 58%, var(--color-secondary-dark, #fdc531) 42%);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 88%, #ffffff);
}

.onboarding-status-neutral {
  border-color: color-mix(in srgb, var(--color-primary, #292e68) 32%, #d1d5db);
  background-color: var(--color-card-bg);
  color: color-mix(in srgb, var(--color-primary, #292e68) 66%, #4b5563);
}

.dark .onboarding-status-neutral {
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 42%, #4b5563);
  background-color: var(--color-card-bg-dark);
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 68%, #d4d4d4);
}

.onboarding-upload-button {
  background-color: var(--color-primary) !important;
  color: var(--color-btn-label) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 82%, #000000);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.onboarding-upload-button:hover {
  background-color: var(--color-primary-hover) !important;
}

.onboarding-upload-button:focus-visible,
.file-viewer-control-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 52%, transparent);
  outline-offset: 2px;
}

.dark .onboarding-upload-button {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-btn-label-dark) !important;
  border-color: color-mix(in srgb, var(--color-primary-dark) 82%, #ffffff);
}

.dark .onboarding-upload-button:hover {
  background-color: var(--color-primary-dark-hover) !important;
}

.dark .onboarding-upload-button:focus-visible,
.dark .file-viewer-control-button:focus-visible {
  outline-color: color-mix(in srgb, var(--color-secondary-dark) 60%, transparent);
}

.file-viewer-control-button:hover:not(:disabled) {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

.document-preview-navigation {
  container-type: inline-size;
}

.document-preview-navigation__arrow {
  display: none;
  font-size: 1rem;
}

@container (max-width: 32rem) {
  .document-preview-navigation__label {
    display: none;
  }

  .document-preview-navigation__arrow {
    display: inline;
  }
}

.dark .file-viewer-control-button:hover:not(:disabled) {
  background-color: #27272a !important;
  border-color: #52525b !important;
}

.onboarding-checkbox {
  color: var(--color-primary) !important;
}

.dark .onboarding-checkbox {
  color: var(--color-secondary-dark) !important;
}

.onboarding-dot-primary {
  background-color: var(--color-primary);
}

.dark .onboarding-dot-primary {
  background-color: var(--color-primary-dark);
}

.onboarding-dot-secondary {
  background-color: var(--color-secondary);
}

.dark .onboarding-dot-secondary {
  background-color: var(--color-secondary-dark);
}

.onboarding-dot-muted {
  background-color: color-mix(in srgb, var(--color-secondary, #fdc531) 62%, #d1d5db);
}

.dark .onboarding-dot-muted {
  background-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 52%, #525252);
}

.onboarding-step-check {
  background-color: var(--color-primary, #292e68);
  color: var(--color-btn-label, #ffffff);
}

.dark .onboarding-step-check {
  background-color: var(--color-primary-dark, #292e68);
  color: var(--color-btn-label-dark, #ffffff);
}

.onboarding-step-bar-current {
  background-color: var(--color-primary);
}

.dark .onboarding-step-bar-current {
  background-color: var(--color-primary-dark);
}

.onboarding-step-bar-pending {
  background-color: color-mix(in srgb, var(--color-secondary, #fdc531) 60%, #d1d5db);
}

.dark .onboarding-step-bar-pending {
  background-color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 54%, #525252);
}

.contract-end-info {
  --contract-end-accent: var(--contract-end-primary, var(--color-primary));
  --contract-end-soft-bg: color-mix(in srgb, var(--contract-end-card-bg, var(--color-card-bg)) 90%, var(--contract-end-accent) 10%);
  --contract-end-border: color-mix(in srgb, var(--contract-end-accent) 24%, #d1d5db);
  --contract-end-row-border: #e5e7eb;
  --contract-end-label: #6b7280;
  --contract-end-value: #111827;
  --contract-end-link-color: var(--contract-end-link, var(--color-link-text));
}

.dark .contract-end-info {
  --contract-end-accent: var(--contract-end-secondary-dark, var(--color-secondary-dark));
  --contract-end-soft-bg: color-mix(in srgb, var(--contract-end-card-bg-dark, var(--color-card-bg-dark)) 78%, var(--contract-end-primary-dark, var(--color-primary-dark)) 22%);
  --contract-end-border: color-mix(in srgb, var(--contract-end-primary-dark, var(--color-primary-dark)) 42%, #4b5563);
  --contract-end-row-border: #374151;
  --contract-end-label: #9ca3af;
  --contract-end-value: #f9fafb;
  --contract-end-link-color: var(--contract-end-link-dark, var(--color-link-text-dark));
}

.contract-end-info-tile,
.contract-end-info-section {
  background-color: var(--contract-end-card-bg, var(--color-card-bg));
  border-color: #e5e7eb;
}

.dark .contract-end-info-tile,
.dark .contract-end-info-section {
  background-color: var(--contract-end-card-bg-dark, var(--color-card-bg-dark));
  border-color: #4b5563;
}

.contract-end-info-tile-label {
  color: var(--contract-end-accent);
}

.dark .contract-end-info-tile-label {
  color: var(--contract-end-accent);
}

.contract-end-info-section-header {
  background-color: var(--contract-end-soft-bg);
  border-color: var(--contract-end-border);
  color: var(--contract-end-accent);
}

.contract-end-info-row-label,
.contract-end-info-muted {
  color: var(--contract-end-label);
}

.contract-end-info-tile-value,
.contract-end-info-row-value {
  color: var(--contract-end-value);
}

.contract-end-info-row {
  background-color: var(--contract-end-card-bg, var(--color-card-bg));
  border-color: var(--contract-end-row-border);
}

.dark .contract-end-info-row {
  background-color: var(--contract-end-card-bg-dark, var(--color-card-bg-dark));
}

.contract-end-info-row-label-emphasized,
.contract-end-info-row-value-emphasized {
  color: var(--contract-end-value);
}

.contract-end-info-link {
  color: var(--contract-end-link-color) !important;
}

.contract-end-info-link:hover {
  color: color-mix(in srgb, var(--contract-end-link-color) 78%, black) !important;
}

.dark .contract-end-info-link:hover {
  color: color-mix(in srgb, var(--contract-end-link-color) 80%, white) !important;
}

/* Profile fallback shared by all application menus. */
.sidebar-profile-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9e5f4;
  color: #39305b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.dark .sidebar-profile-initials { background: #48405f; color: #f5f1ff; }

/* Profile fallback shares the sidebar avatar palette at the original profile size. */
.sidebar-profile-initials.employee-profile-initials {
  display: flex;
  width: 80px;
  height: 80px;
  flex-basis: 80px;
  font-size: 28px;
}

.app-focus-badge { transform: translateY(-6px); }
.collective-proceedings {
  --proceedings-ink: #334155;
  --proceedings-muted: #64748b;
  --proceedings-border: #e2e8f0;
  --proceedings-surface: #f8fafc;
  color: var(--proceedings-ink);
  text-align: left;
  min-width: 0;
}
.collective-proceedings__header,
.collective-proceedings__latest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.collective-proceedings__header { flex-wrap: wrap; margin: .25rem 0 1.25rem; }
.collective-proceedings__intro { flex: 1 1 20rem; }
.collective-proceedings__scope { font-size: .875rem; line-height: 1.5; }
.collective-proceedings__checked { margin-top: .375rem; font-size: .75rem; line-height: 1.5; color: var(--proceedings-muted); }
.collective-proceedings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.collective-proceedings__actions form { margin: 0; }
.collective-proceedings__refresh { font-size: .8125rem; white-space: nowrap; }
.collective-proceedings__refresh:disabled { opacity: .5; cursor: wait; }
.collective-proceedings__progress { display: inline-flex; align-items: center; gap: .5rem; color: var(--proceedings-muted); font-size: .75rem; }
.collective-proceedings__spinner { width: .875rem; height: .875rem; border: 2px solid var(--proceedings-border); border-top-color: currentColor; border-radius: 50%; animation: proceedings-spin .8s linear infinite; }
@keyframes proceedings-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .collective-proceedings__spinner { animation: none; } }
.collective-proceedings__latest { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--proceedings-border); border-radius: .625rem; background: var(--proceedings-surface); }
.collective-proceedings__eyebrow { margin-bottom: .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--proceedings-muted); }
.collective-proceedings__event { font-size: .875rem; font-weight: 600; line-height: 1.5; }
.collective-proceedings__date { flex-shrink: 0; font-size: .8125rem; color: var(--proceedings-muted); font-variant-numeric: tabular-nums; }
.collective-proceedings__muted { color: var(--proceedings-muted); font-size: .75rem; }
.collective-proceedings__source { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.collective-proceedings__empty { padding: 1.25rem; border-radius: .625rem; background: var(--proceedings-surface); color: var(--proceedings-muted); font-size: .875rem; }
.collective-proceedings__warning { margin-bottom: 1rem; padding: .75rem 1rem; border-left: 3px solid #d97706; background: var(--proceedings-surface); border-radius: .25rem; font-size: .8125rem; }
.dark .collective-proceedings { --proceedings-ink: #e2e8f0; --proceedings-muted: #94a3b8; --proceedings-border: #475569; --proceedings-surface: #1e293b; }
@media (max-width: 640px) {
  .collective-proceedings__latest { align-items: flex-start; flex-direction: column; gap: .5rem; padding: 1rem; }
}
/* Notification panel. Profile styles live in profile_financial_cards.css. */
.an-shell {
  --an-paper: var(--color-card-bg, #fff);
  --an-text: #292e48;
  --an-muted: #5d6678;
  --an-border: #e1e5ed;
  --an-accent: var(--color-primary, #292e68);
  color: var(--an-text);
}
.dark .an-shell {
  --an-paper: var(--color-card-bg-dark, #1e293b);
  --an-text: #f1f5f9;
  --an-muted: #c1ccdc;
  --an-border: #475569;
  --an-accent: var(--color-primary-dark, #b9b4ff);
}
#activity-notifications { position: relative; container: profile-actions / inline-size; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 42px; margin: 12px 24px 4px; }
/* Anchor the dropdown to the whole toolbar so the bell cannot push it off-screen. */
#activity-notifications > .profile-referral-dropdown { position: static; }
/* Winki cooptation is available throughout Portage. Other entities keep the profile placement. */
#main:not(:has(.employee-profile-overview)) #activity-notifications > .profile-referral-dropdown:not([data-global-referral="true"]) { display: none; }
/* React to full-page and nested Turbo navigation without losing the shared frame. */
#main:has(.tds-funnel, #turbo-frame-payslip-funnel, [data-tds-screen]) > #activity-notifications { display: none; }
/* Match the extra 4px inset of the employee profile content. */
#main:has(.employee-profile-overview) > #activity-notifications { margin-inline: 28px; }
.an-shell { display: flex; justify-content: flex-end; }
.an-shell > summary { list-style: none; }
.an-shell > summary::-webkit-details-marker { display: none; }
.an-trigger { display: flex; align-items: center; gap: 8px; width: max-content; margin-left: auto; padding: 9px 13px; border: 1px solid var(--an-border); border-radius: 9px; background: var(--an-paper); cursor: pointer; font-size: 13px; }
.an-trigger svg { width: 20px; height: 20px; }
.an-badge { border-radius: 20px; background: var(--an-accent); color: var(--color-btn-label, #fff); padding: 1px 7px; font-size: 11px; }
.an-badge--overdue { background: #dc2626; color: #fff; }
.an-panel { position: fixed; z-index: 65; right: 16px; top: 84px; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 104px); overflow-y: auto; background: var(--an-paper); color: var(--an-text); border: 1px solid var(--an-border); border-radius: 13px; box-shadow: 0 14px 50px #0003; padding: 0 22px 16px; }
.an-shell:not([open]) .an-panel { display: none; }
.an-panel [hidden] { display: none !important; }
.an-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; }
.an-panel h2 { font-size: 18px; font-weight: 600; margin: 0; }
.an-panel .an-close { background: transparent !important; border: 0; color: var(--an-text) !important; padding: 8px; font-size: 24px; min-width: 40px; }
.an-entry { padding: 16px 0; border-bottom: 1px solid var(--an-border); }
.an-entry h4, .an-review h3 { font-size: 14px; font-weight: 600; margin: 4px 0; }
.an-entry p, .an-review p { font-size: 13px; color: var(--an-muted); margin: 4px 0; }
.an-entry-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--an-muted); }
.an-overdue { border-left: 3px solid #bc7a2d; padding-left: 12px; }
.an-entry ul { margin-top: 8px; padding: 0; list-style: none; }
.an-entry li { margin: 7px 0; font-size: 13px; overflow-wrap: anywhere; }
.an-entry li a { color: var(--an-accent); text-decoration: underline; text-underline-offset: 3px; }
.an-entry li .an-hint { display: block; }
.an-hint { font-size: 11px !important; color: var(--an-muted); margin: 12px 0; }
.an-review { background: color-mix(in srgb, var(--an-accent) 7%, var(--an-paper)); padding: 14px; margin-top: 14px; border-radius: 8px; }
.an-review-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.an-panel .an-link { display: inline-block; background: transparent !important; border: 0; color: var(--an-accent) !important; font-size: 12px; padding: 7px 0; white-space: normal; text-align: left; cursor: pointer; }
.an-feedback { font-size: 12px; color: var(--an-muted); }
.an-panel button:focus-visible, .an-panel input:focus-visible, .an-trigger:focus-visible { outline: 2px solid var(--an-accent); outline-offset: 3px; }
@media(max-width:767px) {
  #activity-notifications { margin: 0 0 4px; }
  #main:has(.employee-profile-overview) > #activity-notifications { margin-inline: 4px; }
  .an-panel { top: 116px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 132px); padding: 0 16px 16px; }
  .an-panel button, .an-panel input[type=submit], .an-trigger { min-height: 44px; }
}

.an-category { margin-top: 16px; }
.an-category-count { font-variant-numeric: tabular-nums; font-size: 12px; }
.an-category-empty { margin: 8px 0; color: var(--an-muted); font-size: 12px; }
.an-history { margin-top: 18px; }
.an-history > summary { color: var(--an-muted); font-size: 12px; cursor: pointer; padding: 8px 0; }
.an-history > summary:focus-visible { outline: 2px solid var(--an-accent); outline-offset: 3px; }

.an-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--an-border); margin-top: 8px; }
.an-panel .an-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 0; flex: 1; min-width: 0; padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent !important; color: var(--an-muted) !important; font-size: 12px; line-height: 18px; cursor: pointer; }
.an-panel .an-tabs button[aria-selected="true"] { color: var(--an-accent) !important; border-bottom-color: var(--an-accent); font-weight: 600; }
.an-tabs .an-category-count { display: block; }
.an-category:focus-visible { outline: 2px solid var(--an-accent); outline-offset: 2px; }

/* Optional Google invitation on the destination payslip, after successful submission. */
.winki-review-followup { --review-primary: var(--color-primary, #292e68); --review-on-primary: var(--color-btn-label, #fff); --an-paper: var(--color-card-bg, #fff); --an-accent: var(--color-primary, #292e68); --an-muted: #526077; color: #292e48; }
.dark .winki-review-followup { --an-paper: #243247; --an-accent: #c4bfff; --an-muted: #c1ccdc; color: #f1f5f9; }
.winki-review-success { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.winki-review-success::before { content: "✓"; margin-right: 8px; color: #15803d; }
.dark .winki-review-success::before { color: #86efac; }
/* One entrance per injected invitation; no looping or forced scroll/focus. */
.winki-review-followup .an-review {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin: 0; padding: 28px; border: 1px solid color-mix(in srgb, var(--review-primary) 70%, var(--review-on-primary)); border-radius: 16px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--review-primary) 85%, black) 0%, var(--review-primary) 68%, color-mix(in srgb, var(--review-primary) 92%, black) 100%);
  color: var(--review-on-primary); box-shadow: 0 12px 28px color-mix(in srgb, var(--review-primary) 18%, transparent);
  transform-origin: 50% 0;
  animation: winki-review-appear 700ms cubic-bezier(.16, 1, .3, 1) 180ms both;
}
.winki-review-followup .an-review::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 220px; height: 220px; border: 32px solid color-mix(in srgb, var(--review-on-primary) 5%, transparent);
  border-radius: 50%; top: -118px; right: 15%;
}
.dark .winki-review-followup .an-review {
  box-shadow: 0 12px 32px #0004;
}
.winki-review-intro { display: flex; align-items: center; gap: 18px; min-width: 0; }
.winki-review-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 58px;
  width: 58px; height: 58px; border-radius: 18px; color: var(--review-primary);
  background: color-mix(in srgb, var(--review-on-primary) 90%, var(--review-primary)); box-shadow: 0 5px 16px #0002;
  animation: winki-review-icon-pop 650ms cubic-bezier(.16, 1, .3, 1) 340ms both;
}
.winki-review-copy { max-width: 680px; min-width: 0; }
.winki-review-followup .an-review h3 { color: var(--review-on-primary) !important; font-size: 22px; line-height: 1.25; margin: 0 0 9px; font-weight: 700; }
.winki-review-followup .an-review p { color: var(--review-on-primary) !important; font-size: 14px; line-height: 1.6; margin: 0; }
.winki-review-followup .an-review-actions { flex-shrink: 0; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.winki-review-followup a.winki-review-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 12px 20px; background: var(--review-on-primary) !important; color: var(--review-primary) !important;
  border-radius: 9px; font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 12px #0002; transition: transform 150ms ease, box-shadow 150ms ease;
}
.winki-review-followup a.winki-review-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 18px #0003; }
.winki-review-followup button.winki-review-later { min-height: 40px; background: transparent !important; color: var(--review-on-primary) !important; border: 0; padding: 8px 12px; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.winki-review-followup a:focus-visible, .winki-review-followup button:focus-visible { outline: 3px solid var(--review-on-primary); outline-offset: 3px; }
.winki-review-followup .an-feedback:empty { display: none; }
@keyframes winki-review-appear {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes winki-review-icon-pop {
  from { opacity: 0; transform: scale(.55) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(3deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@media(max-width:1100px) {
  .winki-review-followup .an-review { align-items: flex-start; flex-direction: column; gap: 18px; }
  .winki-review-followup .an-review-actions { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; margin-left: 76px; }
}
@media(max-width:600px) {
  .winki-review-followup .an-review { padding: 22px 18px; }
  .winki-review-intro { align-items: flex-start; flex-direction: column; gap: 14px; }
  .winki-review-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
  .winki-review-followup .an-review h3 { font-size: 21px; }
  .winki-review-followup .an-review-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .winki-review-followup a.winki-review-primary { padding-inline: 16px; }
}
@media(prefers-reduced-motion: reduce) {
  .winki-review-followup .an-review, .winki-review-icon { animation: none; }
  .winki-review-followup a.winki-review-primary { transition: none; }
  .winki-review-followup a.winki-review-primary:hover { transform: none; }
}
/* Shared Admin/Portage profile: one compact identity row and three financial cards. */
.employee-profile-overview {
  container: profile-overview / inline-size;
  --pf-paper: var(--color-card-bg, #fff);
  --pf-text: #29324b;
  --pf-muted: #626d80;
  --pf-line: #e3e8ef;
  --pf-accent: var(--color-primary, #292e68);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}
.dark .employee-profile-overview {
  --pf-paper: var(--color-card-bg-dark, #1e293b);
  --pf-text: #f1f5f9;
  --pf-muted: #c0cada;
  --pf-line: #465167;
  --pf-accent: color-mix(in srgb, var(--color-primary-dark, #7356b5) 40%, #fff);
}
.profile-summary-identity, .employee-profile-tabs {
  --identity-primary: var(--color-primary, #292e68);
  --identity-ink: #334155;
}
.dark .profile-summary-identity, .dark .employee-profile-tabs {
  --identity-primary: var(--color-primary-dark, #aaa0dd);
  --identity-ink: #e2e8f0;
}
.employee-profile-topline {
  --identity-decor-primary: var(--color-primary, #292e68);
  --identity-decor-secondary: var(--color-secondary, #fdc531);
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; min-width: 0;
  padding: 20px 24px; border: 1px solid var(--pf-line);
  border-radius: 16px;
  background: var(--pf-paper);
  box-shadow: 0 4px 20px rgb(15 23 42 / 5%);
}
/* Soft primary-color reflection limited to the light identity banner. */
html:not(.dark) .employee-profile-topline {
  background-image: radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--identity-decor-primary) 15%, transparent) 0%, color-mix(in srgb, var(--identity-decor-primary) 5%, transparent) 45%, transparent 75%);
}
/* Soft layered waves, confined to the identity background. */
.employee-profile-topline::after {
content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
background:linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--identity-contour-color, var(--identity-decor-primary)) 22%, transparent) 64%, color-mix(in srgb, var(--identity-contour-color, var(--identity-decor-primary)) 28%, transparent));
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M350%20180%20C625%20158%20600%20-58%20965%20-42%20L1200%20-42%20L1200%20180Z%22%20fill%3D%22black%22%20opacity%3D%22.24%22%2F%3E%3Cpath%20d%3D%22M510%20180%20C735%20148%20735%20-10%201040%20-24%20L1200%20-24%20L1200%20180Z%22%20fill%3D%22black%22%20opacity%3D%22.25%22%2F%3E%3Cpath%20d%3D%22M725%20180%20C895%20140%20915%2043%201200%2023%20L1200%20180Z%22%20fill%3D%22black%22%20opacity%3D%22.28%22%2F%3E%3Cpath%20d%3D%22M350%20180%20C625%20158%20600%20-58%20965%20-42%20M510%20180%20C735%20148%20735%20-10%201040%20-24%20M725%20180%20C895%20140%20915%2043%201200%2023%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
.dark .employee-profile-topline::after { --identity-contour-color:var(--color-primary-dark,#aaa0dd); }
/* Discreet brand marker in both themes. */
.employee-profile-topline::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 3px; pointer-events: none; border-radius: 0 3px 3px 0;
  background: var(--identity-decor-primary);
}
.dark .employee-profile-topline {
  --identity-decor-primary: var(--color-primary-dark, #aaa0dd);
  --identity-decor-secondary: var(--color-secondary-dark, var(--color-secondary, #fdc531));
}
.employee-profile-topline .employee-identity-banner { flex: 1 1 420px; min-width: 0; }
.employee-identity-content { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; min-width: 0; }
.employee-identity-avatar { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--pf-paper, #fff), 0 0 0 5px color-mix(in srgb, var(--identity-primary) 18%, transparent); }
.employee-identity-avatar img, .employee-identity-content .employee-profile-initials { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-basis: 64px; font-size: 24px; border-radius: 50%; }
.profile-summary-identity .employee-profile-initials { background: color-mix(in srgb, var(--identity-primary) 7%, var(--pf-paper)); color: var(--identity-primary); }
.employee-avatar-edit:focus-visible > div { opacity: 1; }
.employee-avatar-edit:focus-visible { outline: none; }
.employee-identity-details { flex: 1; min-width: 0; }
.employee-identity-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.employee-identity-name { margin: 0; color: var(--identity-ink); font-size: 24px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.employee-identity-company { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; max-width: 40%; margin-left: auto; padding: 9px 12px; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--identity-primary) 10%, var(--pf-paper)); color: var(--identity-primary); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .65px; overflow-wrap: anywhere; }
.employee-identity-company::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary, #dfb82f); }
.employee-identity-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 8px 0 0; color: var(--pf-muted, #626d80); font-size: 13px; font-style: normal; line-height: 1.5; }
.employee-identity-contact-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.employee-identity-contact-item > span { min-width: 0; overflow-wrap: anywhere; }
.employee-identity-contact-item > svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }
.employee-identity-phone-group { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.employee-identity-phone-group > .employee-identity-vcard { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex-shrink: 0; margin-left: 0; vertical-align: middle; font-style: normal; background: color-mix(in srgb, var(--identity-primary) 5%, var(--pf-paper)); border-radius: 6px; border: 0; box-shadow: none; }
.employee-identity-vcard svg { width: 20px; height: 20px; }
.employee-identity-vcard:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.employee-profile-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.employee-profile-breadcrumbs { flex: 1 1 auto; min-width: 0; }
.employee-profile-breadcrumbs > div { flex-wrap: wrap; }
.employee-profile-payroll { flex: 0 0 auto; align-self: center; max-width: 100%; margin-left: auto; }
.employee-profile-payroll:not(:has(> *)) { display: none; }
.employee-profile-finances { container: profile-finances / inline-size; width: 100%; min-width: 0; }
.profile-financial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; min-width: 0; }
.employee-profile-finances .profile-financial-grid .pf-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; min-height: 150px; padding: 16px; margin: 0; color: var(--pf-text); box-shadow: 0 1px 3px rgb(15 23 42 / 6%); }
.profile-financial-grid .pf-card { border: 1px solid var(--pf-line); background: var(--pf-paper); }
.pf-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.pf-card-header .pf-heading { flex: 1 1 auto; align-self: auto; }
.pf-card-header .pf-primary { margin-left: auto; max-width: 100%; }
.pf-heading { display: flex; align-items: center; align-self: stretch; gap: 8px; min-height: 28px; min-width: 0; }
.pf-heading h2 { margin: 0; font-size: 14px; color: var(--pf-text); line-height: 1.45; }
.pf-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 3px; color: #fff; }
.pf-card--balance .pf-icon { background: var(--pf-balance-accent); box-shadow: 0 4px 6px color-mix(in srgb, var(--pf-balance-accent) 33%, transparent), 0 2px 3px #18284626; }
.pf-card--turnover .pf-icon { background: #f04452; box-shadow: 0 4px 6px #f0445255, 0 2px 3px #18284626; }
.pf-card--expenses .pf-icon { background: #00abc4; box-shadow: 0 4px 6px #00abc455, 0 2px 3px #18284626; }
.pf-primary { margin: 0; text-align: right; font-size: 26px; font-weight: 650; letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.pf-card .pf-neutral { color: var(--pf-text); }
.pf-card .pf-positive { color: #0e9f6e; }
.pf-card .pf-negative { color: #ef4444; }
.pf-card .pf-zero { color: #000; }
.dark .pf-card .pf-zero { color: #fff; }
.pf-metrics { flex: 1; min-height: 0; margin: 4px 0 0; }
.pf-metric { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; margin: 0; line-height: 20px; }
.pf-metric dt { color: var(--pf-muted); font-size: 12px; font-weight: 400; flex: 1 1 100px; }
.pf-metric dd { font-size: 14px; font-weight: 400; color: var(--pf-text); font-variant-numeric: tabular-nums; margin: 0; }
.pf-metric .pf-tooltip-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: transparent !important; border: 0; color: inherit !important; font: inherit; cursor: help; }
.pf-tooltip { max-width: min(320px, calc(100vw - 32px)); white-space: normal; text-align: left; }
.pf-tooltip.invisible { display: none; }
/* The displayed balance already carries its sign; use the same state for the surface. */
.profile-financial-grid .pf-card--balance {
  --pf-balance-accent: #2563eb;
  background: #dbeafe;
}
.profile-financial-grid .pf-card--balance:has(.pf-primary.pf-positive) {
  --pf-balance-accent: #0baf78;
  background: #d4f2e4;
}
.profile-financial-grid .pf-card--balance:has(.pf-primary.pf-negative) {
  --pf-balance-accent: #ef4444;
  background: #fee2e2;
}
.dark .profile-financial-grid .pf-card--balance:has(.pf-primary) { background: color-mix(in srgb, var(--pf-balance-accent) 24%, var(--pf-paper)); }
.pf-card--balance .pf-positive { color: #047857; }
.pf-card--balance .pf-negative { color: #b91c1c; }
.pf-card--balance .pf-primary.pf-zero { color: #1d4ed8; }
.dark .pf-card--balance .pf-positive { color: #6ee7b7; }
.dark .pf-card--balance .pf-negative { color: #fca5a5; }
.dark .pf-card--balance .pf-primary.pf-zero { color: #93c5fd; }
.profile-financial-grid .pf-card--turnover .pf-primary, .profile-financial-grid .pf-card--expenses .pf-primary { color: var(--pf-accent); }
.pf-card button:focus-visible, .pf-card a:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }

/* Referral offer keeps the existing native details disclosure and Flowbite tooltip. */
.profile-referral-dropdown { --referral-bg: var(--color-primary, #292e68); --referral-fg: #fff; --pf-accent: var(--color-primary, #292e68); position: relative; flex: 0 0 auto; max-width: 100%; margin-left: auto; color: var(--pf-accent); }
.dark .profile-referral-dropdown { --pf-accent: var(--color-primary-dark, #aaa0dd); }
.profile-referral-dropdown > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--referral-bg); border-radius: 6px; background: var(--referral-bg); color: var(--referral-fg); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.profile-referral-dropdown > summary::-webkit-details-marker { display: none; }
.profile-referral-dropdown > summary:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }
.profile-referral-dropdown > summary > svg { display: block; flex-shrink: 0; }
.profile-referral-reward { white-space: nowrap; }
.profile-referral-reward::before { content: "·"; margin-right: 8px; opacity: .6; }
.profile-referral-chevron { width: 16px; height: 16px; margin-left: 2px; transition: transform .15s; }
.profile-referral-dropdown[open] .profile-referral-chevron { transform: rotate(180deg); }
.profile-referral-panel { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: 320px; max-width: min(calc(100vw - 48px), calc(100cqw - 40px)); }
.profile-referral-panel .pf-referral { --pf-accent: var(--referral-fg); --pf-text: var(--referral-fg); display: flex; width: 100%; padding: 18px; margin: 0; border: 1px solid var(--referral-bg); color: var(--referral-fg); box-shadow: 0 8px 24px #0f172a26; }
.profile-referral-dropdown .profile-referral-panel .pf-referral { background: var(--referral-bg); border-color: var(--referral-bg); }
.pf-referral-title { margin: 0 0 8px; color: var(--pf-accent); font-size: 17px; line-height: 1.25; }
.pf-referral-copy { margin: 4px 0; color: var(--pf-text); font-size: 13px; line-height: 1.5; }
.pf-referral .pf-offer-trigger { align-self: flex-start; margin-top: 12px; padding: 5px 0; border: 0; background: transparent !important; color: var(--pf-accent) !important; font-size: 11px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: help; }
body .profile-referral-dropdown [role="tooltip"] { --tip-paper: var(--referral-bg); --tip-text: var(--referral-fg); --tip-accent: var(--referral-fg); }
@media (pointer: coarse) { .pf-referral .pf-offer-trigger { min-height: 44px; } }

.employee-profile-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 4px; padding: 0; }
.employee-profile-tabs form { flex: 0 0 auto; margin: 0; }
.employee-profile-tabs button[data-type="view-selector"] { width: 100%; min-height: 44px; padding: 10px 18px !important; background: transparent !important; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; font-size: 15px; font-weight: 500; line-height: 1.4; transition: color 150ms ease, border-color 150ms ease; }
.employee-profile-tabs button.not-selected { color: var(--identity-ink) !important; }
.employee-profile-tabs button.not-selected:hover { color: var(--identity-primary) !important; }
.employee-profile-tabs button.selected { color: var(--identity-primary) !important; border-bottom-color: var(--identity-primary); font-weight: 600; }
.employee-profile-tabs button:focus-visible { outline: 2px solid var(--identity-primary); outline-offset: -2px; }
@media (max-width: 700px) {
  .employee-profile-topline { flex-wrap: wrap; align-items: flex-start; }
  .employee-profile-topline .employee-identity-banner { flex-basis: 100%; }
  .profile-referral-dropdown { margin-left: auto; }
}
@media (max-width: 600px) {
  .employee-profile-topline { padding: 18px 16px; }
  .employee-identity-content { align-items: flex-start; gap: 12px; }
  .employee-identity-avatar { flex-basis: 48px; width: 48px; height: 48px; }
  .employee-identity-avatar img, .employee-identity-content .employee-profile-initials { width: 48px; height: 48px; flex-basis: 48px; font-size: 20px; }
  .employee-identity-name { font-size: 20px; }
  .employee-identity-contact { font-size: 12px; }
}
@media (max-width: 480px) {
  .employee-profile-tabs { gap: 0; }
  .employee-profile-tabs form { flex: 1 1 auto; }
  .employee-profile-tabs button[data-type="view-selector"] { padding: 10px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-referral-chevron, .employee-profile-tabs button[data-type="view-selector"] { transition: none; }
}

/* Switch based on usable content width, including when the sidebar is open. */
.employee-profile-columns {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}

@container profile-finances (max-width: 1200px) {
  .profile-financial-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keep referral compact according to the profile width, including beside a sidebar. */
@container profile-actions (max-width: 600px) {
  .profile-referral-dropdown > summary { gap: 6px; padding: 8px 10px; }
  .profile-referral-reward { display: none; }
}
@container profile-overview (max-width: 620px) {
  .employee-identity-content { flex-wrap: wrap; }
  .employee-identity-details { flex-basis: calc(100% - 80px); }
  .employee-identity-company { margin-left: 60px; max-width: calc(100% - 60px); }
  .employee-profile-topline .employee-identity-banner { flex-basis: 100%; }
}
/* Shared presentation; fields, actions, ordering and pagination stay in Administrate. */
/* Let the flex content shrink beside the sidebar instead of following table min-content width. */
#main-content { min-width: 0; }
.administrate-table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border-radius: 6px; }
.administrate-table {
  --table-accent: var(--color-primary, #292e68);
  width: 100%; border-collapse: separate; border-spacing: 0; font-family: inherit; font-size: 13px;
}
.dark .administrate-table { --table-accent: var(--color-primary-dark, #aaa0dd); }
.administrate-table > thead > tr > th {
  font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
  padding: 9px 6px; white-space: normal;
}
.administrate-table > thead > tr:first-child > th:first-child { border-top-left-radius: 6px; }
.administrate-table > thead > tr:first-child > th:last-child { border-top-right-radius: 6px; }
.administrate-table > thead > tr > th.administrate-table__action-header { width: 1px; padding: 0; }
.administrate-table th[data-attribute] > a { display: block; color: inherit; }
.administrate-table th[data-attribute] > div,
.administrate-table th[data-attribute] > a > div { justify-content: center; }
.administrate-table > tbody > tr > td {
  padding: 0;
  font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: normal;
  text-align: center; vertical-align: middle;
}
.administrate-table > tbody > tr > td:not([data-attribute]) { text-align: center; }
.administrate-table td[data-attribute] > a,
.administrate-table td[data-attribute] > div { padding: 5px 6px; }
.administrate-table td[data-field-kind="date"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.administrate-table td:is([data-field-kind="money"], [data-field-kind="number"]) {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.administrate-table td[data-field-kind="money"] .flex { justify-content: center; }
/* Descriptive columns stay left-aligned; all other data is centered. */
.administrate-table > tbody > tr > td:is(
  [data-attribute="last_name"], [data-attribute="first_name"],
  [data-attribute="expense_type"], [data-attribute="nature"],
  [data-attribute="category"], [data-attribute="label"],
  [data-attribute="company_name"], [data-attribute="commercial_name"],
  [data-attribute="display_name"]
) { text-align: left; }
.administrate-table .cell-data--money .value { font: inherit; cursor: inherit; }
/* Action cells must not retain Administrate's 12px vertical cell padding. */
.administrate-table > tbody > tr > td.administrate-table__actions { padding: 0 8px; }
.administrate-table__actions > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px; padding: 5px; vertical-align: middle;
}
.administrate-table__actions > a > svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Pointer clicks on table headers, rows and links have no focus decoration. */
.administrate-table th a:focus:not(:focus-visible),
.administrate-table th:focus:not(:focus-visible),
.administrate-table > tbody > tr:focus:not(:focus-visible),
.administrate-table td:focus:not(:focus-visible),
.administrate-table td a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.administrate-table th a:focus-visible { outline: 2px solid var(--table-accent); outline-offset: 3px; }

/* Ordinary tables alternate every row. Date bands override that only when eligible. */
.administrate-table > tbody > tr:nth-child(odd) { background-color: var(--color-table-stripe-bg); }
.administrate-table > tbody > tr:nth-child(even) { background-color: var(--color-table-even-bg); }
.dark .administrate-table > tbody > tr:nth-child(odd) { background-color: var(--color-table-stripe-bg-dark); }
.dark .administrate-table > tbody > tr:nth-child(even) { background-color: var(--color-table-even-bg-dark); }
.administrate-table > tbody > tr[data-date-group-tone="even"] { background-color: var(--color-table-even-bg); }
.administrate-table > tbody > tr[data-date-group-tone="odd"] { background-color: var(--color-table-stripe-bg); }
.dark .administrate-table > tbody > tr[data-date-group-tone="even"] { background-color: var(--color-table-even-bg-dark); }
.dark .administrate-table > tbody > tr[data-date-group-tone="odd"] { background-color: var(--color-table-stripe-bg-dark); }
.administrate-table > tbody > tr[data-date-group-start="true"]:not(:first-child) > td { border-top: 2px solid var(--color-table-row-border); }
.dark .administrate-table > tbody > tr[data-date-group-start="true"]:not(:first-child) > td { border-top-color: var(--color-table-row-border-dark); }
.administrate-table > tbody > tr[data-date-group-start="true"] > td:first-child { font-weight: 600; }
.administrate-table > tbody > tr:hover > td { background-color: var(--color-table-row-hover-bg); }
.dark .administrate-table > tbody > tr:hover > td { background-color: var(--color-table-row-hover-bg-dark); }

/* General collections use automatic column widths; proportions are scoped to specific tables. */
.administrate-table td[data-attribute]:not([data-field-kind="date"]):not([data-field-kind="number"]):not([data-field-kind="money"]) { overflow-wrap: anywhere; }
.administrate-table th[data-attribute] > a > div > span { flex-shrink: 0; }

/* Separate the visible search/filter block from its collection. */
.administrate-table-filters { margin-bottom: 12px; }

/* Default Administrate toolbar: each filter can wrap independently of the query. */
.administrate-search-container { container: administrate-search / inline-size; width: 100%; min-width: 0; }
.administrate-inline-search { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.administrate-inline-search .administrate-search-query { flex: 1 1 240px; min-width: 0; }
.administrate-inline-search .administrate-search-query > div:first-child { min-width: 0; width: 100%; }
.administrate-inline-search input[type="search"] { width: 100%; min-width: 0; }
.administrate-inline-search .administrate-search-filters { display: contents; }
.administrate-inline-search .administrate-search-filters > div { flex: 0 1 160px; min-width: 0; max-width: 100%; margin: 0; white-space: normal; }
.administrate-inline-search .administrate-search-filters select { width: 100%; min-width: 0; height: 38px; }
.administrate-inline-search .administrate-search-filters label { min-width: 0; overflow-wrap: anywhere; }
.administrate-inline-search-actions { flex: 0 0 auto; max-width: 100%; margin-left: auto; }
.administrate-inline-search-actions > div { flex-wrap: wrap; justify-content: flex-end; }
@container administrate-search (max-width: 480px) {
  .administrate-inline-search .administrate-search-query { flex-basis: 100%; }
  .administrate-inline-search .administrate-search-filters > div { flex: 1 1 140px; }
}

/* Explicit two-row variant: query and actions first, wrapping filters below. */
.administrate-inline-search--stacked .administrate-search-query { flex: 0 1 45%; max-width: 560px; }
.administrate-inline-search--stacked .administrate-inline-search-actions { order: 1; }
.administrate-inline-search--stacked .administrate-search-filters {
  display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin-top: 0; min-width: 0; order: 2;
}

.administrate-inline-search--stacked .administrate-search-filters > div { flex: 1 1 200px; }
@container administrate-search (max-width: 600px) {
  .administrate-inline-search--stacked .administrate-search-query { flex: 1 1 0; max-width: none; }
  .administrate-inline-search--stacked .administrate-search-filters > div { flex-basis: 140px; }
}

/* Keep document labels readable and reserve the status' natural width. */
#uploaded_document_table .administrate-table > tbody > tr > td:is([data-attribute="document_type"], [data-attribute="name"]) {
  text-align: left;
  overflow-wrap: break-word;
}
#uploaded_document_table .administrate-table :is(th, td)[data-attribute="status"] {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
#uploaded_document_table .administrate-table th[data-attribute="status"] { width: 1%; }

/* Only services require single-line column headings. */
.administrate-table--service > thead > tr > th { white-space: nowrap; }
.administrate-table--service :is(th, td)[data-attribute="status"] { white-space: nowrap; }
.administrate-table--service th[data-attribute="status"] { width: 100px; }
.administrate-table--service td[data-attribute="status"] { min-width: 100px; }
.administrate-table--service td[data-attribute="status"] .administrate-status-badge {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Invoice collections keep the financial columns compact and scan-friendly. */
.administrate-table-zero { color: #778195; }
.dark .administrate-table-zero { color: #a3adc0; }
.administrate-table--invoice td[data-attribute="company_name"] { min-width: 150px; max-width: 260px; }
.collection-client-name, .collection-mission-title { text-align: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.collection-client-name { font-weight: 500; }
.collection-mission-title { font-size: 12px; line-height: 18px; color: #68758a; }
.dark .collection-mission-title { color: #aeb9ca; }
.administrate-table--invoice td[data-attribute="number"] { white-space: nowrap !important; overflow-wrap: normal !important; }
.administrate-table--invoice :is(th, td)[data-field-kind="money"] { text-align: right; }
.administrate-table--invoice th[data-field-kind="money"] > a > div,
.administrate-table--invoice td[data-field-kind="money"] .flex { justify-content: flex-end; }
.administrate-table--invoice td:is([data-attribute="cache_ttc_amount"], [data-attribute="cache_remaining_ttc_amount"]) { font-weight: 600; }
.administrate-table--invoice td:is([data-attribute="cache_ttc_amount"], [data-attribute="cache_remaining_ttc_amount"]) .value { font-weight: 600; }
.invoice-amount-details { min-width: 80px; }
.invoice-amount-details > summary { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 5px; cursor: pointer; list-style: none; border-radius: 3px; }
.invoice-amount-details > summary::-webkit-details-marker { display: none; }
.invoice-amount-details > summary svg { flex-shrink: 0; transition: transform 150ms ease; }
.invoice-amount-details[open] > summary svg { transform: rotate(180deg); }
.invoice-amount-details > summary:focus-visible { outline: 2px solid var(--table-accent); outline-offset: 3px; }
.invoice-amount-breakdown { display: grid; gap: 6px; margin: 8px 0 2px; padding: 8px; min-width: 170px; border: 1px solid var(--color-table-row-border); border-radius: 5px; background: rgb(255 255 255 / 65%); }
.invoice-amount-breakdown > div { display: flex; justify-content: space-between; gap: 12px; }
.invoice-amount-breakdown dt { font-size: 11px; color: #68758a; white-space: normal; text-align: left; }
.invoice-amount-breakdown dd { margin: 0; }
.dark .invoice-amount-breakdown { background: rgb(15 23 42 / 35%); border-color: var(--color-table-row-border-dark); }
.dark .invoice-amount-breakdown dt { color: #aeb9ca; }

.administrate-table .cell-label__sort-indicator--desc > svg { transform: rotate(180deg); }


.administrate-table td[data-attribute="client_name"]:has(.collection-client-name) { min-width: 150px; max-width: 260px; }

/* Admin employee services share readable names, dates and single-line statuses. */
:is(.administrate-table--teleworking, .administrate-table--employee-service) {
  table-layout: fixed;
  min-width: 640px;
}
:is(.administrate-table--teleworking, .administrate-table--employee-service) th[data-attribute="employee"] { width: 44%; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) th:is([data-attribute="start_date"], [data-attribute="end_date"]) { width: 20%; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) th[data-attribute="status"] { width: 16%; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) :is(th, td)[data-attribute="employee"] { text-align: left; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) th[data-attribute="employee"] > a > div,
:is(.administrate-table--teleworking, .administrate-table--employee-service) th[data-attribute="employee"] > div { justify-content: flex-start; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) td[data-attribute="employee"] { overflow-wrap: break-word; }
:is(.administrate-table--teleworking, .administrate-table--employee-service) td[data-attribute="status"],
:is(.administrate-table--teleworking, .administrate-table--employee-service) td[data-attribute="status"] .administrate-status-badge {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Nature/offer columns have their own space in the five-column collections. */
.administrate-table--employee-service-details { min-width: 800px; }
.administrate-table--employee-service-details th[data-attribute="employee"] { width: 32%; }
.administrate-table--employee-service-details th:is([data-attribute="start_date"], [data-attribute="end_date"]) { width: 16%; }
.administrate-table--employee-service-details th[data-attribute="status"] { width: 12%; }
.administrate-table--employee-service-details th:is([data-attribute="nature"], [data-attribute="ref_subcontracting_offer"], [data-attribute="service_name"]) { width: 24%; }
.administrate-table--employee-service-details td:is([data-attribute="nature"], [data-attribute="ref_subcontracting_offer"], [data-attribute="service_name"]) { overflow-wrap: break-word; word-break: normal; }

/* Folder and document names in the Portage library read from the left. */
.administrate-table--library > tbody > tr > td[data-attribute="name"] { text-align: left; }

/* Mixed invoice/credit lists reserve enough room for complete status labels. */
.administrate-table--invoice-and-credit :is(th, td)[data-attribute="status"] { min-width: 100px; }
.administrate-table--invoice-and-credit th[data-attribute="status"] { width: 100px; }
.administrate-table--invoice-and-credit td[data-attribute="status"] .administrate-status-badge {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
/* Column proportions specific to the activity account; shared styles live in administrate_table.css. */
#activity_account_line_table { display: block; min-width: 0; max-width: 100%; }
#activity_account_line_table [data-attribute="date"] { width: 110px; }
#activity_account_line_table [data-attribute="id"] { width: 65px; }
#activity_account_line_table [data-attribute="category"] { width: 230px; min-width: 210px; white-space: nowrap; }
#activity_account_line_table [data-attribute="label"] { min-width: 230px; overflow-wrap: anywhere; }
#activity_account_line_table [data-attribute="debit_value"],
#activity_account_line_table [data-attribute="credit_value"] { width: 130px; min-width: 115px; }
/* Shared Administrate pagination: existing URLs, page ranges and Turbo behavior. */
.app-pagination {
  --pagination-accent: var(--color-primary, #292e68);
  --pagination-text: #64748b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
}
.dark .app-pagination { --pagination-accent: var(--color-primary-dark, #aaa0dd); --pagination-text: #cbd5e1; }
.app-pagination-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.app-pagination a.app-pagination-link,
.app-pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 38px;
  padding: 7px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--pagination-text) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 140ms ease;
}
.app-pagination a.app-pagination-link:hover { color: var(--pagination-accent) !important; }
.app-pagination a.app-pagination-link[aria-current="page"] { color: var(--pagination-accent) !important; border-bottom-color: var(--pagination-accent); font-weight: 600; }
.app-pagination a.app-pagination-link:focus { outline: none !important; box-shadow: none !important; }
.app-pagination a.app-pagination-link:focus-visible {
  color: var(--pagination-accent) !important;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.app-pagination-gap { min-width: 20px; padding-inline: 3px; }
@media (max-width: 640px) { .app-pagination { justify-content: center; padding: 12px 4px; } }
@media (pointer: coarse) { .app-pagination a.app-pagination-link { min-width: 40px; min-height: 44px; } }
.premium-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  color: #172033;
}

.premium-dashboard--prospect {
  min-width: 0;
  padding: 0;
}

.dark .premium-dashboard {
  color: #e5eefb;
}

.premium-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 250, 250, 0.92)),
    linear-gradient(90deg, rgba(14, 116, 144, 0.10), rgba(22, 163, 74, 0.08));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.premium-dashboard-hero--simple {
  grid-template-columns: minmax(0, 1fr);
  box-shadow: none;
}

.dark .premium-dashboard-hero {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 38, 48, 0.92)),
    linear-gradient(90deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.10));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.premium-dashboard-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.premium-dashboard-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #0f766e;
}

.dark .premium-dashboard-eyebrow {
  color: #5eead4;
}

.premium-dashboard-hero h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0;
  color: #0f172a;
}

.dark .premium-dashboard-hero h1 {
  color: #f8fafc;
}

.premium-dashboard-hero__text {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.55;
}

.dark .premium-dashboard-hero__text {
  color: #cbd5e1;
}

.premium-dashboard-page-header {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.dark .premium-dashboard-page-header {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.72);
}

.premium-dashboard-page-header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 1.65rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.dark .premium-dashboard-page-header h1 {
  color: #f8fafc;
}

.premium-dashboard-page-header p:not(.premium-dashboard-eyebrow) {
  max-width: 52rem;
  margin: 0.65rem 0 0;
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.55;
}

.dark .premium-dashboard-page-header p:not(.premium-dashboard-eyebrow) {
  color: #cbd5e1;
}

.premium-dashboard-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.premium-dashboard-hero__actions form,
.premium-dashboard-conversion__actions form {
  margin: 0;
}

.premium-dashboard-btn-action,
.premium-dashboard-btn-link,
.premium-dashboard-btn-card,
.premium-dashboard-btn-focus,
.premium-dashboard-btn-metric,
.premium-dashboard-project-card,
.premium-dashboard-conversion {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.premium-dashboard-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.premium-dashboard-btn-action--primary {
  color: #ffffff;
  background: #0f766e;
}

button.premium-dashboard-btn-action--primary {
  color: #ffffff !important;
  background: #0f766e !important;
}

button.premium-dashboard-btn-action--primary span {
  color: inherit !important;
}

.premium-dashboard-btn-action--primary:hover {
  color: #ffffff;
  background: #115e59;
}

button.premium-dashboard-btn-action--primary:hover {
  color: #ffffff !important;
  background: #115e59 !important;
}

.premium-dashboard-btn-action--secondary {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(15, 23, 42, 0.10);
}

button.premium-dashboard-btn-action--secondary {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

button.premium-dashboard-btn-action--secondary span {
  color: inherit !important;
}

.premium-dashboard-btn-action--secondary:hover {
  color: #0f172a;
  background: #ffffff;
  border-color: rgba(14, 116, 144, 0.35);
}

button.premium-dashboard-btn-action--secondary:hover {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: rgba(14, 116, 144, 0.35) !important;
}

.dark .premium-dashboard-btn-action--secondary {
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.22);
}

.dark button.premium-dashboard-btn-action--secondary {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.dark button.premium-dashboard-btn-action--secondary span {
  color: inherit !important;
}

.dark .premium-dashboard-btn-action--secondary:hover {
  color: #ffffff;
  border-color: rgba(94, 234, 212, 0.40);
}

.dark button.premium-dashboard-btn-action--secondary:hover {
  color: #ffffff !important;
  border-color: rgba(94, 234, 212, 0.40) !important;
}

.premium-dashboard-btn-action__icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.premium-dashboard-btn-action--secondary .premium-dashboard-btn-action__icon {
  filter: none;
}

.dark .premium-dashboard-btn-action--secondary .premium-dashboard-btn-action__icon {
  filter: brightness(0) invert(1);
}

.premium-dashboard-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
}

.dark .premium-dashboard-progress {
  border-color: rgba(94, 234, 212, 0.18);
  background: rgba(15, 23, 42, 0.56);
}

.premium-dashboard-progress > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.premium-dashboard-progress__label {
  font-size: 0.75rem;
  color: #64748b;
}

.dark .premium-dashboard-progress__label {
  color: #94a3b8;
}

.premium-dashboard-progress strong {
  font-size: 1.75rem;
  color: #0f766e;
}

.dark .premium-dashboard-progress strong {
  color: #5eead4;
}

.premium-dashboard-progress__bar {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.18);
}

.premium-dashboard-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #0284c7);
}

.premium-dashboard-progress p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
}

.dark .premium-dashboard-progress p {
  color: #e2e8f0;
}

.premium-dashboard-grid {
  display: grid;
  gap: 1rem;
}

.premium-dashboard-hero,
.premium-dashboard-grid,
.premium-dashboard-section,
.premium-dashboard-conversion {
  scroll-margin-top: 1rem;
}

.premium-dashboard-grid--main {
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.85fr);
}

.premium-dashboard-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.premium-dashboard-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.premium-dashboard-section__header p {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.premium-dashboard-section__header span {
  font-size: 0.8rem;
  color: #64748b;
  text-align: right;
}

.dark .premium-dashboard-section__header p {
  color: #f8fafc;
}

.dark .premium-dashboard-section__header span {
  color: #94a3b8;
}

.premium-dashboard-journey,
.premium-dashboard-focus-list,
.premium-dashboard-actions,
.premium-dashboard-metrics {
  display: grid;
  gap: 0.75rem;
}

.premium-dashboard-journey {
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-dashboard-step,
.premium-dashboard-btn-card,
.premium-dashboard-btn-focus,
.premium-dashboard-focus,
.premium-dashboard-btn-metric,
.premium-dashboard-project-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dark .premium-dashboard-step,
.dark .premium-dashboard-btn-card,
.dark .premium-dashboard-btn-focus,
.dark .premium-dashboard-focus,
.dark .premium-dashboard-btn-metric,
.dark .premium-dashboard-project-card {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.premium-dashboard-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem;
}

.premium-dashboard-step--current {
  border-color: rgba(14, 116, 144, 0.34);
}

.premium-dashboard-step--done {
  border-color: rgba(22, 163, 74, 0.26);
}

.premium-dashboard-step__icon,
.premium-dashboard-btn-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: #e0f2fe;
}

.premium-dashboard-step--done .premium-dashboard-step__icon {
  background: #dcfce7;
}

.premium-dashboard-step--pending .premium-dashboard-step__icon {
  background: #f1f5f9;
}

.dark .premium-dashboard-step__icon,
.dark .premium-dashboard-btn-card__icon {
  background: rgba(14, 165, 233, 0.16);
}

.dark .premium-dashboard-step--done .premium-dashboard-step__icon {
  background: rgba(34, 197, 94, 0.16);
}

.dark .premium-dashboard-step--pending .premium-dashboard-step__icon {
  background: rgba(148, 163, 184, 0.12);
}

.premium-dashboard-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.dark .premium-dashboard-icon {
  filter: brightness(0) invert(1);
}

.premium-dashboard-step__body {
  min-width: 0;
}

.premium-dashboard-step__topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.premium-dashboard-step h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.premium-dashboard-step__topline span {
  flex: 0 0 auto;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
}

.premium-dashboard-step--current .premium-dashboard-step__topline span {
  background: #e0f2fe;
  color: #0369a1;
}

.premium-dashboard-step--done .premium-dashboard-step__topline span {
  background: #dcfce7;
  color: #15803d;
}

.dark .premium-dashboard-step h2 {
  color: #f8fafc;
}

.dark .premium-dashboard-step__topline span {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.dark .premium-dashboard-step--current .premium-dashboard-step__topline span {
  background: rgba(14, 165, 233, 0.20);
  color: #7dd3fc;
}

.dark .premium-dashboard-step--done .premium-dashboard-step__topline span {
  background: rgba(34, 197, 94, 0.20);
  color: #86efac;
}

.premium-dashboard-step p,
.premium-dashboard-btn-card small,
.premium-dashboard-btn-metric small,
.premium-dashboard-focus__content small,
.premium-dashboard-project-card small {
  display: block;
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.dark .premium-dashboard-step p,
.dark .premium-dashboard-btn-card small,
.dark .premium-dashboard-btn-metric small,
.dark .premium-dashboard-focus__content small,
.dark .premium-dashboard-project-card small {
  color: #94a3b8;
}

.premium-dashboard-btn-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.55rem;
  color: #0f766e;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.premium-dashboard-btn-link:hover {
  color: #115e59;
}

.dark .premium-dashboard-btn-link {
  color: #5eead4;
}

.premium-dashboard-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.premium-dashboard-actions--prospect-home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-dashboard-btn-card {
  display: grid;
  grid-template-rows: auto minmax(5.25rem, 1fr) auto;
  gap: 0.75rem;
  min-height: 10.5rem;
  padding: 0.85rem;
  color: #0f172a;
  text-decoration: none;
}

.premium-dashboard-btn-card:hover,
.premium-dashboard-btn-focus:hover,
.premium-dashboard-btn-metric:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 116, 144, 0.34);
}

.premium-dashboard-btn-card--primary {
  border-color: rgba(15, 118, 110, 0.26);
  background: linear-gradient(135deg, #ecfeff, #ffffff);
}

.dark .premium-dashboard-btn-card,
.dark .premium-dashboard-btn-focus,
.dark .premium-dashboard-btn-metric,
.dark .premium-dashboard-project-card {
  color: #f8fafc;
}

.dark .premium-dashboard-btn-card--primary {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(15, 23, 42, 0.72));
}

.premium-dashboard-btn-card strong,
.premium-dashboard-btn-metric strong,
.premium-dashboard-focus__content strong,
.premium-dashboard-project-card strong {
  display: block;
  color: inherit;
  font-size: 0.94rem;
  line-height: 1.3;
}

.premium-dashboard-btn-card__cta,
.premium-dashboard-focus__cta {
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 800;
}

.dark .premium-dashboard-btn-card__cta,
.dark .premium-dashboard-focus__cta {
  color: #5eead4;
}

.premium-dashboard-focus-list {
  grid-template-columns: 1fr;
}

.premium-dashboard-btn-focus,
.premium-dashboard-focus {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 4.75rem;
  padding: 0.8rem;
  color: #0f172a;
  text-decoration: none;
}

.premium-dashboard-focus--empty {
  grid-template-columns: 3rem minmax(0, 1fr);
}

.premium-dashboard-focus__value,
.premium-dashboard-metric__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 900;
}

.premium-dashboard-focus--empty .premium-dashboard-focus__value {
  background: #dcfce7;
  color: #15803d;
}

.dark .premium-dashboard-focus__value,
.dark .premium-dashboard-metric__value {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.dark .premium-dashboard-focus--empty .premium-dashboard-focus__value {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.premium-dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.premium-dashboard-btn-metric {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 5.25rem;
  padding: 0.85rem;
  color: #0f172a;
  text-decoration: none;
}

.premium-dashboard-metric__value {
  background: #dbeafe;
  color: #1d4ed8;
}

.dark .premium-dashboard-metric__value {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

.premium-dashboard-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.premium-dashboard-project-card {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  min-height: 6rem;
  padding: 0.85rem;
  color: #0f172a;
}

.premium-dashboard-project-card__status {
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 2px solid #0f766e;
  background: #ccfbf1;
}

.dark .premium-dashboard-project-card__status {
  border-color: #5eead4;
  background: rgba(45, 212, 191, 0.18);
}

.premium-dashboard-conversion {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.96)),
    linear-gradient(90deg, rgba(14, 116, 144, 0.08), rgba(22, 163, 74, 0.08));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.premium-dashboard-conversion--compact {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  box-shadow: none;
}

.dark .premium-dashboard-conversion {
  border-color: rgba(94, 234, 212, 0.20);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 38, 48, 0.90)),
    linear-gradient(90deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.10));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}

.premium-dashboard-conversion__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.premium-dashboard-conversion h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.dark .premium-dashboard-conversion h2 {
  color: #f8fafc;
}

.premium-dashboard-conversion__content p:not(.premium-dashboard-eyebrow) {
  max-width: 46rem;
  margin: 0.65rem 0 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
}

.dark .premium-dashboard-conversion__content p:not(.premium-dashboard-eyebrow) {
  color: #cbd5e1;
}

.premium-dashboard-conversion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.premium-sidebar-conversion {
  padding: 0.75rem 0 0.5rem;
}

.premium-sidebar-conversion__form {
  margin: 0;
}

.premium-sidebar-conversion__button {
  width: 100%;
}

.premium-sidebar-conversion__icon {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.contract-funnel-tabs [data-contract-tab-panel][hidden] {
  display: none;
}

.contract-funnel-panel-shell {
  border-left-color: var(--color-primary, #292e68);
}

.dark .contract-funnel-panel-shell {
  border-left-color: #fdc531;
}

.contract-funnel-tablist {
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 16%, #d1d5db);
  border-radius: 0.5rem;
  background: var(--color-card-bg, #ffffff);
}

.contract-funnel-tab {
  position: relative;
  display: block;
  width: 100%;
  min-height: 3.25rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 12%, #e5e7eb);
  border-radius: 0;
  background: var(--color-card-bg, #ffffff);
  box-shadow: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.contract-funnel-tab:last-child {
  border-bottom: 0;
}

@media (min-width: 1024px) {
  .contract-funnel-tab {
    border-right: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 12%, #e5e7eb);
    border-bottom: 0;
  }

  .contract-funnel-tab:last-child {
    border-right: 0;
  }
}

.contract-funnel-tab {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 3.25rem !important;
  padding: 0.85rem 1rem !important;
  justify-content: stretch !important;
  border-radius: 0 !important;
  color: #374151 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-align: left !important;
  background-color: var(--color-card-bg, #ffffff) !important;
  background-image: none !important;
  text-decoration: none !important;
}

.contract-funnel-tab > span {
  width: 100%;
}

.dark .contract-funnel-tablist {
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 30%, #4b5563);
  background: var(--color-card-bg-dark, #171717);
}

.dark .contract-funnel-tab {
  color: #e5e5e5 !important;
  background-color: var(--color-card-bg-dark, #171717) !important;
  background-image: none !important;
}

.contract-funnel-tab:hover {
  color: var(--color-primary, #292e68) !important;
  background-color: color-mix(in srgb, var(--color-card-bg, #ffffff) 92%, var(--color-primary, #292e68) 8%) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-primary, #292e68) 28%, transparent);
}

.dark .contract-funnel-tab {
  border-color: color-mix(in srgb, var(--color-primary-dark, #292e68) 30%, #4b5563);
  background: var(--color-card-bg-dark, #171717);
  box-shadow: none;
}

.dark .contract-funnel-tab:hover {
  color: var(--color-secondary-dark, #fdc531) !important;
  background-color: color-mix(in srgb, var(--color-card-bg-dark, #171717) 82%, var(--color-primary-dark, #292e68) 18%) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-secondary-dark, #fdc531) 36%, transparent);
}

.contract-funnel-tab-title {
  color: color-mix(in srgb, var(--color-primary, #292e68) 82%, #111827);
}

.dark .contract-funnel-tab-title {
  color: color-mix(in srgb, var(--color-secondary-dark, #fdc531) 84%, #ffffff);
}

.contract-funnel-tab.is-active {
  background-color: color-mix(in srgb, var(--color-card-bg, #ffffff) 78%, var(--color-primary, #292e68) 22%) !important;
  background-image: none !important;
  color: var(--color-primary, #292e68) !important;
  box-shadow: inset 0 -3px 0 var(--color-primary, #292e68);
}

.contract-funnel-tab:focus-visible {
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--color-primary, #292e68) 58%, #ffffff);
  outline-offset: -3px;
}

.contract-funnel-tab.is-active .contract-funnel-tab-title {
  color: var(--color-primary, #292e68);
}

.dark .contract-funnel-tab.is-active {
  background-color: color-mix(in srgb, var(--color-card-bg-dark, #171717) 62%, var(--color-primary-dark, #292e68) 38%) !important;
  background-image: none !important;
  color: var(--color-secondary-dark, #fdc531) !important;
  box-shadow: inset 0 -3px 0 var(--color-secondary-dark, #fdc531);
}

.dark .contract-funnel-tab:focus-visible {
  outline-color: var(--color-secondary-dark, #fdc531);
}

[data-contract-navigation-item] {
  cursor: pointer;
  border-radius: 0.375rem;
  padding: 0.35rem 0.45rem;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

[data-contract-navigation-item]:hover {
  background-color: color-mix(in srgb, var(--color-card-bg, #ffffff) 82%, var(--color-primary, #292e68) 18%);
}

[data-contract-navigation-item].is-active {
  background-color: color-mix(in srgb, var(--color-card-bg, #ffffff) 68%, var(--color-primary, #292e68) 32%);
  color: var(--color-primary, #292e68);
  box-shadow: inset 3px 0 0 var(--color-primary, #292e68);
}

[data-contract-navigation-item]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary, #292e68) 58%, #ffffff);
  outline-offset: 1px;
}

.dark [data-contract-navigation-item]:hover {
  background-color: color-mix(in srgb, var(--color-card-bg-dark, #171717) 72%, var(--color-primary-dark, #292e68) 28%);
}

.dark [data-contract-navigation-item].is-active {
  background-color: color-mix(in srgb, var(--color-card-bg-dark, #171717) 55%, var(--color-primary-dark, #292e68) 45%);
  color: var(--color-secondary-dark, #fdc531);
  box-shadow: inset 3px 0 0 var(--color-secondary-dark, #fdc531);
}

.dark [data-contract-navigation-item]:focus-visible {
  outline-color: var(--color-secondary-dark, #fdc531);
}

.dark .contract-funnel-tab.is-active .contract-funnel-tab-title {
  color: var(--color-secondary-dark, #fdc531);
}

.commercial-setup {
  z-index: 10000;
}

.commercial-setup-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.commercial-setup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.commercial-setup [data-commercial-setup-step] {
  display: none;
}

.commercial-setup[data-step="company_lookup"] [data-commercial-setup-step="company_lookup"],
.commercial-setup[data-step="company_choice"] [data-commercial-setup-step="company_choice"],
.commercial-setup[data-step="company"] [data-commercial-setup-step="company"],
.commercial-setup[data-step="contact"] [data-commercial-setup-step="contact"] {
  display: block;
}

.commercial-setup[data-step="company_lookup"] .commercial-setup-body {
  display: flex;
}

.commercial-setup[data-step="company_lookup"] [data-commercial-setup-step="company_lookup"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.commercial-setup-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 100%;
  position: relative;
  width: 100%;
}

.commercial-setup-choice-grid::before {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--color-primary) 20%, #e5e7eb) 18%,
    color-mix(in srgb, var(--color-primary) 42%, #e5e7eb) 50%,
    color-mix(in srgb, var(--color-primary) 20%, #e5e7eb) 82%,
    transparent
  );
  border-radius: 9999px;
  bottom: 3rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
  content: "";
  left: 50%;
  position: absolute;
  top: 3rem;
  transform: translateX(-50%);
  width: 2px;
  z-index: 1;
}

.commercial-setup-choice-grid::after {
  background: var(--color-primary);
  border: 4px solid #fff;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, #e5e7eb), 0 10px 24px rgba(17, 24, 39, 0.12);
  content: "";
  height: 0.9rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.9rem;
  z-index: 2;
}

.dark .commercial-setup-choice-grid::before {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--color-primary-dark) 26%, #404040) 18%,
    color-mix(in srgb, var(--color-primary-dark) 54%, #404040) 50%,
    color-mix(in srgb, var(--color-primary-dark) 26%, #404040) 82%,
    transparent
  );
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.7);
}

.dark .commercial-setup-choice-grid::after {
  background: var(--color-primary-dark);
  border-color: #171717;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-dark) 32%, #404040), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.commercial-setup-choice-pane {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 2rem 3rem;
  position: relative;
  text-align: center;
  z-index: 3;
}

.commercial-setup-visual {
  height: 12rem;
  margin-bottom: 1.5rem;
  object-fit: contain;
  width: 12rem;
}

.commercial-setup-lookup-form {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 1.75rem;
  max-width: 28rem;
  width: 100%;
}

.commercial-setup-lookup-field {
  min-width: 0;
  position: relative;
  text-align: left;
}

.commercial-setup-lookup-error {
  left: 0;
  margin-top: 0.5rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.commercial-setup-foreign-button {
  margin-top: 1.75rem;
}

.contract-functional-section-heading {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 68%, #0f172a));
  color: #fff;
}

.dark .contract-functional-section-heading {
  background: linear-gradient(135deg, var(--color-primary-dark), color-mix(in srgb, var(--color-primary-dark) 68%, #0f172a));
}

.contract-mission-section {
  overflow: visible;
  position: relative;
  z-index: 2;
}

.contract-mission-section > .contract-functional-section-heading {
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

.contract-address-autocomplete-field,
.contract-address-autocomplete-field .selectize-control {
  position: relative;
  z-index: 3;
}

.contract-address-autocomplete-field .selectize-control.dropdown-active {
  z-index: 60;
}

.contract-address-autocomplete-field .selectize-dropdown {
  z-index: 61;
}

.onboarding-service-option {
  border-color: var(--color-primary, #292e68) !important;
  border-width: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #292e68) 18%, transparent);
}

.onboarding-service-option:hover,
.onboarding-service-option:focus-visible {
  border-color: var(--color-primary, #292e68);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-primary, #292e68) 24%, transparent),
    0 8px 18px color-mix(in srgb, var(--color-primary, #292e68) 14%, transparent);
}

.onboarding-service-icon {
  display: block;
  height: 5rem;
  max-height: 5rem;
  max-width: 5rem;
  flex: 0 0 auto;
  width: 5rem;
  color: var(--color-primary, #292e68);
  transition: color 150ms ease-in-out;
}

.onboarding-service-icon [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.onboarding-service-icon [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

.onboarding-service-option:hover .onboarding-service-icon,
.onboarding-service-option:focus-visible .onboarding-service-icon {
  color: var(--color-secondary, #fdc531);
}

.onboarding-service-option:disabled .onboarding-service-icon {
  color: #7f7f7f;
}

.onboarding-service-option:disabled {
  border-color: var(--color-primary, #292e68) !important;
}

.onboarding-service-label,
.onboarding-service-detail {
  transition: color 150ms ease-in-out;
}

.onboarding-service-option:hover .onboarding-service-label,
.onboarding-service-option:focus-visible .onboarding-service-label {
  color: #ffffff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(0 0 0 / 38%);
}

.onboarding-service-option:hover .onboarding-service-detail,
.onboarding-service-option:focus-visible .onboarding-service-detail {
  color: var(--color-secondary, #fdc531) !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(0 0 0 / 38%);
}

.onboarding-service-option:hover > span.absolute,
.onboarding-service-option:focus-visible > span.absolute {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--color-primary, #292e68) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
}

.onboarding-service-option:hover .onboarding-service-icon,
.onboarding-service-option:focus-visible .onboarding-service-icon {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 45%));
}

@media (min-width: 640px) {
  .onboarding-service-icon {
    height: 5.5rem;
    max-height: 5.5rem;
    max-width: 5.5rem;
    width: 5.5rem;
  }
}

@media (max-width: 1279px) {
  .premium-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .premium-dashboard-metrics,
  .premium-dashboard-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .premium-dashboard-hero,
  .premium-dashboard-grid--main,
  .premium-dashboard-conversion {
    grid-template-columns: 1fr;
  }

  .premium-dashboard-progress {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .premium-dashboard {
    padding: 0.5rem;
  }

  .premium-dashboard--prospect {
    padding: 0;
  }

  .premium-dashboard-hero {
    padding: 0.85rem;
  }

  .premium-dashboard-hero h1 {
    font-size: 1.5rem;
  }

  .premium-dashboard-section__header {
    align-items: start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .premium-dashboard-section__header span {
    text-align: left;
  }

  .premium-dashboard-actions,
  .premium-dashboard-metrics,
  .premium-dashboard-checklist,
  .premium-dashboard-actions--prospect-home {
    grid-template-columns: 1fr;
  }

  .premium-dashboard-btn-focus {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .premium-dashboard-focus__cta {
    grid-column: 2;
  }

  .commercial-setup[data-step="company_lookup"] .commercial-setup-body {
    display: block;
  }

  .commercial-setup-choice-grid {
    grid-template-columns: 1fr;
  }

  .commercial-setup-choice-grid::before {
    background: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--color-primary) 20%, #e5e7eb) 18%,
      color-mix(in srgb, var(--color-primary) 42%, #e5e7eb) 50%,
      color-mix(in srgb, var(--color-primary) 20%, #e5e7eb) 82%,
      transparent
    );
    bottom: auto;
    height: 2px;
    left: 2rem;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }

  .dark .commercial-setup-choice-grid::before {
    background: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--color-primary-dark) 26%, #404040) 18%,
      color-mix(in srgb, var(--color-primary-dark) 54%, #404040) 50%,
      color-mix(in srgb, var(--color-primary-dark) 26%, #404040) 82%,
      transparent
    );
  }

  .commercial-setup-choice-pane {
    justify-content: flex-start;
    min-height: 18rem;
    padding: 1.5rem 0.5rem;
  }

  .commercial-setup-lookup-form {
    grid-template-columns: 1fr;
  }

  .commercial-setup-visual {
    height: 8.5rem;
    margin-bottom: 0.75rem;
    width: 8.5rem;
  }
}
/* Central application surface follows the entity palette; sidebar keeps its own surface. */
body.app-main-theme {
  --app-surface-bg: var(--color-app-bg, #f6f4f9);
}
.dark body.app-main-theme {
  --app-surface-bg: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 8%, var(--color-app-bg-dark, #171717));
}
body.premium-app-surface, #trianos-app.premium-app-surface { background: var(--color-sidebar-bg, #fff) !important; }
.dark body.premium-app-surface, .dark #trianos-app.premium-app-surface { background: var(--color-sidebar-bg-dark, #171717) !important; }
body.app-main-theme #main-content { background: var(--app-surface-bg); }
@media print {
  body.app-main-theme #main-content { background: #fff !important; }
}
/* Shared sidebar headings in payslip details and the final salary-tunnel step. */
@media screen {
  .payslip-hover-effect > thead > tr > th.payslip-panel-title {
    background-color: var(--color-table-header-bg);
    color: var(--color-table-header-text);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-align: center;
    padding: 6px 8px;
    height: 30px;
    box-sizing: border-box;
  }
  .dark .payslip-hover-effect > thead > tr > th.payslip-panel-title {
    background-color: var(--color-table-header-bg-dark);
    color: var(--color-table-header-text-dark);
  }
}

.payslip-header-text { color: var(--color-table-header-text) !important; }
.dark .payslip-header-text { color: var(--color-table-header-text-dark) !important; }
.payslip-header-text-red { color: #ef4444 !important; }
.payslip-line-bg-slate { background-color: var(--color-table-stripe-bg) !important; }
.dark .payslip-line-bg-slate { background-color: var(--color-table-stripe-bg-dark) !important; }
.payslip-section-row { background-color: color-mix(in srgb, var(--color-secondary) 20%, white); }
.dark .payslip-section-row { background-color: color-mix(in srgb, var(--color-secondary) 20%, #1e293b); }
.payslip-text-red { color: #ef4444 !important; }
.payslip-text-blue { color: #1d4ed8 !important; }
.dark .payslip-text-blue { color: #93c5fd !important; }
.payslip-text-gray { color: #f3f4f6 !important; }

.payslip-hover-effect tbody tr:not(.payslip-header-bg):hover td,
.payslip-hover-effect tbody tr:not(.payslip-header-bg):hover th {
  background-color: var(--color-table-row-hover-bg, #f3f4f6) !important;
}
.dark .payslip-hover-effect tbody tr:not(.payslip-header-bg):hover td,
.dark .payslip-hover-effect tbody tr:not(.payslip-header-bg):hover th {
  background-color: var(--color-table-row-hover-bg-dark, #1e293b) !important;
}

.contrib-table tr:nth-child(odd) {
  background-color: var(--color-table-stripe-bg);
}

.dark .contrib-table tr:nth-child(odd) {
  background-color: var(--color-table-stripe-bg-dark);
}

.contrib-table tr:nth-child(even) {
  background-color: var(--color-table-even-bg);
}

.dark .contrib-table tr:nth-child(even) {
  background-color: var(--color-table-even-bg-dark);
}

.title-banner-color {
  background-color: #ffc901;
  color: white;
}

.title-banner-border-color {
  border-color: #8a8889;
}

.section-title-color {
  color: #8a8889;
}

.highlight-color {
  color: #1a73e8;
}

.page-break {
  page-break-before: always;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f8f9fa;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
  color: #6c757d;
  border-top: 1px solid #ccc;
}

.payslip-section-title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  border-left: 6px solid #ffc901;
  padding-left: 0.5rem;
  background:  #64748b;
  color: #fff;
  border-radius: 0.25rem;
  min-width: 200px;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  transform: translate(-50%, -50%) rotate(-30deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.watermark span {
  font-size: 5rem;
  color: #e3342f;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Keep salary totals and the final confirmation readable in dark mode. */
@media screen {
  .dark .payslip-hover-effect > tbody > tr.payslip-balance-before > td {
    background-color: var(--dark-info-bg, #253350);
    color: var(--dark-text, #e7ebf2);
    border-color: var(--dark-info, #b8c8ff);
  }
  .dark .payslip-hover-effect > tbody > tr.payslip-balance-after > td {
    background-color: var(--dark-success-bg, #19362c);
    color: var(--dark-text, #e7ebf2);
    border-color: var(--dark-success, #7cd4ad);
  }
  .dark .payslip-final-warning {
    background-color: var(--dark-danger-bg, #3b232b);
    color: var(--dark-danger, #f0a0ab);
    border-color: var(--dark-danger, #f0a0ab);
  }
  .dark .payslip-final-warning label { color: inherit; }
}

/* Statistics months are row headings, with the same dividers as the data cells. */
.payslip-statistics-table tbody th[scope="row"] {
  color: #000;
  border-color: var(--color-table-row-border, #e5e7eb);
}
.dark .payslip-statistics-table tbody th[scope="row"] {
  color: var(--dark-text-secondary, #a8b2c3);
  border-color: var(--dark-border, #30394a);
}

html.dark body.app-main-theme .payslip-statistics-table tbody > tr { border-color: var(--dark-border, #30394a); }

/* Salary tunnel badge follows the entity primary palette. */
.salary-tunnel-widget {
  color: var(--color-primary, #292e68);
  background: color-mix(in srgb, var(--color-primary, #292e68) 10%, #fff);
}
.dark .salary-tunnel-widget {
  color: var(--color-primary-dark, #aaa0dd);
  background: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 16%, var(--dark-surface, #202735));
}
html body.app-main-theme .salary-tunnel-widget a { color: inherit; }
.salary-tunnel-widget-separator { border-color: currentColor; }

/* First salary-tunnel step: financial context and non-blocking reminders. */
.tds-invoicing { display: grid; gap: 16px; min-width: 0; text-align: left; }
.tds-invoicing-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tds-invoicing .tds-invoicing-card { padding: 20px; margin: 0; min-width: 0; gap: 8px; }
.tds-invoicing h2 { font-size: 18px; font-weight: 600; margin: 0; color: var(--color-primary); }
.tds-invoicing h3 { font-size: 14px; font-weight: 600; margin: 0; }
.tds-invoicing .tds-invoicing-subtitle { margin-top: 8px; }
.tds-invoicing-value { text-align: right; margin-left: auto; }
.tds-invoicing-note { font-size: 13px; color: #586477; line-height: 1.5; margin: 0; }
.tds-invoicing-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tds-invoicing-amount { font-size: 18px; white-space: nowrap; }
.tds-invoicing a, .tds-invoicing summary { font-size: 13px; text-underline-offset: 3px; }
.tds-invoicing a:hover { text-decoration: underline; }
.tds-invoicing-value .pf-tooltip-trigger { display: inline-flex; padding: 0; background: transparent !important; border: 0; color: inherit !important; font: inherit; letter-spacing: inherit; cursor: help; }
.tds-invoicing .pf-card { --pf-accent: var(--color-primary); }
.dark .tds-invoicing .pf-card { --pf-accent: var(--color-primary-dark); }
.tds-invoicing-carry-over { border-left: 3px solid var(--color-primary); }
.dark .tds-invoicing-carry-over { border-left-color: var(--color-primary-dark); }
.tds-invoicing-lines { margin: 0; }
.tds-invoicing-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; }
.tds-invoicing-lines dt { font-size: 14px; }
.tds-invoicing-lines dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.tds-invoicing-reminder, .tds-invoicing-reminders li { background: color-mix(in srgb, var(--color-primary) 5%, transparent); border-radius: 8px; padding: 12px; font-size: 14px; }
.tds-invoicing-reminders { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tds-invoicing-reminders p { margin: 0 0 4px; }
.tds-invoicing-savings-item { padding: 10px 0; border-bottom: 1px solid #e2e6ed; }
.tds-invoicing-total { font-weight: 600; }
.tds-invoicing .tds-invoicing-termination { border-left: 3px solid var(--color-primary); }
.tds-invoicing-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 13px; }
.tds-invoicing-table th, .tds-invoicing-table td { padding: 8px 10px; border-bottom: 1px solid #e2e6ed; text-align: left; }
.tds-invoicing-table th:last-child, .tds-invoicing-table td:last-child { text-align: right; white-space: nowrap; }
.tds-invoicing-table td:nth-child(3), .tds-invoicing-table td:nth-child(4) { white-space: nowrap; }
.tds-invoicing-table small { display: block; color: #586477; }
.dark .tds-invoicing h2 { color: var(--color-primary-dark, var(--color-primary)); }
.dark .tds-invoicing .tds-invoicing-note, .dark .tds-invoicing-table small { color: #b4bfd0; }
.dark .tds-invoicing-reminder, .dark .tds-invoicing-reminders li { background: color-mix(in srgb, var(--color-primary-dark, var(--color-primary)) 9%, transparent); }
.dark .tds-invoicing-table th, .dark .tds-invoicing-table td, .dark .tds-invoicing-savings-item { border-color: #394356; }
.dark .tds-invoicing .tds-invoicing-termination { border-left-color: var(--color-primary-dark, var(--color-primary)); }
@media (max-width: 640px) {
  .tds-invoicing-metrics { grid-template-columns: 1fr; }
  .tds-invoicing .tds-invoicing-card { padding: 16px; }
  .tds-invoicing-lines > div { flex-wrap: wrap; gap: 4px 12px; }
  .tds-invoicing-lines dd { margin-left: auto; }
}

.tds-invoicing .app-data-table { min-width: 0; max-width: 100%; overflow-x: auto; }
.tds-invoicing-reminders p, .tds-invoicing-table td:nth-child(2) { overflow-wrap: anywhere; }

/* The displayed sign controls every monetary amount in the invoicing step. */
.tds-invoicing { --tds-money-positive: #047857; --tds-money-negative: #b91c1c; --tds-money-zero: #29324b; }
.dark .tds-invoicing { --tds-money-positive: #6ee7b7; --tds-money-negative: #fca5a5; --tds-money-zero: var(--dark-text, #e7ebf2); }
.tds-invoicing .tds-money { text-align: right; font-variant-numeric: tabular-nums; }
.tds-invoicing .tds-money--positive { color: var(--tds-money-positive); }
.tds-invoicing .tds-money--negative { color: var(--tds-money-negative); }
.tds-invoicing .tds-money--zero, .tds-invoicing .pf-primary.pf-zero { color: var(--tds-money-zero); }
.tds-invoicing-heading > .tds-invoicing-amount, .tds-invoicing-heading > .pf-primary { margin-left: auto; text-align: right; }
.tds-invoicing-lines dd { margin-left: auto; }

/* Salary journey navigation stays near short content and visible on long steps. */
.tds-navigation {
  position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: 20px; padding: 10px 12px;
  background: var(--color-card-bg, #fff); border: 1px solid #e2e6ed; border-radius: 8px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
}
.tds-navigation-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; min-width: 0; }
body.app-main-theme .tds-navigation .funnel_step_buttons {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 4px;
  font-size: 14px; font-weight: 600; line-height: 20px; text-align: center;
  text-decoration: none; white-space: normal;
}
body.app-main-theme .tds-navigation .tds-navigation-back {
  flex-shrink: 0; color: #586477; background: transparent; border: 1px solid #d5dbe5; box-shadow: none;
}
body.app-main-theme .tds-navigation .tds-navigation-back:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, transparent); border-color: var(--color-primary); }
.tds-navigation .tds-navigation-icon { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.tds-navigation-back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.tds-navigation-back.pointer-events-none { opacity: .6; cursor: not-allowed; }
.dark .tds-navigation { background: var(--dark-surface, #202735); border-color: var(--dark-border, #30394a); box-shadow: 0 2px 8px rgb(0 0 0 / 16%); }
html.dark body.app-main-theme .tds-navigation .tds-navigation-back { color: var(--dark-text-secondary, #a8b2c3); background: transparent; border-color: #647086; }
html.dark body.app-main-theme .tds-navigation .tds-navigation-back:hover { color: var(--dark-link); border-color: var(--dark-link); background: color-mix(in srgb, var(--dark-link) 8%, transparent); }
.dark .tds-navigation-back:focus-visible { outline-color: var(--dark-link); }
@media (max-width: 480px) {
  .tds-navigation { padding: 8px; gap: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  body.app-main-theme .tds-navigation .funnel_step_buttons { padding: 10px 12px; font-size: 13px; gap: 6px; }
}

/* Compact activity strip; overflow stays inside the strip on narrow screens. */
.tds-activity { display: flex; flex-direction: column; gap: 12px; min-width: 0; text-align: left; }
body.app-main-theme .tds-activity .tds-activity-toolbar { display: flex; align-items: stretch; gap: 12px; margin: 0; padding: 0 0 4px; min-width: 0; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.tds-activity-contract, .tds-activity-summary, .tds-activity-working, .tds-activity-line, .tds-activity-limit, .tds-activity-overtime, .tds-activity-overtime-metrics { display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.tds-activity-contract { gap: 8px; font-size: 11px; color: #586477; }
.tds-activity-summary { gap: 12px; flex-grow: 1; }
.tds-activity-working { gap: 10px; }
.tds-activity-line { gap: 6px; font-size: 12px; }
.tds-activity-number { font-size: 14px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tds-activity-number small { font-size: 12px; font-weight: 400; color: #586477; }
.tds-activity-limit { gap: 4px; font-size: 12px; color: #586477; }
.tds-activity-summary > .tds-activity-line { border-left: 1px solid #e2e6ed; padding-left: 12px; }
.tds-activity-overtime { gap: 12px; margin-left: auto; }
.tds-activity-overtime-metrics { gap: 8px; }
.tds-activity-overtime-heading button { min-height: 36px; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
.tds-activity-progress { display: block; width: 100%; height: 3px; margin-top: 3px; accent-color: var(--color-primary); border: 0; border-radius: 8px; overflow: hidden; background: #e2e6ed; }
.tds-activity-progress::-webkit-progress-bar { background: #e2e6ed; }
.tds-activity-progress::-webkit-progress-value { background: var(--color-primary); border-radius: 8px; }
.tds-activity-progress::-moz-progress-bar { background: var(--color-primary); }
.tds-activity .tds-activity-calendar { min-width: 0; }
.tds-activity .tds-activity-overtime.hidden { display: none; }
.dark .tds-activity-contract, .dark .tds-activity-number small, .dark .tds-activity-limit { color: #b4bfd0; }
.dark .tds-activity-summary > .tds-activity-line, .dark .tds-activity-overtime { border-color: #394356; }
.dark .tds-activity-progress { accent-color: var(--color-primary-dark, #aaa0dd); }
.dark .tds-activity-progress::-webkit-progress-bar { background: #394356; }
.dark .tds-activity-progress::-webkit-progress-value { background: var(--color-primary-dark, #aaa0dd); }

.tds-activity .tds-activity-contract-footer { justify-content: flex-end; flex-wrap: wrap; text-align: right; margin-top: 12px; font-size: 12px; gap: 4px 12px; }

body.app-main-theme .tds-activity-toolbar > .app-card { padding: 8px 12px; margin: 0; min-height: 50px; }

/* Keep salary entry focused; the final payslip preview retains its wide layout. */
.tds-funnel { width: 100%; max-width: 1120px; min-width: 0; }
.tds-funnel.tds-funnel--final { max-width: 1280px; }

/* Pair the two activity counters and the two overtime rates under the CRA. */
.tds-activity-working-counts, .tds-activity-overtime-rates { display: grid; gap: 2px; }
.tds-activity-working-counts .tds-activity-line, .tds-activity-overtime-rates .tds-activity-line { justify-content: space-between; gap: 10px; }
.tds-activity-working > .tds-activity-limit { align-self: stretch; border-left: 1px solid #e2e6ed; padding-left: 10px; }
.tds-activity-overtime-metrics { gap: 14px; }
.dark .tds-activity-working > .tds-activity-limit { border-color: #394356; }

/* Explain the existing expense ceiling and the projected balance after selection. */
.tds-expenses-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; text-align: left; }
body.app-main-theme .tds-expenses-summary-card { padding: 16px; min-width: 0; margin: 0; }
.tds-expenses-summary h2 { font-size: 16px; font-weight: 600; color: var(--color-primary); margin: 0 0 10px; }
.tds-expenses-summary dl { margin: 0; }
.tds-expenses-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; }
.tds-expenses-line dt { min-width: 0; }
.tds-expenses-money { flex-shrink: 0; margin: 0; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.tds-expenses-money--positive { color: #047857; }
.tds-expenses-money--negative { color: #b91c1c; }
.tds-expenses-money--zero, .tds-expenses-money--neutral { color: #29324b; }
.tds-expenses-total { border-top: 1px solid #e2e6ed; margin-top: 6px; padding-top: 10px; font-weight: 600; }
.tds-expenses-total dd { font-size: 20px; letter-spacing: -.4px; }
.tds-expenses-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #586477; }
.tds-expenses-detail { margin-top: 10px; font-size: 12px; }
.tds-expenses-detail summary { cursor: pointer; color: var(--color-primary); }
.tds-expenses-detail summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.tds-expenses-cra { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; padding: 0; margin: 8px 0; }
.tds-expenses-warning { font-size: 12px; color: #b91c1c; margin-top: 8px; }
.dark .tds-expenses-summary h2, .dark .tds-expenses-detail summary { color: var(--color-primary-dark, #aaa0dd); }
.dark .tds-expenses-note { color: #b4bfd0; }
.dark .tds-expenses-total { border-color: #394356; }
.dark .tds-expenses-money--positive { color: #6ee7b7; }
.dark .tds-expenses-money--negative, .dark .tds-expenses-warning { color: #fca5a5; }
.dark .tds-expenses-money--zero, .dark .tds-expenses-money--neutral { color: var(--dark-text, #e7ebf2); }
@media (max-width: 800px) { .tds-expenses-summary { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .tds-expenses-line { flex-wrap: wrap; gap: 2px 8px; } .tds-expenses-money { margin-left: auto; } }

/* Calculation tooltips work on hover and keyboard/touch focus, including Turbo replacements. */
.tds-expenses-tooltip-anchor { position: relative; display: inline-block; }
html body.app-main-theme .tds-expenses-tooltip-trigger { background: transparent !important; color: inherit !important; font: inherit; padding: 0; border: 0; border-bottom: 1px dotted currentColor; border-radius: 0; box-shadow: none; cursor: help; }
.tds-expenses-tooltip-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.tds-expenses-tooltip-panel { position: absolute; top: 100%; right: 0; z-index: 60; display: block; visibility: hidden; opacity: 0; pointer-events: none; width: min(440px, calc(100vw - 48px)); max-height: min(480px, 65vh); overflow: auto; padding: 12px; background: #fff; color: #29324b; border: 1px solid #d5dbe5; border-radius: 8px; box-shadow: 0 8px 24px rgb(15 23 42 / 16%); text-align: left; white-space: normal; font-size: 12px; font-weight: 400; }
.tds-expenses-tooltip-anchor:hover > .tds-expenses-tooltip-panel, .tds-expenses-tooltip-anchor:focus-within > .tds-expenses-tooltip-panel { visibility: visible; opacity: 1; pointer-events: auto; }
.tds-expenses-tooltip-title { display: block; font-size: 13px; }
.tds-expenses-tooltip-panel .tds-expenses-line { font-size: 12px; }
.tds-expenses-tooltip-panel .tds-expenses-total dd { font-size: 15px; }
.dark .tds-expenses-tooltip-panel { background: var(--dark-surface, #202735); color: var(--dark-text, #e7ebf2); border-color: #647086; }

.tds-expenses-deadline-reminder { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #dc2626; border-radius: 4px; background: #fee2e2; color: #991b1b; font-size: 13px; text-align: left; }
.tds-expenses-deadline-reminder p { margin: 0; }
.tds-expenses-deadline-reminder p + p { margin-top: 6px; }
.dark .tds-expenses-deadline-reminder { background: #451a1a; color: #fecaca; border-color: #f87171; }

.tds-expense-card-title { display: inline-flex; align-items: center; gap: 4px; }
.tds-meal-voucher-tooltip { display: inline-flex; align-items: center; font-weight: 400; }
.tds-meal-voucher-tooltip [data-field-tooltip-text] { font-style: italic; }

.tds-expenses-reimbursement-card { display: flex; flex-direction: column; }
.tds-expenses-reimbursement-card > dl { display: flex; flex: 1; align-items: center; justify-content: center; }
.tds-expenses-reimbursement { width: 100%; justify-content: center; }
.tds-expenses-reimbursement .tds-expenses-money { margin: 0; text-align: center; font-size: 24px; letter-spacing: -.4px; }

/* Spread activity counters across the available summary card width. */
.tds-activity-summary > .tds-activity-working, .tds-activity-summary > .tds-activity-line { flex: 1 0 auto; }
.tds-activity-summary > .tds-activity-line { justify-content: space-between; gap: 12px; }
.tds-activity-summary .tds-activity-working-counts { flex-grow: 1; }

/* The CRA keeps semantic day colors when the global dark button theme applies. */
html.dark body.app-main-theme .tds-activity .calendar-day-header {
  color: #c4b5fd !important;
}
html.dark body.app-main-theme .tds-activity .calendar-day-cell {
  background: #202c3c !important;
  border-color: #475569;
}
html.dark body.app-main-theme .tds-activity .calendar-day-number {
  color: #e2e8f0 !important;
}
html.dark body.app-main-theme .tds-activity .calendar-day-expense-required-marker {
  background: #f87171;
  box-shadow: 0 0 0 2px #202c3c;
}
html.dark body.app-main-theme .tds-activity :is(.calendar-slot, button.type_day_selector) {
  --cra-background: #334155;
  --cra-foreground: #f1f5f9;
  background: var(--cra-background) !important;
  color: var(--cra-foreground) !important;
}
html.dark body.app-main-theme .tds-activity .calendar-slot label {
  color: inherit !important;
}
html.dark body.app-main-theme .tds-activity .calendar-slot.disabled {
  opacity: 1;
}
html.dark body.app-main-theme .tds-activity .calendar-slot.disabled:has(> input[value="blank"]) {
  --cra-background: #293445;
  --cra-foreground: #aebdce;
}
html.dark body.app-main-theme .tds-activity :is(button.type_day_selector[data-type-day="working"], .calendar-slot:has(> input[value="working"])) {
  --cra-background: #286b35;
  --cra-foreground: #f0fdf4;
}
html.dark body.app-main-theme .tds-activity :is(button.type_day_selector[data-type-day="teleworking"], .calendar-slot:has(> input[value="teleworking"])) {
  --cra-background: #235f91;
  --cra-foreground: #eff6ff;
}
html.dark body.app-main-theme .tds-activity :is(button.type_day_selector[data-type-day="paid_day_off"], .calendar-slot:has(> input[value="paid_day_off"])) {
  --cra-background: #e3ac38;
  --cra-foreground: #172033;
}
html.dark body.app-main-theme .tds-activity :is(button.type_day_selector[data-type-day="rtt"], .calendar-slot:has(> input[value="rtt"])) {
  --cra-background: #d9c06a;
  --cra-foreground: #172033;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="public_holiday"]) {
  --cra-background: #475569;
  --cra-foreground: #f1f5f9;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="sick_leave"]) {
  --cra-background: #831843;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input:is([value="work_accident"], [value="work_related_disease"], [value="commuting_accident"])) {
  --cra-background: #9f1239;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="family_event_leave"]) {
  --cra-background: #b4a7d6;
  --cra-foreground: #172033;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="paternity_leave"]) {
  --cra-background: #604592;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="maternity_leave"]) {
  --cra-background: #a12583;
}
html.dark body.app-main-theme .tds-activity .calendar-slot:has(> input[value="additional_birth_leave"]) {
  --cra-background: #0f766e;
}
html.dark body.app-main-theme .tds-activity button.type_day_selector {
  border-color: transparent;
}
html.dark body.app-main-theme .tds-activity button.type_day_selector--reset {
  --cra-background: #991b1b;
  --cra-foreground: #fff1f2;
}
html.dark body.app-main-theme .tds-activity button.type_day_selector[data-selected="true"] {
  outline: 1px solid rgb(148 163 184 / 65%) !important;
  outline-offset: 1px;
  box-shadow: none;
}
html.dark body.app-main-theme .tds-activity button.type_day_selector:focus-visible {
  outline: 2px solid #e2e8f0 !important;
  outline-offset: 2px;
  box-shadow: none;
}
html.dark body.app-main-theme .tds-activity button.type_day_selector:hover {
  filter: brightness(1.12);
}

/* Salary choice: financial overview and existing salary selection shortcuts. */
.tds-salary-choice { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.tds-salary-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.tds-salary-choice .tds-salary-card { padding: 16px; min-width: 0; overflow: visible; }
.tds-salary-card h2 { font-size: 16px; line-height: 1.5; margin: 0 0 12px; }
.tds-salary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; font-size: 13px; }
.tds-salary-line > .field { width: auto; }
.tds-salary-money, .tds-salary-shortcut { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: #29324b; }
.tds-salary-balance-card { align-self: stretch; }
.tds-salary-balance-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.tds-salary-balance-heading h2 { margin: 0; min-width: 0; }
.tds-salary-balance { flex-shrink: 0; font-size: 26px; line-height: 1.3; text-align: right; margin: 0; }
@media (max-width: 480px) {
  .tds-salary-balance { font-size: 22px; }
}
.tds-salary-expenses { border-top: 1px solid #dce2ed; padding-top: 12px; }
.tds-salary-choice .tds-salary-shortcut { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.tds-salary-choice .tds-salary-shortcut:hover { text-decoration-style: solid; }
.tds-salary-shortcut:focus-visible { outline: 2px solid #6366f1; outline-offset: 4px; border-radius: 2px; }
.tds-salary-bounds > .tds-salary-line { border-top: 1px solid #dce2ed; }
.tds-salary-form { width: 100%; }
.tds-salary-entry { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tds-salary-entry-label { font-size: 16px; font-weight: 600; }
.dark .tds-salary-money, .dark .tds-salary-shortcut { color: var(--dark-text, #e7ebf2); }
.dark .tds-salary-expenses, .dark .tds-salary-bounds > .tds-salary-line { border-color: #3b485c; }
@media (max-width: 480px) {
  .tds-salary-entry { flex-direction: column; align-items: stretch; }
}

/* Shared payslip presentation: gross pay, contributions, then net pay. */
.payslip-presentation { --tds-final-accent: var(--color-primary, #292e68); }
.dark .payslip-presentation { --tds-final-accent: var(--color-primary-dark, #aaa0dd); }
.payslip-presentation .payslip-contribution-code { color: var(--tds-final-accent) !important; }
html body.app-main-theme .payslip-presentation :is(th.payslip-panel-title, th.payslip-period, thead th.payslip-header-text) {
  background-color: var(--color-primary, #292e68) !important;
  color: #fff !important;
}
.payslip-presentation .tds-final-section-title { caption-side: top; text-align: left; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--tds-final-accent); background: color-mix(in srgb, var(--tds-final-accent) 6%, transparent); }
.payslip-presentation .tds-final-contributions-total { text-align: left; font-weight: 600; text-transform: uppercase; }
.payslip-presentation :is(.payslip-earnings-table, .contrib-table) { table-layout: fixed; }
.payslip-presentation .payslip-label-column { width: 44%; }
.payslip-presentation .payslip-base-column { width: 12%; }
.payslip-presentation .payslip-rate-column { width: 10%; }
.payslip-presentation .payslip-amount-column { width: 12%; }
html body.app-main-theme .payslip-presentation :is(.payslip-earnings-table, .contrib-table) tbody > tr > td:nth-child(n+2) { padding-left: 4px; padding-right: 8px; }
.payslip-presentation .tds-final-contribution-amount { white-space: nowrap; }
.payslip-presentation :is(.payslip-earnings-table, .payslip-net-table) tbody td:first-child { width: auto; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
.payslip-presentation .payslip-net-table th { font-size: 12px; font-weight: 500; }
.payslip-presentation .payslip-net-table .payslip-payment-total td { border-top: 2px solid var(--tds-final-accent); background: color-mix(in srgb, var(--tds-final-accent) 8%, transparent) !important; font-weight: 700; }
@media (max-width: 1279px) {
  .payslip-presentation .payslip-label-column { width: 52%; }
  .payslip-presentation .payslip-amount-column { width: 24%; }
  .payslip-presentation .payslip-base-column, .payslip-presentation .payslip-rate-column { display: none; }
}
@media (min-width: 1280px) {
  .payslip-presentation .payslip-base-column, .payslip-presentation .payslip-rate-column { display: table-column; }
}

/* The contributions subtotal separates deductions from the net-pay rows. */
html body.app-main-theme .payslip-presentation .tds-final-net-body > tr:first-child > :is(td, th) {
  border-top: 0;
  border-bottom: 1px solid var(--color-table-border, #dce2ed);
  background-color: #ffe4e6 !important;
  padding-top: 10px;
  padding-bottom: 10px;
}
html.dark body.app-main-theme .payslip-presentation .tds-final-net-body > tr:first-child > :is(td, th) {
  background-color: #3f2632 !important;
}
.payslip-presentation :is(.payslip-net-total, .payslip-payment-total) td { background: color-mix(in srgb, var(--tds-final-accent) 8%, transparent) !important; font-weight: 700; }
.payslip-presentation .payslip-net-row td:first-child { width: auto; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
.payslip-presentation .payslip-net-row > td { padding-top: 7px; padding-bottom: 7px; }
.payslip-presentation .payslip-payment-total td { border-top: 2px solid var(--tds-final-accent); background: color-mix(in srgb, var(--tds-final-accent) 8%, transparent) !important; font-weight: 700; }

.payslip-presentation .tds-final-contribution-amount, .payslip-presentation .tds-final-payment--negative { color: #b91c1c !important; }
.payslip-presentation .tds-final-payment--positive { color: #047857 !important; }
.payslip-presentation .tds-final-payment--zero { color: #29324b !important; }
.dark .payslip-presentation .tds-final-contribution-amount, .dark .payslip-presentation .tds-final-payment--negative { color: #fca5a5 !important; }
.dark .payslip-presentation .tds-final-payment--positive { color: #6ee7b7 !important; }
.dark .payslip-presentation .tds-final-payment--zero { color: var(--dark-text, #e7ebf2) !important; }

/* Paid-leave periods use a soft primary tint. */
html body.app-main-theme td.payslip-paid-leave-heading {
  background-color: color-mix(in srgb, var(--color-primary, #292e68) 10%, white) !important;
  color: var(--color-primary, #292e68) !important;
}
html.dark body.app-main-theme td.payslip-paid-leave-heading {
  background-color: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 18%, #1e293b) !important;
  color: #e7e3ff !important;
}

/* Manual checks are a text action in the entity palette. */
body.app-main-theme a#manual-exports-link {
  color: var(--color-primary, #292e68);
}
body.app-main-theme a#manual-exports-link:hover {
  color: color-mix(in srgb, var(--color-primary, #292e68) 86%, #000);
}
html.dark body.app-main-theme a#manual-exports-link {
  color: var(--dark-link, var(--color-primary-dark, #aaa0dd));
}
html.dark body.app-main-theme a#manual-exports-link:hover {
  color: color-mix(in srgb, var(--dark-link, var(--color-primary-dark, #aaa0dd)) 75%, #fff);
}
.documentation { width: 100%; overflow-wrap: anywhere; }
.documentation h1 { font-size: 2rem; line-height: 1.25; font-weight: 700; margin: 1.5rem 0; }
.documentation a { color: var(--color-primary, #4338ca); text-decoration: underline; text-underline-offset: .2em; }
.documentation-page-link { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; margin: .5rem 0; border: 1px solid #cbd5e1; border-radius: .4rem; }
.documentation-viewer { display: flex; flex-direction: column; height: var(--documentation-viewer-height, calc(100dvh - 12rem)); }
.documentation-viewer iframe { width: 100%; flex: 1; min-height: 0; border: 0; background: white; color-scheme: light; }
html.dark .documentation-viewer iframe { color-scheme: dark; background: #191919; }
.dark .documentation a { color: #c7d2fe; }
@media (max-width: 640px) { .documentation { padding: .75rem; }.documentation h1 { font-size: 1.6rem; } }

.documentation-page-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
/* Shared tooltip skin. Visibility, positioning and interaction remain with Flowbite/Stimulus. */
body [role="tooltip"] {
  --tip-paper: #fff;
  --tip-text: #334155;
  --tip-accent: var(--color-primary, #292e68);
  --tip-border: color-mix(in srgb, var(--tip-accent) 20%, var(--tip-paper));
  background: var(--tip-paper) !important;
  color: var(--tip-text) !important;
  border: 1px solid var(--tip-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgb(15 23 42 / 14%), 0 2px 5px rgb(15 23 42 / 6%) !important;
  padding: 12px 14px !important;
  max-width: min(32rem, calc(100vw - 32px)) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: opacity 140ms ease !important;
}
.dark [role="tooltip"] {
  --tip-paper: #1e293b;
  --tip-text: #e2e8f0;
  --tip-accent: var(--color-primary-dark, #aaa0dd);
}
body [role="tooltip"] .text-white { color: inherit !important; }
body [role="tooltip"] p { margin: 4px 0; }
body [role="tooltip"] .tooltip-arrow { background: var(--tip-paper); }
body [role="tooltip"] .tooltip-arrow::before { background: var(--tip-paper) !important; }
body [role="tooltip"] .app-tooltip-title { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--tip-text); }
body [role="tooltip"] .app-tooltip-values { margin: 0; }
body [role="tooltip"] .app-tooltip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding: 6px 0; }
body [role="tooltip"] .app-tooltip-row + .app-tooltip-row { border-top: 1px solid var(--tip-border); }
body [role="tooltip"] .app-tooltip-row dt { font-weight: 400; }
body [role="tooltip"] .app-tooltip-row dd { margin: 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { body [role="tooltip"] { transition: none !important; } }
/* Application typography: local assets avoid external font requests. */
@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Thin-43ffb1f199cc55e60656928baf22d49c599987df4153d8ed98fa9f57f0ca45c0.woff2) format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-ThinItalic-03305f3fdcf6c8800fda7f50933f20bc53ff83baeadcb416891d0639e2c6b97d.woff2) format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Light-74d07becc5b80268a3f177d0f7cb2abbc463ad31eb590faa55a5f78207ed7331.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-LightItalic-deb14b150e5f4e2d85c042c371e9226386fe9ebe20631232e8bb8391932fa9bb.woff2) format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Regular-c26238cb946a58c1450db2f00e59df6225de06890fac38a8172640f919d95025.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Italic-3ef4911bd215be4db7c278969d79334e3b25cd8c297e7be1bc5d3c7ba038c51f.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Medium-1e26aba9cbb275d54733274d8968e9b9da565a00cc14718a1df5c021eea13988.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-MediumItalic-f79401417f3fecc4df8d7a4fbd222a4995cb2e08c3f0ed5ec190e5176f9ff180.woff2) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Bold-634ded476cb0e0d68c31a6552694a0a77a8fe7b3d2d3ad7032c961b58be638eb.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-BoldItalic-51872f6cbdec9fc9271e7fcfea7d4bed2f3914f3983fcda48f32b390248bd1fd.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-Black-71c91ec59faa4d1cf00cdad6c9a41c2f3dc5dbf9e203444ee43d980ec3704c74.woff2) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/roboto/Roboto-BlackItalic-4252bda0b14b789049c397868e5711892f8f9725021974a72d9713a32b2c819c.woff2) format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Trianos Display";
  src: url(/assets/TrianosDisplay-Regular-7f9d8b5bd4487730948985a31d8a427e733ec637f43dd048ad3e3c993dee9ce5.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Page titles, card titles and profile names share the brand lettering. */
body.app-main-theme h1,
body.app-main-theme .page-title,
.trianos-card-title,
.card-type-1 h2,
.card-type-1 h3,
.card-type-2 h2,
.card-type-2 h3,
.card-surface h2,
.card-surface h3,
.premium-dashboard-btn-card strong,
.premium-dashboard-project-card strong,
.premium-dashboard-focus__content strong,
.onboarding-service-label,
.pf-heading h2,
.pf-referral-title,
label.title {
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.025em;
}

/* Main navigation only: labels share the brand lettering across namespaces. */
.sideBar-menu > span,
.trianos-main-menu-label {
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@font-face {
  font-family: "Trianos Display";
  src: url(/assets/TrianosDisplay-Light-5e6742f00a904fc89ec8f5b30d29888b26a4d95a43932a7f197abcbdad9b569c.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Submenus use the Light companion; page titles and main menus stay Regular. */
.sideBar-subMenu > span {
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: -0.025em;
}

/* Preserve normal menu sizing and wrapping, with slightly tighter lettering. */
.sideBar-menu.sideBar-menu--commercial > span {
  letter-spacing: -0.035em;
}
/* Reserve only the useful width of the chevron, including its expanded state. */
.sideBar-menu > .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
}
.sideBar-menu > .icon-container > svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Flowbite owns the expanded state; keep the original Trianos chevron. */
.sideBar-menu[aria-expanded="true"] .angle-icon { transform: rotate(-90deg); }
/* Shared cards and neutral table headings. Fonts and Administrate behavior stay native. */
body.app-main-theme {
  --app-card-padding: 16px;
  --app-card-heading-bg: var(--color-primary, #292e68);
  --app-card-heading-text: var(--color-btn-label, #fff);
  --color-table-header-bg: #e4e7ed;
  --color-table-header-text: #414b5e;
  --color-table-header-bg-dark: #354154;
  --color-table-header-text-dark: #e7ecf4;
  /* Quiet row bands and dividers, with a more visible primary-colored hover. */
  --color-table-stripe-bg: color-mix(in srgb, var(--color-primary, #292e68) 4%, #fff);
  --color-table-row-hover-bg: color-mix(in srgb, var(--color-primary, #292e68) 20%, #fff);
  --color-table-row-border: color-mix(in srgb, var(--color-table-header-bg) 70%, #fff);
  --color-table-stripe-bg-dark: color-mix(in srgb, var(--color-primary-dark, var(--color-primary, #292e68)) 6%, var(--color-card-bg-dark, #1e293b));
  --color-table-row-hover-bg-dark: color-mix(in srgb, var(--color-primary-dark, var(--color-primary, #292e68)) 20%, var(--color-card-bg-dark, #1e293b));
  --color-table-row-border-dark: color-mix(in srgb, var(--color-table-header-bg-dark) 60%, var(--color-card-bg-dark, #1e293b));
}
/* Keep the entity hue with more chroma, instead of washing it out with white. */
@supports (color: oklch(from red l c h)) {
  body.app-main-theme {
    --color-table-row-hover-bg: oklch(from var(--color-primary, #292e68) 90% calc(c * .8) h);
    --color-table-row-hover-bg-dark: oklch(from var(--color-primary-dark, var(--color-primary, #292e68)) 40% calc(c * .8) h);
  }
}
.dark body.app-main-theme {
  --app-card-heading-bg: var(--color-primary-dark, var(--color-primary, #292e68));
  --app-card-heading-text: var(--color-btn-label-dark, #fff);
}
body.app-main-theme .app-card {
  min-width: 0;
  padding: var(--app-card-padding);
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--color-primary, #292e68) 12%, #fff);
  box-shadow: 0 3px 12px rgb(15 23 42 / 5%);
}
.dark body.app-main-theme .app-card { border-color: #3a4657; box-shadow: 0 3px 12px rgb(0 0 0 / 12%); }
body.app-main-theme .app-card > :is(.app-card-header, .trianos-card-title, label.title) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
  margin: calc(-1 * var(--app-card-padding)) calc(-1 * var(--app-card-padding)) 8px;
  padding: 12px var(--app-card-padding);
  border-radius: 9px 9px 0 0;
  background: var(--app-card-heading-bg);
  color: var(--app-card-heading-text);
}
body.app-main-theme .app-card-header .trianos-card-title,
body.app-main-theme .app-card-header .trianos-card-title a { color: var(--app-card-heading-text); }
body.app-main-theme .app-card-header > .trianos-card-title { flex: 1 1 auto; }
body.app-main-theme .app-card-header > .trianos-card-title a:hover { color: inherit; text-decoration: underline; }
body.app-main-theme .employee-profile-finances .profile-financial-grid .pf-card { padding: var(--app-card-padding); }
body.app-main-theme .administrate-table-toolbar { display: flex; min-width: 0; width: 100%; }
body.app-main-theme .administrate-table { box-shadow: none; }
body.app-main-theme .administrate-table > thead > tr > th { border-bottom: 1px solid #ccd2dc; }
.dark body.app-main-theme .administrate-table > thead > tr > th { border-bottom-color: #4a5669; }
@media (max-width: 600px) {
  body.app-main-theme { --app-card-padding: 12px; }
}

/* Compact icon action sits with the card title, including after Turbo updates. */
body.app-main-theme .app-card-header > .employee-card-header-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 0 0 auto;
}
body.app-main-theme .app-card-header .employee-card-header-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--app-card-heading-text) 20%, transparent);
  border-radius: 7px;
  color: var(--app-card-heading-text);
  background: color-mix(in srgb, var(--app-card-heading-text) 8%, transparent);
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
body.app-main-theme .app-card-header .employee-card-header-edit:hover {
  color: var(--app-card-heading-text);
  background: color-mix(in srgb, var(--app-card-heading-text) 16%, transparent);
  border-color: color-mix(in srgb, var(--app-card-heading-text) 40%, transparent);
}
body.app-main-theme .app-card-header .employee-card-header-edit:focus-visible {
  outline: 2px solid var(--app-card-heading-text);
  outline-offset: 3px;
}
body.app-main-theme .app-card-header .employee-card-header-edit svg {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  body.app-main-theme .app-card-header .employee-card-header-edit { transition: none; }
}

/* Standalone collection pages share one surface for filters, table and paging.
   Applied by page templates, so embedded profile tables keep their own cards. */
body.app-main-theme .app-list-card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 12%, #fff);
}
.dark body.app-main-theme .app-list-card {
  background: var(--color-card-bg-dark, #1e293b);
  border-color: #3a4657;
}
body.app-main-theme .app-list-card > .administrate-table-filters { margin-top: 0; }

@media (max-width: 767px) {
  /* Keep the table readable inside its horizontal scroller on small screens. */
  body.app-main-theme .app-list-card .administrate-table { min-width: 640px; }
}

/* Separate shared page headings from the following card or form. */
body.app-main-theme .app-page-title { display: block; margin-bottom: 12px; }
body.app-main-theme .app-page-heading { margin-bottom: 12px; }
body.app-main-theme .app-page-heading > .page-title { display: block; }

/* Form page titles follow the same centered container as their field cards. */
body.app-main-theme .app-form-heading { min-width: 0; }
body.app-main-theme .app-form-heading .page-title {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Export forms keep their compact desktop width and fill mobile screens. */
body.app-main-theme .app-export-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.app-main-theme .app-export-card { width: 50%; }
}

/* One rhythm for shared fields, including nested associations and builder helpers.
   Layout utilities keep columns, inline checkboxes and conditional visibility. */
body.app-main-theme { --app-form-spacing: 8px; }
body.app-main-theme :is(.app-form-field, .app-form-fields) {
  gap: var(--app-form-spacing);
}

/* Legacy export fields use padding instead of a field stack. */
body.app-main-theme .app-export-card .field-unit__field:has(> label) {
  display: flex;
  flex-direction: column;
  gap: var(--app-form-spacing);
  padding-bottom: var(--app-form-spacing);
}

/* Quiet, aligned footer controls and a readable language picker. */
body.app-main-theme #bottomSideBar-Buttons {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 4px 0;
}
body.app-main-theme #bottomSideBar-Buttons .sidebar-footer-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--color-menu-sub-text, #64748b); box-shadow: none;
}
body.app-main-theme #bottomSideBar-Buttons .sidebar-footer-action:hover {
  background: var(--color-table-stripe-bg); color: var(--color-primary);
}
body.app-main-theme #bottomSideBar-Buttons .sidebar-footer-action svg {
  width: 16px; height: 16px; color: inherit; border-radius: 0;
}
body.app-main-theme #bottomSideBar-Buttons .sidebar-language-trigger {
  width: 54px; gap: 6px; font-size: 12px; font-weight: 600;
}
body.app-main-theme .sidebar-language-picker { position: relative; }
body.app-main-theme #dropDownFlag.sidebar-language-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 208px; max-width: calc(100vw - 32px); z-index: 60;
  padding: 6px; border: 1px solid #d5dbe5; border-radius: 9px;
  background: #fff; color: var(--color-menu-sub-text, #64748b);
}
body.app-main-theme .sidebar-language-heading { padding: 10px 8px; font-size: 12px; }
body.app-main-theme .sidebar-language-menu ul { margin: 0; padding: 0; list-style: none; }
body.app-main-theme #dropDownFlag .sidebar-language-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; padding: 12px 8px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font-size: 13px; font-weight: 600; text-align: left;
}
body.app-main-theme #dropDownFlag .sidebar-language-option svg { width: 16px; height: 16px; }
body.app-main-theme #dropDownFlag .sidebar-language-option:is(.is-active, :hover) {
  background: var(--color-table-stripe-bg); color: var(--color-primary);
}
html.dark body.app-main-theme #bottomSideBar-Buttons .sidebar-footer-action { color: var(--dark-text-secondary); }
html.dark body.app-main-theme #bottomSideBar-Buttons .sidebar-footer-action:is(:hover, [aria-expanded="true"]) {
  background: var(--dark-surface-raised); color: var(--dark-link);
}
html.dark body.app-main-theme #dropDownFlag.sidebar-language-menu {
  background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text-secondary);
}
html.dark body.app-main-theme #dropDownFlag .sidebar-language-option:is(.is-active, :hover) {
  background: var(--dark-row-selected); color: var(--dark-link);
}

html.dark body.app-main-theme #bottomSideBar-Buttons .sidebar-language-trigger { color: var(--dark-link); }

/* Billing periods sit directly on the page, with evenly sized metric cards. */
body.app-main-theme .trianos-invoicing-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px 0;
  min-width: 0;
}
body.app-main-theme .trianos-invoicing-period { min-width: 0; }
body.app-main-theme .trianos-invoicing-period-title {
  margin: 0 0 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.app-main-theme .trianos-invoicing-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
body.app-main-theme .trianos-invoicing-metric {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
html.dark body.app-main-theme .trianos-invoicing-metric {
  background: var(--color-card-bg-dark, #1e293b);
}
body.app-main-theme .trianos-invoicing-metric-content {
  flex: 1;
  padding: 24px;
}
body.app-main-theme .trianos-invoicing-metric-link { margin-top: auto; }
@media (max-width: 1100px) {
  body.app-main-theme .trianos-invoicing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.app-main-theme .trianos-invoicing-dashboard { gap: 28px; }
  body.app-main-theme .trianos-invoicing-metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.app-main-theme .trianos-invoicing-metric-content { padding: 20px; }
}

/* Keep the feature catalog compact without changing other collection pages. */
body.app-main-theme #feature__all_feature_table {
  max-width: 960px;
  margin-inline: auto;
}
body.app-main-theme #feature__all_feature_table :is(th, td)[data-attribute="feature_type"] {
  text-align: left;
}
body.app-main-theme #feature__all_feature_table th[data-attribute="feature_type"] .flex {
  justify-content: flex-start;
}

/* TDS regression matrix: neutral surfaces and a clear input/result hierarchy. */
@media screen {
  body.app-main-theme .tds-suite-page {
    --suite-surface: #fff;
    --suite-input: #f8fafc;
    --suite-output: #f3f6fa;
    --suite-header: var(--color-table-header-bg, #e4e7ed);
    --suite-subheader: #f0f2f6;
    --suite-text: #414b5e;
    --suite-muted: #64748b;
    --suite-border: #d5dce5;
  }
  html.dark body.app-main-theme .tds-suite-page {
    --suite-surface: var(--color-card-bg-dark, #202735);
    --suite-input: #242e3d;
    --suite-output: #273243;
    --suite-header: var(--color-table-header-bg-dark, #354154);
    --suite-subheader: #2e394b;
    --suite-text: #e7ecf4;
    --suite-muted: #b6c0d0;
    --suite-border: #465268;
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] thead th {
    background: var(--suite-header);
    color: var(--suite-text);
    border-color: var(--suite-border);
    padding: 12px 16px;
    text-transform: none;
    font-weight: 600;
  }
  body.app-main-theme .tds-suite-page [data-detail-row] th:not(.tds-suite-case) {
    background: var(--suite-subheader);
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] thead th[rowspan],
  body.app-main-theme .tds-suite-page .tds-suite-case {
    min-width: 260px;
    width: 260px;
    max-width: 260px;
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] thead button {
    display: inline-flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--suite-border);
    border-radius: 6px;
    background: var(--suite-surface) !important;
    color: var(--suite-text) !important;
    box-shadow: none;
    white-space: nowrap;
    font-size: 12px;
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] thead button:hover {
    background: var(--suite-subheader) !important;
  }
  body.app-main-theme .tds-suite-page [data-tds-print-table] thead button:focus-visible {
    outline: 2px solid var(--suite-muted);
    outline-offset: 2px;
  }
  body.app-main-theme .tds-suite-page tbody [data-detail-row] > :is(td, th) {
    background: var(--suite-input);
    color: var(--suite-text);
    border-color: var(--suite-border);
    border-bottom: 1px solid var(--suite-border);
    padding: 16px;
    vertical-align: top;
  }
  body.app-main-theme .tds-suite-page tbody [data-detail-row] > .tds-suite-case {
    background: var(--suite-surface);
    box-shadow: 2px 0 4px rgb(15 23 42 / 6%);
    font-weight: 600;
  }
  body.app-main-theme .tds-suite-page .tds-suite-case > div + div {
    margin-top: 8px;
    color: var(--suite-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
  }
  body.app-main-theme .tds-suite-page tbody td.tds-suite-result {
    background: var(--suite-output);
    min-width: 180px;
    font-weight: 400;
  }
  body.app-main-theme .tds-suite-page .tds-suite-result > div:first-child { font-weight: 600; }
  body.app-main-theme .tds-suite-page .tds-suite-result > div + div {
    margin-top: 8px;
    font-size: 12px;
  }
  body.app-main-theme .tds-suite-page .tds-suite-result > .tds-suite-status { margin-top: 10px; }
  body.app-main-theme .tds-suite-page .tds-suite-category {
    background: var(--suite-header);
    color: var(--suite-text);
    border-bottom: 1px solid var(--suite-border);
    font-size: 14px;
    box-shadow: none;
  }
  body.app-main-theme .tds-suite-page .tds-suite-category::before { background: var(--suite-border); }
  body.app-main-theme .tds-suite-page .tds-suite-category .text-green-300 { color: #047857; }
  body.app-main-theme .tds-suite-page .tds-suite-category .text-red-300 { color: #b91c1c; }
  body.app-main-theme .tds-suite-page .tds-suite-category .text-gray-300 { color: var(--suite-muted); }
  body.app-main-theme .tds-suite-page .tds-suite-status[class*="bg-green"] { background: #dcfce7; color: #166534; }
  body.app-main-theme .tds-suite-page .tds-suite-status[class*="bg-red"] { background: #fee2e2; color: #991b1b; }
  html.dark body.app-main-theme .tds-suite-page .tds-suite-status[class*="bg-green"] { background: #164638; color: #a7f3d0; }
  html.dark body.app-main-theme .tds-suite-page .tds-suite-status[class*="bg-red"] { background: #542e38; color: #fecdd3; }
  html.dark body.app-main-theme .tds-suite-page .tds-suite-category .text-green-300 { color: #a7f3d0; }
  html.dark body.app-main-theme .tds-suite-page .tds-suite-category .text-red-300,
  html.dark body.app-main-theme .tds-suite-page .tds-suite-result .text-red-700 { color: #fecdd3; }
  @media (max-width: 600px) {
    body.app-main-theme .tds-suite-page [data-category-content] { flex-wrap: wrap; gap: 8px; }
  }
}


/* The Modules heading shares the centered collection width. */
body.app-main-theme div:has(> #feature__all_feature_table) > .app-page-title {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

/* Feature documentation has its own hierarchy inside the Description card. */
body.app-main-theme .feature-description {
  font-size: 14px;
  line-height: 1.6;
}
body.app-main-theme .feature-description :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
}
body.app-main-theme .feature-description h1 { font-size: 18px; }
body.app-main-theme .feature-description h2 { font-size: 16px; }
body.app-main-theme .feature-description :is(h3, h4, h5, h6) { font-size: 15px; }

/* Center title help icons without the inline SVG baseline gap. */
body.app-main-theme .app-page-title .app-handbook-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
body.app-main-theme .app-page-title .app-handbook-link svg { display: block; }

/* AI validation uses the collection surface and shared action roles. */
body.app-main-theme .ai-validation-page { min-width: 0; }
body.app-main-theme .ai-validation-page .app-page-title { margin: 0 0 4px; }
body.app-main-theme .ai-validation-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: 16px;
}
body.app-main-theme .ai-validation-filter-group { min-width: 0; }
body.app-main-theme .ai-validation-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
body.app-main-theme .ai-validation-filter-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.app-main-theme .ai-validation-table-scroll {
  max-height: calc(100vh - 18rem);
  min-height: 160px;
  overflow: auto;
}
/* A floating card shared by contextual help, details, forms and comments. */
.right-panel-backdrop {
  --right-panel-gap: 20px;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-primary, #292e68) 11%, transparent);
  backdrop-filter: blur(3px);
}
.right-panel-shell {
  --right-panel-width: 640px;
  position: absolute;
  inset-block: var(--right-panel-gap);
  right: var(--right-panel-gap);
  width: min(var(--right-panel-width), calc(100% - var(--right-panel-gap) * 2));
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 13%, #fff);
  border-radius: 14px;
  background: var(--color-card-bg, #fff);
  color: var(--color-font, #243650);
  box-shadow: 0 24px 70px rgb(15 23 42 / 20%), 0 4px 14px rgb(15 23 42 / 8%);
}
.right-panel-shell--thin { --right-panel-width: 480px; }
.right-panel-shell--help { --right-panel-width: 520px; }
.right-panel-shell--help.right-panel-shell--thin { --right-panel-width: 480px; }
.right-panel-shell:is(.translate-x-full, .translate-x-0) { transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.right-panel-shell.translate-x-full { transform: translateX(calc(100% + var(--right-panel-gap))); }
.right-panel-shell.translate-x-0 { transform: translateX(0); }
.right-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 16px;
  min-height: 64px;
  padding: 20px 22px;
  background: var(--app-card-heading-bg, var(--color-primary, #292e68));
  color: var(--app-card-heading-text, var(--color-btn-label, #fff));
}
.right-panel-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.right-panel-heading-text { min-width: 0; }
.right-panel-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.right-panel-heading-icon svg { width: 22px; height: 22px; }
.right-panel-header .right-panel-eyebrow { margin: 0 0 3px; font-size: 11px; line-height: 1.4; font-weight: 500; opacity: .8; }
.right-panel-header .right-panel-title { margin: 0; font-family: "Trianos Display", "Roboto", sans-serif; font-size: 22px; line-height: 1.25; font-weight: 400; color: inherit; overflow-wrap: anywhere; }
body.app-main-theme .right-panel-shell button.right-panel-close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  box-shadow: none;
}
.right-panel-close svg { width: 18px; height: 18px; }
body.app-main-theme .right-panel-shell button.right-panel-close:hover { color: inherit; background: color-mix(in srgb, currentColor 17%, transparent); }
.right-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px; }
.right-panel-footer { position: static; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 10%, #fff); background: color-mix(in srgb, var(--color-primary, #292e68) 2%, #fff); font-size: 11px; color: #718099; }
body.app-main-theme .right-panel-shell button.right-panel-dismiss { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 0; background: transparent; border: 0; color: var(--color-primary, #292e68); font-size: 12px; font-weight: 400; box-shadow: none; }
body.app-main-theme .right-panel-shell button.right-panel-dismiss:hover { background: transparent; color: var(--color-primary, #292e68); text-decoration: underline; }
.right-panel-shell :is(.right-panel-close, .right-panel-dismiss):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.handbook-content { font-size: 14px; line-height: 1.75; }
.handbook-sections { display: grid; gap: 24px; }
.handbook-section { padding: 18px; border: 1px solid color-mix(in srgb, var(--color-primary, #292e68) 12%, #fff); border-radius: 10px; background: color-mix(in srgb, var(--color-primary, #292e68) 4%, #fff); }
.handbook-section .handbook-section-title { margin: 0 0 10px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--color-primary, #292e68); }
.handbook-section-content > :is(p, h4, ul, ol) + :is(p, h4, ul, ol) { margin-top: 12px; }
.handbook-section-content :is(ul, ol) { padding-left: 18px; }
.handbook-section-content li + li { margin-top: 8px; }
.handbook-section-content li::marker { color: color-mix(in srgb, var(--color-primary, #292e68) 65%, #fff); }
.handbook-section-content a { color: var(--color-primary, #292e68); text-underline-offset: 3px; }
.dark .right-panel-backdrop { background: rgb(0 0 0 / 45%); }
.dark .right-panel-shell { background: var(--color-card-bg-dark, #1e293b); color: var(--color-font-dark, #dce4ef); border-color: #3a4657; box-shadow: 0 24px 70px rgb(0 0 0 / 35%), 0 4px 14px rgb(0 0 0 / 20%); }
.dark .right-panel-footer { background: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 4%, var(--color-card-bg-dark, #1e293b)); border-color: #3a4657; color: #aeb9ca; }
.dark body.app-main-theme .right-panel-shell button.right-panel-dismiss { color: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 50%, #fff); }
.dark .handbook-section { background: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 7%, var(--color-card-bg-dark, #1e293b)); border-color: #3a4657; }
.dark .handbook-section :is(.handbook-section-title, a) { color: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 50%, #fff); }
.dark .handbook-section-content li::marker { color: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 50%, #fff); }
@media (max-width: 767px) {
  .right-panel-backdrop { --right-panel-gap: 10px; }
  .right-panel-shell { top: max(10px, env(safe-area-inset-top)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .right-panel-header { padding: 16px; gap: 12px; }
  .right-panel-header .right-panel-title { font-size: 20px; }
  .right-panel-body { padding: 18px 16px; }
  .right-panel-footer { padding: 12px 16px; }
  .handbook-section { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .right-panel-shell:is(.translate-x-full, .translate-x-0) { transition: none; } .right-panel-backdrop { backdrop-filter: none; } }
/* Only data tables opt in; layout tables and generated documents are unaffected.
 * Keep the empty message next to the table so Turbo row additions/removals
 * automatically switch states without a global DOM observer. */
.app-data-table {
  min-width: 0;
  max-width: 100%;
}

.table-empty-state {
  margin: 0;
  padding: 20px 12px;
  color: #5d687a;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.dark .table-empty-state {
  color: #b8c3d4;
}

.app-data-table > table:not(:has(> tbody > tr:not([data-table-empty-row]))) {
  display: none;
}

.app-data-table:has(> table > tbody > tr:not([data-table-empty-row])) > .table-empty-state {
  display: none;
}
/* Leave guidance uses the same surfaces as form cards, without nested frames. */
body.app-main-theme .leave-guide {
  --leave-guide-text: #41516b;
  --leave-guide-muted: #68758a;
  --leave-guide-accent: var(--color-primary, #292e68);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dark body.app-main-theme .leave-guide {
  --leave-guide-text: #e2e8f0;
  --leave-guide-muted: #aebaca;
  --leave-guide-accent: color-mix(in srgb, var(--color-primary-dark, #aaa0dd) 50%, #fff);
}
body.app-main-theme .leave-guide-section {
  display: block;
  max-width: 100%;
  color: var(--leave-guide-text);
  font-size: 13px;
  line-height: 1.6;
}
body.app-main-theme .leave-guide-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--leave-guide-accent);
}
body.app-main-theme .leave-guide-section-heading > span {
  min-width: 0;
  color: inherit;
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 18px;
  line-height: 1.35;
}
body.app-main-theme .leave-guide-section-heading > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: inherit;
}
body.app-main-theme .leave-guide-section-heading.app-card-header { margin-bottom: 12px; min-height: 52px; box-sizing: border-box; }
body.app-main-theme .leave-guide-section-heading.app-card-header > span { flex: 1; }
body.app-main-theme .leave-guide-section-heading a.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 4px;
  color: inherit;
}
body.app-main-theme .leave-guide-section-heading a.btn-icon svg { color: inherit; }
body.app-main-theme .leave-guide-section-heading a.btn-icon:hover { background: rgb(255 255 255 / 14%); color: inherit; }
body.app-main-theme .leave-guide-section-heading.app-card-header a:focus-visible { outline-color: var(--app-card-heading-text); }
body.app-main-theme .leave-guide-content { padding: 0; font-size: 13px; line-height: 1.6; color: inherit; }
body.app-main-theme .leave-guide-content p { margin: 0; }
body.app-main-theme .leave-guide-content p + :is(p, ul) { margin-top: 6px; }
body.app-main-theme .leave-guide-content ul { padding-left: 20px; margin-bottom: 0; }
body.app-main-theme .leave-guide-content li + li { margin-top: 6px; }
body.app-main-theme .leave-guide-content a { overflow-wrap: anywhere; }
body.app-main-theme .leave-guide-content :is(.text-gray-600, .text-gray-700) { color: var(--leave-guide-text); }
body.app-main-theme .leave-guide-content :is(.text-gray-400, .text-gray-500) { color: var(--leave-guide-muted); }
body.app-main-theme .leave-guide-content :is([class*="text-teal-"], [class*="text-purple-"], [class*="text-indigo-"]),
body.app-main-theme .leave-guide :is(.work-stoppage-info-accent, .additional-birth-leave-accent) { color: var(--leave-guide-accent); }
body.app-main-theme .leave-guide-data-row:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 0;
}
body.app-main-theme .leave-guide-data-row > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.app-main-theme .leave-guide-data-row > span:last-child { white-space: nowrap; }
body.app-main-theme .leave-guide-table-scroll { overflow-x: auto; max-width: 100%; }
body.app-main-theme .leave-guide table { width: 100%; min-width: 380px; table-layout: fixed; font-size: 12px; line-height: 1.5; }
body.app-main-theme [data-paternity-duration-info-container] .leave-guide table { min-width: 440px; }
body.app-main-theme .leave-guide table :is(th, td) { padding: 9px 8px; color: var(--leave-guide-text); border-color: var(--color-table-row-border); }
body.app-main-theme .leave-guide table :is(th, td):first-child { width: 28%; text-align: left; }
body.app-main-theme .leave-guide table thead tr { background: var(--color-table-header-bg); }
body.app-main-theme .leave-guide table th { color: var(--color-table-header-text); font-weight: 500; }
body.app-main-theme .leave-guide table tbody > tr { background: transparent; border-bottom: 1px solid var(--color-table-row-border); }
body.app-main-theme .leave-guide table tbody > tr:is(.work-stoppage-info-row-highlight, .bg-indigo-100) { background: var(--color-table-stripe-bg); }
body.app-main-theme .leave-guide table tbody > tr.opacity-50 { opacity: .75; }
body.app-main-theme .leave-guide-table-scroll + .leave-guide-content { margin-top: 10px; border: 0; background: transparent; color: var(--leave-guide-muted); }
.dark body.app-main-theme .leave-guide table thead tr { background: var(--color-table-header-bg-dark); }
.dark body.app-main-theme .leave-guide table th { color: var(--color-table-header-text-dark); }
.dark body.app-main-theme .leave-guide table tbody > tr { border-color: var(--color-table-row-border-dark); }
.dark body.app-main-theme .leave-guide table tbody > tr:is(.work-stoppage-info-row-highlight, .bg-indigo-100) { background: var(--color-table-stripe-bg-dark); }
body.app-main-theme .work-stoppage-form [data-form-main-column],
body.app-main-theme .work-stoppage-form [data-form-sidebar-column] { min-width: 0; }
@media (min-width: 1440px) {
  body.app-main-theme .work-stoppage-form [data-form-flex-wrapper]:has(> [data-form-sidebar-column]:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: 16px;
  }
  body.app-main-theme .work-stoppage-form [data-form-flex-wrapper] > :is([data-form-main-column], [data-form-sidebar-column]) { width: 100%; }
  body.app-main-theme .work-stoppage-form [data-form-sidebar-column] { position: sticky; top: 16px; }
}
@media (max-width: 600px) {
  body.app-main-theme .leave-guide { gap: 12px; }
  body.app-main-theme .leave-guide-data-row:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  body.app-main-theme .leave-guide-data-row > :last-child { justify-self: start; text-align: left; }
}
/* Pointer interactions do not draw a focus rectangle or a touch highlight.
   Keyboard navigation keeps visible focus; permanent shadows and selected states stay intact. */
body.app-main-theme {
  --interaction-focus-color: var(--color-primary, #292e68);
  -webkit-tap-highlight-color: transparent;
}
.dark body.app-main-theme {
  --interaction-focus-color: var(--color-primary-dark, #aaa0dd);
}
body.app-main-theme :is(a[href], button, summary, [tabindex], [role="button"], input:is([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"])):focus-visible {
  outline: 2px solid var(--interaction-focus-color);
  outline-offset: 3px;
}
body.app-main-theme :focus:not(:focus-visible):not([data-selected="true"]) {
  outline: none !important;
}
body.app-main-theme :focus:not(:focus-visible) {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}
/* Text-entry controls match :focus-visible even after a mouse click. Keep their
   existing border feedback rather than an extra outer ring, for both input methods. */
body.app-main-theme :is(input:not(:is([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="hidden"])), textarea, select):focus {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}
body.app-main-theme :is(input, textarea, select):focus-visible,
.dark body.app-main-theme :is(input, textarea, select):focus-visible {
  border-color: var(--interaction-focus-color);
}
/* Switches render the focus ring on a sibling of their hidden checkbox. */
body.app-main-theme .peer:focus:not(:focus-visible) ~ * {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}
/* Selectize draws its own focus shadow on its wrapper. */
body.app-main-theme .selectize-input.focus,
.dark body.app-main-theme .selectize-input.focus {
  outline: none;
  box-shadow: none;
  border-color: var(--interaction-focus-color);
}
/* Dark ERP tokens. Brand settings come from the existing host entity; light mode is untouched. */
@media screen {
  html.dark {
    color-scheme: dark;
    --dark-bg-app: #171c28;
    --dark-bg-nav: #1a2130;
    --dark-surface: #202735;
    --dark-surface-raised: #293345;
    --dark-bg-input: #181f2c;
    --dark-row-alt: #242d3d;
    --dark-border: #30394a;
    --dark-border-input: #647086;
    --dark-text: #e7ebf2;
    --dark-text-secondary: #a8b2c3;
    --dark-brand: var(--erp-dark-brand, #5d4595);
    --dark-section-header: var(--erp-dark-section-header, #352e48);
    --dark-link: var(--erp-dark-link, #c5aff7);
    --dark-focus: var(--dark-link);
    --dark-action-primary: var(--erp-dark-action-primary, #bca7ef);
    --dark-on-action-primary: var(--erp-dark-on-action-primary, #21182f);
    --dark-row-hover: var(--erp-dark-row-hover, #322e45);
    --dark-row-selected: var(--erp-dark-row-selected, #40374f);
    --dark-success: #7cd4ad;
    --dark-success-bg: #19362c;
    --dark-info: #b8c8ff;
    --dark-info-bg: #253350;
    --dark-warning: #f0cc83;
    --dark-warning-bg: #3c3120;
    --dark-danger: #f0a0ab;
    --dark-danger-bg: #3b232b;
  }
  html.dark body.app-main-theme {
    --color-app-bg-dark: var(--dark-bg-app);
    --app-surface-bg: var(--dark-bg-app);
    --color-sidebar-bg-dark: var(--dark-bg-nav);
    --color-card-bg-dark: var(--dark-surface);
    --color-font-dark: var(--dark-text);
    --color-page-title-dark: var(--dark-text);
    --color-link-text-dark: var(--dark-link);
    /* Compatibility for existing interactive components, separate from --dark-brand. */
    --color-primary-dark: var(--dark-link);
    --color-primary-dark-hover: var(--dark-action-primary);
    --color-btn-label-dark: var(--dark-on-action-primary);
    --color-menu-text-dark: var(--dark-text);
    --color-menu-sub-text-dark: var(--dark-text-secondary);
    --color-menu-text-hover-dark: var(--dark-link);
    --color-table-header-bg-dark: var(--dark-surface-raised);
    --color-table-header-text-dark: var(--dark-text-secondary);
    --color-table-even-bg-dark: var(--dark-surface);
    --color-table-stripe-bg-dark: var(--dark-row-alt);
    --color-table-row-text-dark: var(--dark-text);
    --color-table-row-border-dark: var(--dark-border);
    --color-table-row-hover-bg-dark: var(--dark-row-hover);
    --app-card-heading-bg: var(--dark-section-header);
    --app-card-heading-text: var(--dark-text);
    --interaction-focus-color: var(--dark-focus);
    color: var(--dark-text);
    background-color: var(--dark-bg-app);
  }
  html.dark body.app-main-theme :is(.app-card, .card-type-1, .card-type-2) {
    border-color: var(--dark-border);
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  }
  html.dark body.app-main-theme :is(.page-title, .employee-identity-name) { color: var(--dark-text); }
  html.dark body.app-main-theme :is(.app-card-header, .right-panel-header) svg { color: var(--dark-link); }
  html.dark body.app-main-theme .app-card :is(label.small, label.field, .field-unit__label, dt) { color: var(--dark-text-secondary); }
  html.dark body.app-main-theme .app-card label.value { color: var(--dark-text); }

  html.dark body.app-main-theme .administrate-search-query > div:first-child {
    background: var(--dark-bg-input); border-color: var(--dark-border-input);
  }
  html.dark body.app-main-theme .administrate-search-query > div:first-child:focus-within {
    border-color: var(--dark-focus); box-shadow: inset 0 0 0 1px var(--dark-focus);
  }
  html.dark body.app-main-theme .administrate-search-query svg { color: var(--dark-text-secondary); }
  html.dark body.app-main-theme .administrate-search-query input[type="search"]:focus { box-shadow: none; }
  html.dark body.app-main-theme #bottomSideBar-Buttons button[data-dropdown-toggle] { background: transparent; }

  /* Shared text-entry controls and library dropdowns, without changing size or state. */
  html.dark body.app-main-theme :is(input:not([type]), input:is([type="text"], [type="search"], [type="email"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="url"], [type="file"]), textarea, select, .selectize-input) {
    background-color: var(--dark-bg-input);
    color: var(--dark-text);
    border-color: var(--dark-border-input);
  }
  html.dark body.app-main-theme :is(input, textarea)::placeholder {
    color: var(--dark-text-secondary);
    opacity: 1;
    font-style: normal;
    font-weight: 400;
  }
  html.dark body.app-main-theme :is(input, textarea, select):is(:disabled, [readonly]),
  html.dark body.app-main-theme .selectize-control.disabled .selectize-input {
    background-color: var(--dark-surface-raised);
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
  }
  /* A two-pixel inset border keeps the earlier no-square-on-pointer preference. */
  html.dark body.app-main-theme :is(input, textarea, select):focus,
  html.dark body.app-main-theme .selectize-input.focus {
    border-color: var(--dark-focus);
    box-shadow: inset 0 0 0 1px var(--dark-focus);
  }
  html.dark body.app-main-theme :is(input, textarea, select)[aria-invalid="true"],
  html.dark body.app-main-theme .field_with_errors :is(input, textarea, select) { border-color: var(--dark-danger); }
  html.dark body.app-main-theme :is(.invalid-feedback, .invalid-feedback-error-display) { color: var(--dark-danger); }
  html.dark body.app-main-theme .selectize-control .selectize-input,
  html.dark body.app-main-theme .selectize-control.single .selectize-input.input-active {
    background: var(--dark-bg-input); color: var(--dark-text); border-color: var(--dark-border-input);
  }
  html.dark body.app-main-theme .selectize-control .selectize-input.focus {
    border-color: var(--dark-focus); box-shadow: inset 0 0 0 1px var(--dark-focus);
  }
  html.dark body.app-main-theme .selectize-input > input {
    background: transparent;
    border: 0;
    color: var(--dark-text);
    box-shadow: none;
  }
  html.dark body.app-main-theme :is(.selectize-dropdown, #dropDownFlag, [role="menu"], [role="listbox"]) {
    background: var(--dark-surface-raised);
    color: var(--dark-text);
    border-color: var(--dark-border);
  }
  html.dark body.app-main-theme .selectize-dropdown :is(.active, [data-selectable]:hover) {
    background: var(--dark-row-selected);
    color: var(--dark-link);
  }

  /* Same density, grouping and actions. Only financial alignment and colors change. */
  html.dark body.app-main-theme .administrate-table { --table-accent: var(--dark-focus); }
  html.dark body.app-main-theme .administrate-table > thead > tr > th { border-bottom-color: var(--dark-border); }
  html.dark body.app-main-theme .administrate-table :is(th, td)[data-field-kind="money"],
  html.dark body.app-main-theme .administrate-table td[data-field-kind="number"] { text-align: right; font-variant-numeric: tabular-nums; }
  html.dark body.app-main-theme .administrate-table th[data-field-kind="money"] > a > div,
  html.dark body.app-main-theme .administrate-table td[data-field-kind="money"] .flex { justify-content: flex-end; }
  html.dark body.app-main-theme .administrate-table td:is([data-attribute="name"], [data-attribute="employee"], [data-attribute="full_name_inversed"], [data-attribute="client_name"], [data-attribute="title"], [data-attribute="label"]) { text-align: left; }
  html.dark body.app-main-theme .administrate-table > tbody > tr:is([aria-selected="true"], [data-selected="true"]) > td { background: var(--dark-row-selected); }
  html.dark body.app-main-theme .administrate-table > tbody > tr:is([aria-selected="true"], [data-selected="true"]) > td:first-child { box-shadow: inset 3px 0 var(--dark-focus); }
  html.dark body.app-main-theme :is(.administrate-table-zero, .collection-mission-title) { color: var(--dark-text-secondary); }
  html.dark body.app-main-theme .invoice-amount-breakdown { background: var(--dark-surface-raised); border-color: var(--dark-border); }
  html.dark body.app-main-theme .invoice-amount-breakdown dt { color: var(--dark-text-secondary); }
  html.dark body.app-main-theme .app-pagination { --pagination-accent: var(--dark-link); --pagination-text: var(--dark-text-secondary); }

  /* Existing navigation and actions, with a visible selection cue. */
  html.dark body.app-main-theme :is(.sideBar-menu, .sideBar-subMenu):hover {
    background-color: var(--dark-row-hover);
    color: var(--dark-link);
  }
  html.dark body.app-main-theme :is(.sideBar-menu, .sideBar-subMenu)[aria-current="page"] {
    background: var(--dark-row-selected);
    color: var(--dark-link);
    box-shadow: inset 3px 0 var(--dark-focus);
  }
  html.dark body.app-main-theme .sidebar-profile-initials { background: var(--dark-row-selected); color: var(--dark-link); }
  html.dark body.app-main-theme #bottomSideBar-Profile::before,
  html.dark body.app-main-theme #bottomSideBar-Profile::after { background: var(--dark-border); }
  /* Action colors are centralized in app_buttons.css. */

  /* Solid employee identity banner, with restrained brand accents. */
  html.dark body.app-main-theme .employee-profile-overview {
    --pf-paper: var(--dark-surface); --pf-text: var(--dark-text);
    --pf-muted: var(--dark-text-secondary); --pf-line: var(--dark-border); --pf-accent: var(--dark-link);
  }
  html.dark body.app-main-theme :is(.profile-summary-identity, .employee-profile-tabs) { --identity-primary: var(--dark-link); --identity-ink: var(--dark-text); }
  html.dark body.app-main-theme .employee-profile-topline {
    --identity-decor-primary: var(--dark-brand);
    --identity-decor-secondary: var(--erp-dark-banner-end, #48345e);
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  }
  html.dark body.app-main-theme .employee-profile-topline::before { background: var(--color-secondary-dark, var(--color-secondary, #fdc531)); }
  html.dark body.app-main-theme .employee-profile-initials { color: var(--dark-link); background: var(--dark-row-selected); }
  html.dark body.app-main-theme .employee-identity-company { color: var(--dark-link); background: color-mix(in srgb, var(--dark-link) 14%, var(--dark-surface)); }
  html.dark body.app-main-theme .employee-identity-company::before { background: var(--color-secondary-dark, var(--color-secondary, #fdc531)); }
  html.dark body.app-main-theme .employee-profile-tabs button.not-selected { opacity: 1; color: var(--dark-text-secondary) !important; }
  html.dark body.app-main-theme .employee-profile-tabs button.selected { color: var(--dark-link) !important; border-bottom-color: var(--dark-link); }
  html.dark body.app-main-theme .profile-financial-grid .pf-card--balance:has(.pf-primary) { background: var(--dark-surface); }
  html.dark body.app-main-theme .profile-financial-grid :is(.pf-card--turnover, .pf-card--expenses) .pf-card-header .pf-primary { color: var(--dark-text); }
  html.dark body.app-main-theme .pf-card :is(.pf-positive, .pf-primary.pf-positive) { color: var(--dark-success); }
  html.dark body.app-main-theme .pf-card :is(.pf-negative, .pf-primary.pf-negative) { color: var(--dark-danger); }
  html.dark body.app-main-theme .pf-card--balance .pf-primary.pf-zero { color: var(--dark-info); }
  html.dark body.app-main-theme .pf-card .pf-icon { background: var(--dark-surface-raised); color: var(--dark-text-secondary); box-shadow: none; }
  html.dark body.app-main-theme .pf-card--balance:has(.pf-positive) .pf-icon { color: var(--dark-success); }
  html.dark body.app-main-theme .pf-card--balance:has(.pf-primary.pf-negative) .pf-icon { color: var(--dark-danger); }
  html.dark body.app-main-theme .profile-referral-dropdown { --referral-bg: var(--dark-section-header); --referral-fg: var(--dark-link); }
  html.dark body.app-main-theme .profile-referral-panel { background: var(--dark-surface-raised); color: var(--dark-text); border-color: var(--dark-border); }

  /* Salary panels share the card surface; deductions use the existing danger palette. */
  html.dark body.app-main-theme .payslip-hover-effect > tbody { background-color: var(--dark-surface); }
  html.dark body.app-main-theme :is(.payslip-text-red, .payslip-header-text-red) { color: var(--dark-danger) !important; }

  /* Help, menus and tooltip portals inherit the tokens from body. */
  html.dark body.app-main-theme .right-panel-shell { background: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-border); }
  html.dark body.app-main-theme .right-panel-header { background: var(--dark-section-header); color: var(--dark-text); }
  html.dark body.app-main-theme .right-panel-footer { background: var(--dark-surface-raised); border-color: var(--dark-border); color: var(--dark-text-secondary); }
  html.dark body.app-main-theme .right-panel-shell button.right-panel-dismiss { color: var(--dark-link); }
  html.dark body.app-main-theme .handbook-section { background: var(--dark-surface-raised); border-color: var(--dark-border); }
  html.dark body.app-main-theme .handbook-section :is(.handbook-section-title, a) { color: var(--dark-link); }
  html.dark body.app-main-theme .handbook-section-content li::marker { color: var(--dark-text-secondary); }
  html.dark body.app-main-theme :is(.pf-tooltip, [role="tooltip"]) { background: var(--dark-surface-raised); color: var(--dark-text); border-color: var(--dark-border); }
}

/* Counter dashboards keep their layout and business states; only dark colors change. */
@media screen {
  html.dark body.app-main-theme .app-counter-dashboard {
    --dashboard-card-border: #364258;
    --dashboard-card-hover: #303d52;
    --dashboard-label: #bbc5d5;
    --dashboard-link: #aab8ff;
    --dashboard-separator: #414d63;
    --dashboard-dot-neutral: #39adb6;
    --dashboard-dot-warning: #e6a15c;
    background-color: var(--dark-surface);
  }
  html.dark body.app-main-theme .app-counter-dashboard :is(.dashboard-card-surface, .portage-dashboard-counter) {
    background-color: var(--dark-surface-raised);
    border-color: var(--dashboard-card-border);
  }
  html.dark body.app-main-theme .app-counter-dashboard :is(.dashboard-card-surface, .portage-dashboard-counter):hover {
    background-color: var(--dashboard-card-hover);
  }
  html.dark body.app-main-theme .app-counter-dashboard :is(h2, .dashboard-counter-value) {
    color: var(--dark-text);
  }
  html.dark body.app-main-theme .app-counter-dashboard h2 > img {
    /* Recolor the existing image exactly, without replacing its shape or dimensions. */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='color'%3E%3CfeColorMatrix color-interpolation-filters='sRGB' type='matrix' values='0 0 0 0 .905882 0 0 0 0 .921569 0 0 0 0 .949020 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#color");
  }
  html.dark body.app-main-theme .app-counter-dashboard .dashboard-counter-label { color: var(--dashboard-label); }
  html.dark body.app-main-theme .app-counter-dashboard .dashboard-counter-link { color: var(--dashboard-link); }
  html.dark body.app-main-theme .app-counter-dashboard .dashboard-counter-separator { background-color: var(--dashboard-separator); }
  html.dark body.app-main-theme .app-counter-dashboard .dashboard-counter-dot.bg-teal-500 { background-color: var(--dashboard-dot-neutral); }
  html.dark body.app-main-theme .app-counter-dashboard .dashboard-counter-dot:is(.bg-yellow-400, .bg-orange-500) { background-color: var(--dashboard-dot-warning); }
}

/* Payslip details share the quiet slate palette of the other ERP screens. */
@media screen {
  html.dark body.app-main-theme .payslip-presentation :is(th.payslip-panel-title, th.payslip-period, thead th.payslip-header-text, td.payslip-paid-leave-heading) {
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-text-secondary) !important;
  }
  html.dark body.app-main-theme .payslip-presentation th.payslip-period {
    color: var(--dark-text) !important;
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-contribution-code {
    color: var(--dark-text-secondary) !important;
  }
  html.dark body.app-main-theme .payslip-presentation .tds-final-net-body > tr:first-child > :is(td, th) {
    background-color: var(--dark-surface) !important;
    border-bottom-color: var(--dark-border);
  }
  html.dark body.app-main-theme .payslip-presentation :is(.payslip-net-total, .payslip-payment-total) td {
    background: var(--dark-surface-raised) !important;
    border-color: var(--dark-border-input);
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-period a {
    background: var(--dark-surface);
    color: var(--dark-text) !important;
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-period a:hover {
    background: var(--dark-row-hover);
    color: var(--dark-link) !important;
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-expected-value {
    background: var(--dark-surface-raised);
    color: var(--dark-text-secondary);
    box-shadow: none;
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-expected-value > span:last-child {
    color: var(--dark-text);
  }
  html.dark body.app-main-theme .payslip-presentation .payslip-hover-effect span.rounded-sm.bg-yellow-300 {
    background: var(--dark-warning-bg);
    color: var(--dark-warning);
  }
}
/* Five action roles. Legacy class names are aliases, not additional palettes.
 * Primary: default/add/edit/purple. Secondary: close/cancel/blue/ywl/orange/SILAE.
 * Validation: validate. Danger: danger/delete/critical. Discreet control: icon.
 * Keep calendar selections, tabs and other domain controls outside these roles. */
body.app-main-theme {
  --action-primary-bg: var(--color-primary, #292e68);
  --action-primary-hover: color-mix(in srgb, var(--action-primary-bg) 86%, #000);
  --action-primary-fg: var(--color-btn-label, #fff);
  /* A quiet version of the entity primary; darkened text stays readable. */
  --action-secondary-bg: color-mix(in srgb, var(--action-primary-bg) 8%, #fff);
  --action-secondary-hover: color-mix(in srgb, var(--action-primary-bg) 14%, #fff);
  --action-secondary-fg: color-mix(in srgb, var(--action-primary-bg) 40%, #000);
  --action-secondary-border: color-mix(in srgb, var(--action-primary-bg) 30%, #fff);
  --action-success-bg: #157347;
  --action-success-hover: #105c38;
  --action-success-fg: #fff;
  --action-danger-bg: #b91c1c;
  --action-danger-hover: #991b1b;
  --action-danger-fg: #fff;
  --action-icon-fg: #475569;
  --action-focus: var(--color-primary, #292e68);
}
html.dark body.app-main-theme {
  --action-primary-bg: var(--dark-action-primary, #bca7ef);
  --action-primary-hover: color-mix(in srgb, var(--action-primary-bg) 86%, #fff);
  --action-primary-fg: var(--dark-on-action-primary, #21182f);
  --action-secondary-bg: color-mix(in srgb, var(--action-primary-bg) 10%, #202735);
  --action-secondary-hover: color-mix(in srgb, var(--action-primary-bg) 16%, #202735);
  --action-secondary-fg: color-mix(in srgb, var(--action-primary-bg) 35%, #fff);
  --action-secondary-border: color-mix(in srgb, var(--action-primary-bg) 35%, #293345);
  --action-success-bg: #19362c;
  --action-success-hover: #244a3c;
  --action-success-fg: #7cd4ad;
  --action-danger-bg: #3b232b;
  --action-danger-hover: #542f3a;
  --action-danger-fg: #f0a0ab;
  --action-icon-fg: #b8c3d4;
  --action-focus: var(--dark-focus, #b8c8ff);
}

/* Very low specificity fallback for native controls with no action class.
 * Component-specific controls can override it without exclusion chains. */
:where(body.app-main-theme) :where(button, input[type="submit"], input[type="button"]) {
  min-height: 32px;
  border: 1px solid var(--action-primary-bg);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.2;
  gap: 6px;
  background-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}
:where(body.app-main-theme) :where(button, input[type="submit"], input[type="button"]):where(:hover) {
  background-color: var(--action-primary-hover);
  color: var(--action-primary-fg);
}

body.app-main-theme :is(.btn-default, .btn-primary, .btn-add, .btn-edit, .btn-purple,
  .btn-secondary, .btn-close, .btn-cancel, .btn-blue, .btn-ywl, .btn-orange, .btn-silae,
  .btn-validate, .btn-danger, .btn-delete, .btn-critical) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
  min-height: 32px;
  max-width: 100%;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--button-border, var(--button-bg));
  border-radius: 4px;
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
body.app-main-theme :is(.btn-default, .btn-primary, .btn-add, .btn-edit, .btn-purple) {
  --button-bg: var(--action-primary-bg);
  --button-hover: var(--action-primary-hover);
  --button-fg: var(--action-primary-fg);
  --button-border: var(--action-primary-bg);
}
body.app-main-theme :is(.btn-secondary, .btn-close, .btn-cancel, .btn-blue, .btn-ywl, .btn-orange, .btn-silae) {
  --button-bg: var(--action-secondary-bg);
  --button-hover: var(--action-secondary-hover);
  --button-fg: var(--action-secondary-fg);
  --button-border: var(--action-secondary-border);
}
body.app-main-theme .btn-validate {
  --button-bg: var(--action-success-bg);
  --button-hover: var(--action-success-hover);
  --button-fg: var(--action-success-fg);
  --button-border: var(--action-success-bg);
}
body.app-main-theme :is(.btn-danger, .btn-delete, .btn-critical) {
  --button-bg: var(--action-danger-bg);
  --button-hover: var(--action-danger-hover);
  --button-fg: var(--action-danger-fg);
  --button-border: var(--action-danger-bg);
}
html.dark body.app-main-theme .btn-validate { --button-border: var(--action-success-fg); }
html.dark body.app-main-theme :is(.btn-danger, .btn-delete, .btn-critical) { --button-border: var(--action-danger-fg); }
body.app-main-theme :is(.btn-default, .btn-primary, .btn-add, .btn-edit, .btn-purple,
  .btn-secondary, .btn-close, .btn-cancel, .btn-blue, .btn-ywl, .btn-orange, .btn-silae,
  .btn-validate, .btn-danger, .btn-delete, .btn-critical):where(:hover, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.pointer-events-none) {
  background: var(--button-hover);
  color: var(--button-fg);
  box-shadow: none;
  transform: none;
}
body.app-main-theme .btn-add { min-width: 32px; padding: 6px; }
body.app-main-theme :is(.btn-sm, .btn-silae) { min-height: 28px; padding: 4px 8px; font-size: 12px; }
body.app-main-theme .btn-lg { min-height: 44px; padding: 10px 16px; }
/* Compact single-symbol actions, with the same geometry for links and submits. */
body.app-main-theme .btn-square {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  padding: 0; flex-shrink: 0; line-height: 1;
}

body.app-main-theme :is(button, a).btn-icon {
  background: transparent;
  color: var(--action-icon-fg);
  border-color: transparent;
  border-radius: 4px;
  box-shadow: none;
  transform: none;
}
body.app-main-theme :is(button, a).btn-icon:where(:hover, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  background: transparent;
  color: var(--action-secondary-fg);
  box-shadow: none;
  transform: none;
}
body.app-main-theme :is(button, input[type="submit"], input[type="button"], a[class*="btn-"], .tds-navigation-back):focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 3px;
}
body.app-main-theme :is(button, input[type="submit"], input[type="button"], a[class*="btn-"], .tds-navigation-back):is(:disabled, [aria-disabled="true"], .pointer-events-none) {
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}
body.app-main-theme :is(button, input[type="submit"], input[type="button"], a[class*="btn-"], .tds-navigation-back)[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  body.app-main-theme :is(button, input[type="submit"], input[type="button"], a[class*="btn-"]) { transition: none; }
}

/* SILAE controls: C uses the primary role; S is yellow; E keeps secondary. */
body.app-main-theme .btn-silae-control {
  --button-bg: var(--action-primary-bg);
  --button-hover: var(--action-primary-hover);
  --button-fg: var(--action-primary-fg);
  --button-border: var(--action-primary-bg);
}
body.app-main-theme .btn-silae-sync {
  --button-bg: #fdc531;
  --button-hover: #e5b329;
  --button-fg: #202735;
  --button-border: #fdc531;
}

/* Native file pickers use the shared secondary action palette. */
body.app-main-theme input[type="file"] {
  min-width: 0;
  max-width: 100%;
}
body.app-main-theme input[type="file"]::file-selector-button {
  box-sizing: border-box;
  height: 32px;
  margin: 0 12px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--action-secondary-border);
  border-radius: 4px;
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
body.app-main-theme input[type="file"]:not(:disabled)::file-selector-button:hover {
  background: var(--action-secondary-hover);
}
body.app-main-theme input[type="file"]:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
}
body.app-main-theme input[type="file"]:disabled::file-selector-button {
  opacity: .5;
  cursor: not-allowed;
}
/* One palette per semantic role, shared by tables, cards, dialogs and payslips. */
.status-badge {
  --status-fg: #536074;
  --status-bg: #edf0f4;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  max-width: 100%;
  padding: 2px 7px;
  border: 0;
  border-radius: 5px;
  background: var(--status-bg);
  color: var(--status-fg);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  white-space: normal;
}
.status-badge--info { --status-fg: #254b91; --status-bg: #e9effb; }
.status-badge--success { --status-fg: #047857; --status-bg: #e2f4ed; }
.status-badge--warning { --status-fg: #995b08; --status-bg: #fff3d8; }
.status-badge--danger { --status-fg: #b42332; --status-bg: #fce8ec; }
.dark .status-badge { --status-fg: #a8b2c3; --status-bg: #293345; }
.dark .status-badge--info { --status-fg: #b8c8ff; --status-bg: #253350; }
.dark .status-badge--success { --status-fg: #7cd4ad; --status-bg: #19362c; }
.dark .status-badge--warning { --status-fg: #f0cc83; --status-bg: #3c3120; }
.dark .status-badge--danger { --status-fg: #f0a0ab; --status-bg: #3b232b; }
.status-badge span.enum_status[status_value],
.dark .status-badge span.enum_status[status_value] { color: inherit; font-weight: inherit; }
.status-badge a { color: inherit; text-decoration: underline; }
.status-badge-details { position: relative; display: inline-block; vertical-align: middle; }
.status-badge-details > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; }
.status-badge-details > summary::-webkit-details-marker { display: none; }
.status-badge-details > summary:focus-visible { outline: 2px solid #5976b0; outline-offset: 3px; border-radius: 5px; }
.dark .status-badge-details > summary:focus-visible { outline-color: #b8c8ff; }
.status-badge-annotation {
  display: block;
  max-width: min(26rem, 80vw);
  margin-top: 5px;
  padding: 6px 9px;
  border: 1px solid #b9c3d0;
  border-radius: 5px;
  background: #f4f6fa;
  color: #334155;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dark .status-badge-annotation { color: #e7ebf2; background: #293345; border-color: #647086; }

.status-badge-disclosure { color: #536074; font-size: 10px; }
.dark .status-badge-disclosure { color: #a8b2c3; }
.status-badge-details[open] .status-badge-disclosure { transform: rotate(180deg); }
/* Secondary navigation uses the same geometry in both themes. */
body.app-main-theme .app-breadcrumbs {
  --breadcrumb-link: #667085;
  --breadcrumb-chevron: #98a2b3;
  --breadcrumb-current-text: var(--breadcrumb-brand-text, #292e68);
  --breadcrumb-current-bg: var(--breadcrumb-brand-bg, #e7e9f3);
  --breadcrumb-hover: var(--breadcrumb-brand-text, #292e68);
  margin: 8px 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}
html.dark body.app-main-theme .app-breadcrumbs {
  --breadcrumb-link: #aab4c8;
  --breadcrumb-chevron: #758198;
  --breadcrumb-current-text: #e8ecf5;
  --breadcrumb-current-bg: var(--breadcrumb-brand-bg-dark, #292f43);
  --breadcrumb-hover: var(--erp-dark-action-primary, #fdc531);
}
body.app-main-theme .app-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.app-main-theme .app-breadcrumb-item { display: flex; align-items: center; min-width: 0; max-width: 100%; }
body.app-main-theme .app-breadcrumbs .app-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--breadcrumb-link);
  font-size: inherit;
  font-weight: 400;
  text-decoration: none;
  transition: color 150ms;
  border-radius: 3px;
}
body.app-main-theme .app-breadcrumbs .app-breadcrumb-link:hover { color: var(--breadcrumb-hover); }
body.app-main-theme .app-breadcrumbs .app-breadcrumb-link:hover .app-breadcrumb-label { text-decoration: underline; text-underline-offset: 3px; }
body.app-main-theme .app-breadcrumbs .app-breadcrumb-link:focus-visible { outline: 2px solid var(--breadcrumb-hover); outline-offset: 3px; }
body.app-main-theme .app-breadcrumb-home { width: 16px; height: 16px; flex-shrink: 0; color: inherit; }
body.app-main-theme .app-breadcrumb-separator { width: 12px; height: 12px; flex-shrink: 0; margin: 0 8px; color: var(--breadcrumb-chevron); pointer-events: none; }
body.app-main-theme .app-breadcrumb-current {
  display: block;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--breadcrumb-current-text);
  background: var(--breadcrumb-current-bg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
body.app-main-theme .app-breadcrumb-text { color: var(--breadcrumb-link); }
body.app-main-theme .app-breadcrumb-label { overflow-wrap: anywhere; }

/* Keep the Focus switch alongside the breadcrumb, including compact screens. */
body.app-main-theme .app-breadcrumb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
body.app-main-theme .app-breadcrumb-row .app-focus-badge { position: static; margin: 0; transform: none; max-width: 100%; }
body.app-main-theme .app-focus-label { color: var(--color-primary, #292e68); background: color-mix(in srgb, var(--color-primary, #292e68) 10%, #fff); overflow-wrap: anywhere; }
html.dark body.app-main-theme .app-focus-label { color: var(--color-secondary-dark, var(--color-secondary, #fdc531)); background: color-mix(in srgb, var(--color-secondary-dark, var(--color-secondary, #fdc531)) 10%, var(--dark-surface, #202735)); }
body.app-main-theme .app-focus-badge a { display: inline-flex; max-width: 100%; border-radius: 999px; }
body.app-main-theme .app-focus-badge svg { flex-shrink: 0; }
body.app-main-theme .app-focus-badge a:focus-visible { outline: 2px solid var(--color-primary, #292e68); outline-offset: 3px; }
html.dark body.app-main-theme .app-focus-badge a:focus-visible { outline-color: var(--color-secondary-dark, var(--color-secondary, #fdc531)); }

/* Non-Winki sign-in: TRIANOS colors and the shared login theme controller. */
body.app-main-theme .trianos-login {
  position: relative;
  min-height: calc(100dvh - 2rem);
  padding-top: 64px;
  padding-bottom: 32px;
  color: #29324b;
}
body.app-main-theme .trianos-login-card { width: 100%; max-width: 360px; margin-bottom: 0; }
body.app-main-theme .trianos-login :is(.trianos-login-field-label, .trianos-login-switch, a) {
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.025em;
  font-size: 16px;
}
body.app-main-theme .trianos-login a { color: var(--action-primary-bg); }
body.app-main-theme .trianos-login a:hover { color: var(--action-primary-hover); }
body.app-main-theme .trianos-login input:is([type="email"], [type="password"], [type="text"]) {
  width: 100%; min-height: 42px; border: 1px solid #aeb6c5; border-radius: 4px;
  background: #fff !important; color: #29324b !important; padding: 8px 12px;
}
body.app-main-theme .trianos-login input:is([type="email"], [type="password"], [type="text"]):focus {
  border-color: var(--action-primary-bg); outline: 2px solid var(--action-primary-bg); outline-offset: 2px;
}
body.app-main-theme .trianos-login input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: #29324b !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}
body.app-main-theme .trianos-login #password-field { padding-right: 44px; }
body.app-main-theme .trianos-login #toggle-password-visibility { width: 40px; padding: 8px; color: #475569; }
body.app-main-theme .trianos-login #toggle-password-visibility svg { color: inherit !important; }
body.app-main-theme .trianos-login input[type="checkbox"] { accent-color: var(--action-primary-bg); }
body.app-main-theme .trianos-login input[type="checkbox"]:checked { background-color: var(--action-primary-bg); border-color: var(--action-primary-bg); }
body.app-main-theme .trianos-login .trianos-login-submit { min-height: 42px; background: var(--action-primary-bg) !important; color: var(--action-primary-fg) !important; border-color: var(--action-primary-bg); }
body.app-main-theme .trianos-login .trianos-login-submit:hover { background: var(--action-primary-hover) !important; }
body.app-main-theme .trianos-login .trianos-login-method { min-height: 64px; padding: 12px; background: var(--action-secondary-bg) !important; color: var(--action-secondary-fg) !important; border-color: var(--action-secondary-border); }
body.app-main-theme .trianos-login .trianos-login-method:hover { background: var(--action-secondary-hover) !important; }
body.app-main-theme .trianos-login .trianos-login-method span { color: inherit; }
body.app-main-theme .trianos-login .trianos-login-method .h-10 { background: var(--action-primary-bg); color: var(--action-primary-fg); }
body.app-main-theme .trianos-login .winki-login-theme-button { color: var(--action-primary-bg) !important; }
html.dark body.app-main-theme .trianos-login { color: var(--dark-text, #e7ebf2); color-scheme: dark; }
html.dark body.app-main-theme .trianos-login input:is([type="email"], [type="password"], [type="text"]) {
  background: var(--dark-bg-input, #181f2c) !important; color: var(--dark-text, #e7ebf2) !important; border-color: var(--dark-border-input, #647086);
}
html.dark body.app-main-theme .trianos-login input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--dark-text, #e7ebf2) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--dark-bg-input, #181f2c) inset !important;
}
html.dark body.app-main-theme .trianos-login #toggle-password-visibility { color: var(--dark-text-secondary, #a8b2c3); }
@media (max-width: 480px) {
  body.app-main-theme .trianos-login { padding-left: 12px; padding-right: 12px; }
  body.app-main-theme .trianos-login-card { padding: 16px; }
}


/* The two remember options share typography and spacing on both login forms. */
html body.app-main-theme :is(.trianos-login, .winki-login) .login-checkbox-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
html body.app-main-theme :is(.trianos-login, .winki-login) .login-checkbox-group input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0;
}
html body.app-main-theme :is(.trianos-login, .winki-login) .login-checkbox-label {
  display: block; margin: 0;
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-size: 14px; font-weight: 400; line-height: 20px;
  font-synthesis: none; letter-spacing: -.025em;
  color: #475569 !important;
}
html.dark body.app-main-theme :is(.trianos-login, .winki-login) .login-checkbox-label {
  color: var(--dark-text-secondary, #a8b2c3) !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
























 */

.winki-login-surface {
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.94) 0%, rgba(239, 243, 255, 0.9) 50%, rgba(255, 255, 255, 0.95) 100%),
    repeating-linear-gradient(104deg, color-mix(in srgb, var(--color-primary, #292e68) 12%, transparent) 0 1px, rgba(255, 255, 255, 0) 1px 6px),
    repeating-linear-gradient(14deg, rgba(255, 255, 255, 0.68) 0 2px, color-mix(in srgb, var(--color-primary, #292e68) 7%, transparent) 2px 5px),
    #fff;
}

.winki-login-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--color-primary, #292e68) 12%, transparent) 58%, color-mix(in srgb, var(--color-primary, #292e68) 25%, transparent) 100%),
    radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--color-primary, #292e68) 23%, transparent), transparent 34rem);
}

/* Les cartes de services conservent leur fond au survol, tout en rendant leur
 * contenu lisible au-dessus du bleu appliqué aux boutons par le thème. */
button.onboarding-service-option:hover .onboarding-service-label,
.group:hover > button.onboarding-service-option .onboarding-service-label,
button.onboarding-service-option:focus-visible .onboarding-service-label {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

button.onboarding-service-option:hover .onboarding-service-detail,
.group:hover > button.onboarding-service-option .onboarding-service-detail,
button.onboarding-service-option:focus-visible .onboarding-service-detail {
  color: var(--color-secondary, #fdc531) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

button.onboarding-service-option:hover .onboarding-service-icon,
.group:hover > button.onboarding-service-option .onboarding-service-icon,
button.onboarding-service-option:focus-visible .onboarding-service-icon {
  color: var(--color-secondary, #fdc531) !important;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 45%));
}

button.onboarding-service-option:hover .onboarding-service-icon [fill]:not([fill="none"]),
.group:hover > button.onboarding-service-option .onboarding-service-icon [fill]:not([fill="none"]),
button.onboarding-service-option:focus-visible .onboarding-service-icon [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

button.onboarding-service-option:hover .onboarding-service-icon [stroke]:not([stroke="none"]),
.group:hover > button.onboarding-service-option .onboarding-service-icon [stroke]:not([stroke="none"]),
button.onboarding-service-option:focus-visible .onboarding-service-icon [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

/* The public login uses the same dark surfaces as the authenticated app. */
@media screen {
  html.dark body.app-main-theme .winki-login-surface {
    background: radial-gradient(ellipse at 25% 40%, rgb(41 46 104 / 22%), transparent 65%), var(--dark-bg-app, #171c28);
    color: var(--dark-text, #e7ebf2);
    color-scheme: dark;
  }
  html.dark .winki-login-surface::before { background: none; }
  html.dark .winki-login-logo { filter: brightness(0) invert(1); opacity: .94; }
  html.dark body.app-main-theme .winki-login-intro :is(h1, p) { color: var(--dark-text, #e7ebf2); }
  html.dark body.app-main-theme .winki-login-intro p { color: var(--dark-text-secondary, #a8b2c3); }
  html.dark body.app-main-theme .winki-login-card {
    background: var(--dark-surface, #202735);
    border-color: var(--dark-border, #30394a);
    box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
    backdrop-filter: none;
  }
  html.dark body.app-main-theme .winki-login :is(label, .winki-login-kicker) { color: var(--dark-text, #e7ebf2) !important; }
  html.dark body.app-main-theme .winki-login input:is([type="email"], [type="password"], [type="text"]) {
    background: var(--dark-bg-input, #181f2c) !important;
    color: var(--dark-text, #e7ebf2) !important;
    border-color: var(--dark-border-input, #647086);
    box-shadow: none;
    caret-color: var(--dark-text, #e7ebf2);
  }
  html.dark body.app-main-theme .winki-login input:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: var(--dark-text, #e7ebf2) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--dark-bg-input, #181f2c) inset !important;
  }
  html.dark body.app-main-theme .winki-login input[type="checkbox"] {
    background-color: var(--dark-bg-input, #181f2c);
    border-color: var(--dark-border-input, #647086);
  }
  html.dark body.app-main-theme .winki-login input[type="checkbox"]:checked {
    background-color: #fdc531;
    border-color: #fdc531;
  }
  html.dark body.app-main-theme .winki-login #toggle-password-visibility { color: var(--dark-link, #b8c8ff) !important; }
  html.dark body.app-main-theme .winki-login a { color: #cbd5e1 !important; }
  html.dark body.app-main-theme .winki-login a:hover { color: var(--dark-text, #e7ebf2) !important; }
  html.dark body.app-main-theme .winki-login input[type="submit"] {
    background: #fdc531 !important;
    color: #202735 !important;
    box-shadow: none;
  }
  html.dark body.app-main-theme .winki-login input[type="submit"]:hover { background: #ffda70 !important; }
  html.dark body.app-main-theme .winki-login .winki-login-passkey {
    background: var(--dark-surface-raised, #293345) !important;
    color: var(--dark-text, #e7ebf2) !important;
    border-color: var(--dark-border-input, #647086);
  }
  html.dark body.app-main-theme .winki-login .winki-login-passkey:hover { background: var(--dark-row-hover, #322e45) !important; }
  html.dark body.app-main-theme .winki-login-passkey small { color: var(--dark-text-secondary, #a8b2c3); }
  html.dark body.app-main-theme .winki-login-passkey > span:first-child { background: var(--dark-surface, #202735); color: var(--dark-text, #e7ebf2); }
  html.dark body.app-main-theme .winki-login-proof {
    background: var(--dark-surface, #202735);
    color: #f0cc83;
    border-color: var(--dark-border, #30394a);
    box-shadow: none;
  }
  html.dark body.app-main-theme .winki-login :is(input, button, a):focus-visible {
    outline: 2px solid var(--dark-link, #b8c8ff) !important;
    outline-offset: 3px;
  }
}

/* Public theme control, outside the authentication forms. */
.winki-login:has(.winki-login-theme) { padding-top: 80px; }
.winki-login-theme { position: absolute; top: 16px; right: 24px; z-index: 2; }
html body.app-main-theme .winki-login-theme-button {
  background: transparent !important; color: #292e68 !important;
  border: 0 !important; border-radius: 0; min-height: 40px; width: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; box-shadow: none; font-size: 13px;
}
.winki-login-theme-button span { align-items: center; gap: 8px; }
.winki-login-theme-button svg { width: 18px; height: 18px; }
.winki-login-theme-light { display: inline-flex; }
.winki-login-theme-dark { display: none; }
.dark .winki-login-theme-light { display: none; }
.dark .winki-login-theme-dark { display: inline-flex; }
html.dark body.app-main-theme .winki-login-theme-button {
  background: transparent !important;
  color: var(--dark-text, #e7ebf2) !important;
}
html body.app-main-theme .winki-login-theme-button:hover { background: transparent !important; box-shadow: none !important; opacity: .75; }
html body.app-main-theme .winki-login-theme-button:focus-visible { outline: 2px solid #647086; outline-offset: 3px; }
.winki-login-theme-button:disabled { opacity: .6; cursor: wait; }
.winki-login-theme-error { max-width: 260px; padding: 8px; font-size: 12px; background: #fee2e2; color: #991b1b; border-radius: 4px; }
.dark .winki-login-theme-error { background: #3b232b; color: #f0a0ab; }

/* Display typography for the three requested login field labels. */
html body.app-main-theme .winki-login .winki-login-field-label {
  font-family: "Trianos Display", "Roboto", sans-serif;
  font-weight: 400;
}

/* The standalone login fills the viewport without the authenticated shell gutters. */
#trianos-app:has(.winki-login) { max-width: none; }
#main-content:has(.winki-login), #main:has(> .winki-login) { padding: 0; margin: 0; }
#main > .winki-login { margin: 0; min-height: 100vh; min-height: 100svh; }

/* Compact global scope filter; selections remain visible beside the icon. */
body.app-main-theme #global-filter-button {
  position: fixed; top: 12px; right: 16px; z-index: 50; height: auto;
  max-width: calc(100vw - 80px);
}
html body.app-main-theme #global-filter-button .global-filter-trigger {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 36px; min-height: 36px; padding: 8px;
  background: transparent; color: #586477; border: 0; box-shadow: none;
  text-decoration: none; border-radius: 6px;
}
.global-filter-icon { display: inline-flex; position: relative; flex-shrink: 0; }
.global-filter-icon svg { width: 18px; height: 18px; }
html body.app-main-theme #global-filter-button .global-filter-trigger:hover { color: var(--color-primary, #292e68); background: rgb(100 116 139 / 10%); }
html body.app-main-theme #global-filter-button .global-filter-trigger:focus-visible { outline: 2px solid var(--color-primary, #292e68); outline-offset: 3px; }
html body.app-main-theme #global-filter-button .global-filter-trigger--active { background: var(--color-card-bg, #fff); color: var(--color-primary, #292e68); box-shadow: 0 1px 5px rgb(15 23 42 / 10%); }
.global-filter-trigger--active .global-filter-icon::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: -2px; right: -2px; background: currentColor; }
.global-filter-selection { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
.global-filter-selection b { font-weight: 600; }
html.dark body.app-main-theme #global-filter-button .global-filter-trigger { color: var(--dark-text-secondary, #a8b2c3); }
html.dark body.app-main-theme #global-filter-button .global-filter-trigger--active { background: var(--dark-surface, #202735); color: var(--dark-link, #b8c8ff); }
html.dark body.app-main-theme #global-filter-button .global-filter-trigger:hover { color: var(--dark-text, #e7ebf2); background: var(--dark-surface-raised, #293345); }
html.dark body.app-main-theme #global-filter-button .global-filter-trigger:focus-visible { outline-color: var(--dark-focus, #b8c8ff); }