/* Daily Performance CSS Fixes */

/* Fix horizontal scrolling by ensuring content only scrolls vertically */
html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: #f8f7fa;
}

/* Layout structure fixes */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.layout-container {
  display: flex;
  min-height: calc(100vh - 60px); /* Account for navbar height */
  width: 100%;
}

/* Fix navbar avatar alignment and size */
.navbar-nav .dropdown-user .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

.navbar-nav .dropdown-user .dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem;
}

/* Fix user dropdown text alignment */
.navbar-nav .dropdown-user .dropdown-toggle > div {
  display: flex;
  flex-direction: column;
}

/* Ensure navbar user dropdown text doesn't overflow */
.navbar-nav .dropdown-user .dropdown-toggle span, 
.navbar-nav .dropdown-user .dropdown-toggle small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* Fix container width and alignment to match navbar */
.container-fluid,
.container-xxl {
  max-width: 1440px;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Fix content width and alignment */
.content-wrapper {
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

.content-body {
  padding: 0 1.5rem 1.5rem;
}

/* Better align navbar and content */
.layout-navbar.container-xxl {
  max-width: 1440px;
  width: 100%;
}

.layout-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure cards align properly */
.card {
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
  border: none;
  border-radius: 0.5rem;
}

.card-body {
  padding: 1.5rem;
}

/* Fix chart container heights */
#chart-compliance,
#chart-performance,
#pie-chart-reason {
  min-height: 300px;
  margin: 20px 0;
}

/* Fix chart legend alignment */
.highcharts-legend-item text {
  font-weight: normal !important;
}

/* Fix card heights to be consistent */
.card.h-100 {
  height: 100% !important;
}

/* Fix table styling in daily performance table */
#dailyPerformanceTable {
  width: 100%;
  border-collapse: collapse;
}

#dailyPerformanceTable th,
#dailyPerformanceTable td {
  padding: 8px;
  vertical-align: middle;
}

/* Fix alignment issues in the table */
#dailyPerformanceTable th[rowspan],
#dailyPerformanceTable td[rowspan] {
  vertical-align: middle;
}

/* Add proper spacing for status indicators */
.rounded-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

/* Fix tooltip styling */
.tooltip-inner {
  max-width: 250px;
  padding: 8px 12px;
  background-color: #2F2B3D;
  border-radius: 4px;
}

/* Fix chart size in performance table */
[id^="chart_"] {
  height: 100px !important;
  width: 100px !important;
  display: inline-block;
}

/* Fix pagination styling */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.pagination .page-item {
  margin: 0 2px;
}

.pagination .page-item .page-link {
  position: relative;
  display: block;
  padding: 0.375rem 0.75rem;
  color: #5a8dee;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.pagination .page-item.active .page-link {
  background-color: #5a8dee;
  color: white;
  border-color: #5a8dee;
}

/* Fix button styles for compliance/performance/reason sections */
.btn-comp,
.btn-reason,
.btn-performance {
  font-size: 0.75rem;
  background-color: rgba(47, 43, 61, 0.06) !important;
  border: 1px solid #A5A3AB;
  color: #A5A3AB;
  z-index: 2;
  transition: all 0.2s ease;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  margin-right: 5px;
}

.btn-comp-active,
.btn-reason-active,
.btn-performance-active {
  font-size: 0.75rem;
  background-color: #d1f7d3 !important;
  border: 1px solid #8ae08f;
  color: #31A136;
  z-index: 2;
  transition: all 0.2s ease;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  margin-right: 5px;
}

/* Fix filter sidebar */
#offcanvasSidebar {
  width: 350px;
  z-index: 1050;
}

/* Fix selectpicker dropdown styling */
.bootstrap-select .dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}

.bootstrap-select .dropdown-menu li a {
  padding: 0.5rem 1rem;
}

/* Fix status colors for store status */
.bg-success {
  background-color: #31A136 !important;
}

.bg-warning {
  background-color: #FF9F43 !important;
}

.bg-danger {
  background-color: #EA5455 !important;
}

/* Fix small font size for details */
.fs-tiny {
  font-size: 0.7rem;
}

/* Fix overlay for sidebar */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

/* Make sure tab content is visible */
.tab-content > .tab-pane.show.active {
  display: block;
}

/* Fix tab navigation */
.nav-tabs {
  border-bottom: 1px solid #d9dee3;
  margin-bottom: 1rem;
}

.nav-tabs .nav-item .nav-link {
  color: #697a8d;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 1.25rem;
  position: relative;
  transition: all 0.2s ease;
}

.nav-tabs .nav-item .nav-link.active {
  color: #696cff;
  background: transparent;
}

.nav-tabs .nav-item .nav-link.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #696cff;
}

.nav-tabs .nav-link:focus {
  outline: none;
  box-shadow: none;
}

/* Fix chart tooltip positioning */
.highcharts-tooltip {
  z-index: 100;
}

/* Fix table spacing in the daily performance detail */
.table-responsive {
  overflow-x: auto;
}

/* Ensure proper centering of chart labels */
.highcharts-data-labels text {
  text-anchor: middle !important;
}

/* Fix filter button styling */
#sidebarToggleBtn {
  border-color: #0870D0;
}

#sidebarToggleBtn span {
  color: #0870D0;
}

/* Fix for mobile view */
@media (max-width: 767.98px) {
  .btn-comp, 
  .btn-reason, 
  .btn-performance,
  .btn-comp-active, 
  .btn-reason-active, 
  .btn-performance-active {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    margin-right: 2px;
  }
  
  #chart-compliance,
  #chart-performance,
  #pie-chart-reason {
    min-height: 250px;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .container-fluid,
  .container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .navbar-nav .dropdown-user .dropdown-toggle span, 
  .navbar-nav .dropdown-user .dropdown-toggle small {
    max-width: 100px;
  }
}