/* ============================================================================
   CONSOLIDATED CSS - All styles from custom_styles.css, styles.html, and universal2.html
   ============================================================================ */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */
:root {
  --main-blue: #007bff;
  --btn-transition-duration: 0.5s;
  --select-button-light-blue: #e3eeff;
  --button-hover-blue: #c6ddff;
  --disabled-button-light-grey: #e1e1e1;
  --disabled-button-text-grey: #656565;
  --group-header-row-bg: #e9ecef;

  /* Deadlines cards — font sizes */
  --dl-font-licensor: 0.7rem;
  --dl-font-company: 0.7rem;
  --dl-font-deadline: 0.7rem;
  --dl-font-quarters: 0.7rem;
  --dl-font-btn-view: 0.7rem;
  --dl-font-btn-create-forecast: 0.7rem;

  /* Deadlines cards — fixed chip widths */
  --dl-chip-width: 4.5rem;
  --dl-chip-licensor-width: 12.5rem;
}

/* Apply transition to all Bootstrap buttons */
.btn {
  transition: background-color var(--btn-transition-duration) ease, 
              border-color var(--btn-transition-duration) ease !important;
}

/* ============================================================================
   SECTION 1: RESET & BASE STYLES
   Source: custom_styles.css (lines 3-45)
   ============================================================================ */

/* Reset some basic elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  border: 0; 
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Poppins', sans-serif;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Set base styles */
html, body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Base styles - merged from styles.html */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Override font-family for body elements that use Poppins */
body {
  font-family: 'Poppins', sans-serif;
}

/* ============================================================================
   SECTION 2: LAYOUT & CONTAINERS
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

.main-container { 
  padding: 10px; 
  width: 100%; 
}

/* Center content - merged from multiple sources */
.center-content {
  margin: 0;
  width: 100%;
  background: #f2f2f2;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px calc(3% + 10px) 10px 30px;
  gap: 16px;
  box-sizing: border-box;
}

.title-right-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-self: stretch;
}

.title-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-self: start;
}

.title-action-buttons .btn,
.title-action-buttons .form-control {
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.company-title {
  font-size: 24px !important;
  font-weight: bold;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* Body max-width from universal2.html */
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Main container spacing from universal2.html */
/* FIX: Changed from margin to padding to prevent horizontal overflow */
/* margin: 0 30px with width: 100% caused 60px overflow beyond viewport */
.main-container {
  margin: 0;
  padding: 5px 30px 10px 30px !important;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .main-container {
    margin: 0 15px;
  }
}

/* ============================================================================
   SECTION 3: FILTERS & FORMS
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

  .filter-forms {
  margin-bottom: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 0 !important;
  }

  .filters-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
  }

  .filters-container form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

.filter-buttons { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 10px; 
  margin-top: 5px; 
  width: 100%; 
}

.filter-buttons .button {
  padding: 8px 16px;
  cursor: pointer;
  height: 32px;
  display: flex;
  align-items: center;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  color: white !important;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color var(--btn-transition-duration) ease;
}

.filter-buttons .button:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

/* ============================================================================
   SECTION 4: SELECT2 CUSTOMIZATION
   Source: styles.html (lines 67-120)
   ============================================================================ */

.multi-select, .select2-container {
  width: 150px !important;
  min-width: 150px !important;
  font-size: 10px;
}

.select2-container {
  width: 150px !important;
  min-width: 150px !important;
  font-size: 16px;
}

.select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  height: auto !important;
}

.select2-selection__choice {
  display: none !important;
}

.select2-container--default .select2-results__option {
  padding: 8px 12px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.select2-container--default .select2-results__option--selected {
  background-color: #e8f0fe !important;
  color: #1967d2 !important;
  font-weight: 500;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: transparent !important;
  color: inherit !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #e8f0fe !important;
  color: #1967d2 !important;
}

.select2-container--default .select2-results__option:first-child {
  border-bottom: 1px solid #e0e0e0;
  font-weight: 500;
  color: #202124;
}

.select2-container--default .select2-results__option:first-child:hover {
  background-color: transparent !important;
}

/* Workflow Select2 overrides from universal2.html */
#workflow-customer-select + .select2-container {
  width: 200px !important;
  height: 38px !important;
}

#workflow-customer-select + .select2-container .select2-selection--single {
  height: 38px !important;
  padding: 5px 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0.25rem !important;
}

#workflow-customer-select + .select2-container .select2-selection__rendered {
  line-height: 26px !important;
  padding: 0 !important;
}

#workflow-customer-select + .select2-container .select2-selection__arrow {
  height: 36px !important;
}

/* ============================================================================
   SECTION 5: TABLES & TABLE CONTAINERS
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

.table-container {
  overflow-x: visible;
  max-height: none;
  position: relative;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  width: 97%;
  max-width: 97%;
  padding-right: 0 !important;
  visibility: hidden; /* Hidden until JS reveals after init */
}

.tables-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
            width: 100%;
}

/* Dynamic grid layout for pivot tables from universal2.html */
.tables-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 40px 20px;
  margin: 20px 30px 0 30px;
  max-width: calc(100% - 60px);
}

@media (min-width: 1200px) {
  .tables-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1199px) and (min-width: 800px) {
  .tables-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1200px) {
  .tables-container {
    grid-template-columns: 1fr;
    grid-gap: 15px;
    margin: 20px 15px 0 15px;
    max-width: calc(100% - 30px);
  }
}

.tableFixHead_AOO {
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tableFixHead {
  max-height: 75vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* Common table styles */
table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #e0e0e0;
}

#all_open_orders_table {
  border-right: 1px solid #e0e0e0;
  /*width: 100% !important;*/
}

#all_open_orders_table thead,
#all_open_orders_table tbody,
#all_open_orders_table tfoot {
  width: 100%;
}

#all_open_orders_table thead th,
#all_open_orders_table tbody td,
#all_open_orders_table tfoot th {
  box-sizing: content-box !important;
}

th {
  /*background: #f4f6f8;*/
  padding: 6px 8px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
  border-right: 1px solid #e0e0e0;
  font-weight: bold;
  /*color: #2c3e50;*/
  color: black;
  word-wrap: break-word;
}

td {
  padding: 4px 8px;
  border-bottom: 1px solid #dee2e6;
  border-right: 1px solid #e0e0e0;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;
}

/* Brand, Store, and Customer columns */
td.brand-cell,
td.store-cell,
td.customer-cell {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* New Forecast column - green border */
td.new-forecast-column,
tbody td.new-forecast-column,
#all_open_orders_table tbody td.new-forecast-column {
  border-left: 3px solid green !important;
  border-right: 3px solid green !important;
  border-top: none !important;
  border-bottom: none !important;
}

thead th.new-forecast-column,
#all_open_orders_table thead th.new-forecast-column {
  border-left: 3px solid green !important;
  border-right: 3px solid green !important;
  border-top: 3px solid green !important;
  border-bottom: none !important;
}

tfoot th.new-forecast-column,
#all_open_orders_table tfoot th.new-forecast-column {
  border-left: 3px solid green !important;
  border-right: 3px solid green !important;
  border-top: none !important;
  border-bottom: 3px solid green !important;
}

tr:nth-child(even) {
  background-color: #f8f9fa;
}

tr:hover {
  background-color: #e9f4fe !important;
}

/* Sticky header and footer */
thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

#all_open_orders_table thead th {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
  padding-bottom: 6px;
  pointer-events: auto;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#all_open_orders_table thead th:hover {
  background-color: #f5f5f5 !important;
}

table.dataTable thead th.text-nowrap,
#all_open_orders_table thead th.text-nowrap,
.dataTables_scrollHeadInner table.dataTable thead th.text-nowrap {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

tfoot, tfoot th {
  position: sticky;
  bottom: 0;
  background: #f4f6f8;
  z-index: 2;
  border-top: 2px solid #dee2e6;
}

tfoot th {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 9;
  padding: 6px 8px;
  text-align: left;
  border-right: 1px solid #e0e0e0;
  box-sizing: content-box !important;
}

.tableFixHead_AOO table tfoot {
  position: sticky;
  bottom: 0;
  background: #f4f6f8;
  z-index: 2;
  border-top: 2px solid #dee2e6;
}

.tableFixHead_AOO table tfoot th {
  background: #f4f6f8;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Column widths */
th.action, td.action {
  width: 20%;
}

th.updated-on, td.updated-on {
  width: 8%;
}

/* Action column styles - using .action class (not :last-child) for ColReorder compatibility */
td.action,
th.action,
#all_open_orders_table td.action,
#all_open_orders_table th.action,
.dataTables_scrollBody table td.action,
.dataTables_scrollHeadInner table thead th.action,
.dataTables_scrollFootInner table tfoot th.action {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
  padding-right: 5px !important;
}


/* Action column controls */
td.action div,
.dataTables_wrapper td.action div,
#all_open_orders_table td.action div {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

    td.action {
      white-space: nowrap !important;
      overflow: visible !important;
      max-width: none !important;
    }

    td.action input,
    td.action button,
    td.action span,
    td.action label {
      display: inline-block;
      white-space: nowrap !important;
      vertical-align: middle;
    }

    td.action::-webkit-scrollbar {
      height: 6px;
    }

    td.action::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }

.action {
  white-space: nowrap;
}

.action > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

/* AG Grid action column (universal_ag.html) */
.ag-theme-alpine .ag-cell.action-cell {
  overflow: hidden;
}

.ag-theme-alpine .ag-cell.action-cell .ag-cell-value,
.ag-theme-alpine .ag-cell.action-cell .ag-cell-wrapper,
.ag-theme-alpine .ag-cell.action-cell > div {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.ag-theme-alpine .ag-cell.action-cell label {
  margin-right: 4px;
}

.ag-theme-alpine .ag-row-pinned {
  font-weight: bold;
  background-color: #f5f5f5;
}

/* Prevent text truncation in pinned bottom row footer */
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
}

/* Target cell wrappers inside pinned bottom row */
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell .ag-cell-wrapper,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell .ag-cell-value {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
}

/* Specifically ensure first column in pinned bottom row doesn't truncate */
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  max-width: none !important;
  width: auto !important;
}

.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child .ag-cell-wrapper,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child .ag-cell-value {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
}

/* When grouping is on, footer "Filtering X rows" is in second column (first data col); prevent truncation */
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:nth-child(2) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  max-width: none !important;
  width: auto !important;
}

.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:nth-child(2) .ag-cell-wrapper,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:nth-child(2) .ag-cell-value {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
}

/* Force footer first column to expand to fit content (scoped to pinned bottom row
   only; on normal data rows the first column must truncate like the others). */
.ag-theme-alpine .ag-header-cell:first-child,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child {
  min-width: fit-content !important;
}

/* Truncate long string values in data-row cells with an ellipsis.
   Full value remains available via the hover tooltip (tooltipValueGetter). */
.ag-theme-alpine .ag-row:not(.ag-row-pinned-bottom) .ag-cell,
.ag-theme-alpine .ag-row:not(.ag-row-pinned-bottom) .ag-cell .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure the column itself doesn't constrain width */
.ag-theme-alpine .ag-header-cell:first-child .ag-header-cell-resize,
.ag-theme-alpine .ag-header-cell:first-child .ag-header-cell-text {
  overflow: visible !important;
}

.ag-theme-alpine .ag-cell.action-cell .action-total {
  width: 100%;
  text-align: left;
  padding-left: 4px;
  padding-right: 0;
}

.ag-theme-alpine .ag-custom-list-filter {
  padding: 8px 10px;
  min-width: 220px;
}

.ag-theme-alpine .ag-custom-list-filter-search {
  width: 100%;
  height: 28px;
  margin-bottom: 6px;
  padding: 4px 6px;
}

.ag-theme-alpine .ag-custom-list-filter-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #d6d6d6;
  padding: 6px;
  margin-bottom: 6px;
}

.ag-theme-alpine .ag-custom-list-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.ag-theme-alpine .ag-custom-list-filter-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Filter popup buttons (Clear, Select All, Hide): match Multiply Forecast */
.ag-theme-alpine .ag-custom-list-filter-button,
.ag-theme-alpine .ag-custom-list-filter-controls .btn-hide-column-in-filter {
  padding: 4px 8px;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  color: white !important;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--btn-transition-duration) ease, border-color var(--btn-transition-duration) ease;
}

.ag-theme-alpine .ag-custom-list-filter-button:hover,
.ag-theme-alpine .ag-custom-list-filter-controls .btn-hide-column-in-filter:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: white !important;
}

/* Compact action column inputs and buttons */
td.action input[type="number"],
.dataTables_wrapper td.action input[type="number"],
#all_open_orders_table td.action input[type="number"] {
  width: 100px !important;
  height: 24px !important;
  font-size: 16px !important;
  padding: 2px 4px !important;
}

td.action input[type="checkbox"],
.dataTables_wrapper td.action input[type="checkbox"],
#all_open_orders_table td.action input[type="checkbox"] {
  margin: 0 2px !important;
}

td.action button,
.dataTables_wrapper td.action button,
#all_open_orders_table td.action button {
  padding: 2px 6px !important;
  font-size: 11px !important;
  height: 24px !important;
  border-left: none !important;
  border-right: none !important;
  flex-shrink: 0 !important;
}

/* Right tables specific styling */
.right-tables {
  font-size: 10px;
}

.right-tables h2 {
  font-size: 16px;
  margin: 4px 0;
  padding: 0;
  font-weight: bold;
  color: #2c3e50;
}

.right-tables .tableFixHead {
  max-height: 20vh;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.right-tables table {
    width: 100%;
  border-collapse: collapse;
}

.right-tables tbody {
  display: table-row-group;
}

.right-tables thead,
.right-tables tfoot {
  position: sticky;
  background: #f4f6f8;
}

.right-tables thead {
  top: 0;
  z-index: 1;
}

.right-tables tfoot {
  bottom: 0;
  z-index: 1;
}

.right-tables table th,
.right-tables table td {
  padding: 2px 4px;
  font-size: 10px;
}

/* Custom footer row */
#custom-footer-row {
  background: #f4f6f8;
  border-top: 2px solid #dee2e6;
}

.custom-footer-cell {
  padding: 6px 8px;
  border: 1px solid #dee2e6;
  vertical-align: middle;
  background: #f4f6f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  box-sizing: border-box;
}

#custom-footer-row th.custom-footer-cell,
#custom-footer-row th.custom-footer-action {
  box-sizing: border-box;
}

.custom-footer-totals {
  font-weight: bold;
}

.custom-footer-action {
  font-weight: bold;
  text-align: center;
    white-space: nowrap;
  padding: 6px 8px;
  box-sizing: border-box;
}

/* ============================================================================
   SECTION 6: DATATABLES OVERRIDES
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

.dataTables_wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

.dataTables_scrollBody {
  max-height: calc(75vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dataTables_scroll .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.dataTables_scrollHead {
  overflow: hidden !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.dataTables_scrollHeadInner {
  /* width: fit-content !important; - REMOVED: causes clipping with negative margin-left scroll sync */
  /* Let DataTables/JavaScript set the width to match the table */
}

.dataTables_scrollFootInner {
  /* width: fit-content !important; - REMOVED: causes clipping with negative margin-left scroll sync */
  /* Let DataTables/JavaScript set the width to match the table */
}

.dataTables_scrollFoot {
  overflow: hidden !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #f4f6f8 !important;
  z-index: 2 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.dataTables_scrollHeadInner table thead th {
  box-sizing: content-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding-bottom: 6px !important;
}

.dataTables_scrollHeadInner table {
  table-layout: fixed !important;
}

.dataTables_scrollBody table {
  table-layout: fixed !important;
}

.dataTables_scrollFootInner table {
  table-layout: fixed !important;
}

/* Ensure colgroup widths are synchronized across header, body, and footer */
/* REMOVED: width: inherit !important was preventing JavaScript from setting colgroup widths */
/* JavaScript now sets colgroup widths directly via setProperty with !important */
.dataTables_scrollHeadInner table colgroup col,
.dataTables_scrollBody table colgroup col,
.dataTables_scrollFootInner table colgroup col {
  /* width: inherit !important; - REMOVED to allow JavaScript width control */
}

/* Ensure table-layout is fixed for all DataTables scroll containers */
/* FIX 3: Removed width: 100% !important to allow JavaScript to set specific table widths */
/* JavaScript will set table width to match sum of column widths for proper alignment */
.dataTables_scrollHeadInner table,
.dataTables_scrollBody table,
.dataTables_scrollFootInner table {
  /* width: 100% !important; - REMOVED to allow JavaScript width control */
  table-layout: fixed !important;
  min-width: 0 !important;
}

.all-open-orders-table {
  overflow: visible;
}

#all_open_orders_table {
  width: auto !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

table.dataTable {
  /*width: auto !important;*/
}

/* Text alignment overrides */
table th,
.dataTables_wrapper th,
.dataTables_wrapper td,
.dt-left,
.dt-center,
.dt-right {
  text-align: left !important;
}

.dataTables_wrapper thead th,
.dataTables_wrapper tbody td,
.dataTables_wrapper tfoot th {
  text-align: left !important;
  padding-left: 8px !important;
}

/* Reduce padding for first column */
.dataTables_scrollBody table thead th:first-child,
.dataTables_scrollBody table tbody td:first-child,
.dataTables_scrollHeadInner table thead th:first-child,
#all_open_orders_table thead th:first-child,
#all_open_orders_table tbody td:first-child {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Action column padding */
td.action,
th.action,
.dataTables_scrollBody table td.action,
#all_open_orders_table td.action,
.dataTables_wrapper td.action {
  padding-right: 5px !important;
}

/* DataTables sorting icons */
.dataTables_wrapper .sorting,
.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
  background-position: center right !important;
  padding-right: 20px !important;
  padding-left: 8px !important;
}

.dataTables_wrapper thead th {
  text-align: left !important;
  padding-left: 8px !important;
  padding-right: 20px !important;
}

.dataTables_scrollHeadInner table thead th:first-child,
#all_open_orders_table thead th:first-child {
  padding-left: 4px !important;
  padding-right: 8px !important;
}

/* Hide DataTables sorting arrows on non-numerical columns */
table.dataTable thead th.no-datatables-sort.sorting::before,
table.dataTable thead th.no-datatables-sort.sorting::after,
table.dataTable thead th.no-datatables-sort.sorting_asc::before,
table.dataTable thead th.no-datatables-sort.sorting_asc::after,
table.dataTable thead th.no-datatables-sort.sorting_desc::before,
table.dataTable thead th.no-datatables-sort.sorting_desc::after,
table.dataTable thead th.no-datatables-sort.sorting_left::before,
table.dataTable thead th.no-datatables-sort.sorting_left::after,
table.dataTable thead th.no-datatables-sort.sorting_right::before,
table.dataTable thead th.no-datatables-sort.sorting_right::after {
  display: none !important;
  content: '' !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

table.dataTable thead th.no-datatables-sort {
  cursor: pointer !important;
  background-image: none !important;
  padding-right: 8px !important;
}

table.dataTable thead th.no-datatables-sort.sorting,
table.dataTable thead th.no-datatables-sort.sorting_asc,
table.dataTable thead th.no-datatables-sort.sorting_desc,
table.dataTable thead th.no-datatables-sort.sorting_left,
table.dataTable thead th.no-datatables-sort.sorting_right {
  background-image: none !important;
  background-position: unset !important;
}

/* DataTables search bar styling */
.dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: center !important;
  margin: 10px auto 15px auto !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

.dataTables_wrapper .dataTables_filter label {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  float: none !important;
}

.dataTables_wrapper .dataTables_filter label::before {
  content: "" !important;
  display: none !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
  width: 400px !important;
  max-width: 90% !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 40px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  background-color: #fff !important;
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 2px 5px rgba(26, 115, 232, 0.2) !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-input-placeholder {
  color: #999 !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]::-moz-placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:-ms-input-placeholder {
  color: #999 !important;
}

/* DataTables pagination styling */
.dataTables_wrapper .dataTables_paginate {
  text-align: center !important;
  margin-top: 15px !important;
  display: flex !important;
  justify-content: center !important;
  float: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  align-items: center !important;
  height: 32px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
  background: #007bff !important;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  border-color: #007bff !important;
  color: white !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #0056b3 !important;
  background-color: #0056b3 !important;
  border: 1px solid #0056b3 !important;
  border-color: #0056b3 !important;
  color: white !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #333 !important;
  padding: 4px 8px !important;
  margin: 0 2px !important;
}

/* DataTables info */
.dataTables_wrapper .dataTables_info {
  float: left !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
}

/* Wrapper for info and paginate - make flex container for vertical alignment */
.dataTables_wrapper.dataTables-controls-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border: 1px solid #ddd !important;
  padding: 10px 15px !important;
  border-radius: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dataTables-controls-wrapper .dataTables_info {
  float: none !important;
}

.dataTables_wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* ColReorder styles from universal2.html */
.dt-colReorder-float,
.DTCR_clonedTable {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.DTCR_pointer {
  width: 3px !important;
  min-width: 3px !important;
  background-color: #007bff !important;
}

#all_open_orders_table thead th.dt-colReorder-moving {
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  transition: none !important;
}

#all_open_orders_table thead th[class*="colReorder"] {
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  cursor: pointer !important;
}

/* ============================================================================
   SECTION 7: BUTTONS & INPUTS
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}

.select-buttons {
  margin-bottom: 15px;
  margin-top: 0 !important;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.select-buttons button:not(.btn) {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
  cursor: pointer;
}

.select-buttons button:not(.btn):hover {
  background: #e9ecef;
}

.select-buttons .btn {
  padding: 6px 12px;
  font-size: 14px;
  height: auto;
  line-height: 1.5;
}

.select-buttons .btn,
.select-buttons .form-control,
.select-buttons .form-select {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  border-radius: 0.25rem !important;
  margin: 0 !important;
}

.select-buttons .btn-primary {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: white !important;
}

.select-buttons .btn-secondary {
  background-color: white !important;
  border-color: #6c757d !important;
  color: #333 !important;
}

.select-buttons #select-all-so.btn-secondary,
.select-buttons #select-all-ly.btn-secondary,
.select-buttons #select-all-prior.btn-secondary,
.select-buttons #select-all-new.btn-secondary {
  background-color: var(--select-button-light-blue) !important;
  border-color: var(--select-button-light-blue) !important;
  color: #0b2e59 !important;
}

.select-buttons #select-all-so.btn-secondary:hover,
.select-buttons #select-all-ly.btn-secondary:hover,
.select-buttons #select-all-prior.btn-secondary:hover,
.select-buttons #select-all-new.btn-secondary:hover {
  background-color: var(--button-hover-blue) !important;
  border-color: var(--button-hover-blue) !important;
  color: #0b2e59 !important;
}

.select-buttons #select-all-so.btn-primary,
.select-buttons #select-all-ly.btn-primary,
.select-buttons #select-all-prior.btn-primary,
.select-buttons #select-all-new.btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

.select-buttons .btn-info {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: white !important;
}

.blue-button {
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  color: white !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  transition: background-color var(--btn-transition-duration) ease !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.blue-button:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

/* Unhide Columns button: same as Clear Filters when disabled; blue when active (columns hidden) */
#unhide-columns:disabled,
#unhide-columns.disabled {
  background-color: var(--disabled-button-light-grey) !important;
  border: 1px solid var(--disabled-button-light-grey) !important;
  border-color: var(--disabled-button-light-grey) !important;
  color: var(--disabled-button-text-grey) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

#unhide-columns.btn-unhide-columns-active {
  background-color: var(--main-blue) !important;
  border-color: var(--main-blue) !important;
  color: white !important;
}

#unhide-columns.btn-unhide-columns-active:hover:not(:disabled) {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: white !important;
}

.update-all-button,
.blue-button.update-all-button {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

.update-all-button:hover,
.blue-button.update-all-button:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

#multiply-forecast,
#update-forecast,
#multiplier {
  border-radius: 0.375rem !important;
}

#multiply-forecast,
#update-forecast {
  text-align: center;
  justify-content: center;
}



button[name="submit"][value="update_all"].button {
  background-color: #198754 !important;
  border: 1px solid #198754 !important;
  color: white !important;
  border-radius: 4px;
  transition: background-color var(--btn-transition-duration) ease !important;
  padding: 8px 16px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

button[name="submit"][value="update_all"].button:hover {
  background-color: #157347 !important;
  border-color: #157347 !important;
}

.reset-button {
  background-color: #107C41 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color var(--btn-transition-duration) ease;
}

.reset-button:hover {
  background-color: #185ABD !important;
}

.reset-button svg {
  width: 18px;
  height: 18px;
}

#reset-filters {
  background-color: #f44336;
  color: white;
  border: none;
}

#reset-filters:hover {
  background-color: #da190b;
}

/* Forecast input */
.forecast-input {
  width: 100px;
  height: 20px;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  flex: 0 0 auto;
}

/* Summary / quarter pivot: Action column shows sum of New Forecast per group (readonly; fill-by updates underlying rows then table re-renders) */
.grouping-pivot-container .pivot-action-td {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
}

.grouping-pivot-container .pivot-action-td .forecast-input--pivot-group-sum {
  width: 100%;
  min-width: 72px;
  max-width: 140px;
  margin-right: 0;
  box-sizing: border-box;
}

/* Multiplier input */
#multiplier {
  width: 100px;
  height: 20px;
  padding: 2px 5px;
  font-size: 12px;
  border: 1px solid #6c757d;
  border-radius: 4px;
  margin-right: 10px;
}

.select-buttons #multiplier {
  width: 110px !important;
}

/* Multiply button - SINGLE SOURCE OF TRUTH
   Edit these values to change the button appearance: */
.multiply-row,
td.action button.multiply-row,
#all_open_orders_table td.action button.multiply-row {
  /* SIZE - edit these to change button dimensions */
  padding: 4px 4px !important;
  height: auto !important;
  
  /* Flex settings */
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  
  /* Appearance */
  font-size: 11px !important;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  color: white !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: background-color var(--btn-transition-duration) ease !important;
}

.multiply-row:hover,
td.action button.multiply-row:hover,
#all_open_orders_table td.action button.multiply-row:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

/* Prevent flex container from expanding */
td.action > div,
#all_open_orders_table td.action > div {
  width: fit-content !important;
}

/* Multiply spacer */
td.action div .multiply-spacer,
#all_open_orders_table td.action div .multiply-spacer,
.multiply-spacer {
  display: block !important;
  width: 2px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* Checkboxes */
.so-checkbox,
.ly-checkbox,
.prior-checkbox {
  flex: 0 0 auto;
}

/* Workflow styles */
.customers-remaining-count {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: transparent;
}

.workflow-customer-select {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 300px;
  font-size: 14px;
  height: 38px;
  padding: 6px 12px;
  line-height: 1.5;
  box-sizing: border-box;
}

.workflow-filter-btn {
  padding: 6px 20px;
  font-size: 14px;
  white-space: nowrap;
}

.workflow-filter-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.workflow-filter-btn:not(:disabled) {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: white !important;
}

.vertical-separator {
  width: 1px;
  height: 20px;
  background-color: #adb5bd;
  margin: 0 8px;
  align-self: center;
}

#clear-column-filters:disabled,
#clear-column-filters.disabled,
#refresh-power-bi-btn:disabled,
#refresh-power-bi-btn.disabled,
#autofill-btn.disabled,
#autofill-btn[aria-disabled="true"] {
  background-color: var(--disabled-button-light-grey) !important;
  border: 1px solid var(--disabled-button-light-grey) !important;
  border-color: var(--disabled-button-light-grey) !important;
  color: var(--disabled-button-text-grey) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

#clear-grouping:disabled {
  background-color: var(--disabled-button-light-grey) !important;
  border-color: var(--disabled-button-light-grey) !important;
  color: var(--disabled-button-text-grey) !important;
  opacity: 1;
  cursor: not-allowed;
}

/* ============================================================================
   SECTION 8: SIDEBAR
   Sources: custom_styles.css, styles.html
   ============================================================================ */

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #f8f9fa;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

.sidebar a {
  padding: 12px 20px;
  text-decoration: none;
  font-size: 14px;
  color: #2c3e50;
  display: block;
  transition: 0.3s;
  margin: 5px 10px;
  border-radius: 4px;
  font-weight: 500;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-align: center;
}

.sidebar a:hover {
  background-color: #007bff;
  color: white;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 24px;
  margin-left: 50px;
  background: none;
  box-shadow: none;
  color: #333;
}

.sidebar .closebtn:hover {
  background: none;
  color: #007bff;
}

.openbtn {
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  color: white !important;
  border-radius: 0.25rem !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 0.5 !important;
  transition: background-color var(--btn-transition-duration) ease !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  position: fixed;
  right: calc(30px + (100vw - 60px) * 0.0175) !important;
  left: auto !important;
  top: 15px;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.openbtn:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

#main {
  transition: margin-right .3s;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================================
   SECTION 9: TOOLTIPS
   Sources: custom_styles.css, styles.html, universal2.html
   ============================================================================ */

.filter-tooltip {
  position: relative;
  display: inline-block;
}

.filter-tooltip .tooltip-text {
  visibility: hidden;
  background-color: #333;
  color: white;
  text-align: left;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1000;
  top: 125%;
  left: 0;
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
  font-size: 12px;
  max-width: 300px;
  white-space: normal;
}

.filter-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Header tooltip styles */
.header-tooltip {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  z-index: 11;
}

#all_open_orders_table thead th .header-tooltip {
  display: block;
  width: calc(100% - 30px);
  padding-right: 30px;
  box-sizing: border-box;
  min-height: 100%;
  position: relative;
}

#all_open_orders_table thead th .header-tooltip > *:first-child {
  display: inline;
}

.header-tooltip .tooltip-text {
  visibility: hidden;
  background-color: #333;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 99999 !important;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  opacity: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  transition: opacity 0s, visibility 0s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #555;
}

.header-tooltip .tooltip-text[style*="position: fixed"] {
  position: fixed !important;
}

.header-tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

#all_open_orders_table thead th:hover .header-tooltip .tooltip-text,
.dataTables_scrollHeadInner #all_open_orders_table thead th:hover .header-tooltip .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
}

#all_open_orders_table thead th:hover .header-tooltip,
.dataTables_scrollHeadInner #all_open_orders_table thead th:hover .header-tooltip {
  pointer-events: auto;
  z-index: 2;
}

/* Custom tooltip */
.custom-tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  max-width: 300px;
  word-wrap: break-word;
  text-align: center;
  display: none;
  pointer-events: none;
  border: 1px solid #555;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Size tooltip */
.size-with-tooltip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: #999;
}

.pivot-table td {
  overflow: visible !important;
}

.size-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  z-index: 9999;
  margin-top: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.size-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.size-with-tooltip:hover {
  z-index: 10000;
}

.size-with-tooltip:hover .size-tooltip {
  opacity: 1;
}

/* ============================================================================
   SECTION 10: COLUMN FILTERS & SORTING
   Source: universal2.html
   ============================================================================ */

.column-filter-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  position: absolute;
  right: 2px;
  bottom: 4px;
  top: auto;
  transform: none;
  z-index: 10;
  pointer-events: none;
}

.column-filter-icon svg {
  pointer-events: auto;
  width: 100%;
  height: 100%;
}

.column-filter-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.column-filter-icon.active {
  opacity: 1;
}

.column-filter-icon path {
  fill: #666;
  transition: fill 0.2s;
}

.column-filter-icon:hover path {
  fill: #333;
}

.column-filter-icon.active path {
  fill: #0d6efd;
}

.column-filter-icon.active:hover path {
  fill: #0d6efd;
}

.column-sort-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.column-sort-icon:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.column-sort-icon.active {
  opacity: 1;
}

.column-sort-icon svg {
  width: 100%;
  height: 100%;
}

.column-sort-icon path {
  fill: #666;
  transition: fill 0.2s;
}

.column-sort-icon:hover path {
  fill: #333;
}

.column-sort-icon.active path {
  fill: #1a73e8;
}

.column-sort-icon.active:hover path {
  fill: #1a73e8;
}

#all_open_orders_table thead th .column-filter-icon {
  pointer-events: auto;
  z-index: 10;
}

.filter-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 200px;
  max-width: 300px;
  display: none;
}

.filter-dropdown.show {
  display: block;
}

.filter-dropdown-header {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 14px;
}

.filter-dropdown-search {
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
}

.filter-dropdown-search input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  font-size: 13px;
}

.filter-dropdown-options {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.filter-dropdown-option {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  user-select: none;
}

.filter-dropdown-option:hover {
  background-color: #f5f5f5;
}

.filter-dropdown-option input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}

.filter-dropdown-actions {
  padding: 8px 12px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 8px;
}

.filter-dropdown-button {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #d3d3d3;
  background: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color var(--btn-transition-duration);
}

.filter-dropdown-button:hover {
  background-color: #f5f5f5;
}

.filter-dropdown-button.primary {
  background-color: #4285f4;
  color: white;
  border-color: #4285f4;
}

.filter-dropdown-button.primary:hover {
  background-color: #357ae8;
}

.filter-range-container {
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.filter-range-label {
  font-size: 13px;
  color: #333;
  margin-bottom: 8px;
}

.filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-range-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  font-size: 13px;
  width: 80px;
  text-align: center;
}

.filter-range-input:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

.filter-range-input::placeholder {
  color: #999;
}

.filter-range-and {
  font-size: 13px;
  color: #666;
}

.filter-sort-options {
  padding: 4px 0;
  border-bottom: 1px solid #e0e0e0;
}

.filter-sort-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  transition: all 0.2s;
  font-weight: 400;
}

.filter-sort-option:hover {
  background-color: #e8f0fe;
  color: #1a73e8;
  font-weight: 500;
}

.filter-sort-option:hover::before {
  transform: scale(1.2);
}

/* ============================================================================
   SECTION 11: PIVOT TABLES
   Source: universal2.html
   ============================================================================ */

.pivot-loading {
  text-align: center;
  padding: 20px;
  color: #666;
  font-style: italic;
}

.pivot-loading.error {
  color: #d32f2f;
}

.pivot-table {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin: 0;
}

.pivot-table h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
  text-align: center;
}

.pivot-table .table-container {
  max-height: none;
  overflow-y: visible;
  margin: 0;
  border: none;
}

.pivot-table .tableFixHead {
  max-height: none;
  margin: 0;
}

.pivot-table table {
  font-size: 16px;
  width: 100%;
  table-layout: fixed;
}

.pivot-table th,
.pivot-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pivot-table th:nth-child(1),
.pivot-table td:nth-child(1) {
  width: 25%;
  max-width: 120px;
}

.pivot-table th:nth-child(2),
.pivot-table td:nth-child(2) {
  width: 15%;
  max-width: 80px;
}

.pivot-table th:nth-child(3),
.pivot-table td:nth-child(3) {
  width: 20%;
  max-width: 100px;
  text-align: right;
}

.pivot-table th:nth-child(4),
.pivot-table td:nth-child(4) {
  width: 20%;
  max-width: 100px;
  text-align: right;
}

.pivot-table th:nth-child(5),
.pivot-table td:nth-child(5) {
  width: 20%;
  max-width: 100px;
  text-align: right;
}

.pivot-table:nth-child(4) th:nth-child(1),
.pivot-table:nth-child(4) td:nth-child(1) {
  width: 25%;
  max-width: 120px;
}

.pivot-table:nth-child(4) th:nth-child(2),
.pivot-table:nth-child(4) td:nth-child(2) {
  width: 25%;
  max-width: 120px;
  text-align: right;
}

.pivot-table:nth-child(4) th:nth-child(3),
.pivot-table:nth-child(4) td:nth-child(3) {
  width: 25%;
  max-width: 120px;
  text-align: right;
}

.pivot-table:nth-child(4) th:nth-child(4),
.pivot-table:nth-child(4) td:nth-child(4) {
  width: 25%;
  max-width: 120px;
  text-align: right;
}

.pivot-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pivot-table tfoot th {
  background-color: #e8f4f8;
  border-top: 2px solid #333;
  position: sticky;
  bottom: 0;
}

.pivot-table td:hover {
  position: relative;
  z-index: 999;
}

.pivot-table td[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
}

@media (max-width: 768px) {
  .pivot-table table {
    font-size: 14px;
  }
  
  .pivot-table th,
  .pivot-table td {
    padding: 6px 4px;
  }
}

/* ============================================================================
   SECTION 12: CUSTOMER PROGRESS BAR
   Source: universal2.html
   ============================================================================ */

.customer-progress-bar {
  flex: 1;
  min-width: 100px;
  height: 24px;
  margin-top: 0;
  margin-bottom: 0;
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: visible;
  position: relative;
  padding: 0;
}

.progress-segments {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
  position: relative;
  overflow: visible;
  background-color: white;
}

.progress-segment {
  min-width: 2px;
  height: 100%;
  transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  border-right: 2px solid rgba(255,255,255,0.5);
}

.progress-segment:last-child {
  border-right: none;
}

.progress-segment:hover {
  opacity: 0.8;
  z-index: 100000;
}

.progress-segment.segment-selected {
  border: 1px solid #000000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  z-index: 100001;
}

.progress-segment-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Reset New / Update forecast modals — emphasize active filter summary */
.forecast-modal-active-filters-block {
    font-weight: 700;
    color: #c62828;
}

.forecast-modal-active-filters-list {
    margin-bottom: 0;
}

.modal-open .customer-progress-bar,
.modal-open .progress-segment,
.modal-open .progress-segment-tooltip .tooltip-text {
  z-index: 0 !important;
}

.progress-segment-tooltip .tooltip-text {
  visibility: hidden;
  background-color: #000000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: fixed;
  z-index: 999999 !important;
  opacity: 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  transition: opacity 0s, visibility 0s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #555;
  transform: translateX(-50%);
}

.progress-segment-tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.progress-segment:hover .progress-segment-tooltip .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable hover tooltips when grouping is active to prevent them from persisting */
/* Use more specific selector with body.grouping-active to override the hover rule */
/* This must come AFTER the hover rule to override it */
body.grouping-active .progress-segment:hover .progress-segment-tooltip .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

body.grouping-active .progress-segment .progress-segment-tooltip .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

/* Exception: allow tooltips to show if segment is pinned (and should be) */
/* This must be even more specific to override the hidden rules above */
body.grouping-active .progress-segment.tooltip-pinned .progress-segment-tooltip .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Hide tooltips that aren't pinned and aren't being hovered (when not grouping) */
.progress-segment:not(.tooltip-pinned):not(:hover) .progress-segment-tooltip .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
}

.segment-light-red {
  background-color: #f8d7da;
}

.segment-red {
  background-color: #dc3545;
}

.segment-light-blue {
  background-color: #cfe2ff;
}

.segment-blue {
  background-color: #0d6efd;
}

/* ============================================================================
   SECTION 13: VIEWS DROPDOWN
   Source: universal2.html
   ============================================================================ */

.group-by-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #fff;
  border: 2px solid #212529;
  border-radius: 4px;
  padding: 0 10px 6px 10px;
  overflow: hidden;
}

.group-by-box.active {
  border-color: #0d6efd;
}

.group-by-box.active .group-by-box-title {
  background-color: #0d6efd;
}

.group-by-box.active .group-by-box-divider-vertical {
  background: #0d6efd;
}

/* Group By box: blue by default, green when grouping active */
#group-by-box {
  border-color: #0d6efd;
}

#group-by-box .group-by-box-title {
  background-color: #0d6efd;
}

#group-by-box.active {
  border-color: #198754;
}

#group-by-box.active .group-by-box-title {
  background-color: #198754;
}

#group-by-box.active .group-by-box-divider-vertical {
  background: #198754;
}

/* Filter boxes: blue by default, black when a filter is active */
.column-filter-box {
  border-color: #0d6efd;
}

.column-filter-box .group-by-box-title {
  background-color: #0d6efd;
}

.column-filter-box.active {
  border-color: #198754;
}

.column-filter-box.active .group-by-box-title {
  background-color: #198754;
}

/* Fill By: always blue */
#fill-by-box,
#fill-by-box.active {
  border-color: #0d6efd;
}

#fill-by-box .group-by-box-title,
#fill-by-box.active .group-by-box-title {
  background-color: #0d6efd;
}

#fill-by-box .group-by-box-divider-vertical,
#fill-by-box.active .group-by-box-divider-vertical {
  background: #0d6efd;
}

.group-by-box-divider {
  width: 100%;
  border-top: 1px solid #dee2e6;
  margin: 6px 0;
}

.group-by-columns {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.group-by-col-checkboxes,
.group-by-col-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-by-box-divider-vertical {
  width: 1px;
  background: #212529;
  align-self: stretch;
  margin: 0 10px;
}

.fill-by-actions {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  gap: 4px;
}

.fill-by-actions .form-control,
.fill-by-actions .btn {
  font-size: 13px !important;
  padding: 4px 6px !important;
  height: 34px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.group-by-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
}

.group-by-col-options .group-by-action-btn {
  font-size: 13px !important;
  padding: 4px 10px !important;
  height: 34px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
}

.column-filter-box {
  gap: 0;
}

.column-filter-box[data-field="Company_Code"]   { width: 132px; }
.column-filter-box[data-field="MarketName"]     { width: 115px; }
.column-filter-box[data-field="SizeRangeGroup"] { width: 115px; }
.column-filter-box[data-field="Gender"]         { width: 115px; }
.column-filter-box[data-field="BrandName"]      { max-width: 250px; }
.column-filter-box[data-field="Customer_Number"]{ width: 140px; }
.column-filter-box[data-field="Year_Quarter"]{ width: 175px; }


.column-filter-box .group-by-box-title {
  margin-bottom: 2px;
}

.column-filter-box .ag-custom-list-filter-search {
  width: 100%;
  height: 24px;
  margin-bottom: 0;
  padding: 2px 6px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

.column-filter-box .ag-custom-list-filter-list {
  flex: 1;
  min-height: 0;
  max-height: none !important;
  width: 100%;
  overflow-y: auto;
  border: 1px solid #d6d6d6;
  padding: 6px;
  margin-bottom: 0;
  box-sizing: border-box;
}

.column-filter-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  flex-shrink: 0;
  margin-top: 2px;
}

.column-filter-actions .ag-custom-list-filter-button {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.column-filter-box .group-by-box-divider {
  display: none;
}

.column-filter-box .ag-custom-list-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  white-space: nowrap;
  font-size: 15px;
  cursor: pointer;
}

.column-filter-box .ag-custom-list-filter-button {
  padding: 4px 8px;
  background-color: #007bff;
  border: 1px solid #007bff;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.column-filter-box .ag-custom-list-filter-button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.column-filter-box.active .ag-custom-list-filter-button {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

.column-filter-box.active .ag-custom-list-filter-button:hover {
  background-color: #146c43;
  border-color: #146c43;
  color: #fff;
}

.group-by-box-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #212529;
  white-space: nowrap;
  padding: 6px 10px;
  margin: 0 -10px 6px -10px;
  width: calc(100% + 20px);
  text-align: center;
}

.filter-clear-icon {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-55%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  display: none;
}

.group-by-box.active .filter-clear-icon {
  display: inline;
}

.filter-clear-icon:hover {
  opacity: 1;
}

.group-by-checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  user-select: none;
}

.group-by-order-badge {
  margin-left: auto;
  padding-left: 8px;
  visibility: hidden;
}

.group-by-order-badge:not(:empty) {
  visibility: visible;
}

.group-by-checkbox-label input[type="checkbox"],
.group-by-checkbox-label input[type="radio"] {
  cursor: pointer;
  flex-shrink: 0;
}

/* Column filters: blue until narrowed; green when a subset filter is active */
.column-filter-box:not(.active) input[type="checkbox"] {
  accent-color: #0d6efd;
}

.column-filter-box.active input[type="checkbox"] {
  accent-color: #198754;
}

/* Group-by box (not column filters), but NOT fill-by box */
#group-by-box input[type="checkbox"] {
  accent-color: #198754;
}

.group-by-checkbox-label input[type="radio"]:disabled,
.group-by-checkbox-label input[type="checkbox"]:disabled {
  border-color: #ced4da;
  background-color: #e9ecef;
  cursor: not-allowed;
}

.group-by-checkbox-label input[type="radio"]:disabled + span,
.group-by-checkbox-label:has(input[type="radio"]:disabled) {
  color: #adb5bd;
  cursor: not-allowed;
}

.controls-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* Wraps so the trailing boxes (e.g. Needs Review) drop to a second row instead
   of running off the right edge on narrower screens. */
.controls-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Rollup: Company filter stacked vertically to the left of the table */
.table-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.table-left-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-layout > form {
  flex: 1;
  min-width: 0;
}

.column-filter-box.company-side-filter {
  width: 160px;
  height: 220px;
  box-sizing: border-box;
}

.controls-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.controls-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.controls-action-buttons .btn,
.controls-action-buttons .form-control {
  height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.views-dropdown-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.view-order-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.view-order-buttons .btn,
.grouping-style-buttons .btn {
  height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.view-order-buttons .btn-secondary,
.grouping-style-buttons .btn-secondary {
  background-color: var(--select-button-light-blue) !important;
  border-color: var(--select-button-light-blue) !important;
  color: #0b2e59 !important;
}

.view-order-buttons .btn-secondary:hover,
.grouping-style-buttons .btn-secondary:hover {
  background-color: var(--button-hover-blue) !important;
  border-color: var(--button-hover-blue) !important;
  color: #0b2e59 !important;
}

.view-order-buttons .btn-primary,
.view-order-buttons .group-by-button.btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

.view-order-buttons .btn-primary:hover,
.view-order-buttons .group-by-button.btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
  color: #ffffff !important;
}

#toggle-grouping-expand:disabled,
#toggle-grouping-expand[aria-disabled="true"],
#toggle-quarter-pivot:disabled {
  cursor: not-allowed !important;
  opacity: 0.7;
}

#toggle-grouping-expand:disabled:hover,
#toggle-grouping-expand[aria-disabled="true"]:hover,
#toggle-quarter-pivot:disabled:hover {
  background-color: var(--select-button-light-blue) !important;
  border-color: var(--select-button-light-blue) !important;
  color: #0b2e59 !important;
}

.views-label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.views-select {
  width: 180px;
  font-size: 14px;
  height: 38px;
  padding: 6px 12px;
  line-height: 1.5;
  box-sizing: border-box;
  border-radius: 0.25rem;
  border: 1px solid #6c757d;
  background-color: #0d6efd;
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* ============================================================================
   SECTION 14: PAGE-SPECIFIC STYLES
   Sources: custom_styles.css
   ============================================================================ */

/* Home page */
body.home-body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
}

body.home-body .home-page-content {
  padding: 0 20px 40px 20px;
}

body.home-body .home-top-section {
  display: block;
  text-align: center;
  max-width: 95%;
  width: 100%;
  margin: 0 auto 10px auto;
  padding: 10px 20px 10px 20px;
  background-color: white;
  clear: both;
}

body.home-body h1 {
  text-align: center;
  color: #2c3e50;
  font-size: 2em;
  margin-bottom: 40px;
  font-weight: 300;
}

body.home-body h2 {
  text-align: center;
  color: #34495e;
  font-size: 1.5em;
  margin: 30px 0 20px;
  font-weight: 200;
}

.button-container {
  text-align: center;
}

.button-container a {
  text-align: right;
  margin-bottom: 20px;
}

.go-button {
  padding: 15px 40px;
  font-size: 18px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
}

.go-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.search-container {
  margin-bottom: 10px;
}

.search-container h2 {
  color: #34495e;
  font-size: 1.5em;
  margin-bottom: 20px;
  font-weight: 500;
}

.search-container form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.search-container form label {
  font-weight: 500;
}

.search-container form button {
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.search-container form .form-select,
.search-container form .btn {
  height: 45px;
  padding-top: 0.075rem;
  padding-bottom: 0.075rem;
  font-size: 1rem;
  line-height: 1.5;
}

.search-container form .form-select {
  min-width: 100px;
}

/* Home page two-column layout */
body.home-body .container-fluid {
  display: block;
  max-width: 95%;
  margin: 0 auto;
  padding: 0 15px;
  clear: both;
}

.open-forecasts {
  margin-top: 30px;
}

.open-forecasts h2 {
  color: #34495e;
  font-size: 1.5em;
  margin-bottom: 20px;
  font-weight: 500;
}

.open-forecasts ul {
  list-style-type: none;
  padding: 0;
}

.open-forecasts li {
  background-color: #f9f9f9;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 10px;
}

.open-forecasts strong {
  font-weight: 600;
}

.open-forecasts a {
  color: #3498db;
  text-decoration: none;
  margin-left: 10px;
}

.open-forecasts a:hover {
  text-decoration: underline;
}

.forecast-row-clickable {
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.forecast-row-clickable:hover {
  background-color: #e9f4fe !important;
}

.forecast-row-clickable .btn {
  cursor: pointer !important;
}

#openForecasts .card {
  margin-left: 0;
  margin-right: 0;
}

#openForecasts .card-body {
  padding-left: 1rem;
  padding-right: 1rem;
}

#openForecasts .list-group-item {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.col-md-6:has(#openForecasts) {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}

@media (max-width: 768px) {
  body.home-body .home-top-section {
    max-width: 95%;
  }
  
  body.home-body h1 {
    font-size: 2em;
  }
}

@media (max-width: 480px) {
  body.home-body .home-top-section {
    max-width: 95%;
  }
  
  body.home-body h1 {
    font-size: 1.8em;
  }
  
  .go-button {
    width: 100%;
  }
}

/* Add record page */
body.add-record-body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  margin: 0;
  min-height: 100vh;
}

body.add-record-body .add_record_form {
  margin: 40px auto;
}

body.add-record-body .select2-container {
  width: 100% !important;
}

/* The matching select2 4.1 stylesheet is re-loaded on the add-record page
   (see add_record.html) so it lays out the multi-selects natively. Only two
   things still need overriding here: undo the global rule that hides pills,
   and stop the generic ".add_record_form form textarea" padding from bleeding
   into the inline search box. */
body.add-record-body .select2-selection__choice {
  display: inline-block !important;
}

body.add-record-body .select2-search--inline .select2-search__field {
  padding: 0 !important;
  font-size: 14px;
  border: none !important;
}

body.add-record-body .checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

body.add-record-body .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  margin: 0;
  cursor: pointer;
}

body.add-record-body .checkbox-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.add_record_form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.add_record_form h1 {
  text-align: center;
  color: #333333;
}

.add_record_form form {
  display: flex;
  flex-direction: column;
}

.add_record_form form p {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.add_record_form form label {
  margin-bottom: 5px;
  color: #333333;
}

.add_record_form form input,
.add_record_form form select,
.add_record_form form textarea {
  padding: 10px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 16px;
}

/* Generate forecast page */
body.generate-forecast-body {
  background-color: #f8f9fa;
  margin: 0;
}

body.generate-forecast-body > div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 56px);
}

body.generate-forecast-body .select {
  width: 200px;
}

body.generate-forecast-body .card {
  width: 100%;
  max-width: 650px;
  margin: 20px;
}

/* License dropdown: force width for long "CODE - Name" options */
body.generate-forecast-body .license-select-wrapper .select2-container {
  min-width: 420px !important;
  width: 100% !important;
}
body.generate-forecast-body .license-select-wrapper .select2-selection__rendered {
  white-space: pre;
}
body.generate-forecast-body .license-select-wrapper select#license_code {
  min-width: 420px;
}
/* Preserve spaces in dropdown option text (e.g. "Name   -   code") */
body.generate-forecast-body .select2-results__option {
  white-space: pre;
}

/* Company dropdown: match License styling (white dropdown, grey placeholder) */
body.generate-forecast-body .company-select-wrapper .select2-container {
  min-width: 280px !important;
  width: 100% !important;
}
body.generate-forecast-body .company-select-wrapper .select2-container--default .select2-selection--single {
  background-color: #fff;
}
body.generate-forecast-body .select2-selection__placeholder {
  color: #6c757d !important;
}
/* Select2 dropdown is appended to body; scope by page class */
body.generate-forecast-body .select2-dropdown {
  background-color: #fff !important;
}
body.generate-forecast-body .select2-results__options {
  background-color: #fff !important;
}
body.generate-forecast-body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #f8f9fa !important;
}

/* ============================================================================
   SECTION 15: LOADING BAR
   Sources: custom_styles.css, styles.html
   ============================================================================ */

#loadingBar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #4caf50;
  z-index: 1000;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Column Reorder Spinner Overlay */
.reorder-spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* Initial load spinner needs min-height since table hasn't rendered yet */
#initial-load-spinner {
  min-height: 300px;
}

.reorder-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: reorder-spin 0.3s linear forwards;
}

@keyframes reorder-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   SECTION 16: UTILITY CLASSES
   Sources: custom_styles.css, universal2.html
   ============================================================================ */

.td-nowrap {
  white-space: nowrap;
}

.test-nowrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.content-header h2 {
  color: #333;
}

/* ============================================================================
   SECTION 17: RESPONSIVE
   Sources: custom_styles.css, styles.html
   ============================================================================ */

@media (max-width: 1400px) {
  .tables-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .tables-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   SECTION 18: GROUPING UI
   ============================================================================ */

.grouping-style-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.grouping-style-container .views-label {
  margin-right: 6px;
}

#grouping-style-select {
  width: max-content;
  min-width: 200px;
}

#clear-grouping {
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  height: 38px !important;
}

#toggle-grouping-expand,
#toggle-quarter-pivot {
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  height: 38px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

#toggle-grouping-expand:not(:disabled) {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

#toggle-grouping-expand:not(:disabled):hover {
  background-color: #146c43 !important;
  border-color: #146c43 !important;
}

/* Pivot: blue when idle; green when Group By has columns; red UnPivot when quarter-pivot is on */
#toggle-quarter-pivot:not(:disabled):not(.toggle-quarter-pivot--unpivot):not(.toggle-quarter-pivot--grouping-active) {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

#toggle-quarter-pivot:not(:disabled):not(.toggle-quarter-pivot--unpivot):not(.toggle-quarter-pivot--grouping-active):hover {
  background-color: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
}

#toggle-quarter-pivot:not(:disabled).toggle-quarter-pivot--grouping-active:not(.toggle-quarter-pivot--unpivot) {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

#toggle-quarter-pivot:not(:disabled).toggle-quarter-pivot--grouping-active:not(.toggle-quarter-pivot--unpivot):hover {
  background-color: #146c43 !important;
  border-color: #146c43 !important;
}

#toggle-quarter-pivot.toggle-quarter-pivot--unpivot:not(:disabled) {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

#toggle-quarter-pivot.toggle-quarter-pivot--unpivot:not(:disabled):hover {
  background-color: #bb2d3b !important;
  border-color: #bb2d3b !important;
  color: #fff !important;
}

#toggle-grouping-expand:disabled,
#toggle-grouping-expand.disabled,
#toggle-quarter-pivot:disabled,
#toggle-quarter-pivot.disabled {
  background-color: var(--disabled-button-light-grey) !important;
  border: 1px solid var(--disabled-button-light-grey) !important;
  border-color: var(--disabled-button-light-grey) !important;
  color: var(--disabled-button-text-grey) !important;
  opacity: 1 !important;
}

.filter-group-actions {
  padding: 8px 10px 4px 10px;
  border-top: 1px solid #e2e2e2;
}

.filter-group-button {
  width: 100%;
  border: 1px solid #ced4da;
  background: #f8f9fa;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.filter-group-button:hover {
  background: #e9ecef;
}

.group-header-row td {
  background: #f1f3f5;
  font-weight: 600;
  border-top: 1px solid #d6d9dc;
  border-bottom: 1px solid #d6d9dc;
  box-sizing: border-box !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Remove right border from alphabetical columns to allow label to span */
.group-header-row td.group-header-alphabetical-col {
  border-right: none !important;
  position: relative;
  box-sizing: border-box !important;
}

/* Summary columns use same border style as regular data cells for alignment */
/* Side borders removed to prevent column width misalignment */

.group-header-row .group-toggle {
  margin-right: 8px;
  display: inline-block;
  width: 16px;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Make the row a positioning context */
.group-header-row {
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}

/* Group header rows use fixed layout to maintain column alignment */
/* Label cell spans multiple fixed-width columns via colspan */

/* Label cell that spans all alphabetical columns */
.group-header-row td.group-header-label-cell {
  text-align: left;
  padding-left: 8px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.group-header-label {
  display: inline-block;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle;
  text-align: left;
}

.group-summary-row td {
  background: #fafafa;
  font-weight: 600;
  border-top: 1px solid #e2e2e2;
}

.grouped-row.group-collapsed {
  display: none;
}

.quarter-pivot-modal-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.quarter-pivot-modal-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
  margin-bottom: 0.25rem;
}

.quarter-pivot-modal-section-title--metrics {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.quarter-pivot-modal-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
}

.quarter-pivot-modal-option .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  top: 0;
}

.form-check-input {
  border-width: 2px;
  border-color: #6c757d;
}

.form-check-input:checked {
  border-color: #212529;
  background-color: #212529;
}

.form-check-aligned {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

.form-check-aligned .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.form-check-aligned .form-check-label {
  margin: 0;
}

.grouping-pivot-container {
  margin-top: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.grouping-pivot-container.ag-theme-alpine {
  display: flex;
  flex-direction: column;
}

/* Horizontal scroll wraps body + footer so wide tables stay aligned; vertical scroll is body only (AG-style). */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-x-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-x-scroll .grouping-pivot-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: max-content;
  min-width: 100%;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-x-scroll .grouping-pivot-footer-outer {
  flex-shrink: 0;
  width: max-content;
  min-width: 100%;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-x-scroll {
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-x-scroll .grouping-pivot-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: visible;
  overflow-y: auto;
  width: max-content;
  min-width: 100%;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-x-scroll .grouping-pivot-footer-outer {
  flex-shrink: 0;
  width: max-content;
  min-width: 100%;
}

/* Pinned header inside body scroll only; footer row is outside scroll (see .grouping-pivot-footer-outer). */
.grouping-pivot-container .grouping-pivot-scroll .grouping-pivot-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Summary + Quarter pivot tables: match #all_open_orders_grid spacing (AG header/body heights, padding) */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table {
  /* debug-1a83f9 + ag-grid.css: body cells use border-right (see --ag-cell-horizontal-border); row/header chrome uses --ag-secondary-border-color */
  --grouping-pivot-vline: var(--ag-border-color, #babfc7);
  --grouping-pivot-hline: var(--ag-row-border-color, var(--ag-secondary-border-color, #dde2eb));
  /* separate: avoids collapsed-border eating 1px column rules; logs showed correct computed border but user still saw no V-seps */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: max-content;
  max-width: 100%;
  font-family: var(--ag-font-family);
  color: var(--ag-foreground-color);
  background-color: var(--ag-background-color);
  /* Full frame on <table> only (not th/td); same as .ag-root-wrapper */
  border: var(--ag-borders, solid 1px) var(--ag-border-color, #babfc7);
  border-radius: var(--ag-border-radius, 3px);
}

/* Split outer border between body table (in scroll) and footer table (below scrollbar). */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-x-scroll .grouping-pivot-scroll > .grouping-pivot-table {
  border-bottom: none;
  border-radius: var(--ag-border-radius, 3px) var(--ag-border-radius, 3px) 0 0;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-x-scroll .grouping-pivot-table--footer {
  border-top: none;
  border-radius: 0 0 var(--ag-border-radius, 3px) var(--ag-border-radius, 3px);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th,
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table td {
  box-sizing: border-box;
  border: none;
  padding: 0 var(--ag-cell-horizontal-padding);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/* Group / row-dimension text in Summary & Quarter pivot: clip like .ag-cell value cells */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody td.pivot-col-text,
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tfoot td.pivot-col-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/*
 * All cells: transparent lateral borders (match .ag-ltr .ag-cell). Header column dividers are only the
 * AG-style bar on .pivot-resize-handle::after — no full-height border-right on th (user: separators only).
 */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table thead th:not(:last-child),
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody td:not(:last-child),
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tfoot td:not(:last-child) {
  border-right: 1px solid transparent;
  box-shadow: none;
}

/* Match #all_open_orders_grid: .ag-header-row background, weight, separation from body */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table thead th {
  min-height: var(--ag-header-height);
  padding: var(--ag-grid-size) var(--ag-cell-horizontal-padding);
  background-color: var(--ag-header-background-color);
  color: var(--ag-header-foreground-color, var(--ag-secondary-foreground-color, var(--ag-foreground-color)));
  font-weight: 700;
  font-size: var(--ag-font-size);
  font-family: var(--ag-font-family);
  border-bottom: 1px solid var(--grouping-pivot-hline);
}

/* Hovering the resize strip still hovers the th — keep header bg (no column-hover blue) */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table thead th.pivot-sortable-header:hover,
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table thead th.pivot-quarter-value-header:hover {
  background-color: var(--ag-header-background-color);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody td {
  height: var(--ag-row-height);
  min-height: var(--ag-row-height);
  font-size: calc(var(--ag-font-size) + 1px);
  background-color: var(--ag-background-color);
  /* Horizontal row dividers (like .ag-row border-bottom) */
  border-bottom: 1px solid var(--grouping-pivot-hline);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody tr:last-child td {
  border-bottom: none;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody tr:nth-child(odd) td {
  background-color: var(--ag-odd-row-background-color);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tbody tr:hover td {
  background-color: var(--ag-row-hover-color);
}

/* Match .ag-theme-alpine .ag-row-pinned + .ag-floating-bottom-viewport top rule (stronger than row dividers) */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table tfoot td {
  min-height: var(--ag-row-height);
  padding: var(--ag-grid-size) var(--ag-cell-horizontal-padding);
  background-color: #f5f5f5;
  color: var(--ag-foreground-color);
  font-size: calc(var(--ag-font-size) + 1px);
  font-weight: 700;
  font-family: var(--ag-font-family);
  border-bottom: none;
  border-top: 1px solid var(--ag-border-color, #babfc7);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-col-numeric,
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table td.pivot-col-numeric {
  text-align: right;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-col-numeric .pivot-header-inner {
  justify-content: flex-end;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-col-numeric.pivot-sortable-header .pivot-header-label {
  text-align: right;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
  white-space: nowrap;
}

/* .pivot-sortable-header used position:relative for the resize handle; that broke thead th sticky. Sticky still anchors abs children. */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-scroll .grouping-pivot-table thead th.pivot-sortable-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-sortable-header .pivot-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-sortable-header .pivot-header-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quarter pivot: full period on line 1, full metric on line 2 (no wrap inside either) */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table thead th.pivot-quarter-value-header {
  height: auto;
  min-height: var(--ag-header-height);
  white-space: normal;
  vertical-align: middle;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header.pivot-col-numeric {
  text-align: center;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header.pivot-col-numeric .pivot-header-inner {
  justify-content: center;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header.pivot-sortable-header .pivot-header-inner {
  align-items: center;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header.pivot-sortable-header .pivot-header-label {
  text-align: center;
  flex: 0 1 auto;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header .pivot-header-label--quarter-pivot {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.2;
  text-align: center;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header .pivot-yq-period,
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-quarter-value-header .pivot-yq-metric {
  display: block;
  white-space: nowrap;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table .pivot-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
  user-select: none;
  background-color: transparent;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table .pivot-resize-handle:hover {
  background-color: transparent;
}

/* AG .ag-header-cell-resize::after: centered bar; pointer-events none so dragging still hits the handle */
.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table .pivot-resize-handle::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: var(--ag-header-column-resize-handle-display, block);
  width: var(--ag-header-column-resize-handle-width, 2px);
  height: var(--ag-header-column-resize-handle-height, 30%);
  top: calc(50% - var(--ag-header-column-resize-handle-height, 30%) * 0.5);
  right: calc(50% - var(--ag-header-column-resize-handle-width, 2px));
  background-color: var(--ag-header-column-resize-handle-color, var(--ag-secondary-border-color, #dde2eb));
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table.pivot-table-col-dragging {
  user-select: none;
  cursor: grabbing;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-th-drag-over {
  box-shadow: inset 0 0 0 2px var(--ag-alpine-active-color, #2196f3);
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table th.pivot-th-dragging {
  opacity: 0.75;
  cursor: grabbing;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table .pivot-sort-indicator {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 4px;
  font-size: calc(var(--ag-font-size) + 1px);
  color: var(--ag-alpine-active-color);
  font-weight: 700;
  line-height: 1;
}

.grouping-pivot-container.ag-theme-alpine .grouping-pivot-table .pivot-sort-indicator-inactive {
  color: var(--ag-disabled-foreground-color);
  opacity: 1;
}

/* DataTables grouping summary (no ag-grid CSS): plain table look */
.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table {
  border-collapse: collapse;
  table-layout: auto;
  width: max-content;
  max-width: 100%;
  font-size: 13px;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th,
.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table td {
  border: 1px solid #e2e2e2;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table tbody td.pivot-col-text,
.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table tfoot td.pivot-col-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table thead th {
  min-height: 44px;
  font-weight: 700;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table tbody td {
  min-height: 40px;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-col-numeric,
.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table td.pivot-col-numeric {
  text-align: right;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table tfoot td {
  font-weight: 700;
  background-color: #f5f5f5;
  border-top: 1px solid #e2e2e2;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 30px;
  white-space: nowrap;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-scroll .grouping-pivot-table thead th.pivot-sortable-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-sortable-header .pivot-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-sortable-header .pivot-header-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table thead th.pivot-quarter-value-header {
  white-space: normal;
  vertical-align: middle;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header.pivot-col-numeric {
  text-align: center;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header.pivot-col-numeric .pivot-header-inner {
  justify-content: center;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header.pivot-sortable-header .pivot-header-inner {
  align-items: center;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header.pivot-sortable-header .pivot-header-label {
  text-align: center;
  flex: 0 1 auto;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header .pivot-header-label--quarter-pivot {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.2;
  text-align: center;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header .pivot-yq-period,
.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-quarter-value-header .pivot-yq-metric {
  display: block;
  white-space: nowrap;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table .pivot-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
  user-select: none;
  background-color: transparent;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table .pivot-resize-handle:hover {
  background-color: transparent;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table.pivot-table-col-dragging {
  user-select: none;
  cursor: grabbing;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-th-drag-over {
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table th.pivot-th-dragging {
  opacity: 0.75;
  cursor: grabbing;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table .pivot-sort-indicator {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  color: #1a73e8;
  font-weight: bold;
  line-height: 1;
}

.grouping-pivot-container:not(.ag-theme-alpine) .grouping-pivot-table .pivot-sort-indicator-inactive {
  color: #6d6d6d;
  opacity: 0.5;
}

/* ============================================================================
   GROUPING TOGGLE SWITCH
   ============================================================================ */
.grouping-toggle-switch {
  position: relative;
  display: inline-flex;
  background-color: var(--main-blue);
  border-radius: 25px;
  padding: 4px;
  min-width: 200px;
  height: 36px;
}

.grouping-toggle-switch input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.grouping-toggle-switch .toggle-option {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  font-size: 11px;
  font-weight: 300;
  color: white;
  transition: color 0.3s ease;
  user-select: none;
  padding: 0 12px;
  border-radius: 20px;
  line-height: 1.2;
  text-align: center;
}

.grouping-toggle-switch .toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background-color: white;
  border-radius: 20px;
  transition: transform 0.3s ease;
  z-index: 1;
}

.grouping-toggle-switch input[type="radio"]:checked + .toggle-option {
  color: #000000;
  position: relative;
  z-index: 3;
}

.grouping-toggle-switch input[type="radio"]:not(:checked) + .toggle-option {
  color: white;
}

/* Default position - slider stays left when expandable is selected */
.grouping-toggle-switch .toggle-slider {
  transform: translateX(0%);
}

/* Move slider to the right when summary is selected */
.grouping-toggle-switch input[type="radio"]#grouping-summary:checked ~ .toggle-slider {
  transform: translateX(100%);
}

/* ============================================================================
   AG GRID GROUPING HEADER ROWS - light blue, slightly darker than row hover
   Group rows get class ag-group-header-row via getRowClass (data.__isGroup).
   Full row: Group column + all other cells. Override theme cell backgrounds.
   ============================================================================ */
.ag-theme-alpine .ag-row.ag-group-header-row {
  background-color: var(--group-header-row-bg) !important;
}
.ag-theme-alpine .ag-row.ag-group-header-row .ag-cell {
  background-color: var(--group-header-row-bg) !important;
}
.ag-theme-alpine .ag-row.ag-group-header-row .ag-cell .ag-cell-wrapper,
.ag-theme-alpine .ag-row.ag-group-header-row .ag-cell .ag-cell-value,
.ag-theme-alpine .ag-row.ag-group-header-row .ag-cell .ag-cell-wrapper *,
.ag-theme-alpine .ag-row.ag-group-header-row .ag-cell .ag-cell-value * {
  background-color: var(--group-header-row-bg) !important;
}

/* ============================================================================
   AG GRID GROUP CELL CURSOR
   ============================================================================ */
/* Make group cells show pointer cursor on hover */
.ag-theme-alpine .ag-cell[col-id="__group__"] {
  cursor: pointer;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Target cell wrapper and value inside group cells */
.ag-theme-alpine .ag-cell[col-id="__group__"] .ag-cell-wrapper,
.ag-theme-alpine .ag-cell[col-id="__group__"] .ag-cell-value {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure all direct children of group cell wrapper are constrained */
.ag-theme-alpine .ag-cell[col-id="__group__"] .ag-cell-wrapper > *,
.ag-theme-alpine .ag-cell[col-id="__group__"] .ag-cell-value > * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Fallback for browsers that support :has() */
.ag-theme-alpine .ag-cell:has(.group-toggle),
.ag-theme-alpine .ag-cell:has(.group-label) {
  cursor: pointer;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Target cell wrapper and value for cells with group content */
.ag-theme-alpine .ag-cell:has(.group-toggle) .ag-cell-wrapper,
.ag-theme-alpine .ag-cell:has(.group-toggle) .ag-cell-value,
.ag-theme-alpine .ag-cell:has(.group-label) .ag-cell-wrapper,
.ag-theme-alpine .ag-cell:has(.group-label) .ag-cell-value {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure all direct children of group cell wrapper are constrained */
.ag-theme-alpine .ag-cell:has(.group-toggle) .ag-cell-wrapper > *,
.ag-theme-alpine .ag-cell:has(.group-toggle) .ag-cell-value > *,
.ag-theme-alpine .ag-cell:has(.group-label) .ag-cell-wrapper > *,
.ag-theme-alpine .ag-cell:has(.group-label) .ag-cell-value > * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Make group toggle arrow larger */
.ag-theme-alpine .group-toggle {
  font-size: 20px !important;
  display: inline-block;
  line-height: 1;
  vertical-align: text-top !important;
  margin-top: -2px !important;
  font-weight: bold;
  flex-shrink: 0 !important;
}

/* Ensure the container holding toggle and label is constrained */
.ag-theme-alpine .ag-cell[col-id="__group__"] .ag-cell-wrapper,
.ag-theme-alpine .ag-cell:has(.group-toggle) .ag-cell-wrapper {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Ensure group label truncates properly - leave room for toggle arrow only */
.ag-theme-alpine .ag-cell[col-id="__group__"] .group-label,
.ag-theme-alpine .ag-cell:has(.group-label) .group-label {
  max-width: calc(100% - 35px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Enable text selection in AG Grid cells for copy functionality */
.ag-theme-alpine .ag-cell:not(.action-cell) {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.ag-theme-alpine .ag-cell:not(.action-cell) .ag-cell-value {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Deadlines modal — Select2 (license only) */
.dl-license-wrapper .select2-container {
  width: 420px !important;
  max-width: 100%;
}

/*
 * Deadlines shell: generic `body.home-body .container-fluid` uses max-width 95% +
 * margin auto, which leaves empty space on both sides. Deadlines overrides that
 * so content can align to the viewport edge (padding optional).
 */
/* Deadlines: allow content wider than viewport → window horizontal scroll (see body :has rule) */
body.home-body .container-fluid.dl-shell {
  max-width: none;
  width: max-content;
  min-width: 100%;
  margin-left: 10px;
  margin-right: 0px;
  padding-left: 40px;
  padding-right: 8px;
  box-sizing: border-box;
}

.dl-page-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: min-content;
}

/* Deadlines: two columns — active (any company open) vs all companies closed */
.dl-deadlines-columns {
  display: flex;
  flex-direction: row;
  flex: 0 1 auto;
  min-width: min-content;
  gap: 16px;
  align-items: flex-start;
}

.dl-deadlines-col {
  flex: 0 1 auto;
  min-width: min-content;
}

/* Undo global body overflow so deadlines can scroll horizontally */
body.home-body:has(.dl-shell) {
  max-width: none;
  overflow-x: auto;
  /* Without this, body stays viewport-wide while .dl-shell is wider — gradient only
     paints the viewport band; scrolling right exposes the default canvas (grey strip). */
  min-width: fit-content;
}

/* Match canvas to page background when horizontal scroll extends past body paint */
html:has(.dl-shell) {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* Override body.home-body h2 (home page section titles) — higher specificity */
body.home-body h2.dl-deadlines-col-heading {
  box-sizing: border-box;
  /* width set by syncDlHeadingWidths() to match widest .dl-card in column */
  max-width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.6rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background-color: var(--bs-primary, #0d6efd);
  border-radius: 8px;
}

/* Deadlines page — month calendar (narrower + tight horizontal padding → more width for chip row) */
.dl-calendar-card {
  width: 288px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}

.dl-calendar-card > .card-header {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.dl-calendar-card > .card-body {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.dl-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dl-cal-weekdays span {
  padding: 2px 0;
}

.dl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dl-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  border-radius: 6px;
  font-size: 0.9rem;
  user-select: none;
}

.dl-cal-cell--empty {
  visibility: hidden;
}

.dl-cal-cell--deadline {
  cursor: pointer;
  background-color: #0d6efd;
  color: #fff;
}

.dl-cal-cell--today {
  box-shadow: inset 0 0 0 2px var(--bs-primary, #0d6efd);
  border-radius: 6px;
}

.dl-cal-cell--deadline.dl-cal-cell--today {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px var(--bs-primary, #0d6efd), 0 0 0 3px var(--bs-primary, #0d6efd);
}

.tooltip.dl-cal-tooltip .tooltip-inner,
.popover.dl-cal-popover .popover-body {
  /* Grows with content up to viewport; licensor line does not wrap (see .dl-cal-tip-licensor). */
  box-sizing: border-box;
  max-width: 95vw;
  width: min(max-content, 95vw);
  text-align: left;
  overflow-x: auto;
}

.popover.dl-cal-popover .popover-header {
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.dl-cal-tip-licensor {
  white-space: nowrap;
}

.tooltip.dl-cal-tooltip .dl-cal-tip-line + .dl-cal-tip-line {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.popover.dl-cal-popover .dl-cal-tip-line + .dl-cal-tip-line {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.dl-cal-tip-line:last-child {
  margin-bottom: 0 !important;
}

/* ─── Deadline Card Grid ─── */
.dl-card-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.dl-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  padding: 5px 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}
.dl-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dl-meta-chip-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.dl-meta-chip-title {
  font-size: var(--dl-font-licensor);
  font-weight: 600;
  color: #212529;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.dl-meta-chip-quarters {
  font-weight: 400;
  font-size: var(--dl-font-quarters);
  color: #3a3f44;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

.dl-company-chip.dl-meta-chip {
  flex: 0 0 var(--dl-chip-licensor-width);
  width: var(--dl-chip-licensor-width);
  align-items: center;
  text-align: center;
  padding: 2px 8px 0;
}

.dl-meta-edit-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #0d6efd;
  cursor: pointer;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}

.dl-meta-edit-btn:hover {
  background: transparent;
  color: #0a58ca;
}

/* Filled SVG has no font-weight; offset drop-shadows mimic a heavier stroke */
.dl-meta-edit-btn:hover svg {
  filter: drop-shadow(0.45px 0 0 #0a58ca) drop-shadow(-0.45px 0 0 #0a58ca)
    drop-shadow(0 0.45px 0 #0a58ca) drop-shadow(0 -0.45px 0 #0a58ca);
}

.dl-meta-edit-btn:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
  border-radius: 2px;
}

.dl-meta-edit-btn svg {
  display: block;
  flex-shrink: 0;
  filter: none;
  transition: filter 0.12s ease;
}

.dl-date-badge {
  flex-shrink: 0;
  font-size: var(--dl-font-deadline);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
.dl-date-upcoming {
  background: #e7f1ff;
  color: #0d6efd;
}
.dl-date-past {
  background: #f1f1f1;
  color: #6c757d;
}

.dl-deadline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dl-deadline-label {
  font-size: var(--dl-font-deadline);
  font-weight: 500;
  color: #6c757d;
  flex-shrink: 0;
}

.dl-card-companies {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.dl-company-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 0;
  text-align: center;
}

.dl-company-chip:not(.dl-meta-chip):not(.dl-chip-all) {
  flex: 0 0 var(--dl-chip-width);
  width: var(--dl-chip-width);
}

.dl-company-chip.dl-chip-all {
  flex: 0 0 var(--dl-chip-width);
  width: var(--dl-chip-width);
}

/* Rollup card: width is synced to the other cards in JS; its single chip fills the rest. */
.dl-card-rollup .dl-card-companies {
  width: 100%;
}
.dl-card-rollup .dl-company-chip.dl-chip-all {
  flex: 1 1 auto;
  width: auto;
}

.dl-chip-name {
  font-weight: 600;
  font-size: var(--dl-font-company);
  color: #212529;
}

.dl-chip-action {
  display: flex;
}

.dl-chip-btn {
  padding: 2px 10px;
  white-space: nowrap;
}

.dl-chip-btn.btn-success,
.dl-chip-btn.btn-outline-secondary {
  font-size: var(--dl-font-btn-view);
}

.dl-chip-btn.btn-primary {
  font-size: var(--dl-font-btn-create-forecast);
}

.dl-chip-closed {
  background: #e8f5e9;
  border-color: #a5d6a7;
}

.dl-chip-closed-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #2e7d32;
  line-height: 1;
  margin-top: 0;
}

/* Open forecast that generated no rows. View still opens it - Refresh and Close live in
   the forecast page menu - but a paler button marks it as not yet forecastable. */
.dl-chip-btn-empty {
  font-size: var(--dl-font-btn-view);
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
}

.dl-chip-btn-empty:hover,
.dl-chip-btn-empty:focus {
  background: #d7edd9;
  border-color: #8bc78e;
  color: #1b5e20;
}

.dl-chip-empty-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #8d6e00;
  line-height: 1;
  margin-top: 0;
}

/* Seed Priors modal */
.seed-priors-choices {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.seed-priors-choice-card {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px;
  border: 1px solid #ccd2dc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.seed-priors-choice-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.seed-priors-choice-title {
  font-weight: 600;
  font-size: 1rem;
}

.seed-priors-choice-desc {
  font-size: 0.85rem;
  color: #6c757d;
}

.seed-priors-format-card {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.seed-priors-format-icon {
  font-size: 2.25rem;
  line-height: 1;
}

.seed-priors-format-card.is-selected {
  border-color: #0d6efd;
  background: #f4f8ff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.seed-priors-licensor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seed-priors-licensor-item {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #ccd2dc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}

.seed-priors-licensor-item:hover {
  border-color: #0d6efd;
  background: #f4f8ff;
}

.seed-priors-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.seed-priors-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a94a6;
}

.seed-priors-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ccd2dc;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.seed-priors-step-label {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.seed-priors-step.is-active {
  color: #0d6efd;
}

.seed-priors-step.is-active .seed-priors-step-num {
  border-color: #0d6efd;
  color: #0d6efd;
}

.seed-priors-step.is-complete {
  color: #198754;
}

.seed-priors-step.is-complete .seed-priors-step-num {
  border-color: #198754;
  background: #198754;
  color: #fff;
}

.seed-priors-step-line {
  flex: 0 1 48px;
  height: 2px;
  background: #ccd2dc;
}

.seed-priors-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  margin-bottom: 16px;
  border: 2px dashed #ced4da;
  border-radius: 8px;
  background: #f8f9fa;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.seed-priors-dropzone:hover,
.seed-priors-dropzone:focus {
  border-color: #0d6efd;
  background: #f4f8ff;
  outline: none;
}

.seed-priors-dropzone.is-dragover {
  border-color: #0d6efd;
  background: #e7f1ff;
}

.seed-priors-dropzone-icon {
  font-size: 1.75rem;
  line-height: 1;
  color: #0d6efd;
}

.seed-priors-dropzone-text {
  font-weight: 600;
}

.seed-priors-dropzone-sub {
  font-size: 0.85rem;
  color: #6c757d;
}

.seed-priors-preview-wrap {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.seed-priors-preview-table {
  margin-bottom: 0;
}

/* Import New Forecast lists every column in the matching grain, which is wider
   than the modal — scroll it sideways instead of wrapping each cell. */
.seed-priors-preview-wrap.is-wide {
  overflow-x: auto;
}

.seed-priors-preview-table.is-compact th,
.seed-priors-preview-table.is-compact td {
  white-space: nowrap;
  font-size: 0.8rem;
}

.seed-priors-preview-table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 1;
}

.seed-priors-chip {
  display: inline-block;
  background: #eef2f7;
  border: 1px solid #d6dee8;
  border-radius: 12px;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Editable Notes column in the AG-Grid forecast page */
.notes-cell {
  white-space: normal;
  line-height: 1.3;
  cursor: text;
}

/* Forecast history: latest event under the page title, full trail on hover */
.company-title-block {
  text-align: center;
  min-width: 0;
}

.forecast-history {
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #6c757d;
  cursor: default;
}

.forecast-history-latest {
  white-space: nowrap;
}

.forecast-history-tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1055;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  padding: 10px 14px;
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
  color: #212529;
}

.forecast-history:hover .forecast-history-tooltip {
  display: block;
}

.forecast-history-title {
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
}

.forecast-history-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.forecast-history-tooltip li {
  padding: 3px 0;
  border-bottom: 1px solid #f1f3f5;
  white-space: nowrap;
}

.forecast-history-tooltip li:last-child {
  border-bottom: none;
}

.forecast-history-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.forecast-history-modal-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f1f3f5;
}

.forecast-history-modal-list li:last-child {
  border-bottom: none;
}

/* ============================================================================
   ROW HISTORY: "why is this flagged" banner
   The event log says how the value was arrived at; this says what has moved
   under it since. Colours mirror the Row History badge states.
   ============================================================================ */

.rh-why {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  margin-bottom: 12px;
  font-size: 13px;
}

.rh-why-title {
  font-weight: 600;
}

.rh-why-detail {
  margin-top: 3px;
  line-height: 1.4;
}

.rh-why--stale   { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.rh-why--gone,
.rh-why--invalid { background: #fdecea; color: #b71c1c; border-color: #f5c6cb; }
.rh-why--soft    { background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; }

/* Report page — season upload modal */
.season-upload-col-file {
  width: 34%;
}

.season-upload-col-uploaded {
  width: 24%;
}

/* Deadlines modal: year quarter +/- buttons; disabled state is clear */
.dl-yq-step-btn:disabled {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    opacity: 1;
}

/* Auth pages (password reset) */
.auth-card { max-width: 400px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); text-align: center; }
.auth-card form { display: flex; flex-direction: column; }
.auth-card input { font-size: 16px; padding: 10px; margin: 5px 0 10px; border-radius: 5px; border: 1px solid #ddd; }
.auth-card button { font-size: 16px; padding: 10px; border: none; border-radius: 5px; background: #007bff; color: #fff; cursor: pointer; }
.auth-card button:hover { background: #0056b3; }