/* Global styles */
html {
  font-size: 110% !important;
}

/* Ensure all cards in a row have the same height */
.row .card .same-height {
  height: 100%;
}

.row>[class*="col-"] {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 0.25rem !important;
}

/* Required field indicator */
.form-label.required:after {
  content: "*";
  color: red;
  margin-left: 3px;
}

.alert {
  padding: .95rem !important;
}

/* Fix for alert layout to prevent column breaks */
.alert {
  display: block;
}

.alert strong,
.alert p {
  display: inline !important;
}

.alert>p {
  margin-bottom: 0.5rem !important;
}

.alert i:first-child {
  margin-right: 0.5rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.alert strong:first-child {
  /* margin-right: 0.5rem !important; */
  display: inline !important;
  vertical-align: baseline !important;
}

.alert ul {
  margin-bottom: 0 !important;
}

/* Fix for text wrapping in alerts */
.alert-content {
  white-space: nowrap !important;
  display: inline !important;
}

option {
  padding: 2px !important;
  margin: 2px 0px 2px 0px !important;
}

/* Device fingerprinting alert styles */
.alert-info p {
  display: block !important;
  white-space: normal !important;
  margin-bottom: 0.5rem !important;
}

.alert-info p:last-child {
  margin-bottom: 0 !important;
}

.alert-info strong {
  display: inline !important;
  white-space: normal !important;
}

/* Floating notification alerts: solid opaque backgrounds
   Targets alerts from showNotification() functions across pages.
   Uses AdminKit theme colors matching the toaster system. */
.alert.position-fixed.alert-success,
#notification-container .alert.alert-success,
.template-notification.alert-success {
  background-color: var(--bs-success, #1cbb8c) !important;
  color: #fff !important;
  border-color: var(--bs-success, #1cbb8c) !important;
}

.alert.position-fixed.alert-danger,
#notification-container .alert.alert-danger,
.template-notification.alert-danger {
  background-color: var(--bs-danger, #dc3545) !important;
  color: #fff !important;
  border-color: var(--bs-danger, #dc3545) !important;
}

.alert.position-fixed.alert-warning,
#notification-container .alert.alert-warning,
.template-notification.alert-warning {
  background-color: var(--bs-warning, #fcb92c) !important;
  color: #212529 !important;
  border-color: var(--bs-warning, #fcb92c) !important;
}

.alert.position-fixed.alert-info,
#notification-container .alert.alert-info,
.template-notification.alert-info {
  background-color: var(--bs-info, #17a2b8) !important;
  color: #fff !important;
  border-color: var(--bs-info, #17a2b8) !important;
}

.alert.position-fixed .btn-close,
#notification-container .alert .btn-close,
.template-notification .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.alert.position-fixed.alert-warning .btn-close,
#notification-container .alert.alert-warning .btn-close,
.template-notification.alert-warning .btn-close {
  filter: none;
}

.sidebar-dropdown .sidebar-link {
  background: transparent !important;
  padding: .5rem 1.5rem .5rem 2.75rem !important;
}

/* Sidebar logo styles */
.sidebar-logo {
  max-height: 40px;
  max-width: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.sidebar-brand {
  padding: 0.25rem !important;
  color: #212e3c !important;
  display: flex !important;
  align-items: center !important;
}

/* Only force-show the desktop sidebar toggle at md+ breakpoint.
   Below md, the mobile toggle (#mobile-sidebar-toggle) is used instead.
   Without the media query, this !important overrides Bootstrap's d-none
   and causes two hamburger icons to appear side-by-side. */
@media (min-width: 768px) {
  .sidebar-toggle {
    display: flex !important;
  }
}

.navbar {
  --bs-navbar-padding-y: 0.4rem !important;
  /* Ensure the navbar stays fixed at the top — AdminKit sets position:relative
     and Bootstrap's sticky-top on the wrapper can interfere on some scroll
     containers.  This rule loads last (custom.css) so !important wins. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
}

/* Push body content below the fixed navbar.
   padding-top is more reliable than margin-top because it doesn't collapse
   and isn't affected by AdminKit's .wrapper overrides (overflow:hidden, etc.).
   56px ≈ actual navbar height with 0.4rem padding-y.
   Applied to both authenticated pages and non-authenticated pages that use the
   application layout (e.g. login, password reset) via the .has-fixed-navbar class. */
body.authenticated,
body.has-fixed-navbar {
  padding-top: 56px !important;
}

/* System admin layout uses data-controller="system-admin" instead of
   class="authenticated", so it needs its own padding-top rule. */
body[data-controller="system-admin"] {
  padding-top: 56px !important;
}

/* System Admin sidebar: fixed below the navbar */
body[data-controller="system-admin"] #sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  height: calc(100vh - 56px);
  z-index: 1020;
}

/* Main content offset for the fixed sidebar */
body[data-controller="system-admin"] .main {
  margin-left: 260px;
  transition: margin-left 0.15s ease-in-out;
}

/* Collapsed sidebar state */
body[data-controller="system-admin"].toggle-sidebar .main {
  margin-left: 0;
}

body[data-controller="system-admin"].toggle-sidebar #sidebar {
  left: -260px;
}

body[data-controller="system-admin"] .sidebar-toggle {
  color: inherit;
  text-decoration: none;
}

body[data-controller="system-admin"] .sidebar-toggle:hover {
  color: inherit;
  text-decoration: none;
}

/* Fix card header rounded corners */
.card-header {
  border-top-left-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px) !important;
  border-top-right-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px) !important;
  overflow: hidden;
}

.card-footer {
  border-bottom-left-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px) !important;
  border-bottom-right-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px) !important;
  overflow: hidden;
}

/* Card hover effects */
.card-hover-effect {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-hover-effect:hover,
.card-hover-effect:focus {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.15);
  background-color: rgba(248, 249, 250, 0.8);
}

/* GLOBAL OVERRIDE: Remove ALL card hover effects by default */
/* This uses maximum CSS specificity to override AdminKit Pro and Bootstrap styles */

/* Base card styles - no transitions, no cursor pointer */

/* App Store card hover effects */
.card-hover {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Avatar icon centering */
.avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.avatar i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Avatar text/initials centering - same as icons for consistency */
.avatar span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Specific avatar sizes */
.avatar-sm {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.avatar-lg {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

.avatar-xl {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
}

.card-hover-effect:hover .icon-circle,
.card-hover-effect:focus .icon-circle {
  transform: scale(1.15);
}

.card-hover-effect:hover [data-feather="chevron-right"],
.card-hover-effect:focus [data-feather="chevron-right"] {
  transform: translateX(3px);
}

/* Timesheet card hover effects */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Typography classes */
.display-5 {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
}

[data-feather="chevron-right"] {
  transition: transform 0.2s ease-in-out;
}

/* Arrow icon animation */
.arrow-icon {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.card-hover-effect:hover .arrow-icon,
.card-hover-effect:focus .arrow-icon {
  opacity: 1;
  animation: pulse 1.5s infinite;
}

.content {
  min-height: calc(100vh - 56px) !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* Select2 Custom Styling */
.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection--single {
  height: 38px;
  line-height: 38px;
}

.select2-container--default .select2-selection--multiple {
  border-color: #ced4da;
  border-radius: 0;
  min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0;
  padding: 3px 8px;
  margin-top: 5px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #007bff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px;
}

.select2-dropdown {
  border-color: #ced4da;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 10000 !important;
  position: absolute !important;
}

.select2-search--dropdown .select2-search__field {
  padding: 8px;
  border-radius: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 2px 8px;
}

/* Additional select2 fixes for all devices */
.select2-container {
  z-index: 1000;
  width: 100% !important;
}

/* Fix for select2 in upload form */
.location-select {
  width: 100% !important;
}

/* Fix for Safari and iOS */
.select2-container--open {
  z-index: 10000 !important;
}

/* Fix for specific input focus */
.select2-selection:focus {
  outline: none !important;
  border-color: #80bdff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Fix for multiple selection container */
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #80bdff !important;
}

/* Ensure select2 dropdown is properly positioned */
.select2-container--default .select2-results>.select2-results__options {
  max-height: 250px;
  overflow-y: auto;
}

/* Make select2 dropdowns more visible */
.select2-dropdown {
  background-color: white !important;
}

/* Fix for the Upload Shifts Select2 dropdown */
form[action*="preview"] .select2-container {
  z-index: 9999 !important;
  width: 100% !important;
}

form[action*="preview"] .select2-dropdown {
  z-index: 9999 !important;
  background-color: white !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Make upload location select more visible */
form[action*="preview"] .location-select {
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
  min-height: 38px !important;
}

/* Fix for Safari/iOS specific issues */
.select2-container--open {
  z-index: 10000 !important;
}

.select2-selection {
  border: 1px solid #ced4da !important;
}

/* Fix both Upload and Export forms' select2 containers */
.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  border: 1px solid #ced4da !important;
}

.select2-container {
  display: block !important;
}

.select2-search__field {
  width: 100% !important;
}

/* Ensure user search dropdowns are properly positioned and sized */
.user-searchable-select+.select2-container {
  z-index: 1000;
}

.user-searchable-select+.select2-container .select2-dropdown {
  z-index: 10000 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  margin-top: 1px;
}

.user-searchable-select+.select2-container--default .select2-selection--single {
  height: 38px !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
}

.user-searchable-select+.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  color: #495057 !important;
}

.user-searchable-select+.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 8px !important;
}

.user-searchable-select+.select2-container--default .select2-selection--single .select2-selection__clear {
  right: 32px !important;
  font-size: 18px !important;
  line-height: 36px !important;
  padding-right: 8px !important;
}

/* Custom styles for the upload form's Select2 wrapper */
#upload-location-container {
  position: relative;
  padding: 5px;
  background-color: #fff;
}

#upload-location-container .select2-container {
  display: block !important;
  width: 100% !important;
  z-index: 1040 !important;
}

#upload-location-container .select2-container--open .select2-dropdown {
  z-index: 1050 !important;
  width: auto !important;
  min-width: 100% !important;
}

#upload-location-select {
  width: 100% !important;
  display: block !important;
}

/* Ensure the Select2 dropdown menu appears above all other elements */
.select2-container--open {
  z-index: 99999 !important;
}

.select2-dropdown {
  z-index: 99999 !important;
}

/* Chart.js canvas fixes */
.chart {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.card-body .chart {
  padding: 10px;
}

/* Reduce padding for pie chart containers */
.card-body #roleDistributionChart,
.card-body #skillDistributionChart,
.card-body #locationDistributionChart {
  padding: 0 !important;
}

/* Reduce padding on parent .chart container for pie charts */
.card-body .chart:has(#roleDistributionChart),
.card-body .chart:has(#skillDistributionChart),
.card-body .chart:has(#locationDistributionChart) {
  padding: 0 !important;
  max-height: 320px;
}

/* Fix for AdminKit card layouts with charts */
.card-fill .card-body {
  display: flex;
  flex-direction: column;
}

.card-fill .chart {
  flex: 1;
}

/* Operational Insights Charts */
#shiftUtilizationChart,
#overtimeTrendsChart,
#leaveUsageChart {
  height: 350px !important;
  position: relative !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* Ensure chart containers have fixed heights */
#shiftUtilizationChart+div,
#overtimeTrendsChart+div,
#leaveUsageChart+div {
  overflow: hidden !important;
  max-height: 350px !important;
}

/* Add stronger z-index for charts */
#roleDistributionChart,
#skillDistributionChart,
#locationDistributionChart,
#shiftFulfillmentChart,
#attendancePatternChart,
#performanceMetricsChart,
canvas[data-controller="chart"],
canvas[data-controller="test-chart"] {
  position: relative !important;
  z-index: 100 !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
}

/* Specific sizing for pie charts to prevent stretching */
#roleDistributionChart,
#skillDistributionChart,
#locationDistributionChart {
  height: 300px !important;
  max-height: 300px !important;
  min-height: 250px !important;
}

/* Reduce padding for pie chart containers */
#roleDistributionChart,
#skillDistributionChart,
#locationDistributionChart {
  padding: 0 !important;
}

/* Ensure pie chart parent containers don't stretch */
#roleDistributionChart-parent-container,
#skillDistributionChart-parent-container,
#locationDistributionChart-parent-container {
  max-height: 350px !important;
}

/* Add debug background color to chart containers */
.chart {
  background-color: rgba(0, 0, 255, 0.03) !important;
}

/* Gauge chart styling for Skill Coverage Analysis */
.gauge-container {
  position: relative;
  height: 140px !important;
  width: 200px !important;
  margin: 1rem auto !important;
  overflow: hidden !important;
  /* Prevent content from causing growth */
}

.gauge-canvas {
  display: block !important;
  width: 200px !important;
  height: 140px !important;
  /* Fixed dimensions */
  margin: 0 auto !important;
  /* Center the canvas horizontally */
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
}

/* Position percentage text at bottom-center of semi-circle gauge */
.gauge-container .gauge-percentage {
  position: absolute !important;
  left: 50% !important;
  top: 70% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* Legacy positioning support - override Bootstrap's translate-middle */
.gauge-container .position-absolute.translate-middle {
  top: 70% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

.gauge-container .fw-bold {
  margin-bottom: 0 !important;
  font-size: 1.5rem !important;
}

@media (min-width: 992px) {
  .content {
    padding: 1rem 2rem !important;
  }
}

/* Ensure proper chart sizing in all browsers */
@media screen and (max-width: 992px) {

  .gauge-container,
  .gauge-canvas {
    width: 180px !important;
    height: 130px !important;
  }
}

@media screen and (max-width: 768px) {

  .gauge-container,
  .gauge-canvas {
    width: 160px !important;
    height: 110px !important;
  }
}

/* Availability Calendar Styles */
.availability-calendar {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.time-header {
  width: 80px;
  border-right: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.day-header {
  flex: 1;
  padding: 10px;
  text-align: center;
}

.day-header.today {
  background-color: rgba(13, 110, 253, 0.1);
}

.day-name {
  font-weight: bold;
}

.day-date {
  font-size: 0.9em;
  color: #666;
}

.calendar-body {
  display: flex;
  flex-direction: column;
}

.time-period-label {
  padding: 5px 10px;
  font-weight: bold;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.calendar-row {
  display: flex;
  border-bottom: 1px solid #eee;
  height: 45px;
}

.time-cell {
  width: 80px;
  padding: 5px;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  color: #666;
}

.calendar-cell {
  flex: 1;
  border-right: 1px solid #eee;
  position: relative;
  height: 45px;
  cursor: pointer;
  background-color: white;
}

.calendar-cell:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Time-based styling removed - no longer using morning/business/night hours classes */

/* Action Buttons Styling - Global */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.action-buttons .btn,
.action-buttons form {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.action-buttons .btn {
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .btn i {
  margin-right: 0.25rem;
}

/* Fix for button_to forms causing line breaks */
form.button_to {
  display: inline-block;
  margin: 0;
}

/* Broadcast attachment thumbnails */
.img-preview-thumb {
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}

.img-preview-thumb:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  transform: scale(1.03);
  z-index: 2;
}

/* Fix for broadcast stats chart growing vertically */
.card .chart,
.card .chart canvas {
  max-height: 300px !important;
  height: 300px !important;
  min-height: 200px !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto;
}

/* Chat/Comments styling */
.chat-messages {
  display: flex;
  flex-direction: column;
  max-height: 100% !important;
  overflow-y: unset !important;
}

.chat-message-left,
.chat-message-right {
  display: flex;
  flex-shrink: 0;
}

.chat-message-left {
  margin-right: auto;
  flex-direction: row;
}

.chat-message-right {
  flex-direction: row-reverse;
  margin-left: auto;
}

.chat-message-left div:first-child,
.chat-message-right div:first-child {
  margin-bottom: 5px;
  width: 60px;
  text-align: left;
}

.chat-message-left .flex-shrink-1,
.chat-message-right .flex-shrink-1 {
  max-width: 70%;
  position: relative;
}

.chat-message-left .flex-shrink-1:after,
.chat-message-right .flex-shrink-1:after {
  position: absolute;
  top: 10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.chat-message-left .flex-shrink-1:after {
  left: -10px;
  border-width: 5px 10px 5px 0;
  border-color: transparent #f5f7fb transparent transparent;
}

.chat-message-right .flex-shrink-1:after {
  right: -10px;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #f5f7fb;
}

@media (max-width: 576px) {

  .chat-message-left .flex-shrink-1,
  .chat-message-right .flex-shrink-1 {
    max-width: 80%;
  }
}

/* Enhanced comment dropdown styling */
.chat-messages .dropdown .btn-link {
  color: #adb5bd;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.chat-messages .dropdown .btn-link:hover {
  opacity: 1;
  color: #6c757d;
}

.chat-messages .dropdown-toggle::after {
  display: none;
}

/* Make dropdown more visible on hover of comment container */
.chat-message-left:hover .dropdown .btn-link,
.chat-message-right:hover .dropdown .btn-link {
  opacity: 1;
}

/* Weather Card Styles */
.weather-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.weather-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.weather-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
}

.weather-icon-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  padding: 6px;
}

.forecast-day {
  min-width: 60px;
  padding: 6px 3px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.forecast-day:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.weather-empty-icon {
  width: 64px;
  height: 64px;
  stroke-width: 1;
  opacity: 0.5;
}

/* Weather refresh button animation */
.btn-light.rounded-circle {
  transition: all 0.2s ease;
}

.btn-light.rounded-circle:hover {
  background-color: #f8f9fa;
  transform: rotate(30deg);
}

/* Earnings Snapshot Card Styles */
.earnings-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.earnings-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.earnings-card .avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.earnings-card .progress {
  height: 6px;
  background-color: #f8f9fa;
  margin-top: 5px;
  border-radius: 4px;
  overflow: hidden;
}

.earnings-card .badge {
  font-weight: 500;
  padding: 0.4em 0.6em;
}

/* Responsive tweaks for earnings card */
@media (max-width: 767.98px) {
  .earnings-card .row>div {
    margin-bottom: 1.5rem;
  }

  .earnings-card .row>div:last-child {
    margin-bottom: 0;
  }
}

.col-auto.ms-auto.text-end {
  display: flow;
}

.btn-check+.btn:hover {
  background-color: var(--bs-btn-border-color) !important;
}

.nav-flag,
.nav-icon {
  height: 46px !important;
}

/* Prevent sidebar flicker: disable transition on initial load, enable after DOM ready */
.sidebar-dropdown.collapse {
  transition: none !important;
}

/* Suppress sidebar link transitions during Turbo navigation sidebar swaps.
   Without this, the 0.2s ease-in-out transition on .sidebar-link causes the
   active highlight to visually animate through intermediate items when the
   sidebar innerHTML is replaced (e.g., going from My Attendance to My Shifts
   briefly flashes My Availability). */
.sidebar-transitioning .sidebar-link,
.sidebar-transitioning .sidebar-item {
  transition: none !important;
}

body.sidebar-ready .sidebar-dropdown.collapse {
  transition: height 0.35s ease;
}

/* Reserve space for Feather icons in sidebar to prevent flicker */
.sidebar-link i[data-feather] {
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  vertical-align: middle;
}

/* Remove the default arrow from sidebar links */
.sidebar-dropdown .sidebar-link:before {
  content: none !important;
  display: none !important;
}

/* Optionally, use fa-regular instead of fa-solid in the ERB if you want outlined icons */

/* Hide scrollbar for the left sidebar */
.sidebar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.sidebar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.web-count-badge {
  top: 12px !important;
  left: 18px !important;
  font-weight: 400 !important;
  font-size: .6rem !important;
  padding: 3px !important;
}

.timeline-item:before {
  border: 0px !important;
  width: 0px !important;
}

.timeline-marker {
  z-index: 1000;
}

/* Sidebar chevron arrow styling */
.sidebar-chevron {
  transition: transform 0.2s ease-in-out;
  font-size: 0.75rem;
  color: inherit !important;
}

.sidebar-chevron.rotated,
.sidebar-link:not(.collapsed) > .sidebar-chevron {
  transform: rotate(90deg);
}

/* Ensure sidebar links have proper flexbox layout for chevron positioning */
.sidebar-link {
  display: flex !important;
  align-items: center;
}

.sidebar-link,
a.sidebar-link {
  padding: .625rem 1.25rem !important;
}

/* Override Font Awesome Free with Font Awesome Pro */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fa-solid-900-238f71df.woff2") format("woff2"),
    url("/assets/fa-solid-900-a1ae66eb.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fa-regular-400-ba6d4b1e.woff2") format("woff2"),
    url("/assets/fa-regular-400-4588fcba.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fa-brands-400-1b137a72.woff2") format("woff2"),
    url("/assets/fa-brands-400-57db8504.ttf") format("truetype");
}

/* Add Pro-specific font families */
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/fa-thin-100-121b4738.woff2") format("woff2"),
    url("/assets/fa-thin-100-dcb89ef3.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fa-light-300-23f5adff.woff2") format("woff2"),
    url("/assets/fa-light-300-f5f7794f.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fa-regular-400-ba6d4b1e.woff2") format("woff2"),
    url("/assets/fa-regular-400-4588fcba.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fa-solid-900-238f71df.woff2") format("woff2"),
    url("/assets/fa-solid-900-a1ae66eb.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Duotone";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fa-duotone-900-d89f4343.woff2") format("woff2"),
    url("/assets/fa-duotone-900-985af90d.ttf") format("truetype");
}

/* Override CSS variables for Pro styles */
:root {
  --fa-style-family-classic: "Font Awesome 6 Pro";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
  --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";
  --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
  --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --sidebar-hover-bg: rgba(59, 125, 221, 0.08);
  --sidebar-hover-color: #518be1;
  --sidebar-hover-border: rgba(59, 125, 221, 0.25);
  --sidebar-hover-transform: translateX(2px);
  --sidebar-transition: all 0.2s ease-in-out;
}

/* Ensure Pro classes use correct font families */
.fa-solid,
.fas {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
}

.fa-regular,
.far {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 400 !important;
}

/* Navigation Pills - Active State Consistency */
.nav-pills .nav-link.active small {
  color: inherit !important;
  opacity: 0.9;
}

.fa-light,
.fal {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 300 !important;
}

.fa-thin,
.fat {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 100 !important;
}

.fa-duotone,
.fad {
  font-family: "Font Awesome 6 Duotone" !important;
  font-weight: 900 !important;
}

.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* ===============================================
   SIDEBAR HOVER STATE IMPROVEMENTS - CLEANED UP
   =============================================== 
   
   This approach uses CSS custom properties for:
   - Consistent theming across light/dark modes
   - Maintainable hover state values
   - Reduced CSS specificity conflicts
   - Better performance with fewer rules
   
   All sidebar links now have uniform hover behavior
   without needing specific selectors or overrides.
   =============================================== */

/* CSS Custom Properties for Sidebar Hover States */
:root {
  --sidebar-hover-bg: rgba(59, 125, 221, 0.08);
  --sidebar-hover-color: #518be1;
  --sidebar-hover-border: rgba(59, 125, 221, 0.25);
  --sidebar-hover-transform: translateX(2px);
  --sidebar-transition: all 0.2s ease-in-out;
}

/* Dark theme adjustments */
body[data-theme="dark"] {
  --sidebar-hover-bg: rgba(59, 125, 221, 0.12);
  --sidebar-hover-color: #9dbeee;
  --sidebar-hover-border: rgba(59, 125, 221, 0.3);
}

/* Base sidebar link styling with consistent transitions */
.sidebar-nav .sidebar-item .sidebar-link {
  transition: var(--sidebar-transition);
  position: relative;
}

/* Consistent hover state for ALL sidebar links - applied to the link element only */
.sidebar-nav>.sidebar-item:not(.active)>.sidebar-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-color) !important;
  border-left-color: var(--sidebar-hover-border) !important;
  transform: var(--sidebar-hover-transform);
}

/* Dropdown sidebar items - hover for nested items only */
.sidebar-nav .sidebar-item ul .sidebar-item .sidebar-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-color) !important;
  border-left-color: var(--sidebar-hover-border) !important;
  transform: var(--sidebar-hover-transform);
}

/* Icon consistency during hover */
.sidebar-nav .sidebar-item .sidebar-link:hover i,
.sidebar-nav .sidebar-item .sidebar-link:hover .fa-solid,
.sidebar-nav .sidebar-item .sidebar-link:hover .fa-regular {
  color: inherit;
  transition: var(--sidebar-transition);
}

/* Remove focus outline conflicts */
.sidebar-nav .sidebar-item .sidebar-link:hover,
.sidebar-nav .sidebar-item .sidebar-link:focus {
  outline: none;
  text-decoration: none;
}

/* Enhanced hover for section toggles - only the toggle element itself */
.sidebar-nav>.sidebar-item>.sidebar-link[data-bs-target]:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-color) !important;
}

/* Ensure chevron icons rotate smoothly */
.sidebar-chevron {
  transition: transform 0.2s ease-in-out;
  color: inherit !important;
}

.sidebar-chevron.rotated,
.sidebar-link:not(.collapsed) > .sidebar-chevron {
  transform: rotate(90deg);
}

/* ===============================================
   APP CONTEXT-SWITCHING SIDEBAR
   ===============================================
   
   When a user enters a marketplace app, the sidebar
   transforms to show app-specific navigation. These
   styles handle the back link, app header, divider,
   group headers, and sub-item icons.
   =============================================== */

/* Back to Apps link - subtle but always accessible */
.app-sidebar-back .sidebar-link {
  font-size: 0.8125rem;
  color: #6c757d !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.app-sidebar-back .sidebar-link:hover {
  color: var(--sidebar-hover-color) !important;
}

.app-sidebar-back .sidebar-link i {
  font-size: 0.75rem;
}

/* App identity header - clean app name label at top of sidebar */
.app-sidebar-header .sidebar-link {
  font-size: 0.9rem;
  line-height: 1.1rem;
  padding: 0.625rem 0.875rem !important;
  color: #333 !important;
  background-color: transparent;
  border: none;
}

.app-sidebar-header .sidebar-link:hover {
  background-color: transparent;
  color: #333 !important;
}

.app-sidebar-header .sidebar-link .fw-semibold {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.app-sidebar-header .sidebar-link i {
  font-size: 1.125rem;
  color: #3b7ddd !important;
}

/* Uploaded app icon in sidebar header - sized to match FA icon */
.app-sidebar-app-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

body[data-theme="dark"] .app-sidebar-header .sidebar-link {
  background-color: transparent;
  color: #e0e0e0 !important;
}

body[data-theme="dark"] .app-sidebar-header .sidebar-link:hover {
  background-color: transparent;
}

/* Divider between header and navigation */
.app-sidebar-divider hr {
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] .app-sidebar-divider hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Group header labels within expanded sections */
.app-sidebar-group-header {
  pointer-events: none;
}

.app-sidebar-group-label {
  padding-top: 0.25rem !important;
  padding-bottom: 0.125rem !important;
  cursor: default !important;
}

.app-sidebar-group-label small {
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

/* Sub-item icons - smaller for visual hierarchy */
.app-sidebar-sub-icon {
  font-size: 0.75rem;
  width: 1rem;
  text-align: center;
  opacity: 0.7;
}

/* Active state for sidebar items is handled via explicit CSS above
   (in the light sidebar section) since our !important overrides
   prevent AdminKit's default active styling from taking effect. */

/* Sidebar transition - smooth crossfade when switching contexts */
#sidebar-wrapper .sidebar-content {
  will-change: opacity;
}

/* Quick-access global nav sections below app nav - slightly muted to
   visually separate them from the primary app navigation above */
#app_switch .sidebar-link,
#app_global_work_hub .sidebar-link,
#app_global_team_ops .sidebar-link,
#app_global_analytics .sidebar-link,
#app_global_admin .sidebar-link {
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* ===============================================
   SIDEBAR DEFAULT OVERRIDES
   
   Override AdminKit Pro's dark sidebar defaults
   with our light sidebar defaults. These are the
   base styles; BusinessTheme CSS injected in <head>
   will override these when a theme is configured.
   =============================================== */

.sidebar,
.sidebar-content {
  background: #ffffff !important;
}

.sidebar .sidebar-link,
.sidebar .sidebar-item a {
  background: transparent !important;
  color: #848484 !important;
}

.sidebar .sidebar-link:hover {
  background-color: rgba(46, 99, 179, 0.08) !important;
  color: #518be1 !important;
}

/* Active state for sidebar items - overrides the light sidebar defaults above.
   Applies to both top-level items and items inside expand/collapse sections.
   Uses CSS variables so BusinessTheme can override via --sidebar-active-bg
   and --sidebar-active-text injected in <head>. */
.sidebar .sidebar-item.active>.sidebar-link,
.sidebar .sidebar-item>.sidebar-link.active,
.sidebar .sidebar-dropdown .sidebar-item.active>.sidebar-link,
.sidebar .sidebar-dropdown .sidebar-item>.sidebar-link.active {
  background-color: var(--sidebar-active-bg, rgba(46, 99, 179, 0.10)) !important;
  color: var(--sidebar-active-text, #3b7ddd) !important;
  font-weight: 600;
}

body[data-theme="dark"] .sidebar .sidebar-item.active>.sidebar-link,
body[data-theme="dark"] .sidebar .sidebar-item>.sidebar-link.active,
body[data-theme="dark"] .sidebar .sidebar-dropdown .sidebar-item.active>.sidebar-link,
body[data-theme="dark"] .sidebar .sidebar-dropdown .sidebar-item>.sidebar-link.active {
  background-color: var(--sidebar-active-bg, rgba(59, 125, 221, 0.15)) !important;
  color: var(--sidebar-active-text, #6baaf7) !important;
  font-weight: 600;
}

/* ===============================================
   ZONE SELECTOR RAIL
   
   A narrow icon strip on the far left that acts
   as a persistent zone switcher. Always visible
   on desktop (hidden on mobile).
   =============================================== */

.sidebar-rail {
  width: 64px;
  min-width: 64px;
  background-color: #1B8751;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  height: calc(100vh - 56px);
  /* subtract navbar height */
  position: sticky;
  top: 56px;
  /* below sticky navbar */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999;
  scrollbar-width: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-rail::-webkit-scrollbar {
  display: none;
}

.sidebar-rail-top,
.sidebar-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.sidebar-rail-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* Individual rail icon button */
.sidebar-rail-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0.5rem 0 0.25rem;
  border-radius: 0.375rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  position: relative;
}

.sidebar-rail-icon i {
  font-size: 1.125rem;
  line-height: 1;
}

.sidebar-rail-label {
  font-size: 0.5625rem;
  margin-top: 0.25rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Inline app icons in the rail — allow wrapping to 2 lines. */
.sidebar-rail-icon[data-inline-app] .sidebar-rail-label {
  white-space: normal;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* Hover state */
.sidebar-rail-icon:hover {
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

/* Active zone indicator */
.sidebar-rail-icon.active {
  color: #fff;
  background-color: #89C34033;
}

.sidebar-rail-icon.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  background-color: var(--sidebar-rail-active-indicator, #89C340);
  border-radius: 0 2px 2px 0;
}

/* Dark theme adjustments */
body[data-theme="dark"] .sidebar-rail {
  background-color: #146b3e;
  border-right-color: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .sidebar-rail-icon.active {
  background-color: #89C34033;
}

body[data-theme="dark"] .sidebar-rail-icon.active::before {
  background-color: var(--sidebar-rail-active-indicator, #89C340);
}

/* Zone header inside panel — hidden; zone context is already
   indicated by the active icon in the zone rail. */
.sidebar-zone-header {
  display: none !important;
}

/* (zone-header child styles removed — header is hidden) */

/* Hide link & section-header icons in non-Apps zone panels.
   Zone-header icons (e.g. gear next to "ADMIN") are preserved. */
nav.sidebar[data-sidebar-context^="zone-"]:not([data-sidebar-context="zone-apps"]) .sidebar-item:not(.sidebar-zone-header) .sidebar-link>i.fa-solid:not(.sidebar-chevron):not(.ms-auto) {
  display: none;
}

/* Hide icons in app-specific sidebar panels too (e.g. Inspections, Job Board).
   Keep app-identity-header icon, zone-header icon, and chevrons. */
nav.sidebar[data-sidebar-context^="app-"] .sidebar-item:not(.sidebar-zone-header):not(.app-sidebar-header) .sidebar-link>i:not(.sidebar-chevron):not(.ms-auto) {
  display: none;
}

/* ---- Layout adjustments when rail is present ---- */

/* The AdminKit sidebar uses position:fixed with left:0. 
   When the rail is present, we need to:
   1. Offset the sidebar panel to sit next to the rail
   2. Adjust the main content margin to account for both rail + panel */

/* Make the sidebar panel narrower and offset by the rail width.
   AdminKit defaults to min-width/max-width: 264px — override all three.
   NOTE: Do NOT set a dark background-color here — the sidebar background
   is controlled by the theme CSS (BusinessTheme) and the light sidebar
   defaults below.  A hardcoded dark color causes the panel to appear as
   a dark empty strip when the inner <nav> doesn't render (e.g. Turbo
   caching / zone transition race). */
.sidebar-rail~#sidebar-wrapper .sidebar {
  position: fixed;
  left: 64px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  top: 56px;
  /* below sticky navbar */
  height: calc(100vh - 56px);
  z-index: 998;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Show a thin scrollbar in the sidebar panel when content overflows */
.sidebar-rail~#sidebar-wrapper .sidebar::-webkit-scrollbar {
  display: block;
  width: 4px;
}

.sidebar-rail~#sidebar-wrapper .sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.sidebar-rail~#sidebar-wrapper .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox thin scrollbar */
.sidebar-rail~#sidebar-wrapper .sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* The sidebar-wrapper itself needs to reserve space for the sidebar.
   Give it a white background as a safety net — if the inner <nav.sidebar>
   hasn't rendered yet (Turbo-permanent race, zone transition, etc.),
   the user won't see a dark or transparent strip. */
.sidebar-rail~#sidebar-wrapper {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  background-color: #ffffff;
}

/* Home zone — collapse the sidebar panel so only the rail is visible */
.sidebar-rail~#sidebar-wrapper[data-sidebar-zone="home"] {
  width: 0 !important;
  min-width: 0 !important;
}

/* Collapse the sidebar wrapper when its content has been cleared (e.g. Apps
   panel toggled closed via the rail icon).  Without this, the wrapper's 220px
   flex spacer remains, leaving dead whitespace beside the rail. */
.sidebar-rail~#sidebar-wrapper:not(:has(nav)) {
  width: 0 !important;
  min-width: 0 !important;
}

.sidebar-rail~#sidebar-wrapper[data-sidebar-zone="home"] .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
}

/* When sidebar is collapsed via the hamburger toggle, hide the panel
   but keep the rail visible.  The toggle JS adds .collapsed on the
   sidebar element and .sidebar-toggled on <body>. */

#sidebar-wrapper {
  transition: width 0.35s ease, min-width 0.35s ease;
}

body.sidebar-toggled #sidebar-wrapper {
  width: 0 !important;
  min-width: 0 !important;
}

/* AI Notepad Chat: prevent page-level scroll — container height is set by JS */
body.ai-notepad-chat-fullscreen,
body.ai-notepad-chat-fullscreen .wrapper,
body.ai-notepad-chat-fullscreen .main {
  overflow: hidden !important;
}

/* AI Sheets: focused spreadsheet layout — collapse expanded sidebar, keep rail */
body.ai-sheets-focused #sidebar-wrapper {
  display: none !important;
}

body.ai-sheets-focused .content {
  padding: 0 !important;
  min-height: 0 !important;
}

body.ai-sheets-focused .content>.container-fluid {
  padding: 0.5rem !important;
}

/* Form Builder: collapse app sidebar to maximise palette + canvas space, keep rail */
body.form-builder-focused #sidebar-wrapper {
  display: none !important;
}

/* AI Builder: full-bleed layout — no sidebar, no content padding, no page scroll */
body.ai-builder-fullbleed .sidebar-rail,
body.ai-builder-fullbleed #sidebar-wrapper {
  display: none !important;
}

body.ai-builder-fullbleed .content {
  padding: 0 !important;
  min-height: 0 !important;
}

body.ai-builder-fullbleed .content>.container-fluid {
  padding: 0 !important;
}

body.ai-builder-fullbleed {
  overflow: hidden;
}

/* AI Builder: thinking dots animation */
.ai-builder-thinking-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.ai-builder-thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-thinking-bounce 1.4s ease-in-out infinite;
}

.ai-builder-thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-builder-thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ai-thinking-bounce {

  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* AI Builder: step cards */
.ai-step-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  font-size: 0.8125rem;
}

.ai-step-card.completed {
  background: #d1e7dd;
  border-color: #badbcc;
}

.ai-step-card.error {
  background: #f8d7da;
  border-color: #f5c2c7;
}

.ai-step-card .view-file-link {
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: none;
}

.ai-step-card .view-file-link:hover {
  text-decoration: underline;
}

/* AI Builder: progress bar */
.ai-builder-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-builder-progress .progress {
  height: 3px;
  background: #e9ecef;
  border-radius: 2px;
}

.ai-builder-progress .progress-bar {
  transition: width 0.5s ease;
}

/* AI Builder: code drawer slides in from the right */
.ai-builder-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ai-builder-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.ai-builder-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  width: 55vw;
  min-width: 420px;
  max-width: calc(100vw - 120px);
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.ai-builder-drawer.open {
  transform: translateX(0);
}

/* AI Builder: rendered markdown in assistant messages */
.ai-builder-message {
  word-break: break-word;
  line-height: 1.6;
}

.ai-builder-message h1,
.ai-builder-message h2,
.ai-builder-message h3,
.ai-builder-message h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.ai-builder-message h1 {
  font-size: 1.15rem;
}

.ai-builder-message h2 {
  font-size: 1.05rem;
}

.ai-builder-message h3 {
  font-size: 0.95rem;
}

.ai-builder-message h4 {
  font-size: 0.9rem;
}

.ai-builder-message h1:first-child,
.ai-builder-message h2:first-child,
.ai-builder-message h3:first-child {
  margin-top: 0;
}

.ai-builder-message p {
  margin-bottom: 0.5rem;
}

.ai-builder-message p:last-child {
  margin-bottom: 0;
}

.ai-builder-message ul,
.ai-builder-message ol {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.ai-builder-message li {
  margin-bottom: 0.2rem;
}

.ai-builder-message code {
  background: #f0f0f3;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.ai-builder-message pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  position: relative;
}

.ai-builder-message pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
}

.ai-builder-message pre strong,
.ai-builder-message pre em,
.ai-builder-message pre del,
.ai-builder-message pre a,
.ai-builder-message pre span {
  color: inherit;
}

.ai-builder-message table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

.ai-builder-message th,
.ai-builder-message td {
  border: 1px solid #dee2e6;
  padding: 0.35rem 0.6rem;
  text-align: left;
}

.ai-builder-message th {
  background: #f8f9fa;
  font-weight: 600;
}

.ai-builder-message blockquote {
  border-left: 3px solid #dee2e6;
  padding-left: 0.75rem;
  margin: 0.5rem 0;
  color: #6c757d;
}

.ai-builder-message strong {
  font-weight: 600;
}

.ai-builder-message hr {
  border: none;
  border-top: 1px solid #dee2e6;
  margin: 0.75rem 0;
}

/* AI Builder: code block copy button */
.ai-code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 4px;
  color: #a6adc8;
  padding: 3px 7px;
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.ai-builder-message pre:hover .ai-code-copy-btn {
  opacity: 1;
}

.ai-code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* AI Builder: landing-card text inherits button hover color */
#builderLandingPanels .btn:hover .text-muted,
#builderLandingPanels .btn:hover .text-primary,
#builderLandingPanels .btn:hover .text-success,
#builderLandingPanels .btn:hover .text-dark,
#builderLandingPanels .btn:active .text-muted,
#builderLandingPanels .btn:active .text-primary,
#builderLandingPanels .btn:active .text-success,
#builderLandingPanels .btn:active .text-dark {
  color: inherit !important;
}

/* AI Builder: collapsible right sidebar */
.ai-builder-sidebar-hidden {
  width: 0 !important;
  overflow: hidden;
  border-left: none !important;
}

/* AI Builder: auto-collapse sidebar on narrow screens */
@media (max-width: 992px) {
  body.ai-builder-fullbleed [data-plugin-ai-builder-target="fileTreePanel"] {
    position: fixed;
    right: 0;
    top: 56px;
    bottom: 0;
    z-index: 1040;
    width: 320px !important;
    transition: transform 0.2s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  }

  body.ai-builder-fullbleed [data-plugin-ai-builder-target="fileTreePanel"].ai-builder-sidebar-hidden {
    transform: translateX(100%);
    width: 320px !important;
  }

  /* Reduce code drawer min-width on small screens */
  body.ai-builder-fullbleed .ai-builder-drawer {
    min-width: 300px;
    width: 80vw;
  }
}

/* AI Builder: header button overflow on narrow screens */
@media (max-width: 768px) {
  body.ai-builder-fullbleed .d-flex.gap-2>.btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }

  body.ai-builder-fullbleed .d-flex.gap-2>.btn>span:not(.spinner-border) {
    display: none;
  }
}

body.sidebar-toggled .sidebar-rail~#sidebar-wrapper .sidebar,
.sidebar-rail~#sidebar-wrapper .sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
}

/* With the sidebar-rail flex layout, the sidebar-wrapper reserves space
   for the sidebar as a flex item.  The .main element uses flex-grow: 1
   to fill the remaining width.  Override any legacy margin-left from
   AdminKit's default sidebar theme which assumed a position: fixed sidebar. */
.sidebar-rail~.main,
.sidebar-rail~#sidebar-wrapper~.main {
  margin-left: 0 !important;
}

/* Also handle AdminKit's default collapse (margin-left: -264px) */
.sidebar-rail~#sidebar-wrapper .sidebar[style*="margin-left"] {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
}

/* Below the lg breakpoint (992px), AdminKit pushes .sidebar off-screen with
   margin-left: -264px via a media query.  The sidebar-wrapper flex spacer
   still reserves 220px of width though, creating a blank white gap between
   the sidebar rail and the main content.  Collapse the wrapper to match. */
@media (max-width: 991.98px) {
  .sidebar-rail~#sidebar-wrapper {
    width: 0 !important;
    min-width: 0 !important;
  }

  .sidebar-rail~#sidebar-wrapper .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    overflow: hidden;
  }
}

/* -----------------------------------------------
   Apps Zone — Compact Icon Grid
   ----------------------------------------------- */
.sidebar-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 6px 10px;
}

.sidebar .sidebar-app-tile,
.sidebar-content .sidebar-app-tile,
a.sidebar-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 4px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #848484 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: center;
  min-height: 0;
}

.sidebar .sidebar-app-tile:hover,
.sidebar-content .sidebar-app-tile:hover,
a.sidebar-app-tile:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #333 !important;
}

.sidebar-app-icon {
  margin-bottom: 6px;
}

.sidebar-app-icon .app-icon-container {
  display: flex;
  justify-content: center;
}

/* Icons for sidebar grid */
.sidebar-app-icon .avatar-sm {
  width: 2.75rem !important;
  height: 2.75rem !important;
}

.sidebar-app-icon .avatar-sm i {
  font-size: 1.05rem !important;
}

/* Remove hover transform on icons inside sidebar tiles */
.sidebar-app-tile .app-icon-container:hover>div {
  transform: none;
  box-shadow: none;
}

.sidebar .sidebar-app-tile span,
.sidebar-content .sidebar-app-tile span,
a.sidebar-app-tile span {
  font-size: 0.7rem;
  line-height: 1.2;
  color: #848484 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* ===============================================
   BREADCRUMB STYLING
   =============================================== */

/* Breadcrumb styling for better visual hierarchy */
.breadcrumb {
  background-color: transparent;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: #6c757d;
  font-weight: 600;
}

.breadcrumb-item a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
  color: #3b7ddd;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #495057;
  font-weight: 500;
}

/* Make breadcrumbs responsive */
@media (max-width: 576px) {
  .breadcrumb {
    font-size: 0.8rem;
  }

  .breadcrumb-item {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===============================================
   KANBAN BOARD STYLING
   =============================================== */

/* Kanban Board Styles */
.kanban-board {
  min-height: 500px;
}

.kanban-column {
  min-height: 450px;
}

.kanban-header {
  border-radius: 0.375rem 0.375rem 0 0 !important;
}

.kanban-items {
  min-height: 400px;
  border-radius: 0 0 0.375rem 0.375rem !important;
  transition: background-color 0.2s ease;
}

.kanban-items.drag-over {
  background-color: #e3f2fd !important;
  border: 2px dashed #2196f3;
}

.kanban-task-card {
  position: relative;
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

.kanban-task-card:hover,
.kanban-task-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 20;
}

.kanban-task-card.dragging {
  cursor: grabbing;
  transform: rotate(5deg);
  opacity: 0.8;
  z-index: 1000;
}

.kanban-task-card[data-overdue="true"] {
  border-left: 4px solid #dc3545 !important;
}

.kanban-task-card[data-priority="critical"] {
  border-top: 3px solid #dc3545;
}

.kanban-task-card[data-priority="important"] {
  border-top: 3px solid #ffc107;
}

/* Badge styles for Kanban cards */
.badge-sm {
  font-size: 0.65rem;
  padding: 0.25rem 0.4rem;
}

/* Alert styles for compact notifications */
.alert-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Progress bar for checklist tasks */
.kanban-task-card .progress {
  height: 4px;
}

/* Responsive adjustments for Kanban */
@media (max-width: 768px) {
  .kanban-column {
    margin-bottom: 1rem;
  }

  .kanban-items {
    min-height: 300px;
  }

  .kanban-task-card {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 576px) {
  .kanban-task-card .card-body {
    padding: 0.75rem;
  }

  .kanban-task-card .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Badge soft variants - subtle background colors with darker text */
.badge-soft-primary {
  color: #0d6efd !important;
  background-color: rgba(13, 110, 253, 0.1) !important;
}

.badge-soft-secondary {
  color: #6c757d !important;
  background-color: rgba(108, 117, 125, 0.1) !important;
}

.badge-soft-success {
  color: #198754 !important;
  background-color: rgba(25, 135, 84, 0.1) !important;
}

.badge-soft-danger {
  color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.1) !important;
}

.badge-soft-warning {
  color: #fd7e14 !important;
  background-color: rgba(253, 126, 20, 0.1) !important;
}

.badge-soft-info {
  color: #0dcaf0 !important;
  background-color: rgba(13, 202, 240, 0.1) !important;
}

.badge-soft-light {
  color: #495057 !important;
  background-color: rgba(248, 249, 250, 0.1) !important;
}

.badge-soft-dark {
  color: #212529 !important;
  background-color: rgba(33, 37, 41, 0.1) !important;
}

/* ==========================================
   TOOLTIP Z-INDEX FIX FOR MODALS
   ==========================================
   Ensure Bootstrap tooltips appear above modals.
   The modal has z-index ~1055, so tooltips need to be higher.
   CRITICAL: position must NOT be static for z-index to work!
   ========================================== */

/* Force ALL tooltip elements to have proper positioning and z-index */
/* Using multiple selectors for maximum specificity */
div.tooltip,
.tooltip,
.tooltip.fade,
.tooltip.show,
.tooltip.bs-tooltip-auto,
.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-start,
.tooltip.bs-tooltip-end,
body>.tooltip,
body>div.tooltip {
  position: absolute !important;
  z-index: 1100000 !important;
}

/* Target by role attribute as fallback */
[role="tooltip"],
div[role="tooltip"] {
  position: absolute !important;
  z-index: 1100000 !important;
}

/* Target Popper.js positioned elements */
[data-popper-placement],
.tooltip[data-popper-placement] {
  position: absolute !important;
  z-index: 1100000 !important;
}

/* Tooltip inner content */
.tooltip .tooltip-inner,
.tooltip>.tooltip-inner {
  position: relative !important;
  z-index: inherit !important;
}

/* Tooltip arrow */
.tooltip .tooltip-arrow,
.tooltip>.tooltip-arrow {
  position: absolute !important;
  z-index: inherit !important;
}

/* Ensure modal structure doesn't clip tooltips appended to body */
.modal,
.modal-dialog,
.modal-content {
  overflow: visible !important;
}

/* Modal backdrop transition fixes */
.modal-backdrop {
  transition: opacity 0.2s ease-out !important;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Ensure modal transitions are consistent */
.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out;
}

/* Fix for modal backdrop timing issues */
.modal.fade {
  transition: opacity 0.2s ease-out;
}

.modal.fade:not(.show) {
  opacity: 0;
}

/* Enhanced modal-lg sizing - 80% width, 90% height */
.modal-lg {
  max-width: 80vw !important;
  width: 80vw !important;
}

.modal-lg .modal-content {
  height: 90vh !important;
  max-height: 90vh !important;
}

.modal-lg .modal-body {
  overflow-y: auto !important;
  flex: 1 !important;
}

.modal-md {
  max-width: 70vw !important;
  width: 60vw !important;
}

.modal-md .modal-content {
  height: 70vh !important;
  max-height: 70vh !important;
}

.modal-md .modal-body {
  overflow-y: auto !important;
  flex: 1 !important;
}

/* Responsive modal-lg for mobile */
@media (max-width: 768px) {
  .modal-lg {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  .modal-lg .modal-content {
    height: 85vh !important;
    max-height: 85vh !important;
  }
}

/* Staff assignment modal checkbox column spacing fix */
.staff-assignment-modal .form-check {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.staff-assignment-modal .form-check-input {
  margin-left: 0 !important;
  float: none !important;
  position: static !important;
}

/* Calendar icon styles - targeted specifically for calendar date components */
.calendar-date {
  width: 60px;
  height: 70px;
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-date .calendar-month {
  background-color: #3b7ddd;
  color: white;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.calendar-date .calendar-day {
  font-size: 28px;
  font-weight: 400;
  color: #495057;
  background-color: #f8f9fa;
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments for calendar icons */
@media (max-width: 768px) {
  .calendar-date {
    width: 50px;
    height: 60px;
  }

  .calendar-date .calendar-month {
    font-size: 10px;
    padding: 3px 0;
  }

  .calendar-date .calendar-day {
    font-size: 24px;
  }
}

/* Fix for EPMS settings pages being hidden on smaller screens */
body.settings.settings-index.authenticated .main {
  display: block !important;
}

/* Ensure settings content is always visible for EPMS */
body.settings .container-fluid {
  display: block !important;
}

/* Override AdminKit's responsive hiding of settings pages */
body.settings {
  display: block !important;
}

/* Force sidebar dropdowns transparent — uses high-specificity selectors
   to override AdminKit Pro's .sidebar-dropdown { background: #222e3c } */
.sidebar-dropdown,
.sidebar .sidebar-dropdown,
.sidebar-content .sidebar-dropdown,
nav.sidebar .sidebar-dropdown,
nav.sidebar .sidebar-content .sidebar-dropdown,
ul.sidebar-dropdown,
ul.sidebar-dropdown.collapse,
ul.sidebar-dropdown.collapse.show,
ul.sidebar-dropdown.list-unstyled,
.sidebar .collapse,
.sidebar .collapsing,
.sidebar [data-bs-parent],
.sidebar-nav .sidebar-dropdown {
  background-color: transparent !important;
  background: transparent !important;
}

.sidebar .sidebar-dropdown .sidebar-item .sidebar-link,
.sidebar .collapse .sidebar-item .sidebar-link,
.sidebar [data-bs-parent] .sidebar-link {
  background: transparent !important;
}

.mermaid {
  padding: 20px 0px 30px 0px !important;
}

.modal-body {
  background-color: #f5f7fb !important;
}

/* Scrollable modal body utility class - use with modal-dialog-scrollable for long content */
.modal-body-scrollable {
  max-height: 70vh;
  overflow-y: auto;
}

/* Fix forms inside scrollable modals - forms between modal-content and modal-body break
   Bootstrap's modal-dialog-scrollable flexbox chain, causing footer buttons to overflow
   outside the modal container on smaller viewports (ISS-20260210-713) */
.modal-dialog-scrollable .modal-content>form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.rounded-circle {
  border-radius: 50% !important;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   HRIS Employee Data - Utility Classes
   ========================================== */

/* JavaScript-controlled visibility */
.js-hidden {
  display: none !important;
}

/* Compact progress bar sizing */
.progress-compact {
  width: 150px;
  height: 25px;
}

/* ==========================================
   HRIS Phase 3 - Employee Self-Service
   Mobile Responsive Styles
   ========================================== */

/* Profile completeness widget - mobile */
@media (max-width: 768px) {
  .profile-completeness-widget {
    margin-bottom: 1rem;
  }

  .profile-completeness-widget .progress {
    height: 25px;
    font-size: 0.875rem;
  }
}

/* Emergency contacts - mobile */
@media (max-width: 768px) {
  .emergency-contact-card {
    margin-bottom: 1rem;
  }

  .emergency-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .emergency-contact-actions .btn {
    width: 100%;
  }
}

/* Update requests - mobile */
@media (max-width: 768px) {
  .update-request-card .row {
    flex-direction: column;
  }

  .update-request-card .text-end {
    text-align: left !important;
    margin-top: 1rem;
  }

  .update-request-card .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Profile edit form - mobile */
@media (max-width: 768px) {
  .profile-edit-form .col-md-6 {
    margin-bottom: 1rem;
  }

  .profile-edit-form .card-body .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Admin approval interface - mobile */
@media (max-width: 768px) {
  .admin-approval-actions {
    flex-direction: column !important;
  }

  .admin-approval-actions .form-control {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  .admin-approval-actions .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Badge sizing */
.badge-lg {
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
}

/* Status badges */
.badge.bg-warning {
  color: #000;
}

/* Fix: Ensure secondary badges always render with proper contrast.
   The CSS variable chain (--bs-secondary-rgb → bg-opacity → cascade) can
   produce near-white backgrounds in some contexts. Hardcode the correct
   gray background + white text as a defensive override. */
.badge.bg-secondary:not(.bg-opacity-10):not(.bg-opacity-25) {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* ==========================================
   CUSTOM BACKGROUND COLORS
   ========================================== */

/* Custom background colors - Bootstrap-style patterns */
.bg-purple {
  --bs-bg-opacity: 1;
  background-color: rgba(111, 66, 193, var(--bs-bg-opacity)) !important;
}

.bg-cyan {
  --bs-bg-opacity: 1;
  background-color: rgba(13, 202, 240, var(--bs-bg-opacity)) !important;
}

.bg-teal {
  --bs-bg-opacity: 1;
  background-color: rgba(32, 201, 151, var(--bs-bg-opacity)) !important;
}

.bg-indigo {
  --bs-bg-opacity: 1;
  background-color: rgba(102, 16, 242, var(--bs-bg-opacity)) !important;
}

.bg-orange {
  --bs-bg-opacity: 1;
  background-color: rgba(253, 126, 20, var(--bs-bg-opacity)) !important;
}

.bg-pink {
  --bs-bg-opacity: 1;
  background-color: rgba(214, 51, 132, var(--bs-bg-opacity)) !important;
}

/* Custom color variants for agent cards (Bootstrap-style subtle patterns) */
.bg-purple-subtle {
  background-color: rgba(111, 66, 193, 0.1) !important;
}

.text-purple {
  color: #6f42c1 !important;
}

.bg-cyan-subtle {
  background-color: rgba(13, 202, 240, 0.1) !important;
}

.text-cyan {
  color: #0dcaf0 !important;
}

.bg-teal-subtle {
  background-color: rgba(32, 201, 151, 0.1) !important;
}

.text-teal {
  color: #20c997 !important;
}

.bg-indigo-subtle {
  background-color: rgba(102, 16, 242, 0.1) !important;
}

.text-indigo {
  color: #6610f2 !important;
}

.bg-orange-subtle {
  background-color: rgba(253, 126, 20, 0.1) !important;
}

.text-orange {
  color: #fd7e14 !important;
}

.bg-pink-subtle {
  background-color: rgba(214, 51, 132, 0.1) !important;
}

.text-pink {
  color: #d63384 !important;
}

/* ==========================================
   BADGE CLASS ALIASES
   ==========================================
   These classes provide aliases to AdminKit Pro's bg-* classes
   for badge styling. Developers can use either badge-* or bg-*
   classes interchangeably.
   ========================================== */

/* Badge class aliases - map to AdminKit Pro bg-* classes */
.badge-primary {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.badge-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.badge-success {
  background-color: var(--bs-success) !important;
  color: #fff !important;
}

.badge-danger {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

.badge-warning {
  background-color: var(--bs-warning) !important;
  color: #000 !important;
}

.badge-info {
  background-color: var(--bs-info) !important;
  color: #fff !important;
}

.badge-dark {
  background-color: var(--bs-dark) !important;
  color: #fff !important;
}

.badge-light {
  background-color: var(--bs-light) !important;
  color: #000 !important;
}

/* Profile completeness progress bar */
.profile-completeness-progress {
  height: 30px;
  font-size: 1rem;
  font-weight: 600;
}

/* Update request status icons */
.update-request-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================
   OPACITY BACKGROUND TEXT COLOR FIX
   ========================================== 
   When using low-opacity backgrounds (10-25%), 
   the result is a LIGHT background color.
   This override ensures text is DARK for contrast.
   ========================================== */

/* Primary color with low opacity backgrounds */
.bg-primary.bg-opacity-10,
.bg-primary.bg-opacity-25 {
  color: #212529 !important;
}

/* Apply dark text to all child elements within low-opacity primary backgrounds */
.bg-primary.bg-opacity-10 *:not(.badge):not(.btn),
.bg-primary.bg-opacity-25 *:not(.badge):not(.btn) {
  color: inherit !important;
}

/* Ensure h1-h6 and card titles use dark text in low-opacity backgrounds */
.bg-primary.bg-opacity-10 h1,
.bg-primary.bg-opacity-10 h2,
.bg-primary.bg-opacity-10 h3,
.bg-primary.bg-opacity-10 h4,
.bg-primary.bg-opacity-10 h5,
.bg-primary.bg-opacity-10 h6,
.bg-primary.bg-opacity-10 .card-title,
.bg-primary.bg-opacity-25 h1,
.bg-primary.bg-opacity-25 h2,
.bg-primary.bg-opacity-25 h3,
.bg-primary.bg-opacity-25 h4,
.bg-primary.bg-opacity-25 h5,
.bg-primary.bg-opacity-25 h6,
.bg-primary.bg-opacity-25 .card-title {
  color: #212529 !important;
}

/* Similar fixes for other color variants */
.bg-success.bg-opacity-10,
.bg-success.bg-opacity-25,
.bg-info.bg-opacity-10,
.bg-info.bg-opacity-25,
.bg-warning.bg-opacity-10,
.bg-warning.bg-opacity-25,
.bg-danger.bg-opacity-10,
.bg-danger.bg-opacity-25,
.bg-secondary.bg-opacity-10,
.bg-secondary.bg-opacity-25 {
  color: #212529 !important;
}

/* Text-muted should remain muted even in low-opacity backgrounds */
.bg-opacity-10 .text-muted,
.bg-opacity-25 .text-muted {
  color: #6c757d !important;
}

/* Text-primary should remain primary color for emphasis */
.bg-opacity-10 .text-primary,
.bg-opacity-25 .text-primary {
  color: #3b7ddd !important;
}

/* ==========================================
   CHOICES.JS DROPDOWN ENHANCEMENTS
   ========================================== */

/* Limit dropdown height for better UX */
.choices__list--dropdown {
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Improve dropdown appearance */
.choices {
  margin-bottom: 0;
}

.choices__inner {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  min-height: 38px;
}

.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 0.375rem;
}

.choices__list--dropdown .choices__item--selectable {
  padding: 0.5rem 1rem;
}

.choices__list--dropdown .choices__item--selectable:hover {
  background-color: #f8f9fa;
}

/* Highlighted item in Choices.js dropdown (keyboard/hover focus) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #e9ecef !important;
  color: #212529 !important;
}

/* Selected item in Choices.js dropdown (currently chosen option) */
.choices__list--dropdown .choices__item--selectable.is-selected {
  background-color: #f0f7ff !important;
  color: #212529 !important;
  font-weight: 500;
  position: relative;
  padding-right: 2.5rem !important;
}

/* Checkmark indicator for selected Choices.js item */
.choices__list--dropdown .choices__item--selectable.is-selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #17a2b8;
  font-size: 0.75rem;
}

/* Combined highlighted + selected state */
.choices__list--dropdown .choices__item--selectable.is-highlighted.is-selected {
  background-color: #dbeafe !important;
  color: #212529 !important;
}

/* Fix optgroup label visibility - make category headers more readable */
/* Native select optgroup labels */
optgroup {
  color: #212529 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
  background-color: #f8f9fa !important;
  padding: 0.25rem 0 !important;
}

/* Ensure optgroup labels are readable in dark mode */
@media (prefers-color-scheme: dark) {
  optgroup {
    color: #000000 !important;
    background-color: #e9ecef !important;
  }
}

/* Choices.js dropdown group headings */
.choices__list--dropdown .choices__group .choices__heading {
  color: #212529 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  background-color: #f8f9fa !important;
  border-top: 1px solid #dee2e6 !important;
}

/* First category should not have top border */
.choices__list--dropdown .choices__group:first-child .choices__heading {
  border-top: none !important;
}

/* ==========================================
   RECRUITING AGENT - NAVIGATION TABS
   ========================================== */

/* Make selected tab background white */
.nav-tabs .nav-link.active {
  background-color: #ffffff !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
}

/* ==========================================
   QUILL EDITOR OVERRIDES (AdminKit Pro Bundle)
   ========================================== 
   
   AdminKit Pro bundles Quill CSS that needs 
   to be overridden to fix:
   1. Bullet points showing as "1•, 2•, 3•"
   2. Hyperlink tooltip misalignment
   
   These overrides MUST load after AdminKit Pro
   ========================================== */

/* FIX 1: Bullet Points and Numbered Lists */
/* Remove AdminKit's custom list markers AND Quill's .ql-ui::before markers */
.ql-editor ul>li::before,
.ql-container .ql-editor ul>li::before,
.ql-snow .ql-editor ul>li::before,
.ql-editor ol>li::before,
.ql-container .ql-editor ol>li::before,
.ql-snow .ql-editor ol>li::before,
.ql-editor li>.ql-ui::before,
.ql-container .ql-editor li>.ql-ui::before,
.ql-snow .ql-editor li>.ql-ui::before {
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the .ql-ui span entirely since it's only used for custom markers */
.ql-editor li>.ql-ui,
.ql-container .ql-editor li>.ql-ui,
.ql-snow .ql-editor li>.ql-ui {
  display: none !important;
}

/* Force browser default list styles with MAXIMUM specificity */
/* Note: Quill uses <ol> tags for BOTH bullets and numbered lists, differentiated by data-list attribute */
.ql-container .ql-editor ul,
.ql-snow .ql-editor ul,
.ql-editor ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 2.5em !important;
  margin-left: 0 !important;
  padding-inline-start: 2.5em !important;
}

/* Don't set a default list-style-type for ol since Quill uses it for both bullets and numbers */
.ql-container .ql-editor ol,
.ql-snow .ql-editor ol,
.ql-editor ol {
  list-style-position: outside !important;
  padding-left: 2.5em !important;
  margin-left: 0 !important;
  padding-inline-start: 2.5em !important;
  /* list-style-type is set by data-list attribute below */
}

.ql-container .ql-editor ul>li,
.ql-snow .ql-editor ul>li,
.ql-editor ul>li {
  list-style-type: disc !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  display: list-item !important;
  counter-reset: none !important;
  counter-increment: none !important;
}

/* ol > li without data-list attribute defaults to decimal */
.ql-container .ql-editor ol>li:not([data-list]),
.ql-snow .ql-editor ol>li:not([data-list]),
.ql-editor ol>li:not([data-list]) {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  display: list-item !important;
  counter-reset: none !important;
  counter-increment: none !important;
}

/* Override any data-list attributes that Quill uses - CRITICAL FIX */
/* Bullet lists - use FILLED disc bullets */
.ql-container .ql-editor ol>li[data-list="bullet"],
.ql-snow .ql-editor ol>li[data-list="bullet"],
.ql-editor ol>li[data-list="bullet"],
.ql-container .ql-editor li[data-list="bullet"],
.ql-snow .ql-editor li[data-list="bullet"],
.ql-editor li[data-list="bullet"] {
  list-style-type: disc !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  display: list-item !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  /* Prevent counters for bullet lists */
  counter-reset: none !important;
  counter-increment: none !important;
}

/* Numbered lists - use decimal numbers */
.ql-container .ql-editor ol>li[data-list="ordered"],
.ql-snow .ql-editor ol>li[data-list="ordered"],
.ql-editor ol>li[data-list="ordered"],
.ql-container .ql-editor li[data-list="ordered"],
.ql-snow .ql-editor li[data-list="ordered"],
.ql-editor li[data-list="ordered"] {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  display: list-item !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  /* Allow native list counters to work - do NOT set counter-increment: none */
}

/* Generic data-list items */
.ql-editor li[data-list] {
  display: list-item !important;
  padding-left: 0 !important;
}

/* Nested list indentation */
.ql-editor ul ul,
.ql-editor ol ol,
.ql-editor ul ol,
.ql-editor ol ul {
  padding-left: 2em !important;
}

/* FIX 2: Hyperlink Tooltip Positioning */
/* Constrain tooltip within editor container bounds */
.ql-tooltip,
.ql-snow .ql-tooltip {
  position: absolute !important;
  z-index: 2000 !important;
  white-space: nowrap !important;
  max-width: calc(100vw - 40px) !important;
}

/* Ensure tooltip input is visible and properly sized */
.ql-tooltip.ql-editing input[type="text"],
.ql-snow .ql-tooltip.ql-editing input[type="text"] {
  min-width: 200px !important;
  max-width: 400px !important;
  width: auto !important;
}

/* Additional Quill improvements */
.ql-editor ul li,
.ql-editor ol li {
  margin-bottom: 0.25em;
  line-height: 1.5;
}

/* Fix for indented lists */
.ql-editor li.ql-indent-1,
.ql-editor li.ql-indent-2,
.ql-editor li.ql-indent-3,
.ql-editor li.ql-indent-4,
.ql-editor li.ql-indent-5,
.ql-editor li.ql-indent-6,
.ql-editor li.ql-indent-7,
.ql-editor li.ql-indent-8,
.ql-editor li.ql-indent-9 {
  list-style-type: inherit !important;
  display: list-item !important;
}

/* Override any counter styles */
.ql-editor ul,
.ql-editor ol {
  counter-reset: none !important;
}

.ql-editor li {
  counter-increment: none !important;
}

.ql-container {
  font-size: 14px !important;
  position: relative !important;
  overflow: visible !important;
}

.ql-editor {
  min-height: 150px;
  padding: 12px 15px;
}

/* FIX: Constrain Quill editor height to prevent submit button from being pushed off screen */
/* Uses scoped class to avoid affecting other Quill editors that may need different heights */
.quill-editor-container .ql-container {
  max-height: 500px;
}

.quill-editor-container .ql-editor {
  max-height: 500px;
  overflow-y: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

  .ql-tooltip.ql-editing,
  .ql-snow .ql-tooltip.ql-editing {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    min-width: auto !important;
    width: calc(100% - 20px) !important;
  }

  .ql-editor ul,
  .ql-editor ol {
    padding-left: 1.5em !important;
  }
}

/* Dark mode support */
:root[data-theme="dark"] .ql-tooltip {
  background-color: #2c3e50 !important;
  color: #ecf0f1 !important;
  border-color: #34495e !important;
}

:root[data-theme="dark"] .ql-tooltip input[type="text"] {
  background-color: #34495e !important;
  color: #ecf0f1 !important;
  border-color: #4a5f7f !important;
}

:root[data-theme="dark"] .ql-tooltip .ql-action,
:root[data-theme="dark"] .ql-tooltip .ql-remove {
  color: #3498db !important;
}

:root[data-theme="dark"] .ql-tooltip .ql-action:hover,
:root[data-theme="dark"] .ql-tooltip .ql-remove:hover {
  color: #5dade2 !important;
}

/* ==========================================
   NATIVE HTML5 DETAILS/SUMMARY STYLING
   ========================================== 
   Global styles for expand/collapse using
   native HTML5 <details> and <summary> elements.
   No JavaScript required.
   ========================================== */

/* Hide default browser disclosure marker */
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

/* Chevron rotation animation */
details summary .fa-chevron-down,
details summary .fa-chevron-right {
  transition: transform 0.2s ease;
}

details[open] summary .fa-chevron-down {
  transform: rotate(180deg);
}

details[open] summary .fa-chevron-right {
  transform: rotate(90deg);
}

/* Smooth content reveal animation */
details[open]>*:not(summary) {
  animation: detailsSlideDown 0.2s ease-out;
}

@keyframes detailsSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Table padding inside flush cards (card-body p-0) — align first/last cells with card-header */
.card-body.p-0>.table th:first-child,
.card-body.p-0>.table td:first-child,
.card-body.p-0>.table-responsive>.table th:first-child,
.card-body.p-0>.table-responsive>.table td:first-child {
  padding-left: 1rem;
}

.card-body.p-0>.table th:last-child,
.card-body.p-0>.table td:last-child,
.card-body.p-0>.table-responsive>.table th:last-child,
.card-body.p-0>.table-responsive>.table td:last-child {
  padding-right: 1rem;
}

/* Card integration - seamless styling when used inside cards */
.card>details>summary.card-header {
  cursor: pointer;
  user-select: none;
}

.card>details>summary.card-header:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Focus state for accessibility */
details summary:focus {
  outline: 2px solid var(--bs-primary, #3b7ddd);
  outline-offset: -2px;
}

details summary:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   Shared Stat & Card Utility Classes
   Used across marketplace app dashboards
   (Service Desk, Analytics, Agent Dashboard, etc.)
   ============================================ */

/* Override AdminKit Pro .stat with larger rounded-square variant.
   AdminKit default is 40px circle with hardcoded blue bg.
   This version is theme-aware and matches the app dashboard pattern. */
.stat {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Stat icon — larger variant for featured/hero cards */
.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Gradient backgrounds for featured cards */
.bg-gradient-primary {
  background: linear-gradient(135deg, #3b7ddd 0%, #2c6bc9 100%) !important;
}

.bg-gradient-success {
  background: linear-gradient(135deg, #1cbb8c 0%, #17a275 100%) !important;
}

/* Semi-transparent white text for use on gradient/dark cards */
.text-white-80 {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Job Board - Quill Editor Content Normalization
   ============================================ */
.job-content p {
  margin-bottom: 0.5rem;
}

.job-content p:empty {
  display: none;
}

.job-content p:has(> br:only-child) {
  display: none;
}

.job-content ul,
.job-content ol {
  margin-bottom: 0.5rem;
  padding-left: 2rem;
}

.job-content li {
  margin-bottom: 0.25rem;
}

.job-content>p:first-child {
  margin-top: 0;
}

.job-content>p:last-child {
  margin-bottom: 0;
}

.job-content p:empty+p:empty {
  display: none;
}

/* ============================================
   Job Board - Candidate Profile Styles
   ============================================ */

/* SMS Conversation Styles */
.job-board-candidate .sms-conversation {
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: #f8f9fa;
}

.job-board-candidate .sms-message {
  transition: background-color 0.2s ease;
}

.job-board-candidate .sms-message[data-direction="inbound"] {
  margin-right: 15%;
}

.job-board-candidate .sms-message[data-direction="outbound"] {
  margin-left: 15%;
}

.job-board-candidate .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.job-board-candidate .stat-desc {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 4px;
}

/* ============================================
   Job Board - All Candidates Table
   ============================================ */

.candidate-row,
.template-row {
  cursor: pointer;
}

.template-row {
  transition: background-color 0.2s ease-in-out;
}

.template-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================
   Job Board - Knowledge Base Video Styles
   ============================================ */

.job-board-kb-video .thumbnail-option {
  transition: all 0.2s ease;
}

.job-board-kb-video .thumbnail-option:hover {
  border-color: var(--bs-primary) !important;
  transform: scale(1.02);
}

.job-board-kb-video .video-player-container video {
  object-fit: contain;
  background: #000;
}

.job-board-kb-video .transcript-text {
  font-size: 0.95rem;
  color: var(--bs-gray-700);
}

/* Fix dropdown overflow in transcript header */
.job-board-kb-video .card-header {
  overflow: visible !important;
}

.job-board-kb-video .card-header .dropdown-menu {
  z-index: 1050;
  position: absolute;
}

/* Toast animations for translation feedback */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ============================================
   Job Board - Background Check Timeline
   ============================================ */

.job-board-background-check .timeline {
  list-style: none;
  padding: 0;
  position: relative;
}

.job-board-background-check .timeline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: #dee2e6;
}

.job-board-background-check .timeline-item {
  padding-left: 30px;
  padding-bottom: 20px;
  position: relative;
}

.job-board-background-check .timeline-item:before {
  content: '';
  position: absolute;
  left: -4px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d6efd;
  border: 2px solid #fff;
}

.job-board-background-check .timeline-item:last-child {
  padding-bottom: 0;
}

/* ============================================
   Job Board - Job Alerts
   ============================================ */

.job-board-alerts .form-label .text-danger {
  display: inline;
  margin-left: 0.25rem;
}

.job-board-alerts #phone-field-container {
  transition: all 0.3s ease;
}

.job-board-alerts #phone-field-container.d-none {
  display: none !important;
}

.job-board-alerts .btn-linkedin {
  background-color: #0A66C2;
  border-color: #0A66C2;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.2s ease;
}

.job-board-alerts .btn-linkedin:hover,
.job-board-alerts .btn-linkedin:focus {
  background-color: #004182;
  border-color: #004182;
  color: #ffffff;
}

/* ============================================
   EPMS (Employee Performance Management) Styles
   ============================================ */

/* --- Timeline Component --- */
.epms-timeline {
  position: relative;
  padding-left: 30px;
}

.epms-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dee2e6;
}

.epms-timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.epms-timeline-marker {
  position: absolute;
  left: -22px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #dee2e6;
}

.epms-timeline-content {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #007bff;
}

.epms-timeline-content h6 {
  font-size: 14px;
  margin-bottom: 2px;
}

/* Timeline (compact variant) */
.epms-timeline-compact {
  position: relative;
  padding-left: 20px;
}

.epms-timeline-compact::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dee2e6;
}

.epms-timeline-compact .epms-timeline-marker {
  left: -16px;
}

.epms-timeline-compact .epms-timeline-content {
  padding-left: 20px;
  background: transparent;
  border-left: none;
}

/* Timeline dot variant (for reward letters) */
.epms-timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Timeline inline variant (for analytics, goal progress) */
.epms-timeline-inline {
  border-left: 2px solid #e9ecef;
  padding-left: 1rem;
  position: relative;
}

.epms-timeline-inline::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  background-color: #6c757d;
  border-radius: 50%;
}

/* --- Avatar Component --- */
.epms-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  background: #6c757d;
}

.epms-avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.epms-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.epms-avatar-md {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.epms-avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/* --- Card Hover Effect --- */
.epms-card-hover {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.epms-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Goal Components --- */
.epms-goal-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid #e9ecef;
}

.epms-goal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.epms-goal-priority-low {
  border-left: 4px solid #17a2b8;
}

.epms-goal-priority-medium {
  border-left: 4px solid #ffc107;
}

.epms-goal-priority-high {
  border-left: 4px solid #fd7e14;
}

.epms-goal-priority-critical {
  border-left: 4px solid #dc3545;
}

.epms-goal-status-draft {
  background-color: #e2e3e5;
}

.epms-goal-status-in_review {
  background-color: #cce5ff;
}

.epms-goal-status-active {
  background-color: #d4edda;
}

.epms-goal-status-completed {
  background-color: #d1ecf1;
}

.epms-goal-status-on_hold {
  background-color: #fff3cd;
}

.epms-goal-status-cancelled {
  background-color: #f8d7da;
}

/* --- Workflow Steps (Goal/Review Progress) --- */
.epms-workflow-steps {
  position: relative;
}

.epms-workflow-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
}

.epms-workflow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 35px;
  width: 2px;
  height: calc(100% + 0.5rem);
  background-color: #dee2e6;
  z-index: 1;
}

.epms-workflow-step.completed:not(:last-child)::after {
  background-color: #198754;
}

.epms-workflow-step.active:not(:last-child)::after {
  background: linear-gradient(to bottom, #198754 50%, #dee2e6 50%);
}

.epms-step-indicator {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f8f9fa;
  border: 2px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.epms-workflow-step.active .epms-step-indicator {
  background-color: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.epms-workflow-step.completed .epms-step-indicator {
  background-color: #198754;
  border-color: #198754;
}

.epms-step-content {
  flex: 1;
  padding-top: 2px;
}

.epms-step-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: #495057;
}

.epms-workflow-step.active .epms-step-title {
  color: #0d6efd;
}

.epms-workflow-step.completed .epms-step-title {
  color: #198754;
}

.epms-step-description {
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.3;
}

.epms-workflow-step.active .epms-step-description {
  color: #495057;
}

/* --- Competency Rating --- */
.epms-competency-rating {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 1rem;
}

.epms-competency-rating:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.epms-rating-stars .fa-star {
  font-size: 0.875rem;
}

/* --- Enhanced Tabs --- */
.epms-enhanced-tabs .nav-link {
  border-bottom: 3px solid transparent;
  color: #6c757d;
  font-weight: 500;
}

.epms-enhanced-tabs .nav-link.active {
  border-bottom-color: #0d6efd;
  color: #0d6efd;
  background-color: transparent;
}

.epms-enhanced-tabs .nav-link:hover {
  border-bottom-color: #0d6efd;
  color: #0d6efd;
}

/* --- Workflow Icon --- */
.epms-workflow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  font-size: 0.625rem;
}

/* --- Progress Circle --- */
.epms-progress-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.epms-progress-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.epms-progress-percentage {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

/* --- Progress Update Item --- */
.epms-progress-update-item {
  transition: all 0.3s ease;
  border: 1px solid #e9ecef !important;
}

.epms-progress-update-item:hover {
  border-color: #0d6efd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Suggestion Card (Feedback Nominations) --- */
/* Generic classes used by smart_suggestions_controller.js */
.suggestion-card {
  transition: all 0.2s ease;
  border: 1px solid #dee2e6;
}

.suggestion-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transform: translateY(-2px);
}

.suggestion-card.border-success {
  border-color: #198754 !important;
  background-color: #f8f9fa !important;
}

.suggestion-category {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1rem;
}

.suggestion-category:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- Select2 Employee Search Styling --- */
.epms-select2 .select2-container {
  width: 100% !important;
}

.epms-select2 .select2-selection--multiple {
  min-height: 42px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.epms-select2 .select2-selection__choice {
  background-color: #e7f1ff;
  border: 1px solid #b6d4fe;
  border-radius: 4px;
  color: #084298;
  padding: 4px 8px;
  margin: 2px 4px;
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
  gap: 6px;
}

.epms-select2 .select2-selection__choice__remove {
  color: #6c757d;
  font-size: 14px;
  cursor: pointer;
  order: -1 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  border: none !important;
  background: none !important;
}

.epms-select2 .select2-selection__choice__remove:hover {
  color: #dc3545;
}

.epms-select2 .select2-selection__clear {
  display: none !important;
}

.epms-select2 .select2-selection__choice__display {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide "Searching..." loading message in Select2 dropdown */
.epms-select2 .select2-results__option--loading {
  display: none !important;
}

/* --- Turbo Frame Loading State --- */
.epms-turbo-frame {
  transition: opacity 0.15s ease-out;
}

.epms-turbo-frame[busy],
.epms-turbo-frame.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Stats Card (Gradient) --- */
.epms-stats-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 1rem;
}

.epms-stats-card .card-body {
  padding: 1.5rem;
}

.epms-stats-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.epms-stats-label {
  font-size: 0.875rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Filter Card --- */
.epms-filter-card {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
}

.epms-btn-filter {
  background-color: white;
  border: 1px solid #ced4da;
  color: #495057;
  transition: all 0.2s ease;
}

.epms-btn-filter:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

.epms-btn-filter.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: white;
}

/* --- Rating Section (Performance Reviews) --- */
.epms-rating-section {
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.epms-rating-section:hover {
  background-color: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* --- Disabled Submit Button --- */
.epms-disabled-submit-btn {
  opacity: 0.6 !important;
  position: relative;
}

.epms-disabled-submit-btn:hover {
  opacity: 0.8 !important;
  transform: none !important;
}

/* --- Deadline Item --- */
.epms-deadline-item {
  transition: background-color 0.2s;
}

.epms-deadline-item:hover {
  background-color: #f8f9fa;
}

/* --- Collapse Toggle --- */
.epms-collapse-toggle {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.epms-collapse-toggle.collapsed {
  transform: rotate(-90deg);
}

/* --- Pulse Ring Animation (Goals) --- */
@keyframes epms-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* --- Chevron Rotate (Collapse Sections) --- */
.epms-chevron-rotate {
  transition: transform 0.3s ease;
}

.show~.card-header .epms-chevron-rotate,
.card-header[aria-expanded="true"] .epms-chevron-rotate {
  transform: rotate(180deg);
}

/* --- Row Fade In Animation --- */
@keyframes epms-row-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.epms-row-animate {
  animation: epms-row-fade-in 0.2s ease-out;
}

/* --- Wizard Navigation (inline bar) --- */
.epms-wizard-navigation .wizard-nav-bar {
  flex-wrap: nowrap;
  overflow: hidden;
}

.epms-wizard-navigation .wizard-step-pill {
  width: 20px;
  height: 20px;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.epms-wizard-navigation .wizard-step-chevron {
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* Category description textarea: start compact, resize vertically */
.category-desc {
  resize: vertical;
  min-height: 31px;
}

.epms-wizard-navigation .wizard-step-label {
  font-size: 0.75rem;
  display: none;
}

.epms-wizard-navigation .wizard-nav-steps {
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

.epms-wizard-navigation .wizard-nav-actions {
  flex-shrink: 0;
}

/* Only show step labels on wide screens (accounts for sidebar ~220px) */
@media (min-width: 1500px) {
  .epms-wizard-navigation .wizard-step-label {
    display: inline !important;
  }
}

/* Small screens: keep single row, hide title and divider, shrink elements */
@media (max-width: 576px) {
  .epms-wizard-navigation .wizard-nav-title,
  .epms-wizard-navigation .wizard-nav-divider {
    display: none !important;
  }
  .epms-wizard-navigation .wizard-step-chevron {
    font-size: 0.5rem;
  }
  .epms-wizard-navigation .wizard-nav-steps {
    gap: 0.25rem !important;
  }
  .epms-wizard-navigation .wizard-nav-actions {
    padding-left: 0.5rem !important;
  }
}

/* Assessment field rows: stack vertically on small screens */
@media (max-width: 768px) {
  .field-item .d-flex.align-items-start.gap-2 {
    flex-wrap: wrap;
  }
  .field-item .d-flex.align-items-start.gap-2 > .flex-grow-1 {
    flex-basis: 100%;
    margin-bottom: 0.25rem;
  }
  .field-item .d-flex.align-items-start.gap-2 > .flex-shrink-0:last-child {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: 0.25rem;
  }
  .field-item .d-flex.align-items-start.gap-2 > div[style*="width: 25%"] {
    width: 100% !important;
    margin-bottom: 0.25rem;
  }
}

/* --- PDF Styles (Performance Review Score Export) --- */
.epms-pdf .page-break {
  page-break-before: always;
}

.epms-pdf-section {
  margin: 20px 0;
}

.epms-pdf-title {
  font-size: 24px;
  color: #333;
  border-bottom: 3px solid #007bff;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.epms-pdf-subtitle {
  font-size: 18px;
  color: #555;
  margin-top: 20px;
  margin-bottom: 10px;
}

.epms-pdf-summary-box {
  background: #f8f9fa;
  border: 2px solid #007bff;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.epms-pdf-score-display {
  margin-top: 15px;
}

.epms-pdf-score-value {
  font-size: 48px;
  font-weight: bold;
  color: #007bff;
}

.epms-pdf-score-scale {
  font-size: 18px;
  color: #666;
  margin-top: 5px;
}

.epms-pdf-score-label {
  font-size: 16px;
  color: #28a745;
  font-weight: bold;
  margin-top: 10px;
}

.epms-pdf-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.epms-pdf-table th,
.epms-pdf-table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}

.epms-pdf-table thead {
  background: #007bff;
  color: white;
}

.epms-pdf-table tbody tr:nth-child(even) {
  background: #f8f9fa;
}

.epms-pdf-comment-box {
  background: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 15px;
  margin: 10px 0;
}

.epms-pdf-comments {
  margin-top: 20px;
}

/* --- Responsive Overrides --- */
@media (max-width: 768px) {
  .epms-responsive-stack .d-flex.gap-2 {
    flex-direction: column;
    gap: 0.5rem;
  }

  .epms-responsive-stack .row.text-center .col-4,
  .epms-responsive-stack .row.text-center .col-6 {
    margin-bottom: 0.5rem;
  }
}

/* --- Alert Small --- */
.epms-alert-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* --- Help Sidepanel (shared) --- */
.epms-help-sidepanel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1060;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.epms-help-sidepanel.open {
  right: 0;
}

.epms-help-sidepanel-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

.epms-help-sidepanel-header h5 {
  margin: 0;
  font-weight: 600;
}

.epms-help-sidepanel-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

.epms-help-sidepanel-body h6 {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

/* --- Custom Scrollbar --- */
.epms-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.epms-custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.epms-custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.epms-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.epms-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* =====================================================
   AI Reporting Agent
   ===================================================== */

/* Details/summary: hide native disclosure triangle and style as card */
.reporting-agent-details>summary {
  list-style: none;
  cursor: pointer;
}

.reporting-agent-details>summary::-webkit-details-marker {
  display: none;
}

/* Rotate chevron icon when details is open */
.reporting-agent-details[open]>summary .fa-chevron-down {
  transform: rotate(180deg);
}

.reporting-agent-details>summary .fa-chevron-down {
  transition: transform 0.2s ease;
}

/* Query DSL pre block max height */
.reporting-agent-query-pre {
  max-height: 300px;
  overflow-y: auto;
}

/* Scrollable table container — must beat dropdown_fixes.css .table-responsive { overflow: visible !important } */
.reporting-agent-table-scroll.table-responsive {
  max-height: 500px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Sticky table header cells — must beat Bootstrap's .table > :not(caption) > * > * */
.table .reporting-agent-sticky-th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 2px 0 #dee2e6 !important;
}

/* =====================================================
   Ask AI
   ===================================================== */

/* History timeline */
.ask-ai-timeline {
  position: relative;
  padding-left: 30px;
}

.ask-ai-timeline .timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.ask-ai-timeline .timeline-item:not(.timeline-item-last)::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 30px;
  bottom: -20px;
  width: 2px;
  background-color: #dee2e6;
}

.ask-ai-timeline .timeline-marker {
  position: absolute;
  left: -30px;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: white;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.ask-ai-timeline .timeline-content {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ask-ai-user-message {
  background-color: #e3f2fd;
  padding: 10px 15px;
  border-radius: 15px;
  border-top-right-radius: 5px;
  display: inline-block;
  max-width: 85%;
}

.ask-ai-assistant-message {
  background-color: #f1f8e9;
  padding: 10px 15px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  display: inline-block;
  max-width: 85%;
}

.ask-ai-timeline .message-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Test suite row colors */
.test-row-passed {
  background-color: rgba(25, 135, 84, 0.05);
}

.test-row-failed {
  background-color: rgba(220, 53, 69, 0.05);
}

.test-row-running {
  background-color: rgba(13, 110, 253, 0.1);
}

#results-table tbody tr {
  transition: background-color 0.2s;
}

/* Chat interface */
.ask-ai-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

.ask-ai-container .messages-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.ask-ai-container .messages {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ask-ai-container .message {
  max-width: 80%;
}

.ask-ai-container .message-user {
  align-self: flex-end;
  text-align: right;
}

.ask-ai-container .message-assistant {
  align-self: flex-start;
}

.ask-ai-container .message-content {
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.ask-ai-container .message-user .message-content {
  background-color: #007bff;
  color: white;
}

.ask-ai-container .message-assistant .message-content {
  background-color: #f0f0f0;
  color: #333;
}

/* Enhanced markdown styling */
.ask-ai-container .message-content pre {
  background-color: #282c34;
  color: #e6e6e6;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  margin: 1rem 0;
}

.ask-ai-container .message-content code {
  background-color: rgba(0, 0, 0, 0.07);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
}

.ask-ai-container .message-content pre code {
  background-color: transparent;
  padding: 0;
}

.ask-ai-container .message-content ul,
.ask-ai-container .message-content ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

.ask-ai-container .message-content li {
  margin-bottom: 0.4rem;
}

.ask-ai-container .message-content p {
  margin-bottom: 0.75rem;
}

.ask-ai-container .message-content a {
  color: #0266d6;
  text-decoration: underline;
}

.ask-ai-container .message-content blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
  color: #555;
}

.ask-ai-container .message-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.ask-ai-container .message-content th,
.ask-ai-container .message-content td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}

.ask-ai-container .message-content th {
  background-color: #f5f5f5;
}

.ask-ai-container .system-message {
  align-self: center;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.9rem;
}

.ask-ai-container .system-message.info {
  background-color: #d1ecf1;
  color: #0c5460;
}

.ask-ai-container .system-message.error {
  background-color: #f8d7da;
  color: #721c24;
}

.ask-ai-container .message-form-container {
  padding-top: 0.5rem;
}

/* Function call styling */
.ask-ai-container .function-call {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-family: monospace;
}

.ask-ai-container .function-result,
.ask-ai-container .function-error {
  font-size: 0.9rem;
}

/* Help examples styling */
.help-examples-container {
  width: 100%;
}

.help-header {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.75rem;
}

.help-agents-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.help-agent-group {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
}

.help-agent-header {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

.help-example-cards {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: #f8f9fa;
}

.help-example-card {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-size: 0.875rem;
  color: #495057;
}

.help-example-card:hover {
  background: #e9ecef;
  border-color: #ced4da;
  transform: translateX(2px);
}

.help-example-card:active {
  transform: translateX(0);
}

.help-example-card i {
  flex-shrink: 0;
}

.help-example-card span {
  flex: 1;
}

/* Additional color classes for agents */
.bg-purple-subtle {
  background-color: rgba(111, 66, 193, 0.1);
}

.text-purple {
  color: #6f42c1;
}

.bg-cyan-subtle {
  background-color: rgba(13, 202, 240, 0.1);
}

.text-cyan {
  color: #0dcaf0;
}

.bg-teal-subtle {
  background-color: rgba(32, 201, 151, 0.1);
}

.text-teal {
  color: #20c997;
}

.bg-indigo-subtle {
  background-color: rgba(102, 16, 242, 0.1);
}

.text-indigo {
  color: #6610f2;
}

.bg-orange-subtle {
  background-color: rgba(253, 126, 20, 0.1);
}

.text-orange {
  color: #fd7e14;
}

.help-examples-message .message-content {
  max-width: 100%;
  padding: 1rem;
}

/* Voice mode styles */
.transcript-container {
  font-size: 0.875rem;
}

.transcript-line {
  line-height: 1.4;
}

[data-voice-mode-target="statusBadge"].listening {
  animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

[data-voice-mode-target="toggle"].btn-danger {
  animation: pulse-active 2s infinite;
}

@keyframes pulse-active {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
}

/* Processing state animation */
[data-voice-mode-target="statusBadge"].processing-pulse {
  animation: processing-glow 1.2s ease-in-out infinite;
}

@keyframes processing-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 8px 4px rgba(255, 193, 7, 0.3);
    transform: scale(1.1);
  }
}

/* TomSelect: ensure dropdown renders above Bootstrap modals when appended to body */
body>.ts-dropdown,
body>.ts-dropdown.form-control,
body>.ts-dropdown.form-select {
  z-index: 10502 !important;
}

/* TomSelect: clear button styling for Bootstrap 5 compatibility */
.ts-wrapper .btn-ts-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
  color: #6c757d;
  opacity: 0.7;
}

.ts-wrapper .btn-ts-clear:hover {
  opacity: 1;
  color: #dc3545;
}

/* Prevent TomSelect wrapper from inheriting form-select padding/arrow when enhanced */
.ts-wrapper.form-select-wrapper {
  background-image: none;
}

/* TomSelect: hide original <select> once enhanced (missing from sysadmin CSS bundle) */
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
  height: 1px !important;
}

/* Turbo Drive progress bar — visible feedback during page navigation */
.turbo-progress-bar {
  height: 3px;
  background-color: var(--bs-primary, #3b7ddd);
  z-index: 2147483647;
}