/* 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;
}

.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. */
body.authenticated {
  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;
}

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 {
  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: block;
  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: block;
  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: block;
  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: block;
  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: block;
  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: block;
  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: block;
  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: block;
  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 {
  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;
}

/* 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: #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: #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;
}

.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;
}

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 {
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

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

.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;
  justify-content: center;
  align-items: center;
}

.calendar-date .calendar-month {
  background-color: #3b7ddd;
  color: white;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  line-height: 1;
}

.calendar-date .calendar-day {
  font-size: 28px;
  font-weight: 400;
  line-height: 46px;
  color: #495057;
  background-color: #f8f9fa;
  width: 100%;
  margin: 0;
  flex: 1;
  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: 12px;
    padding: 1px 0;
  }

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

/* 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;
}

/* ==========================================
   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;
}

/* 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 --- */
.epms-wizard-navigation .step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.epms-wizard-navigation .step-item:hover:not(.disabled) {
  background-color: #f8f9fa;
  transform: translateY(-2px);
}

.epms-wizard-navigation .step-item.active {
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
}

.epms-wizard-navigation .step-item.completed {
  background-color: #e8f5e8;
}

.epms-wizard-navigation .step-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.epms-wizard-navigation .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
  border: 2px solid #dee2e6;
  background-color: white;
}

.epms-wizard-navigation .step-item.active .step-circle {
  background-color: #2196f3;
  color: white;
  border-color: #2196f3;
}

.epms-wizard-navigation .step-item.completed .step-circle {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}

.epms-wizard-navigation .step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.epms-wizard-navigation .step-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  line-height: 1.2;
}

.epms-wizard-navigation .step-item.active .step-title {
  color: #2196f3;
  font-weight: 600;
}

.epms-wizard-navigation .step-item.completed .step-title {
  color: #4caf50;
}

.epms-wizard-navigation .step-number {
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .epms-wizard-navigation .step-title {
    font-size: 0.75rem;
  }

  .epms-wizard-navigation .step-circle {
    width: 32px;
    height: 32px;
  }
}

/* --- 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;
}

/* =====================================================
   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);
  }
}