:root {
  --bg: #f3f7fc;
  --panel: #ffffff;
  --panel-2: #f8fbff;
  --text: #172033;
  --muted: #637083;
  --line: #d8e3f2;
  --primary: #0b73c8;
  --primary-dark: #075fa7;
  --primary-soft: #e6f3ff;
  --sidebar: #101a2d;
  --sidebar-soft: #1b2943;
  --danger: #d92d20;
  --success: #07803f;
  --warning: #b54708;
  --shadow: 0 9px 24px rgba(16, 24, 40, 0.07);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  min-width: 1180px;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

.app-shell {
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  width: 248px;
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  color: #fff;
  background: linear-gradient(180deg, var(--sidebar) 0%, #0c1424 100%);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #12b2ff, #0b73c8);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(11,115,200,0.35);
}

.brand-title { font-size: 18px; font-weight: 800; }
.brand-subtitle { margin-top: 4px; color: rgba(255,255,255,0.58); font-size: 12px; }

.menu-panel { margin-top: 24px; }
.menu-title { margin: 0 6px 12px; font-size: 19px; font-weight: 800; letter-spacing: 0.02em; }

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 13px 14px;
  border: 0;
  border-radius: 14px;
  color: rgba(255,255,255,0.78);
  background: transparent;
  text-align: left;
  transition: 0.18s ease;
}
.menu-item:hover, .menu-item.active { color: #fff; background: var(--sidebar-soft); }
.menu-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.38); }
.menu-item.active .menu-dot { background: #12b2ff; box-shadow: 0 0 0 5px rgba(18,178,255,0.15); }

.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

.sidebar-scope-control {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.sidebar-scope-control span,
.footer-label {
  color: rgba(255,255,255,0.66);
  font-size: 13px;
  font-weight: 800;
}
.sidebar-scope-control select {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 0 10px;
  color: #0f172a;
  background: #fff;
  outline: none;
  font-size: 14px;
  font-weight: 700;
}
.sidebar-footer {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
}
.domain-chip { margin-top: 8px; color: #fff; font-weight: 800; word-break: break-all; }

.main-content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 8px 14px 10px;
  overflow: hidden;
}

h1, h2, p { margin: 0; }

.filter-card, .table-card, .summary-card {
  background: var(--panel);
  border: 1px solid rgba(217,226,239,0.95);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.filter-card {
  flex: 0 0 auto;
  padding: 10px 12px;
  margin-bottom: 8px;
  overflow: visible;
}

.filter-row {
  display: flex;
  align-items: end;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.filter-row + .filter-row { margin-top: 8px; }
.filter-row-top { flex-wrap: nowrap; }
.filter-row-search { flex-wrap: nowrap; }
.filter-actions-right {
  margin-left: auto;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 280px;
}

.field-group, .quick-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.quick-range { flex: 0 0 285px; }
.date-field { flex: 0 0 160px; }
.search-scope { flex: 0 0 170px; }
.search-input-wrap { flex: 1 1 auto; }

.field-group span, .quick-label {
  color: #344054;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  outline: none;
  color: var(--text);
  background: #fff;
  font-size: 16px;
  font-weight: 650;
}
.field-group input, .field-group select { height: 42px; }
.field-group textarea { min-height: 78px; padding: 10px 12px; resize: vertical; }

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.sidebar-scope-control select:focus {
  border-color: #65b8f3;
  box-shadow: 0 0 0 3px rgba(11,115,200,0.13);
}

.quick-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-2);
}
.range-btn {
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: #344054;
  background: transparent;
  font-size: 18px;
  font-weight: 850;
}
.range-btn.active,
.range-btn:hover {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 7px 16px rgba(11,115,200,0.20);
}

.export-btn,
.add-agent-btn,
.search-btn,
.reset-btn,
.pagination-bar button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.export-btn {
  flex: 0 0 126px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #12a7f2);
  box-shadow: 0 9px 18px rgba(11,115,200,0.20);
}
.add-agent-btn {
  flex: 0 0 132px;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 9px 18px rgba(22,163,74,0.18);
}
.add-agent-btn.is-hidden { display: none; }

.search-btn {
  flex: 0 0 92px;
  color: #fff;
  background: var(--primary);
}
.reset-btn {
  flex: 0 0 116px;
  color: var(--primary-dark);
  background: var(--primary-soft);
}
.export-btn:hover { background: linear-gradient(135deg, var(--primary-dark), #0e92d4); }
.add-agent-btn:hover { background: linear-gradient(135deg, #15803d, #16a34a); }
.search-btn:hover { background: var(--primary-dark); }
.reset-btn:hover { background: #d5ebff; }

.summary-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.summary-card {
  padding: 12px 14px;
  box-shadow: none;
  min-width: 0;
}
.summary-card span,
.summary-card em {
  display: block;
  color: var(--muted);
  font-style: normal;
}
.summary-card span { font-size: 12px; font-weight: 800; }
.summary-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 23px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-card em {
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-card strong.positive, .amount.positive { color: var(--success); }
.summary-card strong.negative, .amount.negative { color: var(--danger); }

.table-card {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
}


.hierarchy-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #f0f8ff;
  color: #075fa7;
  font-size: 14px;
  font-weight: 900;
}
.hierarchy-bar[hidden] { display: none; }
.hierarchy-bar button {
  flex: 0 0 auto;
  height: 28px;
  border: 1px solid #b7d9f5;
  border-radius: 9px;
  padding: 0 10px;
  color: #075fa7;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}
.downline-link {
  min-width: 42px;
  height: 24px;
  border: 1px solid #9ad0f7;
  border-radius: 999px;
  padding: 0 10px;
  color: #075fa7;
  background: #e8f5ff;
  font-size: 12px;
  font-weight: 900;
}
.downline-link:hover { background: #d6edff; }
.downline-zero { color: #98a2b3; font-weight: 800; }

.table-scroll {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
  scrollbar-gutter: stable;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 38px;
  padding: 0 6px;
  color: #fff;
  background: #0675bd;
  border-right: 1px solid rgba(255,255,255,0.24);
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

tbody td {
  height: 38px;
  padding: 0 6px;
  border-right: 1px solid #e4ebf3;
  border-bottom: 1px solid #e4ebf3;
  color: #263447;
  text-align: center;
  white-space: nowrap;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

tbody tr:nth-child(even) td { background: #fbfdff; }
tbody tr:hover td { background: #eef7ff; }

thead th.sticky-left,
tbody td.sticky-left {
  position: sticky !important;
}
thead th.sticky-left {
  z-index: 9 !important;
  background: #0675bd;
}
tbody td.sticky-left {
  z-index: 6 !important;
  background: #fff;
}
tbody tr:nth-child(even) td.sticky-left { background: #fbfdff; }
tbody tr:hover td.sticky-left { background: #eef7ff; }
thead th.sticky-left-edge,
tbody td.sticky-left-edge {
  box-shadow: 8px 0 13px rgba(16,24,40,0.13);
}

thead th.sticky-action,
tbody td.sticky-action {
  position: sticky !important;
}
thead th.sticky-action {
  z-index: 10 !important;
  background: #0675bd;
  box-shadow: -8px 0 13px rgba(16,24,40,0.18);
}
tbody td.sticky-action {
  z-index: 7 !important;
  background: #fff;
  box-shadow: -8px 0 13px rgba(16,24,40,0.12);
}
tbody tr:nth-child(even) td.sticky-action { background: #fbfdff; }
tbody tr:hover td.sticky-action { background: #eef7ff; }

.username-cell {
  color: #0b73c8;
  font-weight: 850;
  text-align: left;
}
thead th.username-cell {
  color: #fff;
  text-align: center;
}
.text-left { text-align: left; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.badge.success { color: var(--success); background: #e9f8ef; }
.badge.warning { color: var(--warning); background: #fff4e5; }
.badge.muted { color: var(--muted); background: #eef2f7; }

.action-cell {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
}
.action-cell button {
  height: 28px;
  border: 1px solid #b7d9f5;
  border-radius: 9px;
  padding: 0 13px;
  color: var(--primary-dark);
  background: #e8f5ff;
  font-size: 13px;
  font-weight: 850;
}
.action-cell button:hover { background: #d8eeff; }

.empty-state {
  position: absolute;
  inset: 110px 24px auto 24px;
  padding: 36px 20px;
  border: 1px dashed #b8c7d9;
  border-radius: 18px;
  color: var(--muted);
  background: #fbfdff;
  text-align: center;
}

.table-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: #fbfdff;
}
.table-meta {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.table-footer-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.page-size-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #667085;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.page-size-control select {
  height: 38px;
  min-width: 76px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 8px;
  background: #fff;
  font-weight: 750;
}
.pagination-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagination-bar button {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
}
.pagination-bar button:not(:disabled):hover {
  color: var(--primary-dark);
  background: var(--primary-soft);
}
#pageInfo {
  min-width: 92px;
  text-align: center;
  font-weight: 850;
  white-space: nowrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,0.36);
}
.modal-backdrop[hidden] { display: none; }

.edit-modal {
  width: min(620px, 100%);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(15,23,42,0.28);
  overflow: hidden;
}
.edit-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.edit-modal-header h2 { font-size: 20px; }
.edit-modal-header p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eef2f7;
  color: #334155;
  font-size: 22px;
  line-height: 1;
}
.edit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 20px;
}
.edit-wide { grid-column: span 3; }
.edit-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: #fbfdff;
}
.cancel-edit-btn,
.save-edit-btn {
  height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 900;
}
.cancel-edit-btn { color: #344054; background: #eef2f7; }
.save-edit-btn { color: #fff; background: var(--primary); }


.create-only.is-hidden { display: none !important; }
.edit-account-field {
  grid-column: span 1;
}
.edit-rebate-note {
  grid-column: span 3;
  margin: -4px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  color: #b54708;
  background: #fff4e5;
  font-size: 13px;
  font-weight: 800;
}
.field-group input:disabled {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
}

@media (max-width: 1360px) {
  body { min-width: 1080px; }
  .sidebar { width: 226px; flex-basis: 226px; }
  .main-content { padding: 8px 10px; }
  .quick-range { flex-basis: 260px; }
  .date-field { flex-basis: 146px; }
  .export-btn, .add-agent-btn { flex-basis: 116px; padding-inline: 10px; }
  .summary-card strong { font-size: 20px; }
}

/* v012: column resizing, partner toggle, hierarchy drilldown */
thead th { position: sticky; user-select: none; }
thead th .th-label {
  display: inline-block;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: #fff;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  z-index: 30;
  touch-action: none;
}
.col-resizer::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 4px;
  width: 1px;
  background: rgba(255,255,255,0.35);
}
.col-resizer:hover::after {
  background: #fff;
  width: 2px;
}
body.is-resizing,
body.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
tbody td { user-select: text; }

.partner-toggle-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  color: #1d2939;
  font-size: 14px;
  font-weight: 900;
}
.partner-toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.partner-toggle-row input:disabled + span {
  color: #667085;
}


/* v014: hierarchy label cleanup and optimized edit modal layout */
.hierarchy-bar {
  min-height: 38px;
  padding: 7px 12px;
  background: #edf7ff;
  color: #075fa7;
}
.hierarchy-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-modal {
  width: min(780px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
}
.edit-modal-header {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 18px 22px 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.edit-modal-header h2 {
  font-size: 21px;
  line-height: 1.2;
}
.edit-modal-header p {
  max-width: 620px;
  line-height: 1.45;
}
.edit-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 22px 18px;
  background: #f8fbff;
}
.edit-section {
  padding: 14px;
  border: 1px solid #dce7f5;
  border-radius: 16px;
  background: #fff;
}
.edit-section + .edit-section {
  margin-top: 12px;
}
.edit-section-title {
  margin-bottom: 12px;
  color: #075fa7;
  font-size: 15px;
  font-weight: 950;
}
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}
.edit-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.edit-grid-main {
  align-items: end;
}
.edit-grid-main .edit-rebate-note {
  grid-column: 1 / -1;
  margin: 0;
}
.edit-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.edit-note-grid .edit-wide {
  grid-column: auto;
}
.edit-modal .field-group span {
  font-size: 13px;
}
.edit-modal .field-group input,
.edit-modal .field-group select {
  height: 40px;
  font-size: 15px;
}
.edit-modal .field-group textarea {
  min-height: 96px;
  font-size: 15px;
  line-height: 1.45;
}
.partner-toggle-row {
  height: 40px;
  margin-top: 19px;
  background: #f3f8ff;
}
.edit-modal-footer {
  flex: 0 0 auto;
  padding: 14px 22px;
  background: #fff;
}

@media (max-width: 760px) {
  .edit-grid,
  .edit-grid-two,
  .edit-note-grid {
    grid-template-columns: 1fr;
  }
  .partner-toggle-row {
    margin-top: 0;
  }
}


/* v015: default columns show full content; only username keeps ellipsis */
tbody td {
  overflow: visible;
  text-overflow: clip;
}
tbody td.username-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
tbody td:not(.username-cell) {
  max-width: none;
}
tbody td.text-left {
  overflow: visible;
  text-overflow: clip;
}


/* v017: direct downline and total downline count columns */
.other-downline-link {
  min-width: 46px;
}


/* v018: compact auto column widths and summary tooltip */
.summary-title-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.summary-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-info-dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-grid !important;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #b7d9f5;
  color: #075fa7 !important;
  background: #eef8ff;
  font-size: 11px !important;
  font-weight: 950 !important;
  cursor: help;
}
@media (max-width: 1360px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* v019: summary card color rule - negative green, positive red */
.summary-card strong.summary-loss-green {
  color: var(--success);
}
.summary-card strong.summary-profit-red {
  color: var(--danger);
}


/* v020: summary card visibility and aggregate amount logic */
.summary-card[hidden] {
  display: none !important;
}
.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}


/* v022: subordinate user list includes direct customers and indirect invitations */


/* v023: invitation-code column and corrected direct-customer/subordinate scope */


/* v024: metric mode selector and rebate income columns */
.metric-field {
  flex: 0 0 132px;
}


/* v025: metric mode moved beside search scope; sortable table headers */
.metric-field {
  flex: 0 0 132px;
}
.filter-row-search .search-input-wrap {
  flex: 1 1 220px;
  min-width: 180px;
}
.sort-header-btn {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  padding: 0 12px 0 4px;
  color: #fff;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.sort-header-btn:hover,
.sort-header-btn.active {
  background: rgba(255,255,255,0.12);
}
.sort-header-btn .th-label {
  max-width: calc(100% - 18px);
}
.sort-indicator {
  flex: 0 0 auto;
  min-width: 14px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  opacity: .92;
}


/* v026: complete header labels, triangle sort buttons, safer resize minimum */
.sort-header-btn {
  padding: 0 14px 0 4px;
  min-width: 100%;
}
.sort-header-btn .th-label,
thead th .th-label {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.sort-indicator {
  width: 12px;
  min-width: 12px;
  height: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: .95;
}
.sort-triangle {
  display: block;
  width: 0;
  height: 0;
  opacity: .45;
}
.sort-triangle.up {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}
.sort-triangle.down {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.sort-triangle.active {
  opacity: 1;
}
.col-resizer {
  right: 0;
}


/* v030 final header/sort/width overrides */
thead th {
  overflow: visible !important;
}
thead th .th-label,
thead th .sort-header-btn .th-label {
  display: inline-block !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: #fff !important;
}
thead th .sort-header-btn {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 0 !important;
  padding: 0 18px 0 6px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
thead th .sort-header-btn:hover,
thead th .sort-header-btn.active {
  background: rgba(255,255,255,0.12) !important;
}
thead th .sort-indicator {
  width: 12px !important;
  min-width: 12px !important;
  height: 16px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #fff !important;
  line-height: 1 !important;
}
thead th .sort-triangle {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  opacity: .42 !important;
}
thead th .sort-triangle.up {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-bottom: 5px solid currentColor !important;
}
thead th .sort-triangle.down {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
}
thead th .sort-triangle.active {
  opacity: 1 !important;
}
thead th .col-resizer {
  right: 0 !important;
}


/* v031: polished search bar layout */
.filter-card {
  padding: 12px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.98) 100%);
}

.filter-row-search {
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 8px 22px rgba(16,24,40,0.045);
}

.filter-row-search .field-group {
  gap: 7px;
}

.filter-row-search .field-group span {
  color: #24344d;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.filter-row-search .field-group select,
.filter-row-search .field-group input {
  height: 46px;
  border-radius: 16px;
  border-color: #cfdff2;
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.filter-row-search .field-group select:hover,
.filter-row-search .field-group input:hover {
  border-color: #9fc8eb;
}

.filter-row-search .field-group select:focus,
.filter-row-search .field-group input:focus {
  border-color: #0b73c8;
  box-shadow:
    0 0 0 3px rgba(11,115,200,0.12),
    0 6px 16px rgba(11,115,200,0.08);
}

.filter-row-search .search-scope {
  flex: 0 0 174px;
}

.filter-row-search .metric-field {
  flex: 0 0 148px;
}

.filter-row-search .search-input-wrap {
  flex: 1 1 360px;
  min-width: 260px;
  position: relative;
}

.filter-row-search .search-input-wrap input {
  padding-left: 42px;
  font-size: 15px;
  font-weight: 750;
}

.filter-row-search .search-input-wrap::before {
  content: "⌕";
  position: absolute;
  left: 15px;
  bottom: 10px;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #075fa7;
  background: #e9f5ff;
  font-size: 18px;
  font-weight: 950;
  pointer-events: none;
}

.filter-row-search .search-btn {
  flex: 0 0 108px;
  min-height: 46px;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(11,115,200,0.2);
}

.filter-row-search .search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11,115,200,0.26);
}

@media (max-width: 1360px) {
  .filter-row-search {
    gap: 10px;
  }

  .filter-row-search .search-scope {
    flex-basis: 158px;
  }

  .filter-row-search .metric-field {
    flex-basis: 132px;
  }

  .filter-row-search .search-input-wrap {
    min-width: 220px;
  }

  .filter-row-search .search-btn {
    flex-basis: 96px;
  }
}


/* v032: keep agent summary cards in one row on desktop */
.summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
}
.summary-card {
  min-width: 0 !important;
  padding: 10px 12px !important;
}
.summary-card span {
  font-size: 11px !important;
}
.summary-card strong {
  font-size: 20px !important;
  margin: 5px 0 3px !important;
  letter-spacing: -0.02em;
}
.summary-card em {
  font-size: 11px !important;
}
.summary-card[hidden] {
  display: none !important;
}
.summary-grid:has(.summary-card[hidden]) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1360px) {
  .summary-grid {
    grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .summary-card strong {
    font-size: 18px !important;
  }
  .summary-card em {
    font-size: 10px !important;
  }
}


/* v034: balance summary card and merged count card */
.summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
}
.summary-card {
  min-width: 0 !important;
  padding: 10px 12px !important;
}
.summary-card span {
  font-size: 11px !important;
}
.summary-card strong {
  font-size: 20px !important;
  margin: 5px 0 3px !important;
  letter-spacing: -0.02em;
}
.summary-card em {
  font-size: 11px !important;
}
.summary-card[hidden] {
  display: none !important;
}
.summary-grid:has(.summary-card[hidden]) {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
@media (max-width: 1360px) {
  .summary-grid {
    grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .summary-card strong {
    font-size: 18px !important;
  }
  .summary-card em {
    font-size: 10px !important;
  }
}


/* v035: compact sort triangles and reduced header blank space */
thead th .sort-header-btn {
  gap: 3px !important;
  padding: 0 10px 0 4px !important;
}
thead th .sort-indicator {
  width: 8px !important;
  min-width: 8px !important;
  height: 13px !important;
  gap: 1px !important;
}
thead th .sort-triangle.up {
  border-left-width: 3px !important;
  border-right-width: 3px !important;
  border-bottom-width: 4px !important;
}
thead th .sort-triangle.down {
  border-left-width: 3px !important;
  border-right-width: 3px !important;
  border-top-width: 4px !important;
}


/* v036: restore sort triangle size and remove unnecessary right-side blank space */
thead th {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
thead th .sort-header-btn {
  gap: 3px !important;
  padding: 0 4px !important;
  justify-content: center !important;
}
thead th .sort-indicator {
  width: 12px !important;
  min-width: 12px !important;
  height: 16px !important;
  gap: 2px !important;
}
thead th .sort-triangle.up {
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  border-bottom-width: 5px !important;
}
thead th .sort-triangle.down {
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  border-top-width: 5px !important;
}
thead th .col-resizer {
  width: 5px !important;
  right: 0 !important;
}
thead th .col-resizer::after {
  left: 2px !important;
}


/* v037: fix sticky-left area drifting inward and restore table corner radius */
.table-card {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.table-scroll {
  border-radius: 16px 16px 0 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important; /* remove both-edges left gutter */
  overscroll-behavior: contain;
}

.table-scroll table {
  margin-left: 0 !important;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Keep the fixed left block glued to the real left edge of the scroll area */
thead th.sticky-left,
tbody td.sticky-left {
  position: sticky !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

thead th.sticky-left:first-child,
thead th:first-child {
  border-top-left-radius: 16px !important;
}

thead th.sticky-action,
thead th:last-child {
  border-top-right-radius: 16px !important;
}

/* Ensure sticky backgrounds cover the scrolled content below them */
thead th.sticky-left {
  background: #0675bd !important;
  background-clip: padding-box !important;
  z-index: 30 !important;
}
tbody td.sticky-left {
  background-clip: padding-box !important;
  z-index: 20 !important;
}
thead th.sticky-left-edge {
  box-shadow: 6px 0 10px rgba(16,24,40,0.12) !important;
}
tbody td.sticky-left-edge {
  box-shadow: 6px 0 10px rgba(16,24,40,0.10) !important;
}

/* Keep the right operation column radius and layering stable */
thead th.sticky-action {
  background: #0675bd !important;
  background-clip: padding-box !important;
  z-index: 31 !important;
}
tbody td.sticky-action {
  background-clip: padding-box !important;
  z-index: 21 !important;
}

/* Hide any tiny visual seam at the scroll area's left border */
.table-scroll::before {
  content: "";
  position: sticky;
  left: 0;
  top: 0;
  z-index: 35;
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
}


/* v038: long demo-only team scope label */
.sidebar-scope-control > span,
.sidebar-scope-control .sidebar-scope-title {
  display: block;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
.sidebar-scope-control {
  padding-top: 14px !important;
}


/* v039: removed sidebar deployment domain card */
.sidebar-domain-card,
.sidebar-domain,
.deploy-domain-card {
  display: none !important;
}
.sidebar-footer {
  gap: 12px !important;
}