/**
 * grid.css — INCENT MVC Core
 * Migrated from: Styles/Site.css (.page-grid, .grid-wrapper, .sticky-header,
 *                .approvalAction, .status-* blocks)
 *                + inline <style> blocks repeated in every legacy .aspx page
 *
 * All data-grid, table, and scrollable-wrapper styles are centralised here.
 * Imported by _Layout.cshtml after site.css.
 */

/* ═══════════════════════════════════════════════════════════════
   1. GRID WRAPPER (scrollable container)
   Migrated from: .grid-wrapper, .gw (shorthand alias)
═══════════════════════════════════════════════════════════════ */
.grid-wrapper,
.gw {
  width: 100%;
  max-height: calc(100vh - 260px);
  overflow: auto;
  margin: 0 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  /* Smooth inertia scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.grid-wrapper.topbotMar,
.gw.topbotMar {
  margin: 15px 0;
}

/* Scrollbar styling */
.grid-wrapper::-webkit-scrollbar,
.gw::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.grid-wrapper::-webkit-scrollbar-track,
.gw::-webkit-scrollbar-track {
  background: var(--surface);
}
.grid-wrapper::-webkit-scrollbar-thumb,
.gw::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
.grid-wrapper::-webkit-scrollbar-thumb:hover,
.gw::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Shadow on scroll indicator */
.grid-wrapper.scrolled,
.gw.scrolled {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   2. TABLE BASE
   Migrated from: .grid-wrapper table tr td/th, .page-grid
═══════════════════════════════════════════════════════════════ */
.page-grid {
  width: 100%;
  margin: 0;
  padding: 0;
}

.grid-wrapper table,
.gw table,
.page-grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg);
}

.grid-wrapper table tr td,
.grid-wrapper table tr th,
.gw table tr td,
.gw table tr th {
  padding: 6px 8px;
  border: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
  color: #1f2933;
  font-weight: 500;
  line-height: 1.35;
}

/* Specific column widths (kept from legacy .width-150, .width-100) */
.grid-wrapper table tr td.width-150,
.gw table tr td.width-150 {
  width: 150px;
}

.grid-wrapper table tr td.width-100,
.gw table tr td.width-100 {
  width: 100px;
}

/* ═══════════════════════════════════════════════════════════════
   3. STICKY HEADER
   Migrated from: .sticky-header, .table-header tr td rules
═══════════════════════════════════════════════════════════════ */
.sticky-header,
.page-grid .table-header tr td {
  background: var(--primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
  font:
    600 11.5px/1.4 "Inter",
    Arial,
    sans-serif;
  border: none;
  word-wrap: break-word;
  text-align: left;
  padding: 8px 8px;
  white-space: nowrap;
  user-select: none;
}

.sticky-header th,
.sticky-header td {
  background: var(--primary);
  color: #fff;
  padding: 8px 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
}

.sticky-header th:last-child {
  border-right: none;
}

/* ═══════════════════════════════════════════════════════════════
   4. ROW STYLING
   Row alternation, hover, and the designation-based colouring
   used by CoachingForm, KPI, and PCPM views.
═══════════════════════════════════════════════════════════════ */
/* Standard alternating rows */
.grid-wrapper tbody tr:nth-child(even),
.gw tbody tr:nth-child(even) {
  background-color: #f5fbfc;
}

.grid-wrapper tbody tr:hover,
.gw tbody tr:hover {
  background-color: #e0f4f8 !important;
  transition: background 0.15s;
}

/* Designation-based row colours (GridView1_RowDataBound equivalent) */
tr.row-am {
  background-color: #fffde7 !important;
} /* AM  — yellow-tint */
tr.row-rm {
  background-color: #e8f5e9 !important;
} /* RM  — green-tint  */
tr.row-dsm {
  background-color: #e3f2fd !important;
} /* DSM — blue-tint   */
tr.row-sm {
  background-color: #fce4ec !important;
} /* SM/GM — pink-tint */
tr.row-zsm {
  background-color: #f3e5f5 !important;
} /* ZSM — purple-tint */
tr.row-nat {
  background-color: #fff3e0 !important;
} /* NAT/GM — orange-tint */

/* Eligibility status rows (CoachingForm, IncentiveForm) */
tr.row-eligible {
  background-color: #e8f5e9 !important;
}
tr.row-not-eligible {
  background-color: #fff9c4 !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. INLINE EDIT CELL
   Used by CoachingForm ADMIN ACH% inline edit,
   PCPM inline approval widgets.
═══════════════════════════════════════════════════════════════ */
.edit-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-align: center;
}

.edit-cell .vf-display {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-width: 30px;
  display: inline-block;
  text-align: center;
}

.edit-cell .vf-display:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.edit-cell .vf-input {
  display: none;
  width: 70px;
  height: 26px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 12px;
  outline: none;
  transition: box-shadow 0.2s;
}

.edit-cell .vf-input:focus {
  box-shadow: 0 0 0 2px rgba(13, 157, 188, 0.2);
}

.edit-cell .save-btn,
.edit-cell .cancel-btn {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 3px;
  border-radius: 3px;
  transition: background 0.15s;
}

.edit-cell .save-btn {
  color: var(--success);
}
.edit-cell .cancel-btn {
  color: var(--danger);
}
.edit-cell .save-btn:hover {
  background: #d4edda;
}
.edit-cell .cancel-btn:hover {
  background: #f8d7da;
}

.ach-display {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0d9dbc;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: 0.15s;
  text-align: center;
}

.ach-display:hover,
.ach-display:focus {
  background: #0d9dbc;
  color: #fff;
  text-decoration: none;
  outline: none;
}

.ach-input,
.editable-ach-input {
  display: none;
  min-width: 68px;
  max-width: 78px;
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #0d9dbc;
  border-radius: 4px;
  background: #fff;
  color: #000;
  text-align: center;
  font-size: 11px;
}

.save-ach-btn,
.cancel-ach-btn {
  display: none;
  border: none;
  border-radius: 4px;
  padding: 3px 7px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.save-ach-btn {
  background: #0d9dbc;
}

.cancel-ach-btn {
  background: #dc3545;
}

/* Uniform filter strip used across reports, brands, KPI, incentive, dashboard and simulator pages. */
.filter-bar,
.filter-section,
.filter-panel,
.sticky-filters,
.fb,
.page-content > form#filterForm,
.page-content > div:has(> table select[id^="ddl"]) {
  border-top: 1px solid #9c9c9c !important;
  border-bottom: 1px solid #9c9c9c !important;
  margin: 8px 0 14px !important;
  padding: 9px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.page-content hr:has(+ .filter-bar),
.page-content hr:has(+ .filter-section),
.page-content hr:has(+ .filter-panel),
.page-content hr:has(+ .sticky-filters),
.page-content hr:has(+ .fb),
.filter-bar + hr,
.filter-section + hr,
.filter-panel + hr,
.sticky-filters + hr,
.fb + hr {
  display: none !important;
}

.filter-bar form,
.filter-section form,
.filter-panel form,
.sticky-filters form,
.fb form,
form#filterForm {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin: 0 !important;
}

.filter-bar form > div,
.filter-section form > div,
.fb form > div,
.filter-section form > div > div,
.filter-panel td,
.filter-table td,
.sticky-filters td,
.page-content > div:has(> table select[id^="ddl"]) td {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.filter-section form > div:has(> div) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
}

.filter-bar label,
.filter-section label,
.filter-panel label,
.filter-table label,
.sticky-filters label,
.fb label,
.page-content > div:has(> table select[id^="ddl"]) label {
  margin: 0 !important;
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
}

.filter-bar select,
.filter-section select,
.filter-panel select,
.filter-table select,
.sticky-filters select,
.fb select,
.filter-control,
.filterDdl,
.page-content > div:has(> table select[id^="ddl"]) .form-select {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 24px !important;
  padding: 2px 24px 2px 6px !important;
  border: 1px solid #9f9f9f !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

.filter-bar select option,
.filter-section select option,
.filter-panel select option,
.filter-table select option,
.sticky-filters select option,
.fb select option,
.filter-control option,
.filterDdl option {
  color: #111 !important;
  background: #fff !important;
  font-size: 12px !important;
}

.filter-bar select[name="designation"],
.filter-section select[name="designation"],
.filter-panel select[name="designation"],
.filter-table select[name="designation"],
.sticky-filters select[name="designation"],
.fb select[name="designation"],
.filter-control[name="designation"],
.filterDdl[name="designation"],
.page-content > div:has(> table select[id^="ddl"]) #ddlDesignation {
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
}

.filter-bar select[name="approvalStatus"],
.filter-section select[name="approvalStatus"],
.filter-panel select[name="approvalStatus"],
.filter-table select[name="approvalStatus"],
.sticky-filters select[name="approvalStatus"] {
  width: 134px !important;
  min-width: 134px !important;
  max-width: 134px !important;
}

.filter-bar .chosen-container,
.filter-section .chosen-container,
.filter-panel .chosen-container,
.filter-table .chosen-container,
.sticky-filters .chosen-container {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.filter-section div:has(> select[name="designation"]) .chosen-container,
.filter-bar div:has(> select[name="designation"]) .chosen-container,
.filter-panel td:has(> select[name="designation"]) .chosen-container,
.filter-table td:has(> select[name="designation"]) .chosen-container,
.sticky-filters td:has(> select[name="designation"]) .chosen-container {
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
}

.filter-section div:has(> select[name="approvalStatus"]) .chosen-container,
.filter-bar div:has(> select[name="approvalStatus"]) .chosen-container,
.filter-panel td:has(> select[name="approvalStatus"]) .chosen-container,
.filter-table td:has(> select[name="approvalStatus"]) .chosen-container,
.sticky-filters td:has(> select[name="approvalStatus"]) .chosen-container {
  width: 134px !important;
  min-width: 134px !important;
  max-width: 134px !important;
}

.filter-bar .chosen-container-single .chosen-single,
.filter-section .chosen-container-single .chosen-single,
.filter-panel .chosen-container-single .chosen-single,
.filter-table .chosen-container-single .chosen-single,
.sticky-filters .chosen-container-single .chosen-single {
  height: 24px !important;
  padding: 2px 24px 2px 6px !important;
  border: 1px solid #9f9f9f !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  color: #000 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

.filter-bar .chosen-container-single .chosen-single span,
.filter-section .chosen-container-single .chosen-single span,
.filter-panel .chosen-container-single .chosen-single span,
.filter-table .chosen-container-single .chosen-single span,
.sticky-filters .chosen-container-single .chosen-single span {
  color: #111 !important;
  font-weight: 500 !important;
}

.filter-bar button,
.filter-section button,
.filter-panel button,
.filter-table button,
.sticky-filters button,
.fb button,
.clear-btn,
.clr,
.styled-button,
.action-button,
.page-content > div:has(> table select[id^="ddl"]) button {
  width: 70px !important;
  min-width: 70px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid #0d9dbc !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  text-align: center !important;
}

.filter-bar .export-btn,
.filter-section .export-btn,
.filter-panel .export-btn,
.filter-table .export-btn,
.sticky-filters .export-btn,
.fb .exp,
.export-btn,
.exp {
  /* .filter-bar button:last-child,
.filter-section button:last-child,
.filter-panel button:last-child,
.filter-table td:last-child button,
.sticky-filters td:last-child button,
.fb button:last-child,
.page-content > div:has(> table select[id^="ddl"]) td:last-child button { */
  width: 118px !important;
  min-width: 118px !important;
  border-color: #28a745 !important;
  background: #28a745 !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  font-weight: 700 !important;
}

.filter-bar button:hover,
.filter-section button:hover,
.filter-panel button:hover,
.filter-table button:hover,
.sticky-filters button:hover,
.fb button:hover,
.page-content > div:has(> table select[id^="ddl"]) button:hover {
  filter: brightness(0.97);
}

.clear-btn,
.styled-button.clear-btn,
.action-button.clear-btn,
.filter-bar .clear-btn,
.filter-section .clear-btn,
.filter-panel .clear-btn,
.filter-table .clear-btn,
.sticky-filters .clear-btn,
.fb .clear-btn {
  width: 70px !important;
  min-width: 70px !important;
  border-color: #0d9dbc !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.clear-btn:hover,
.styled-button.clear-btn:hover,
.action-button.clear-btn:hover,
.filter-bar .clear-btn:hover,
.filter-section .clear-btn:hover,
.filter-panel .clear-btn:hover,
.filter-table .clear-btn:hover,
.sticky-filters .clear-btn:hover,
.fb .clear-btn:hover {
  background: #e9fbff !important;
  border-color: #0d9dbc !important;
  color: #000 !important;
}

.prompt-message {
  padding: 9px 0 !important;
  color: #000 !important;
  font-family: Calibri, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#achSaveMessage {
  display: none;
  margin: 8px 12px;
  padding: 8px 14px;
  background: #d4edda;
  border-left: 4px solid #28a745;
  border-radius: 6px;
  color: #155724;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   6. APPROVAL ACTION ROW
   Migrated from: .approvalAction, .approvalAction input
═══════════════════════════════════════════════════════════════ */
.approvalAction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.approvalAction input {
  margin: 0 4px;
  min-width: 38px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 12px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   7. ELIGIBILITY BADGES (CoachingForm / IncentiveForm)
   Server-rendered via C# string; CSS-only presentation.
═══════════════════════════════════════════════════════════════ */
.badge-eligible {
  display: inline-block;
  background: #d4edda;
  color: #155724;
  border: 1px solid #28a745;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-not-eligible {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   8. TOTALS / SUMMARY ROW
   Used by Brand, Incentive, KPI, PCPM summary rows.
═══════════════════════════════════════════════════════════════ */
tr.total-row td,
tr.summary-row td {
  background: var(--primary-deep) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px;
  border-top: 2px solid var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════
   9. LIVE SEARCH INPUT (above grids)
═══════════════════════════════════════════════════════════════ */
.grid-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.grid-search input {
  flex: 0 0 220px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.grid-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 157, 188, 0.12);
}

.grid-search .search-icon {
  color: var(--muted);
  font-size: 13px;
}

/* Enterprise grid readability baseline.
   These typography and spacing rules do not alter row highlight backgrounds. */
.sticky-grid-wrapper table,
.table-responsive table,
.table-scroll-wrapper table,
.grid-wrapper table,
.gw table,
.data-table,
.section-table,
.sticky-grid,
table.dataTable {
  font-size: 13px;
}

.sticky-grid-wrapper th,
.table-responsive thead th,
.table-scroll-wrapper thead th,
.grid-wrapper th,
.gw th,
.data-table thead th,
.data-table th,
.section-table th,
.sticky-grid thead th,
table.dataTable thead th {
  padding: 9px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fff;
  border-color: #087f99;
  height: auto !important;
}

.sticky-grid-wrapper td,
.table-responsive tbody td,
.table-scroll-wrapper tbody td,
.grid-wrapper td,
.gw td,
.data-table tbody td,
.data-table td,
.section-table td,
.sticky-grid tbody td,
table.dataTable tbody td {
  padding: 7px 8px !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.35 !important;
  color: #1f2933;
  border-color: #dde7ea;
}

.gw tr.row-sm td,
.grid-wrapper tr.row-sm td,
.sticky-grid-wrapper tr.row-sm td,
.data-table tr.row-sm td,
tr.total-row td,
tr.summary-row td {
  color: #fff !important;
}

td.ach-hit,
.ach-hit {
  color: #0a8a00 !important;
}

td.ach-miss,
.ach-miss {
  color: #cc0000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. PRINT (grid-specific)
═══════════════════════════════════════════════════════════════ */
/* Standard data grid skin.
   Uses !important because many migrated pages still carry inline legacy table CSS. */
.gridview-container,
.sticky-grid-wrapper,
.grid-wrapper,
.gw,
.table-scroll-wrapper,
.table-responsive {
  width: 100% !important;
  max-height: calc(100vh - 245px) !important;
  overflow: auto !important;
  margin: 10px 0 18px !important;
  border: 1px solid #cfdfe3 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  -webkit-overflow-scrolling: touch;
}

.gridview-container::-webkit-scrollbar,
.sticky-grid-wrapper::-webkit-scrollbar,
.grid-wrapper::-webkit-scrollbar,
.gw::-webkit-scrollbar,
.table-scroll-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.gridview-container::-webkit-scrollbar-thumb,
.sticky-grid-wrapper::-webkit-scrollbar-thumb,
.grid-wrapper::-webkit-scrollbar-thumb,
.gw::-webkit-scrollbar-thumb,
.table-scroll-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #8aa8b1;
  border-radius: 8px;
}

.gridview-container table,
.sticky-grid-wrapper table,
.grid-wrapper table,
.gw table,
.table-scroll-wrapper table,
.table-responsive table,
table.gridview-freeze,
table.data-table {
  width: 100% !important;
  min-width: 1100px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto;
  background: #fff !important;
  font-family: "Inter", Calibri, Arial, sans-serif !important;
}

.gridview-container thead th,
.gridview-container .data-table thead th,
.gridview-container .gridview-freeze thead th,
.sticky-grid-wrapper thead th,
.grid-wrapper thead th,
.gw thead th,
.table-scroll-wrapper thead th,
.table-responsive thead th,
table.data-table thead th,
table.gridview-freeze thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #0d9dbc !important;
  color: #fff !important;
  padding: 8px 7px !important;
  border: 0 !important;
  border-right: 1px solid #35b1c9 !important;
  border-bottom: 1px solid #087f99 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: normal !important;
}

.gridview-container tbody td,
.gridview-container .data-table tbody td,
.gridview-container .gridview-freeze tbody td,
.sticky-grid-wrapper tbody td,
.grid-wrapper tbody td,
.gw tbody td,
.table-scroll-wrapper tbody td,
.table-responsive tbody td,
table.data-table tbody td,
table.gridview-freeze tbody td {
  padding: 6px 7px !important;
  border: 0 !important;
  border-right: 1px solid #d8e8ed !important;
  border-bottom: 1px solid #d8e8ed !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  background: inherit !important;
}

.gridview-container tbody tr:nth-child(odd),
.sticky-grid-wrapper tbody tr:nth-child(odd),
.grid-wrapper tbody tr:nth-child(odd),
.gw tbody tr:nth-child(odd),
.table-scroll-wrapper tbody tr:nth-child(odd),
.table-responsive tbody tr:nth-child(odd),
table.data-table tbody tr:nth-child(odd),
table.gridview-freeze tbody tr:nth-child(odd) {
  background: #fff !important;
}

.gridview-container tbody tr:nth-child(even),
.sticky-grid-wrapper tbody tr:nth-child(even),
.grid-wrapper tbody tr:nth-child(even),
.gw tbody tr:nth-child(even),
.table-scroll-wrapper tbody tr:nth-child(even),
.table-responsive tbody tr:nth-child(even),
table.data-table tbody tr:nth-child(even),
table.gridview-freeze tbody tr:nth-child(even) {
  background: #f5f8f9 !important;
}

.gridview-container tbody tr:hover,
.sticky-grid-wrapper tbody tr:hover,
.grid-wrapper tbody tr:hover,
.gw tbody tr:hover,
.table-scroll-wrapper tbody tr:hover,
.table-responsive tbody tr:hover,
table.data-table tbody tr:hover,
table.gridview-freeze tbody tr:hover {
  background: #d9f0f7 !important;
}

.gridview-container tbody tr.row-am,
.sticky-grid-wrapper tbody tr.row-am,
.grid-wrapper tbody tr.row-am,
.gw tbody tr.row-am,
.table-scroll-wrapper tbody tr.row-am,
.table-responsive tbody tr.row-am,
table.data-table tbody tr.row-am,
table.dataTable tbody tr.row-am,
table.gridview-freeze tbody tr.row-am,
.gridview-container tbody tr.am-row,
.sticky-grid-wrapper tbody tr.am-row,
.grid-wrapper tbody tr.am-row,
.gw tbody tr.am-row,
.table-scroll-wrapper tbody tr.am-row,
.table-responsive tbody tr.am-row,
table.data-table tbody tr.am-row,
table.dataTable tbody tr.am-row,
table.gridview-freeze tbody tr.am-row {
  background: #b5e1dc !important;
}

.gridview-container tbody tr.row-rbm,
.sticky-grid-wrapper tbody tr.row-rbm,
.grid-wrapper tbody tr.row-rbm,
.gw tbody tr.row-rbm,
.table-scroll-wrapper tbody tr.row-rbm,
.table-responsive tbody tr.row-rbm,
table.data-table tbody tr.row-rbm,
table.dataTable tbody tr.row-rbm,
table.gridview-freeze tbody tr.row-rbm,
.gridview-container tbody tr.row-rm,
.sticky-grid-wrapper tbody tr.row-rm,
.grid-wrapper tbody tr.row-rm,
.gw tbody tr.row-rm,
.table-scroll-wrapper tbody tr.row-rm,
.table-responsive tbody tr.row-rm,
table.data-table tbody tr.row-rm,
table.dataTable tbody tr.row-rm,
table.gridview-freeze tbody tr.row-rm,
.gridview-container tbody tr.rbm-row,
.sticky-grid-wrapper tbody tr.rbm-row,
.grid-wrapper tbody tr.rbm-row,
.gw tbody tr.rbm-row,
.table-scroll-wrapper tbody tr.rbm-row,
.table-responsive tbody tr.rbm-row,
table.data-table tbody tr.rbm-row,
table.dataTable tbody tr.rbm-row,
table.gridview-freeze tbody tr.rbm-row,
.gridview-container tbody tr.rm-row,
.sticky-grid-wrapper tbody tr.rm-row,
.grid-wrapper tbody tr.rm-row,
.gw tbody tr.rm-row,
.table-scroll-wrapper tbody tr.rm-row,
.table-responsive tbody tr.rm-row,
table.data-table tbody tr.rm-row,
table.dataTable tbody tr.rm-row,
table.gridview-freeze tbody tr.rm-row {
  background: #8ed1cb !important;
}

.gridview-container tbody tr.row-zbm,
.sticky-grid-wrapper tbody tr.row-zbm,
.grid-wrapper tbody tr.row-zbm,
.gw tbody tr.row-zbm,
.table-scroll-wrapper tbody tr.row-zbm,
.table-responsive tbody tr.row-zbm,
table.data-table tbody tr.row-zbm,
table.dataTable tbody tr.row-zbm,
table.gridview-freeze tbody tr.row-zbm,
.gridview-container tbody tr.row-dsm,
.sticky-grid-wrapper tbody tr.row-dsm,
.grid-wrapper tbody tr.row-dsm,
.gw tbody tr.row-dsm,
.table-scroll-wrapper tbody tr.row-dsm,
.table-responsive tbody tr.row-dsm,
table.data-table tbody tr.row-dsm,
table.dataTable tbody tr.row-dsm,
table.gridview-freeze tbody tr.row-dsm,
.gridview-container tbody tr.zbm-row,
.sticky-grid-wrapper tbody tr.zbm-row,
.grid-wrapper tbody tr.zbm-row,
.gw tbody tr.zbm-row,
.table-scroll-wrapper tbody tr.zbm-row,
.table-responsive tbody tr.zbm-row,
table.data-table tbody tr.zbm-row,
table.dataTable tbody tr.zbm-row,
table.gridview-freeze tbody tr.zbm-row,
.gridview-container tbody tr.dsm-row,
.sticky-grid-wrapper tbody tr.dsm-row,
.grid-wrapper tbody tr.dsm-row,
.gw tbody tr.dsm-row,
.table-scroll-wrapper tbody tr.dsm-row,
.table-responsive tbody tr.dsm-row,
table.data-table tbody tr.dsm-row,
table.dataTable tbody tr.dsm-row,
table.gridview-freeze tbody tr.dsm-row {
  background: #62c2bb !important;
}

.gridview-container tbody tr.row-sm-gm,
.sticky-grid-wrapper tbody tr.row-sm-gm,
.grid-wrapper tbody tr.row-sm-gm,
.gw tbody tr.row-sm-gm,
.table-scroll-wrapper tbody tr.row-sm-gm,
.table-responsive tbody tr.row-sm-gm,
table.data-table tbody tr.row-sm-gm,
table.dataTable tbody tr.row-sm-gm,
table.gridview-freeze tbody tr.row-sm-gm,
.gridview-container tbody tr.row-sm,
.sticky-grid-wrapper tbody tr.row-sm,
.grid-wrapper tbody tr.row-sm,
.gw tbody tr.row-sm,
.table-scroll-wrapper tbody tr.row-sm,
.table-responsive tbody tr.row-sm,
table.data-table tbody tr.row-sm,
table.dataTable tbody tr.row-sm,
table.gridview-freeze tbody tr.row-sm {
  background: #20b0a0 !important;
  color: #fff !important;
}

.gridview-container tbody tr.row-admin,
.sticky-grid-wrapper tbody tr.row-admin,
.grid-wrapper tbody tr.row-admin,
.gw tbody tr.row-admin,
.table-scroll-wrapper tbody tr.row-admin,
.table-responsive tbody tr.row-admin,
table.data-table tbody tr.row-admin,
table.dataTable tbody tr.row-admin,
table.gridview-freeze tbody tr.row-admin {
  background: #edf7f6 !important;
}

.gridview-container tbody tr.row-sm td,
.gridview-container tbody tr.row-sm-gm td,
.sticky-grid-wrapper tbody tr.row-sm td,
.sticky-grid-wrapper tbody tr.row-sm-gm td,
.grid-wrapper tbody tr.row-sm td,
.grid-wrapper tbody tr.row-sm-gm td,
.gw tbody tr.row-sm td,
.gw tbody tr.row-sm-gm td,
.table-scroll-wrapper tbody tr.row-sm td,
.table-scroll-wrapper tbody tr.row-sm-gm td,
.table-responsive tbody tr.row-sm td,
.table-responsive tbody tr.row-sm-gm td,
table.data-table tbody tr.row-sm td,
table.data-table tbody tr.row-sm-gm td,
table.dataTable tbody tr.row-sm td,
table.dataTable tbody tr.row-sm-gm td,
table.gridview-freeze tbody tr.row-sm td,
table.gridview-freeze tbody tr.row-sm-gm td {
  color: #fff !important;
}

.gridview-container td.text-left,
.sticky-grid-wrapper td.text-left,
.grid-wrapper td.text-left,
.gw td.text-left,
.table-scroll-wrapper td.text-left,
.table-responsive td.text-left,
table.data-table td.text-left,
table.gridview-freeze td.text-left {
  text-align: left !important;
}

.gridview-container th:first-child,
.sticky-grid-wrapper th:first-child,
.grid-wrapper th:first-child,
.gw th:first-child,
.table-scroll-wrapper th:first-child,
.table-responsive th:first-child,
.gridview-container td:first-child,
.sticky-grid-wrapper td:first-child,
.grid-wrapper td:first-child,
.gw td:first-child,
.table-scroll-wrapper td:first-child,
.table-responsive td:first-child {
  border-left: 0 !important;
}

.gridview-container th:last-child,
.sticky-grid-wrapper th:last-child,
.grid-wrapper th:last-child,
.gw th:last-child,
.table-scroll-wrapper th:last-child,
.table-responsive th:last-child,
.gridview-container td:last-child,
.sticky-grid-wrapper td:last-child,
.grid-wrapper td:last-child,
.gw td:last-child,
.table-scroll-wrapper td:last-child,
.table-responsive td:last-child {
  border-right: 0 !important;
}

.gridview-container .sticky-col,
.sticky-grid-wrapper .sticky-col,
.grid-wrapper .sticky-col,
.gw .sticky-col {
  background: inherit !important;
  box-shadow: 2px 0 5px -3px rgba(15, 23, 42, 0.35);
}

.gridview-container thead .sticky-col,
.sticky-grid-wrapper thead .sticky-col,
.grid-wrapper thead .sticky-col,
.gw thead .sticky-col {
  background: #0d9dbc !important;
  z-index: 35 !important;
}

@media print {
  .grid-wrapper,
  .gw {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
  }

  .sticky-header,
  .sticky-header th {
    position: static !important;
    background: #ccc !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  tr.row-am,
  tr.row-rm,
  tr.row-dsm,
  tr.row-sm,
  tr.row-zsm,
  tr.row-nat {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .edit-cell .vf-input,
  .edit-cell .save-btn,
  .edit-cell .cancel-btn,
  .grid-search {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE TABLE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .grid-wrapper,
  .gw {
    max-height: calc(100vh - 300px);
    border-radius: 6px;
  }
  .grid-wrapper table tr td,
  .grid-wrapper table tr th,
  .gw table tr td,
  .gw table tr th {
    padding: 5px 6px;
    font-size: 12px;
  }
  .sticky-header th {
    font-size: 11px;
    padding: 6px;
  }
}

/* Data-aware table sizing
   Keeps wide values inside their own column and lets the wrapper scroll instead
   of clipping text or letting sticky columns overlap each other. */
.gridview-container,
.sticky-grid-wrapper,
.grid-wrapper,
.gw,
.table-scroll-wrapper,
.table-responsive,
#breakdownWrapper {
  overflow-x: auto !important;
  overflow-y: auto;
  max-width: 100%;
}

.gridview-container table,
.sticky-grid-wrapper table,
.grid-wrapper table,
.gw table,
.table-scroll-wrapper table,
.table-responsive table,
table.data-table,
table.dataTable,
table.gridview-freeze,
.section-table {
  table-layout: auto !important;
  width: max-content;
  min-width: 100%;
}

.gridview-container th,
.gridview-container td,
.sticky-grid-wrapper th,
.sticky-grid-wrapper td,
.grid-wrapper th,
.grid-wrapper td,
.gw th,
.gw td,
.table-scroll-wrapper th,
.table-scroll-wrapper td,
.table-responsive th,
.table-responsive td,
table.data-table th,
table.data-table td,
table.dataTable th,
table.dataTable td,
table.gridview-freeze th,
table.gridview-freeze td,
.section-table th,
.section-table td {
  max-width: none;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
}

.gridview-container td,
.sticky-grid-wrapper td,
.grid-wrapper td,
.gw td,
.table-scroll-wrapper td,
.table-responsive td,
table.data-table td,
table.dataTable td,
table.gridview-freeze td,
.section-table td {
  white-space: nowrap;
}

.gridview-container th,
.sticky-grid-wrapper th,
.grid-wrapper th,
.gw th,
.table-scroll-wrapper th,
.table-responsive th,
table.data-table th,
table.dataTable th,
table.gridview-freeze th,
.section-table th {
  white-space: normal;
  overflow-wrap: anywhere;
}

.gridview-container .sticky-col,
.sticky-grid-wrapper .sticky-col,
.grid-wrapper .sticky-col,
.gw .sticky-col,
.table-scroll-wrapper .sticky-col,
.table-responsive .sticky-col,
table.data-table .sticky-col,
table.dataTable .sticky-col,
table.gridview-freeze .sticky-col {
  left: var(--sticky-left, 0px) !important;
}