/* ========================================
   VARIANCE PAGE STYLES
   ======================================== */

/* ========================================
   PAGE TITLE & HEADER STYLES
   ======================================== */

/* Variance header styling */
.variance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.variance-header > div:first-child {
  display: flex;
  align-items: center;
}

.variance-header span {
  font-size: 20px;
  font-weight: bold;
}

#variance-date-selector-container {
  margin-left: 250px;
}

/* Overview header styling */
.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-header .overview-subtitle {
  color: gray;
  font-size: 14px;
  padding-top: 5px;
  padding-left: 14px;
}

/* ========================================
   NAVIGATION & HEADER STYLES
   ======================================== */

/* Base styles for the filter container */
.variance-nav-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
}

/* Styling for the filter row */
.filters-row form {
  display: flex;
  justify-content: right;
}

.filters-row form > * {
  margin-left: -12px;
}

/* Make the tab container sticky with proper spacing */
.sticky-tab-container {
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
}

/* Style the info row */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 34px;
  border-top: 1px solid #eaecef;
  border-bottom: 1px solid #eaecef;
  margin-bottom: 10px;
  background: white;
}

/* Specific styling for active filters section */
#ce-variance-active-filters-section {
  margin-left: -25px;
  margin-right: -35px;
}

/* Style the tabs row */
.tabs-row {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Style the tabs list */
.tabs-row ul.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style individual tab items */
.tabs-row .tab {
  padding: 8px 16px;
  cursor: pointer;
  margin-right: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #555;
  position: relative;
  transition: color 0.3s ease;
  display: block;
}

/* Style active tab */
.tabs-row .tab.active {
  color: #0066cc;
  font-weight: 600;
}

/* Style inactive tab */
.tabs-row .tab.inactive {
  color: #555;
  font-weight: 500;
}

/* Style tab underline */
.tabs-row .tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0066cc;
}

/* Hover effect for tabs */
.tabs-row .tab:hover {
  color: #0066cc;
}

/* Quick links styling */
.quick-link-csp-dropdown,
.quick-link-business-unit-dropdown,
.filters-dropdown {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* ========================================
   DATE SELECTOR STYLES
   ======================================== */

.variance-date-selector {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.period-selector {
  display: flex;
  flex-direction: column;
}

      .period-selector .period-label {
        color: #333;
        font-size: 14px;
        font-weight: 500;
        line-height: 150% 
      }

.date-dropdown {
  display: flex;
  align-items: center;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 200px;
  justify-content: space-between;
  cursor: pointer;
}

      .date-dropdown .date-text {
        font-size: 14px;
        color: #333;
        flex-grow: 1;
        font-weight: 400;
      }

.date-dropdown .mdi-chevron-down {
  color: #6B7280;
  font-size: 16px;
}

/* Enhanced date selector styles moved from JavaScript */
.variance-date-selector {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.comparison-arrow-wrapper {
  display: flex;
  align-items: center;
  margin: 0 0px;
}

.comparison-arrow {
  position: relative;
  top: 8px;
}

.period-selector {
  display: flex;
  flex-direction: column;
}

.period-label {
  font-size: 0.875rem;
  color: #666;
  display: flex;
  align-items: center;
}

.period-indicator {
  width: 10px;
  height: 10px;
  border-radius: 22px;
  margin-right: 6px;
}

.period-1-indicator {
  background: #99CCFF;
}

.period-2-indicator {
      background: #B0B5FC;
}

.date-dropdown.period-1{
  background-color: #ECF5FE;
}

.date-dropdown.period-2{
  background-color: #ECEDFE;
}

.date-dropdown {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.date-dropdown .date-text {
  margin-right: 10px;
  color: #333;
}

.date-dropdown .mdi-chevron-down {
  color: #666;
}

/* DateRangePicker specific styles */
#variance-date-selector-container .daterangepicker {
  margin-top: 85px; 
  margin-left: 220px; 
  transform: translateX(-10%); 
  border-radius: 12px; 
  overflow: hidden; 
  z-index: 1;
  height: 410px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#variance-date-selector-container .daterangepicker .ranges {
  border-right: 1px solid #E5E7EB;
  padding-right: 15px;
  padding-left: 15px;
}

#variance-date-selector-container .daterangepicker .ranges ul {
  list-style: none;
  padding: 0;
}

#variance-date-selector-container .daterangepicker .ranges li {
  padding: 10px 12px; 
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 4px;
  color: #4B5563;
  transition: background-color 0.2s ease;
  font-size: 14px; 
}

#variance-date-selector-container .daterangepicker .ranges li:hover {
  background-color: #F3F4F6;
}

#variance-date-selector-container .daterangepicker .ranges li.active {
  background-color: #EFF6FF;
  color: #2563EB;
}

/* #variance-date-selector-container .daterangepicker .applyBtn,
#variance-date-selector-container .daterangepicker .cancelBtn {
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  margin-top: 10px;
} */

#variance-date-selector-container .daterangepicker .applyBtn {
  background-color: #2563EB;
  color: white;
  border: none;
}

#variance-date-selector-container .daterangepicker .cancelBtn {
  color: #4B5563;
  border: 1px solid lightgray;
  margin-right: 10px;
}

#variance-date-selector-container .drp-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  padding-right: 10px !important;
  padding-top: 14px !important;
}

#variance-date-selector-container .drp-buttons .cancelBtn,
#variance-date-selector-container .drp-buttons .applyBtn {
  display: inline-block;
  margin: 0;
}

#variance-date-selector-container .drp-selected {
  color: #6c757d;
  margin-top: 8px;
}

#variance-date-selector-container .daterangepicker .drp-calendar {
  padding: 10px;
}

#variance-date-selector-container .daterangepicker .calendar-table {
  border-spacing: 5px;
}

#variance-date-selector-container .daterangepicker .calendar-table th,
#variance-date-selector-container .daterangepicker .calendar-table td {
  padding: 8px;
  font-size: 14px;
}

/* Additional styles for custom range */
#variance-date-selector-container .daterangepicker td.new-selection-start {
  background-color: #ccc !important;
  color: #333 !important;
}

#variance-date-selector-container .custom-range-enabled .calendar-table {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#variance-date-selector-container .custom-range-disabled .calendar-table {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ========================================
   LAYOUT & GRID STYLES
   ======================================== */

/* Cost Explorer Row Flex */
.ce-row-flex {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

.ce-column-flex {
  display: flex;
  flex-direction: column;
}

/* Column flex properties */
.ce-row-flex .col-3,
.ce-row-flex .col-4,
.ce-row-flex .col-5,
.ce-row-flex .col-9 {
  display: flex;
}

/* Skeleton loader items */
.sl-item {
  height: 100%;
  min-height: 70px;
  width: 100%;
}

/* Custom column width */
/* .col-4-5 {
  width: 37.5%;
  float: left;
} */

/* Card title styling */
/* .card-title {
  font-size: 18px !important;
  color: #0D0D0D !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.3px !important;
} */

/* ========================================
   SCROLLABLE CONTENT STYLES
   ======================================== */

/* Scrollable content container */
/* .scrollable-content-wrapper {
  height: 100vh;
  overflow-y: auto;
  padding-top: 10px;
} */

/* Ensure page content takes full width */
/* .page-content {
  width: 100%;
  padding-top: 10px;
  margin-top: -100px;
} */

/* Body and HTML overflow control */
/* body, html {
  overflow: hidden;
  height: 100%;
} */

/* Container spacing */
/* .container-fluid {
  margin-top: 90px;
} */



.expanded-widget-content::-webkit-scrollbar {
  width: 6px;
}

.expanded-widget-content ::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 3px;
}

.expanded-widget-content::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 6px;
}

.expanded-widget-content::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}