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

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

.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-block !important;
  vertical-align: middle !important;
}

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

/* Fix for text wrapping in alerts */
.alert-content {
  white-space: nowrap !important;
  display: inline !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;
}

.sidebar-dropdown .sidebar-link {
  background: #222e3c;
  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;
}

.navbar {
  --bs-navbar-padding-y: 0.4rem !important;
}

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

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

/* 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: 100vh !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.25rem;
  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.25rem;
  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: 9999;
}

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

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

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

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

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

/* 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.25rem !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.25rem !important;
  min-height: 38px !important;
}

/* Fix for Safari/iOS specific issues */
.select2-container--open {
  z-index: 9999 !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;
}

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

canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 300px;
  display: block !important;
}

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

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

/* 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: 100% !important;
  margin: 1rem auto !important;
  max-width: 200px;
  overflow: hidden !important;
  /* Prevent content from causing growth */
}

.gauge-canvas {
  display: block !important;
  max-width: 100% !important;
  height: 140px !important;
  /* Fixed height */
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
}

/* Make sure the percentage value displays correctly */
.gauge-container .position-absolute {
  z-index: 10 !important;
}

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

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

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

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

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

  .gauge-container,
  .gauge-canvas {
    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;
  border-right: 1px solid #ddd;
}

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

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

/* Business hours styling */
.business-hours {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Morning hours styling */
.morning-hours {
  background-color: rgba(255, 248, 220, 0.3);
}

/* Night hours styling */
.night-hours {
  background-color: rgba(240, 248, 255, 0.3);
}

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

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

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

.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/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-solid-900.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-regular-400.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-brands-400.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-brands-400.woff") format("woff");
}

/* 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/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-thin-100.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-thin-100.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-light-300.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-light-300.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-regular-400.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-solid-900.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 6 Duotone";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-duotone-900.woff2") format("woff2"),
    url("/assets/vendor/fontawesome-pro-6.7.2-web/webfonts/fa-duotone-900.woff") format("woff");
}

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

.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 */
.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 */
.sidebar-dropdown .sidebar-item .sidebar-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-color) !important;
}

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

.sidebar-chevron.rotated {
  transform: rotate(90deg);
}

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

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

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