/* ===== Fonts ===== */
@font-face {
  font-family: 'Roboto';
  src: url('/assets/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ===== Reset ===== */
html { font-size: 100%; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  background-color: #F3F8FB;
  color: #1E293B;
}
*, *::before, *::after { box-sizing: border-box; }
p { margin: 0; padding: 0; }

/* ===== App shell ===== */
.ni-app-container {
  display: flex;
  min-height: 100vh;
}
.ni-main-content-area {
  margin-left: 64px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.v2-sidebar {
  width: 64px;
  min-width: 64px;
  background-color: #003781;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 12px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1001;
}
.v2-sidebar-logo {
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
  object-fit: cover;
  background-color: #FFFFFF;
  border-radius: 50%;
  padding: 2px;
}
.v2-sidebar-divider {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 16px 0;
}
.v2-sidebar-spacer { flex: 1; }
.v2-sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: #F3F8FB;
  color: #003781;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: Roboto, sans-serif;
}

/* ===== Sidebar buttons ===== */
.v2-sidebar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 48px;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  margin-bottom: 0;
  text-decoration: none;
  transition: background-color 0.15s;
}

.v2-sidebar-btn i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  margin-bottom: 4px;
}

.v2-sidebar-btn span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 400;
  font-family: Roboto, sans-serif;
  line-height: 10px;
}

/* Hover: light blue tint */
.v2-sidebar-btn:hover {
  background-color: rgba(100, 180, 255, 0.25);
}
.v2-sidebar-btn:hover i,
.v2-sidebar-btn:hover span {
  color: #FFFFFF;
}

/* Active/click: stronger light blue */
.v2-sidebar-btn:active {
  background-color: rgba(100, 180, 255, 0.4);
}
.v2-sidebar-btn:active i,
.v2-sidebar-btn:active span {
  color: #FFFFFF;
}

/* Currently selected sidebar item */
.v2-sidebar-btn-active {
  background-color: rgba(255, 255, 255, 0.15);
}
.v2-sidebar-btn-active i,
.v2-sidebar-btn-active span {
  color: #FFFFFF;
}

/* CVP Policy Search button specific styling */
#ni-sidebar-policy-search {
  margin-bottom: 8px;
}

#ni-sidebar-policy-search span {
  text-align: center;
  white-space: pre-line;
  display: block;
  width: 100%;
}

/* ===== Header ===== */
.v2-header {
  background-color: #003781;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  height: 56px;
  min-height: 56px;
}
.v2-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
}
.v2-header-back {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  justify-content: center;
}
.v2-header-back i {
  color: #FFFFFF;
  font-size: 18px;
}
.v2-header-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  line-height: 18.2px;
}
.v2-header-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-header-chevron i {
  color: #FFFFFF;
  font-size: 12px;
}
.v2-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ===== Landing page ===== */
.landing-page {
  width: 496px;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Input wrapper (floating-label style) ── */
.landing-input-wrapper {
  width: 495px;
  height: 48px;
  position: relative;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(224, 232, 240, 0.6);
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.landing-input-wrapper .landing-input {
  width: 100%;
  height: 100%;
  padding: 4px 40px 4px 12px;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  border: none;
  border-radius: 4px;
  color: #4F5053;
  background: transparent;
}
.landing-input-wrapper:focus-within {
  border-color: #FF8C00;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.15);
  outline: none;
}
.landing-input-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Search button ── */
.landing-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px 10px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  line-height: 18.2px;
  background-color: #FF8C00 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.landing-search-btn:hover {
  background-color: #E67E00 !important;
}

/* ── Recent research list ── */
.landing-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 8px;
  font-family: Roboto, sans-serif;
  background-color: #FFF9E6;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-bottom: 8px;
}

.landing-recent-item:hover {
  background-color: #FFF6D9;
}

/* ===== Layout ===== */
.v2-landing-panel {
  background: #FFFFFF;
  padding: 40px 80px 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  min-height: 100vh;
  margin: 0 auto;
}

/* ===== Landing page sections ===== */
.landing-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  text-align: center;
}
.landing-title {
  color: #4F5053;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
}
.landing-subtitle {
  color: #8D8F93;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
}
.landing-section-label {
  color: #4F5053;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  margin-bottom: 8px;
  text-align: left;
  width: 495px;
  margin-left: auto;
  margin-right: auto;
}
.landing-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  width: 100%;
}
.landing-input-info-icon {
  color: #003781;
  font-size: 20px;
}
.landing-search-icon {
  margin-right: 8px;
  font-size: 14px;
}
#landing-error {
  color: #FF3B30;
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
}
.landing-recent-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
}
.landing-recent-title {
  color: #4F5053;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
}
.landing-recent-label {
  font-size: 14px;
  font-weight: 700;
  color: #4F5053;
  line-height: 19.6px;
}
.landing-recent-date {
  font-size: 14px;
  font-weight: 400;
  color: #A0AEC0;
  line-height: 19.6px;
}
.landing-recent-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

#version-footer {
  color: gray;
  font-size: 12px;
  padding: 8px 24px;
}

/* ===== View Selector ===== */
.ni-view-selector {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== CVP Theme Color for View Buttons - Consolidated Rules ===== */

/* All unselected view buttons should have gray background */
#policy-view-btn:not(.btn-warning),
#policy-view-btn-legacy:not(.btn-warning),
#group-view-btn:not(.btn-warning),
#group-view-btn-legacy:not(.btn-warning) {
  background-color: #F7F7F7 !important;
  border: none !important;
  color: #000000 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Active button background - CVP orange theme */
#policy-view-btn.btn-warning,
#policy-view-btn-legacy.btn-warning {
  background-color: #FF8C00 !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

#group-view-btn.btn-warning,
#group-view-btn-legacy.btn-warning {
  background-color: #FF8C00 !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Removed duplicate rules - handled by consolidated rules above */

/* Hover effects for view buttons */
#policy-view-btn:hover,
#policy-view-btn-legacy:hover,
#group-view-btn:hover,
#group-view-btn-legacy:hover {
  background-color: #E67E00 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Selected button hover - keep white text */
#policy-view-btn.btn-warning:hover,
#policy-view-btn-legacy.btn-warning:hover,
#group-view-btn.btn-warning:hover,
#group-view-btn-legacy.btn-warning:hover {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Unselected button hover - black text */
#policy-view-btn:not(.btn-warning):hover,
#policy-view-btn-legacy:not(.btn-warning):hover,
#group-view-btn:not(.btn-warning):hover,
#group-view-btn-legacy:not(.btn-warning):hover {
  color: #000000 !important;
}

/* ===== Contract Card Hover Effects ===== */
.ni-contract-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #FF8C00 !important;
}

/* ===== CVP White Header ===== */
.cvp-header-white {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  height: 56px;
  min-height: 56px;
}
.cvp-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cvp-header-back {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  justify-content: center;
}
.cvp-header-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cvp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Action Icon Buttons (Share & Download) ===== */
.cvp-action-icon-btn {
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.cvp-action-icon-btn:hover {
  background: #F5F5F5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.cvp-action-icon-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cvp-action-icon-btn i {
  color: #FF8C00;
  font-size: 16px;
  transition: color 0.15s ease;
}

.cvp-action-icon-btn:hover i {
  color: #E67E00;
}

/* ===== Original BIP v2 Header (kept for reference) ===== */
.v2-header {
  background-color: #003781;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  height: 56px;
  min-height: 56px;
}
.v2-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
}
.v2-header-back {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  justify-content: center;
}
.v2-header-back i {
  color: #FFFFFF;
  font-size: 18px;
}
.v2-header-label {
  color: white;
  font-size: 14px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  line-height: 18.2px;
}
.v2-header-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-header-chevron i {
  color: #FFFFFF;
  font-size: 12px;
}
.v2-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ===== BIP v2 Banner ===== */
.v2-banner-top-row {
  display: flex;
  align-items: center;
  gap: 17px;
}
.v2-banner-logo {
  width: 54px;
  height: 54px;
  padding: 4px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.v2-banner-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-banner-name-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 30px;
}
.v2-banner-metrics {
  display: flex;
  align-items: center;
  gap: 24px;
}
.v2-metric {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Risk & Credit Decisions: expandable Internal narrative cell ────────── */
/* The summary holds both the truncated preview AND the "Show less" label.
   CSS shows exactly one based on the [open] attribute, so the preview never
   appears on top of the full text. Clicking the summary (in either state)
   toggles the native <details> — no JS / Dash callback. */
.narrative-details > summary {
  list-style: none;
  cursor: pointer;
}
.narrative-details > summary::-webkit-details-marker {
  display: none;
}
.narrative-details > summary > .narrative-preview {
  color: #003781;
  font-weight: 500;
}
.narrative-details > summary > .narrative-collapse {
  display: none;
  color: #003781;
  font-weight: 500;
  font-size: 12px;
}
.narrative-details[open] > summary > .narrative-preview {
  display: none;
}
.narrative-details[open] > summary > .narrative-collapse {
  display: inline-block;
  margin-top: 6px;
}
.narrative-details > .narrative-full {
  display: none;
  margin-top: 0;
  white-space: pre-wrap;
  color: #4F5053;
}
.narrative-details[open] > .narrative-full {
  display: block;
}

/* ===== Old Tab Styling (kept for compatibility) ===== */
.nav-tabs,
.nav.nav-tabs,
.nav[role="tablist"] {
  border-bottom: none !important;
  border-top: none !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  width: auto !important;
  display: flex !important;
  overflow-x: auto !important;
  background: transparent !important;
}

/* ===== Main Content Area ===== */
.v2-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #F3F8FB;
}

.v2-tab-content {
  background: #FFFFFF;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ===== Currency Toggle Buttons (Button Group Style) ===== */
.cvp-currency-toggle {
  display: flex;
  align-items: center;
}

.cvp-currency-btn {
  font-family: Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  border: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Currency button group styling - figma style */
.cvp-currency-toggle .btn-group {
  height: 30px;
  width: 180px;
  border-radius: 4px !important;
  overflow: hidden;
  border: none;
  box-shadow: 0px 2px 4px 0px rgba(160,174,192,0.3) !important;
  display: flex;
}

#currency-eur-btn {
  border-radius: 0 !important;
  border-right: none !important;
  width: 42px;
  flex-shrink: 0;
}

#currency-policy-btn {
  border-radius: 0 !important;
  margin-left: 0 !important;
  flex: 1;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Active state - selected button - figma style */
#currency-eur-btn.btn-warning {
  background-color: #E7891B !important;
  border: none !important;
  color: white !important;
  font-weight: 500 !important;
  z-index: 1 !important;
}

#currency-policy-btn.btn-warning {
  background-color: #E7891B !important;
  border: none !important;
  color: white !important;
  font-weight: 500 !important;
  z-index: 1 !important;
}

/* Inactive state - unselected button - figma style */
#currency-eur-btn.btn-outline-light,
#currency-eur-btn.btn-light {
  background-color: #FAF7F4 !important;
  border: none !important;
  color: #4F5053 !important;
  z-index: 0 !important;
}

#currency-policy-btn.btn-outline-light,
#currency-policy-btn.btn-light {
  background-color: #FAF7F4 !important;
  border: none !important;
  color: #4F5053 !important;
  z-index: 0 !important;
}

/* Hover effects - figma style */
#currency-eur-btn:not(.btn-warning):hover,
#currency-policy-btn:not(.btn-warning):hover {
  background-color: #F5F2EF !important;
  color: #4F5053 !important;
  border: none !important;
}

/* Selected currency button hover - maintain active styling */
#currency-eur-btn.btn-warning:hover,
#currency-policy-btn.btn-warning:hover {
  background-color: #E7891B !important;
  color: white !important;
  font-weight: 500 !important;
}

/* Tabs wrapper styling */
.cvp-tabs-wrapper {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cvp-tabs-left {
  display: flex;
  gap: 40px;
}

/* ===== Tab Button Styling ===== */
.cvp-tab-btn {
  font-family: Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.cvp-tab-btn-active {
  background-color: #FF8C00 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF8C00 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

.cvp-tab-btn:not(.cvp-tab-btn-active) {
  background-color: transparent !important;
  color: #4A5568 !important;
  border: none !important;
  font-weight: 700 !important;
}

.cvp-tab-btn:not(.cvp-tab-btn-active):hover {
  background-color: transparent !important;
  color: #FF8C00 !important;
  border: none !important;
  font-weight: 700 !important;
}

.cvp-tab-btn-active:hover {
  background-color: #E67E00 !important;
  color: #FFFFFF !important;
  border-color: #E67E00 !important;
  font-weight: 700 !important;
}

/* Tab container styling */
.cvp-tabs-container {
  background: #FFFFFF;
}

/* ===== Section Header Styling (based on BIP v2) ===== */
.cvp-section-header {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
  margin-left: -24px;
  padding-left: 0;
}

.cvp-section-header i {
  color: #FF8C00 !important;
  font-size: 20px !important;
}

.cvp-section-header span {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #4F5053 !important;
  font-family: Roboto, sans-serif !important;
  text-transform: uppercase !important;
  line-height: 22.4px !important;
}

/* ===== KPI Cards Row Alignment ===== */
.cvp-kpi-cards-row {
  display: flex;
  gap: 16px;
  margin: 0;
  margin-left: -24px;
  padding: 0;
  flex-wrap: wrap;
  width: calc(100% + 24px);
}

.cvp-kpi-cards-row > .card {
  flex: 1;
  min-width: 200px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure no extra Bootstrap margins on cards within our custom row */
.cvp-kpi-cards-row .ni-kpi-card {
  margin: 0 !important;
  padding: 0 !important;
}

/* Force first card to align perfectly */
.cvp-kpi-cards-row > *:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: translateX(0px) !important;
}

.cvp-kpi-cards-row .card:first-child,
.cvp-kpi-cards-row .ni-kpi-card:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
  position: relative !important;
  left: 0 !important;
}

/* Override Bootstrap CardBody padding */
.cvp-kpi-cards-row .card-body {
  padding: 1rem !important;
}

/* Override any Bootstrap row/col margins that might interfere */
.v2-tab-content .cvp-kpi-cards-row {
  margin-left: 0;
  margin-right: 0;
}

/* ===== Improved KPI Cards - Figma Style ===== */
.cvp-section-header-improved {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-left: -24px;
}

.cvp-kpi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.cvp-kpi-card-improved {
  background: white;
  border-radius: 12px;
  padding: 20px 24px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.07);
  border: none;
}

.cvp-kpi-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .cvp-kpi-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .cvp-kpi-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ===== Buyer Analysis panel — analyzing row animations ===== */
.cvp-buyer-spinner {
  animation: cvp-buyer-spin 0.9s linear infinite;
}

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

/* ===== Unified spinner look across the whole app =====
   Every loading indicator — dcc.Loading (sk-circle / dot / default) and
   dbc.Spinner — is rendered as a continuous rotating ring (the same style
   used by the landing-page search button). We do this by hiding Dash's
   stock pip-rings and dot pulses and overlaying a CSS pseudo-element ring
   that inherits the spinner's foreground colour. */

/* dbc.Spinner: ``type="border"`` (Bootstrap .spinner-border) is already
   the look we want — just make sure it never falls back to dots, never
   looks oval, and always rotates from a centred origin. */
.spinner-border,
.spinner-grow {
  display: inline-block !important;
  aspect-ratio: 1 / 1 !important;
  width: var(--cvp-spinner-size, 2rem) !important;
  height: var(--cvp-spinner-size, 2rem) !important;
  min-width: var(--cvp-spinner-size, 2rem) !important;
  min-height: var(--cvp-spinner-size, 2rem) !important;
  flex: 0 0 var(--cvp-spinner-size, 2rem) !important;
  border: 0.22em solid currentColor !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
  animation: cvp-buyer-spin 0.75s linear infinite !important;
  padding: 0 !important;
}

/* Bootstrap also wraps the spinner in a ``.spinner-border-sm`` shrink class
   sometimes; make sure size overrides win. */
.spinner-border-sm,
.spinner-grow-sm {
  --cvp-spinner-size: 1rem;
}

/* dcc.Loading default renderings — hide them and overlay our own ring on
   the wrapping container. ``.dash-spinner`` is the box Dash inserts; we
   blank its native visuals and add ::before as the continuous ring. */
.dash-spinner,
.dash-sk-circle,
.dash-spinner.dash-circle-spinner,
.dash-spinner.dash-default-spinner,
.dash-spinner.dash-cube-spinner,
.dash-spinner.dash-dot-spinner {
  background: transparent !important;
}

/* Kill Dash's pip rings (sk-circle uses ::before on 12 child divs and a
   ::after on the .dash-sk-circle root). */
.dash-sk-circle > div,
.dash-sk-circle::before,
.dash-sk-circle::after,
.dash-spinner.dash-default-spinner > div,
.dash-spinner.dash-circle-spinner > div,
.dash-spinner.dash-cube-spinner > div,
.dash-spinner.dash-dot-spinner > div {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Inject our continuous ring on every dcc.Loading container. The colour
   comes from a CSS variable so per-callsite overrides still work; we
   default to the CVP navy. */
.dash-sk-circle,
.dash-spinner.dash-circle-spinner,
.dash-spinner.dash-default-spinner {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border: 3px solid rgba(0, 55, 129, 0.18) !important;
  border-top-color: var(--cvp-spinner-color, #003781) !important;
  border-radius: 50% !important;
  animation: cvp-buyer-spin 0.85s linear infinite !important;
  box-sizing: border-box !important;
}

/* ===== Group Policy List dropdown - scrollable ===== */
.group-policy-dropdown .dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== dcc.Loading spinners: anchored at the top, never centered ===== */
.cvp-loading-top {
  position: relative;
}
.cvp-loading-top ._dash-loading-callback,
.cvp-loading-top .dash-spinner,
.cvp-loading-top .dash-spinner-container,
.cvp-loading-top ._dash-loading {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  z-index: 30;
  background: transparent !important;
}
.cvp-loading-top .dash-spinner__container {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.cvp-loading-top .dash-sk-circle,
.cvp-loading-top .dash-spinner.dash-circle-spinner,
.cvp-loading-top .dash-spinner.dash-default-spinner {
  width: 38px !important;
  height: 38px !important;
  --cvp-spinner-color: #003781;
}

/* ===== Buyers Portfolio DataTable — sticky header + pill cells ===== */
#buyers-data-table .dash-spreadsheet-container .dash-spreadsheet-inner {
  border-radius: 12px;
}
#buyers-data-table .dash-header,
#buyers-data-table .dash-header * {
  background-color: #003781 !important;
  color: white !important;
}
/* Make sure the fixed-header row stays anchored when the body scrolls.
   Dash already does `position: sticky; top: 0` on the cloned header row,
   but inner cell containers can re-introduce a transform that breaks the
   sticky behaviour — pin the inner pieces explicitly. */
#buyers-data-table .dash-fixed-row,
#buyers-data-table .dash-header.dash-fixed-row,
#buyers-data-table tr.dash-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
/* Grade pill (shared across all buyer tables, incl. sector/country
   sub-tables). The cell content is HTML emitted via DataTable's
   markdown presentation, or a plain html.Span elsewhere. */
.cvp-grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  border-radius: 9999px;
  padding: 0 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
.cvp-grade-pill.cvp-grade-green  { background-color: #E8F8F1; color: #64D3A4; }
.cvp-grade-pill.cvp-grade-yellow { background-color: #FDF1E3; color: #E7891B; }
.cvp-grade-pill.cvp-grade-red    { background-color: #FCE8E8; color: #DF5253; }
.cvp-grade-pill.cvp-grade-na     { background-color: #F3F4F6; color: #8D8F93; }

/* Grade cell: keep the zebra-stripe background; only neutralise the
   markdown wrapper so the pill sits centred and tight. NO override of
   ``background-color`` here — that's what produced the white block on
   the alternate rows. */
#buyers-data-table td[data-dash-column="grade"],
#buyers-data-table td.column-grade {
  text-align: center !important;
  vertical-align: middle !important;
}
#buyers-data-table td[data-dash-column="grade"] .dash-cell-value,
#buyers-data-table td.column-grade .dash-cell-value {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 !important;
  background: transparent !important;
}
#buyers-data-table td[data-dash-column="grade"] .dash-cell-value p,
#buyers-data-table td.column-grade .dash-cell-value p {
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
}

/* Buyers Portfolio: suppress the red focus/selection outline that Dash
   DataTable applies to a clicked cell. We rely on ``active_cell`` as a
   pure event source (the modal opens on click) — there's no need to
   visually highlight the cell, and the default red ring clashes with
   the rest of the navy/orange UI. */
#buyers-data-table td.focused,
#buyers-data-table td.cell--selected,
#buyers-data-table td.dash-cell.focused,
#buyers-data-table td.dash-cell.cell--selected {
  outline: none !important;
  box-shadow: none !important;
  background-color: inherit !important;
}
#buyers-data-table .dash-spreadsheet td.focused,
#buyers-data-table .dash-spreadsheet td.cell--selected {
  border: 0 !important;
}

/* ===== Per-buyer detail modal — open/close loading overlay =====
   The modal container is wrapped in ``dcc.Loading`` so Dash shows a
   spinner while ``manage_detail_modal`` + ``render_detail_modal`` are in
   flight. We promote it to a full-screen overlay (transparent backdrop
   so we don't double-dim over the modal itself) and use the unified
   continuous-ring spinner styling defined above. */
.cvp-detail-modal-loading {
  position: relative;
}
.cvp-detail-modal-loading ._dash-loading,
.cvp-detail-modal-loading ._dash-loading-callback,
.cvp-detail-modal-loading .dash-spinner-container,
.cvp-detail-modal-loading .dash-spinner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}
.cvp-detail-modal-loading .dash-sk-circle,
.cvp-detail-modal-loading .dash-spinner.dash-circle-spinner,
.cvp-detail-modal-loading .dash-spinner.dash-default-spinner {
  width: 56px !important;
  height: 56px !important;
  border-width: 4px !important;
  --cvp-spinner-color: #E7891B;
  border-color: rgba(231, 137, 27, 0.2) !important;
  border-top-color: #E7891B !important;
}

/* Compact spinner for the KPI cards (sits inside a 36px-tall row) */
.cvp-kpi-loading {
  position: relative;
  display: inline-block;
  min-width: 36px;
  min-height: 36px;
}
.cvp-kpi-loading .dash-sk-circle,
.cvp-kpi-loading .dash-spinner.dash-circle-spinner,
.cvp-kpi-loading .dash-spinner {
  width: 24px !important;
  height: 24px !important;
}