@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("/assets/glass_morph/variables-5cccf6bb.css");

/* Component imports — molecules / organisms / pages / utilities */
@import url("/assets/glass_morph/molecules/form_group-bda470f7.css");
@import url("/assets/glass_morph/molecules/section_header-2efaf6e7.css");
@import url("/assets/glass_morph/molecules/page_header-59d89ce6.css");
@import url("/assets/glass_morph/molecules/stat_card-b8e538d8.css");
@import url("/assets/glass_morph/molecules/empty_state-7ee8df86.css");
@import url("/assets/glass_morph/molecules/alert-57358e86.css");
@import url("/assets/glass_morph/molecules/tabs-ea303599.css");
@import url("/assets/glass_morph/molecules/nav_item-a5f7d42c.css");
@import url("/assets/glass_morph/molecules/breadcrumb-8869417c.css");
@import url("/assets/glass_morph/molecules/table-3f83023b.css");
@import url("/assets/glass_morph/molecules/modal-ca3c3766.css");
@import url("/assets/glass_morph/molecules/user_avatar-fc9b654f.css");
@import url("/assets/glass_morph/molecules/status_indicator-492773cc.css");
@import url("/assets/glass_morph/molecules/toggle_switch-c162a9d5.css");
@import url("/assets/glass_morph/molecules/three_way_toggle-8a68aaa0.css");
@import url("/assets/glass_morph/molecules/filter_select-537d8d50.css");
@import url("/assets/glass_morph/molecules/confidence_indicator-8140cfb0.css");
@import url("/assets/glass_morph/molecules/plan_badge-f5526bbb.css");
@import url("/assets/glass_morph/molecules/card_badges-3913a0e8.css");
@import url("/assets/glass_morph/molecules/summary_item-3ea0dbb8.css");
@import url("/assets/glass_morph/molecules/signal_item-0f1a5d02.css");
@import url("/assets/glass_morph/molecules/contact_item-754ef5eb.css");
@import url("/assets/glass_morph/molecules/task_card-12705b59.css");
@import url("/assets/glass_morph/molecules/task_modal-aecba449.css");
@import url("/assets/glass_morph/molecules/task_wizard-ceacba2f.css");
@import url("/assets/glass_morph/molecules/timeline-8b1faeae.css");
@import url("/assets/glass_morph/molecules/kanban-8c7d45c2.css");
@import url("/assets/glass_morph/molecules/pricing_card-ea35e31c.css");
@import url("/assets/glass_morph/molecules/integration_card-28981c7e.css");
@import url("/assets/glass_morph/molecules/danger_zone-0b50a706.css");
@import url("/assets/glass_morph/molecules/info_box-8478278c.css");
@import url("/assets/glass_morph/molecules/wizard-c3ece941.css");
@import url("/assets/glass_morph/molecules/subscription-6b84efe7.css");
@import url("/assets/glass_morph/molecules/monitoring_toggle-bf898646.css");
@import url("/assets/glass_morph/molecules/onboarding-ed6d28a6.css");
@import url("/assets/glass_morph/molecules/website_link-bc5da122.css");
@import url("/assets/glass_morph/molecules/pagination-2f795a26.css");
@import url("/assets/glass_morph/molecules/json_display-c44c81ed.css");
@import url("/assets/glass_morph/molecules/turbo_frame_error-e0467096.css");
@import url("/assets/glass_morph/molecules/stakeholder_row-00929f57.css");
@import url("/assets/glass_morph/molecules/autocomplete-99b89e47.css");
@import url("/assets/glass_morph/molecules/roi-314b8765.css");
@import url("/assets/glass_morph/molecules/toggle_container-74417a86.css");
@import url("/assets/glass_morph/molecules/info_card-bbc53aaf.css");
@import url("/assets/glass_morph/molecules/agent_chat-865a4ca4.css");
@import url("/assets/glass_morph/molecules/changelog-d6edbeba.css");
@import url("/assets/glass_morph/molecules/playbook-27c3c65d.css");
@import url("/assets/glass_morph/molecules/content_tile-d1b0b809.css");
@import url("/assets/glass_morph/atoms/list_item-151b3d0b.css");
@import url("/assets/glass_morph/organisms/section_card-42cb79f4.css");
@import url("/assets/glass_morph/organisms/data_card-30050e61.css");
@import url("/assets/glass_morph/organisms/glass_card-61c48e4b.css");
@import url("/assets/glass_morph/organisms/glass_panel-71ce4db9.css");
@import url("/assets/glass_morph/organisms/sidebar-210f738d.css");
@import url("/assets/glass_morph/organisms/prospect_card-00bd8838.css");
@import url("/assets/glass_morph/organisms/readiness_header-29aa6952.css");
@import url("/assets/glass_morph/organisms/chart-a4cad907.css");
@import url("/assets/glass_morph/organisms/scoring-06899700.css");
@import url("/assets/glass_morph/organisms/stakeholder-be50cb0b.css");
@import url("/assets/glass_morph/organisms/prospect_show-1d423529.css");
@import url("/assets/glass_morph/organisms/carousel-33c6b045.css");
@import url("/assets/glass_morph/organisms/auth-5a138739.css");
@import url("/assets/glass_morph/organisms/tooltip-9c528d7d.css");
@import url("/assets/glass_morph/organisms/misc_ui-3aa22682.css");
@import url("/assets/glass_morph/pages/gdpr-8c83d13b.css");
@import url("/assets/glass_morph/pages/account-20325186.css");
@import url("/assets/glass_morph/pages/recommended_actions-c6da8ada.css");
@import url("/assets/glass_morph/organisms/industry_select-02e55d01.css");
@import url("/assets/glass_morph/organisms/dashboard-9a556336.css");
@import url("/assets/glass_morph/organisms/hero_header-cad255b4.css");
@import url("/assets/glass_morph/organisms/content_section-467e1c42.css");
@import url("/assets/glass_morph/molecules/task_item-dc85d238.css");
@import url("/assets/glass_morph/molecules/activity_item-9b1ecef2.css");
@import url("/assets/glass_morph/molecules/lead_card-6f070582.css");
@import url("/assets/glass_morph/pages/value_dashboard-418278c9.css");
@import url("/assets/glass_morph/utilities/colors-d536c326.css");
@import url("/assets/glass_morph/utilities/borders-d89bb025.css");
@import url("/assets/glass_morph/utilities/sizing-c2f38f76.css");
@import url("/assets/glass_morph/utilities/spacing-ff442ea5.css");
@import url("/assets/glass_morph/utilities/opacity-8a3c412b.css");
@import url("/assets/glass_morph/utilities/layout-1e6109ca.css");
@import url("/assets/glass_morph/utilities/score_variants-eb2fc195.css");
@import url("/assets/glass_morph/utilities/misc-3727f589.css");

/* ############################################################################ */
/* ################################## GLOBAL ################################## */
/* ############################################################################ */

/* ============================================================================ */
/* == Reset & Base ========================================================== */
/* ============================================================================ */
body {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  background-color: var(--gm-page-bg-alt);
  color: var(--gm-white);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/bulleye-1.png");
  background-repeat: no-repeat;
  background-position: -350px 50px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
/* Prevent body scroll when modal open */
body.overflow-hidden {
  overflow: hidden;
}
/* Body state when modal is open (used by modal-backdrop controller) */
body.modal-open {
  overflow: hidden;
}
/* Public Page Layout */
body.public-page {
  min-height: 100vh;
  position: relative;
  background-color: var(--gm-teal-800);
}
body.public-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/bulleye-1.png");
  background-repeat: no-repeat;
  background-position: center 100px;
  background-size: 1200px auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
h4 {
  font-size: 1.3em;
}
/* Readonly field styling - for auto-filled fields */
input[readonly].form-control {
  background-color: var(--gm-glass-white-5) !important;
  color: var(--gm-glass-white-70);
  cursor: not-allowed;
  border-color: var(--gm-glass-white-10);
}
input[readonly].form-control:focus {
  background-color: var(--gm-glass-white-5) !important;
  border-color: var(--gm-glass-white-10);
  box-shadow: none;
}
/* CSS Custom Properties for Tasks */
:root {
  --kanban-header-text: var(--gm-gray-200); /* slate-200 — outside palette */
}

/* ============================================================================ */
/* == App Layout ============================================================ */
/* ============================================================================ */
.app-container {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100vw;
  z-index: 1;
}
/* Mobile Overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gm-glass-black-30);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
/* Main Content */
.main-content {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  background-color: transparent;
  padding: 24px;
}
.content-wrapper {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgb(52 111 130 / 41%);
  border-radius: 16px 16px 0px 0px;
  border: 1px solid rgb(41 85 107 / 50%);
  box-shadow: 0 6px 10px var(--gm-glass-black-20);
  overflow: hidden;
}
/* Navigation Bar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-radius: 16px 16px 0px 0px;
  flex-shrink: 0;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.navbar-controls {
  display: flex;
  gap: 12px;
}
.breadcrumb {
  margin-bottom: 0px;
}
/* Prospects Container */
.page-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}
.page-inner {
  min-height: 100%;
  background: var(--gm-content-pane-bg);
  border-radius: 12px;
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
}
/* Scrollbar Styles */
.page-container::-webkit-scrollbar,
.prospects-list::-webkit-scrollbar,
.detail-view::-webkit-scrollbar {
  width: 8px;
}
.page-container::-webkit-scrollbar-track,
.prospects-list::-webkit-scrollbar-track,
.detail-view::-webkit-scrollbar-track {
  background: rgb(26 61 77 / 30%);
  border-radius: 4px;
}
.page-container::-webkit-scrollbar-thumb,
.prospects-list::-webkit-scrollbar-thumb,
.detail-view::-webkit-scrollbar-thumb {
  background: rgb(3 162 102 / 30%);
  border-radius: 4px;
}
.page-container::-webkit-scrollbar-thumb:hover,
.prospects-list::-webkit-scrollbar-thumb:hover,
.detail-view::-webkit-scrollbar-thumb:hover {
  background: rgb(3 162 102 / 50%);
}
/* ── Stat row & stat items (base styles BEFORE responsive overrides) ── */
.detail-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 0;
  background: var(--gm-glass-black-10);
  border-radius: 12px;
  overflow: hidden;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--gm-glass-white-10);
}
.stat-item:last-child {
  border-right: none;
}
a.stat-item-link {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  cursor: pointer;
  align-self: stretch;
}
a.stat-item-link:hover {
  background: #1d4555c0;
}
.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--gm-white);
  line-height: 1;
}
.stat-value.highlight {
  color: var(--gm-green-600);
}
.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-white);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (width <= 1024px) {
  .mobile-overlay {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    background: var(--gm-teal-800);
    transform: translateX(-100%);
    box-shadow: 2px 0 10px var(--gm-glass-black-30);
  }

  .sidebar.active {
    transform: translateX(0);
    width: 300px;
  }

  .sidebar.active .nav-item .nav-item-content .nav-label {
    display: block;
  }

  .sidebar.active .nav-item {
    justify-content: space-between;
    padding: 12px 16px;
  }

  .sidebar.active .nav-item-content {
    gap: 12px;
  }

  .sidebar.active .sidebar-title {
    display: block;
  }

  .sidebar.active .nav-chevron {
    display: block;
  }

  .sidebar.active .mobile-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--gm-glass-white-10);
  }

  /* Restore full user section when mobile sidebar is open */
  .sidebar.active .sidebar-user {
    padding: 16px !important;
  }

  .sidebar.active .sidebar-user-content {
    flex-direction: row !important;
    gap: 12px !important;
  }

  .sidebar.active .sidebar-user-info {
    display: block !important;
  }

  .sidebar.active .sidebar-user-dropdown {
    position: absolute !important;
    bottom: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-bottom: 8px !important;
  }

  .mobile-nav-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 16px;
    border-radius: 30px;
    border: none;
    background: var(--gm-teal-200);
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .mobile-nav-btn:hover {
    opacity: 0.9;
  }

  .mobile-nav-btn .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-btn .text-wrapper {
    font-family: Figtree, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--gm-white);
    text-align: center;
    white-space: nowrap;
  }

  .main-content {
    padding: 16px;
  }

  .navbar {
    padding: 12px 16px;
  }

  .nav-buttons {
    display: none;
  }

  .prospects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .prospects-toolbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .prospects-toolbar .position-relative {
    width: 100%;
  }

  .prospects-toolbar .form-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  .prospects-toolbar .navbar-controls {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
  }

  .prospects-toolbar .navbar-controls .select-wrapper {
    flex: 1;
    min-width: 0;
  }

  .prospects-toolbar .navbar-controls .select-input {
    width: 100%;
  }

  .select-wrapper {
    width: 100%;
  }

  .select-input {
    width: 100%;
  }

  .page-container {
    padding: 16px;
  }

  .page-inner {
    padding: 12px 16px 16px;
  }

  .data-row-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .data-row {
    width: 100%;
  }

  .toggle-container {
    order: 1;
  }

  .row-title {
    order: 1;
    flex: 1;
    margin-right: 12px;
  }

  .score-badge {
    order: 1;
  }

  .website-link {
    order: 2;
    flex: 1;
  }

  .stakeholders-badge,
  .products-badge,
  .description-text {
    order: 4;
  }

  .description-text.product {
    display: block;
    order: 3;
  }

  .expand-button {
    order: 5;
    align-self: flex-end;
    margin-top: -40px;
  }

  .data-row-grid > *:nth-child(1),
  .data-row-grid > *:nth-child(2),
  .data-row-grid > *:nth-child(3) {
    display: flex;
  }

  .data-row-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 12px;
    align-items: center;
  }

  .row-title {
    grid-column: 1 / 4;
    grid-row: 1;
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 20px;
  }

  .toggle-container {
    grid-column: 1;
    grid-row: 2;
  }

  .score-badge {
    grid-column: 3;
    grid-row: 2;
  }

  .website-link {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .stakeholders-badge,
  .products-badge,
  .description-text.product {
    display: block;
    grid-column: 1 / 4;
    grid-row: 4;
  }

  .description-text:not(.product) {
    grid-column: 1 / 4;
    grid-row: 5;
  }

  .expand-button {
    grid-column: 3;
    grid-row: 6;
    justify-self: end;
    margin-top: 0;
  }

  .data-row-grid.data-row-grid--company {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 12px;
  }

  .data-row-grid.data-row-grid--company .row-avatar {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .data-row-grid.data-row-grid--company .row-title {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .data-row-grid.data-row-grid--company > :last-child {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .data-row-grid.data-row-grid--product {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 12px;
  }

  .data-row {
    overflow-x: hidden;
  }

  .data-row-grid.data-row-grid--assistant {
    grid-template-columns: 36px 1fr 44px;
    gap: 10px;
  }

  .data-row-grid.data-row-grid--assistant .description-text {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .expanded-cards {
    grid-template-columns: 1fr;
  }

  .expanded-content {
    padding: 0 4px 12px;
  }

  .expanded-cards {
    padding: 4px 4px 12px;
    gap: 12px;
  }

  .info-card {
    padding: 12px;
  }

  .info-card .card-body {
    padding: 8px;
  }

  .info-card .card-body .p-3 {
    padding: 4px !important;
  }

  .info-card .row.g-4 {
  }
  .detail-view {
    padding: 0;
  }

  .detail-header-row {
    padding: 24px;
  }

  .detail-header-top {
    flex-direction: column;
    gap: 16px;
  }

  .score-box {
    position: static;
    align-self: center;
    width: fit-content;
  }

  .row-title-header {
    font-size: 24px;
  }

  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 0;
  }

  .stat-item {
    padding: 16px;
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }

  .stat-value {
    font-size: 28px;
  }

  .detail-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .tab-button {
    padding: 10px 22px;
    font-size: 14px;
    white-space: nowrap;
  }

  .tab-icon {
    width: 16px;
    height: 16px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .lead-grid {
    grid-template-columns: 1fr;
  }

  .dashboard {
    padding: 0 0 24px;
  }

  .hero-header {
    padding: 28px;
  }

  .dashboard-grid {
    gap: 20px;
  }

  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 0;
  }

  .stat-item {
    padding: 16px;
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }

  .stat-value {
    font-size: 28px;
  }
  .kanban-board {
    height: calc(100vh - 240px);
  }

  .kanban-column {
    padding: 0.875rem;
  }
  .stakeholder-row-header {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .stakeholder-expand-btn {
    position: absolute;
    right: 12px;
    top: 12px;
  }

  .stakeholder-row-header {
    position: relative;
  }
  .logo-responsive {
    display: none !important;
  }

  .logo-compact {
    display: block !important;
  }

  .sidebar-header img.logo-compact {
    height: 32px !important;
    margin-top: 16px !important;
  }

  .auth-logo img.logo-compact {
    height: 40px !important;
  }
  /* Only apply responsive logo switching in sidebar (not auth screens) */
  .sidebar .logo-responsive {
    display: none;
  }

  .sidebar .logo-compact {
    display: block;
    margin: 0 auto; /* Center the compact logo */
  }

  /* Center and adjust compact logo in sidebar header */
  .sidebar-header {
    display: flex;
    justify-content: center;
  }

  .sidebar-header .sidebar-title {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Adjust sidebar logo size on mobile */
  .sidebar-header img.logo-compact {
    height: 84px !important; /* Even larger - 30% bigger than 64px */
    margin-top: 28px !important;
    margin-bottom: 20px !important;
  }

  /* Keep full logo on auth screens (no switching) */
  .auth-logo .logo-responsive {
    display: block !important;
  }

  .auth-logo .logo-compact {
    display: none !important;
  }

  /* Ensure auth logo maintains good size on mobile */
  .auth-logo img.logo-responsive {
    height: 58px !important;
    max-width: 90%;
  }
  .buyer-readiness-header {
    flex-direction: column;
    gap: 16px;
  }
  .readiness-top-section {
    flex-direction: column;
  }

  .readiness-right {
    width: 100%;
    justify-content: flex-start;
  }

  .chart-legend {
    gap: 12px;
  }
  .scoring-header-content {
    flex-direction: column;
  }

  .scoring-right-section {
    width: 100%;
    justify-content: flex-start;
  }

  .scoring-criteria-list {
    grid-template-columns: 1fr;
  }

  .knockout-criteria-list {
    grid-template-columns: 1fr;
  }
}
@media (width >= 450px) and (width <= 1024px) {
  .navbar-controls {
    flex-direction: row;
    align-items: center;
  }

  .select-wrapper {
    width: auto;
  }

  .select-input {
    width: 180px;
  }
}
.tab-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
/* Content wrapper grows to push button to bottom */
.overview-tile .tile-content-wrapper {
  flex: 1;
}
.white-tile .tile-title {
  color: var(--gm-teal-700);
}
.white-tile .tile-content {
  color: var(--gm-gray-700);
}
.white-tile .tile-section strong {
  color: var(--gm-teal-700);
}
.gradient-tile .tile-title {
  color: var(--gm-white);
}
.gradient-tile .tile-content {
  color: var(--gm-white);
  opacity: 0.9;
}
.gradient-tile .tile-subtitle {
  color: var(--gm-white);
}
.gradient-tile .tile-section strong {
  color: var(--gm-white);
}
.tile-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}
.tile-content {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.tile-subtitle {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 16px;
  color: var(--gm-teal-700);
}
.tile-section {
  margin-bottom: 20px;
  overflow-x: hidden;
  max-width: 100%;
}
.tile-section:last-child {
  margin-bottom: 0;
}
.tile-section strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-teal-700);
  display: block;
  margin-bottom: 8px;
}
@media (width <= 1200px) {
  .overview-tiles-container {
    grid-template-columns: 1fr;
  }

  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }
  .lead-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .detail-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .combined-stats {
    flex-wrap: wrap;
  }

  .combined-stats .stat-item {
    flex: 1 1 25%;
  }

  .stats-divider {
    flex-basis: 100%;
    border-left: none;
    border-top: 1px dashed var(--gm-glass-white-20);
    padding: 8px 0 4px 24px;
    justify-content: flex-start;
  }

  .stats-divider-label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-right: 1px solid var(--gm-glass-white-10);
  }
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .expanded-cards {
    grid-template-columns: 1fr;
  }
}
@media (width <= 640px) {
  .detail-tabs {
    display: none;
  }

  .detail-stats-row {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--gm-glass-white-10);
  }

  .stat-item:last-child {
    border-bottom: none;
  }
  .tile-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .stakeholder-row-header {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    gap: 6px 10px;
    padding: 14px;
    position: relative;
    align-items: start;
  }

  .stakeholder-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    font-size: 13px;
    align-self: center;
  }

  .stakeholder-basic-info {
    grid-column: 2 / -1;
    grid-row: 1;
    gap: 3px;
    min-width: 0;
    padding-right: 36px;
  }

  .stakeholder-name {
    font-size: 15px;
  }

  .stakeholder-name-badges {
    flex-wrap: wrap;
    gap: 4px;
  }

  .stakeholder-role-dept {
    font-size: 13px;
  }

  .interest-influence-badge,
  .stakeholder-badge,
  .stakeholder-contact-info {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .stakeholder-contact-info .contact-item {
    font-size: 12px;
    overflow: hidden;
  }

  .stakeholder-contact-info .contact-item .detail-text,
  .stakeholder-contact-info .contact-item a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 100px);
  }

  .stakeholder-meta-right {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    margin-left: 0;
    flex-flow: row wrap;
    gap: 4px 12px;
  }

  .stakeholder-meta-right .meta-line {
    font-size: 11px;
  }

  .stakeholder-expand-btn {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  /* Stakeholder page: header, metrics, and filter controls */
  .prospects-title {
    font-size: 20px;
  }

  .stakeholder-row {
    border-radius: 10px;
  }

  .stakeholder-row-header {
    border-radius: 10px;
  }

  .stakeholder-row.expanded .stakeholder-row-header {
    border-radius: 10px 10px 0 0;
  }

  .stakeholder-expanded-content {
    border-radius: 0 0 10px 10px;
    padding: 12px;
  }

  .stakeholder-profile-card {
    padding: 12px;
  }
  .hero-header {
    padding: 24px;
    border-radius: 12px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-header-content {
    margin-bottom: 20px;
  }

  .content-section-header {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .content-section-header-left {
    gap: 8px;
  }

  .content-section-title {
    font-size: 16px;
    gap: 6px;
  }

  .content-section-filter {
    width: 140px;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
  }

  .content-section-action {
    font-size: 13px;
    white-space: nowrap;
  }

  .list-item {
    padding: 14px 16px;
  }

  .lead-grid {
    padding: 20px;
    gap: 16px;
  }

  /* Priority targets filters: stack below title on mobile */
  .priority-targets-filters--in-header {
    position: static;
    padding: 0;
    justify-content: flex-start;
  }

  .priority-targets-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .priority-targets-widget {
    padding: 16px;
  }

  /* Action Queue: stack controls */
  .prospects-header {
    gap: 8px;
  }

  .navbar-controls {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .navbar-controls .select-wrapper {
    flex: 1;
    min-width: 120px;
  }

  .detail-stats-row {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--gm-glass-white-10);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  /* Badges: keep on single line */
  .stakeholders-badge,
  .products-badge,
  /* Prevent horizontal scrollbar */
  .main-content {
    overflow-x: hidden;
  }
  .page-container {
    padding: 1rem;
  }

  .prospects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .navbar-controls {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }

  .select-wrapper {
    width: 100%;
  }

  .select-input {
    width: 100%;
  }

  .button-primary {
    width: 100%;
    text-align: center;
  }

  .kanban-column-content {
    padding: 0.5rem;
  }

  .task-card {
    padding: 0.75rem;
  }
  .tile-light .readiness-score-display {
    border-bottom-color: var(--gm-glass-black-10);
  }
  .scoring-left-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .scoring-score-display {
    border-right: none;
    border-bottom: 2px solid var(--gm-gray-200);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .scoring-right-section {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  .timeline-date-header {
    padding: 16px;
  }

  .timeline-events {
    padding: 16px;
  }

  .event-title {
    font-size: 16px;
  }

  .event-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-badges {
    margin-left: 0;
  }
  .readiness-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .readiness-score-display {
    border-right: none;
    border-bottom: 2px solid var(--gm-gray-200);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .readiness-right {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }
}
.tile-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tile-title-row .tile-title {
  margin-bottom: 0;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gm-teal-700);
  letter-spacing: -0.01em;
}
.section-content {
  font-size: 15px;
  color: var(--gm-gray-600);
  line-height: 1.6;
}
/* Contact discovery hover popup */
.contact-discovery-popup {
  display: none;
  position: absolute;
  left: 100%;
  top: 100%;
  margin-left: 8px;
  margin-top: 4px;
  width: 320px;
  padding: 12px;
  background: var(--gm-gray-800);
  color: var(--gm-white);
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--gm-glass-black-20);
  z-index: 50;
  line-height: 1.5;
}
/* Stakeholder page: filter controls wrap on narrow screens */
@media (width <= 480px) {
  .page-inner > .flex-row.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-inner > .flex-row.justify-between > .flex-row {
    flex-wrap: wrap;
  }

  .page-inner > .flex-row.justify-between .badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .page-inner > .flex-row.justify-between .form-select-sm {
    font-size: 12px;
  }

  /* Compact metrics cards */
  .pricing-container {
    padding: 24px 12px;
  }

  .pricing-card {
    padding: 24px 20px;
  }

  .pricing-card-content {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .info-tooltip {
    min-width: 220px;
    max-width: 280px;
    font-size: 12px;
  }
}
@media (width <= 768px) {
  .modal-container {
    width: 95%;
    max-height: 95vh;
    border-radius: 16px;
  }

  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 20px;
  }

  .modal-title {
    font-size: 24px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .modal-footer {
    flex-direction: column;
    gap: 12px;
  }

  .footer-actions {
    width: 100%;
  }

  .button-primary,
  .button-secondary {
    flex: 1;
  }
  .action-type-pills {
    max-height: 140px;
  }
  /* Stack columns vertically on mobile */
  .kanban-board {
    grid-template-columns: 1fr;
    height: auto;
    gap: 1.5rem;
  }

  .kanban-column {
    min-height: 300px;
    max-height: 500px;
  }

  /* Disable drag on mobile - use tap interactions instead */
  .action-instance-card {
    cursor: default;
  }

  .action-instance-card.dragging {
    opacity: 1;
    transform: none;
  }
  .timeline-date-header {
    padding: 16px 20px;
  }

  .date-icon {
    width: 32px;
    height: 32px;
  }

  .date-title {
    font-size: 16px;
  }

  .timeline-events {
    padding: 16px 20px;
  }
  .kanban-board {
    grid-template-columns: 1fr !important;
  }
  .pricing-container {
    padding: 32px 16px;
  }

  .pricing-title {
    font-size: 24px;
  }

  .pricing-subtitle {
    font-size: 14px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-card {
    padding: 24px 20px;
  }

  .pricing-card-content {
    margin-left: -18px;
    margin-right: -18px;
  }

  .price-amount {
    font-size: 28px;
  }
  .pricing-container {
    padding: 32px 16px;
  }

  .pricing-title {
    font-size: 28px;
  }

  .pricing-subtitle {
    font-size: 15px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-card {
    padding: 32px 28px;
  }

  .pricing-card-content {
    margin-left: -26px;
    margin-right: -26px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .price-amount {
    font-size: 30px;
  }

  .price-period {
    font-size: 14px;
  }

  .pricing-badge {
    font-size: 12px;
    padding: 6px 14px;
  }
  .subscription-warning-content {
    margin-left: 16px;
    margin-right: 16px;
  }

  .subscription-warning-inner {
    flex-wrap: wrap;
  }
  .pagination-container {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .pagination-info {
    font-size: 13px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Hide some page numbers on mobile */
  .pagination-btn:not(.nav-btn, .active):nth-child(n + 6) {
    display: none;
  }

  .grid-auto-fit-320 {
    grid-template-columns: 1fr;
  }

  .flex-start-gap-24 {
    flex-direction: column;
    gap: 16px;
  }
  .warmth-ranking-row .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .warmth-score-bar-container {
    display: none;
  }
  .scoring-criteria-list {
    gap: 1rem;
  }
  .priority-target-top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .priority-target-metrics {
    width: 100%;
    justify-content: flex-start;
  }
  .score-trends-filters {
    flex-direction: column;
  }
}
/* NOTE: .combined-stats .stat-item rules moved to organisms/hero_header.css */
/* NOTE: .hero-header .hero-subtitle rule moved to organisms/hero_header.css */
/* Responsive Styles */
/* Tasks Page — #tasksView is on the .page-inner div */
#tasksView.page-inner {
  width: 100%;
  padding: 2rem;
  background: transparent;
  flex: 1;
  overflow-y: auto;
}
#tasksView .navbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Tile nav - page header on dark glassmorphism background */
.tile-nav {
  color: var(--gm-white);
}
.tile-nav h1,
.tile-nav h2,
.tile-nav h3,
.tile-nav h4,
.tile-nav h5,
.tile-nav h6 {
  color: var(--gm-white);
}
.tile-nav .text-primary-dark {
  color: var(--gm-white) !important;
}
.tile-nav .bi {
  color: var(--gm-white);
}
.tile-nav-description {
  color: var(--gm-nav-text);
}
/* Cached Content Modal */
.cached-content-meta {
  padding: 8px 12px;
  background: var(--gm-glass-black-3);
  border-radius: 6px;
  word-break: break-all;
}
.cached-content-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
  line-height: 1.7;
  color: var(--gm-gray-800);
}
.cached-content-body h1,
.cached-content-body h2,
.cached-content-body h3,
.cached-content-body h4,
.cached-content-body h5,
.cached-content-body h6 {
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--gm-gray-900);
}
.cached-content-body h1 {
  font-size: 1.5em;
}
.cached-content-body h2 {
  font-size: 1.3em;
}
.cached-content-body h3 {
  font-size: 1.15em;
}
.cached-content-body p {
  margin-bottom: 0.8em;
}
.cached-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0;
}
.cached-content-body blockquote {
  border-left: 3px solid var(--gm-gray-300);
  padding-left: 12px;
  margin: 12px 0;
  color: var(--gm-gray-600);
  font-style: italic;
}
.cached-content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.9em;
}
.cached-content-body th,
.cached-content-body td {
  border: 1px solid var(--gm-gray-200);
  padding: 6px 10px;
  text-align: left;
}
.cached-content-body th {
  background: var(--gm-gray-50);
  font-weight: 600;
}
.cached-content-body pre {
  background: var(--gm-gray-100);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85em;
}
.cached-content-body code {
  background: var(--gm-gray-100);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}
.cached-content-body a {
  color: var(--gm-blue-500);
  text-decoration: none;
}
.cached-content-body a:hover {
  text-decoration: underline;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-grid > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.grey-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}
.grey-stats .stat-item {
  padding: 2rem 1.5rem !important;
  background: var(--gm-white) !important;
  border-radius: 12px !important;
  border: 1px solid var(--gm-glass-black-6) !important;
  text-align: center;
  box-shadow: 0 1px 3px var(--gm-glass-black-4);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Override stat text colors for light context - matches reference */
.grey-stats .stat-item {
  background: transparent;
}
.grey-stats .stat-value {
  color: var(--gm-slate-500);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
.grey-stats .stat-label {
  color: var(--gm-slate-500);
  opacity: 0.8;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
*:hover > .contact-discovery-popup {
  display: block;
}

/* ============================================================================ */
/* == Surface Contexts (tile-light / gm-surface / white-tile / gradient-tile)  */
/* ============================================================================ */
/* Mobile Responsive Adjustments */
/* Navbar Layout Styles */
/* Dark context (glassmorphism panels) - restore original dark theme */
.glass-panel .form-label,
.sidebar-left .form-label,
.tile-light .form-label {
  color: var(--gm-gray-300);
}
/* Light context (white cards) - keep the new light theme */
.white-tile .form-label,
.overview-tile .form-label {
  color: var(--gm-gray-700);
}
.white-tile .form-input,
.white-tile .form-textarea,
.white-tile .form-select,
.overview-tile .form-input,
.overview-tile .form-textarea,
.overview-tile .form-select {
  background: var(--gm-glass-black-2);
  border: 1px solid var(--gm-glass-black-15);
  color: var(--gm-gray-800);
}
.white-tile .form-input:focus,
.white-tile .form-textarea:focus,
.white-tile .form-select:focus {
  border-color: var(--gm-indigo-500);
  background: rgb(139 92 246 / 5%);
}
/* desktop breakpoint, same as Bootstrap's sm */
/* Light surface context — text/borders flip when inside .tile-light */
.tile-light {
  --gm-ctx-text-primary: var(--gm-text-on-light-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-light-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-light-muted);
  --gm-ctx-text-link: var(--gm-text-on-light-link);
  --gm-ctx-separator: var(--gm-glass-black-8);
}
/* Light-surface override — auto-applies via CSS cascade in modal-content, tile-light, glass-card-light */
.modal-content .gm-badge-step-step,
.glass-card-light .gm-badge-step-step,
.tile-light .gm-badge-step-step {
  background: linear-gradient(135deg, var(--gm-teal-500) 0%, var(--gm-green-500) 100%);
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
}
.white-tile {
  background: var(--gm-white);
  font-size: 15px;
  color: var(--gm-gray-700); /* Default dark text for all white-tile content */

  /* Light surface context — flips gm-text-*, gm-bg-*, gm-separator-* to dark text */
  --gm-ctx-text-primary: var(--gm-text-on-light-primary);
  --gm-ctx-text-secondary: var(--gm-text-on-light-secondary);
  --gm-ctx-text-muted: var(--gm-text-on-light-muted);
  --gm-ctx-text-link: var(--gm-text-on-light-link);
  --gm-ctx-separator: var(--gm-glass-black-8);
}
.white-tile .info-row strong {
  color: var(--gm-teal-700);
}
.white-tile .info-row span {
  color: var(--gm-gray-700); /* slate-700 - outside palette */
}
.white-tile .tile-tab-content {
  color: var(--gm-gray-700); /* slate-700 - outside palette */
}
.gradient-tile {
  background: linear-gradient(135deg, var(--gm-teal-300) 0%, var(--gm-teal-100) 100%);
  box-shadow: 0 8px 24px var(--gm-glass-black-30);
}
.gradient-tile a,
.gradient-tile .detail-link,
.gradient-tile [data-controller="external-link"] {
  color: var(--gm-white) !important;
  text-decoration: underline;
  text-decoration-color: var(--gm-glass-white-30);
  text-underline-offset: 2px;
}
.gradient-tile a:hover,
.gradient-tile .detail-link:hover,
.gradient-tile [data-controller="external-link"]:hover {
  text-decoration-color: var(--gm-white);
}
.gradient-tile [data-controller="external-link"] .bi {
  color: var(--gm-white) !important;
}
.gradient-tile .info-row span {
  color: var(--gm-glass-white-85);
}
/* Product Details tile - detail rows inside gradient tile */
.gradient-tile .detail-link {
  color: var(--gm-white);
  text-decoration: none;
}
.gradient-tile .detail-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
/* ------------------------------------
   READINESS HEADER - LIGHT BACKGROUND OVERRIDES
   When ReadinessHeaderContent sits inside a GlassCard (.tile-light),
   flip white-on-dark colors to dark-on-light for proper contrast.
   ------------------------------------ */
.tile-light .readiness-score-number {
  color: var(--gm-teal-700);
}
.tile-light .readiness-score-max {
  color: var(--gm-gray-500);
}
.tile-light .readiness-score-display {
  border-right-color: var(--gm-glass-black-10);
}
.tile-light .readiness-stat-label {
  color: var(--gm-gray-500);
}
.tile-light .readiness-stat-value {
  color: var(--gm-gray-800);
}
.tile-light .readiness-action-section {
  border-top-color: var(--gm-glass-black-8);
}
.tile-light .action-label {
  color: var(--gm-gray-600);
  font-weight: 600;
}
/* Light bg: primary link color */
.tile-light .readiness-back-link {
  color: var(--gm-blue-primary);
}
.tile-light .readiness-back-link:hover {
  color: var(--gm-blue-600);
}
/* Mobile: score divider override for light bg */
.tile-light .influence-timeline-event {
  background: var(--gm-white);
  border-color: var(--gm-gray-200);
}
.glass-checkbox {
  cursor: pointer;
  transition: all 0.2s;
}
.glass-checkbox:hover {
  transform: scale(1.05);
}
/* Auto-detect light surfaces for pagination — same pattern as button overrides.
   Pagination on tile-light, stat-card-rich, modal-content, or gm-surface-light
   surfaces automatically gets light styling without requiring variant: :light. */
.tile-light .pagination-container,
.stat-card-rich .pagination-container,
.modal-content .pagination-container {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-200);
  backdrop-filter: none;
}
.tile-light .pagination-container .pagination-info,
.stat-card-rich .pagination-container .pagination-info,
.modal-content .pagination-container .pagination-info {
  color: var(--gm-gray-500);
}
.tile-light .pagination-container .pagination-info-highlight,
.stat-card-rich .pagination-container .pagination-info-highlight,
.modal-content .pagination-container .pagination-info-highlight {
  color: var(--gm-gray-800);
}
.tile-light .pagination-container .pagination-btn,
.stat-card-rich .pagination-container .pagination-btn,
.modal-content .pagination-container .pagination-btn {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-gray-700);
}
.tile-light .pagination-container .pagination-btn:hover,
.stat-card-rich .pagination-container .pagination-btn:hover,
.modal-content .pagination-container .pagination-btn:hover {
  background: var(--gm-gray-100);
  border-color: var(--gm-gray-300);
  color: var(--gm-gray-900);
}
.tile-light .pagination-container .pagination-btn.active,
.stat-card-rich .pagination-container .pagination-btn.active,
.modal-content .pagination-container .pagination-btn.active {
  background: var(--gm-blue-primary);
  border-color: var(--gm-blue-primary);
  color: var(--gm-white);
}
.tile-light .pagination-container .pagination-btn.active:hover,
.stat-card-rich .pagination-container .pagination-btn.active:hover,
.modal-content .pagination-container .pagination-btn.active:hover {
  transform: none;
}
.tile-light .pagination-container .pagination-btn.nav-btn.disabled,
.stat-card-rich .pagination-container .pagination-btn.nav-btn.disabled,
.modal-content .pagination-container .pagination-btn.nav-btn.disabled {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-200);
  color: var(--gm-gray-400);
}
.tile-light .pagination-container .pagination-ellipsis,
.stat-card-rich .pagination-container .pagination-ellipsis,
.modal-content .pagination-container .pagination-ellipsis {
  color: var(--gm-gray-400);
}
/* Tile light - lighter glassmorphism variant for cards */
.tile-light {
  background: var(--gm-surface-glass-light);
  backdrop-filter: var(--gm-blur-md);
  border-radius: 16px;
  border: 1px solid var(--gm-glass-white-20);
  box-shadow: var(--gm-shadow-md);
  color: var(--gm-text-on-light-secondary);
}
.tile-light h1,
.tile-light h2,
.tile-light h3,
.tile-light h4,
.tile-light h5,
.tile-light h6 {
  color: var(--gm-text-on-light-primary);
}
.tile-light p,
.tile-light span:not([class*="gm-badge"], .button-text),
.tile-light label {
  color: var(--gm-text-on-light-secondary);
}
.tile-light a:not(.button) {
  color: var(--gm-content-pane-bg);
}
.tile-light .text-muted,
.tile-light .text-secondary {
  color: var(--gm-text-on-light-muted);
}
.tile-light .text-body {
  color: var(--gm-text-on-light-primary) !important;
}
.tile-light .text-body-secondary {
  color: var(--gm-text-on-light-secondary) !important;
}
.tile-light .text-gray-900 {
  color: var(--gm-gray-900) !important;
}
.tile-light .text-primary-dark {
  color: var(--gm-text-on-light-primary) !important;
}
.tile-light .mb-0 {
  margin-bottom: 0 !important;
}
.tile-light .mb-2 {
  margin-bottom: 0.5rem !important;
}
/* StatCard uses tile-light for white background — ensure tile-light wins */
.stat-card.tile-light {
  background: var(--gm-glass-white-95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid var(--gm-glass-white-20);
  box-shadow: 0 4px 16px var(--gm-glass-black-10);
}
.stat-card.tile-light:hover {
  box-shadow: 0 6px 20px var(--gm-glass-black-15);
}
/* Secondary button — context-aware flip for white/light surfaces.
   .modal-content (background: white), .tile-light, and .gm-surface-light
   are light surfaces where the default dark-glass secondary button
   (#d1d5db text, rgba-white border) would be invisible.
   These selectors automatically apply light-surface styling without
   requiring light: true on every call site. */
.modal-content .button.button-secondary,
.tile-light .button.button-secondary,
.white-tile .button.button-secondary,
.gm-white-card .button.button-secondary,
.stat-card-rich .button.button-secondary {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-slate-800);
}
.modal-content .button.button-secondary::before,
.tile-light .button.button-secondary::before,
.white-tile .button.button-secondary::before,
.gm-white-card .button.button-secondary::before,
.stat-card-rich .button.button-secondary::before {
  display: none;
}
/* Use !important to override the global .button-secondary:hover rule
   at line ~10179 which sets background with !important for dark surfaces. */
.modal-content .button.button-secondary:hover,
.tile-light .button.button-secondary:hover,
.white-tile .button.button-secondary:hover,
.gm-white-card .button.button-secondary:hover,
.stat-card-rich .button.button-secondary:hover {
  background: var(--gm-slate-50) !important;
  border-color: var(--gm-gray-300);
  color: var(--gm-slate-800);
  transform: none !important;
  box-shadow: none;
}
/* AI Field Generation Buttons */
/* For textarea fields - button on top */
/* Light surface override — restore white card style when inside tile-light / gm-white-card / etc. */
.tile-light .button.button-sm,
.gm-white-card .button.button-sm,
.modal-content .button.button-sm,
.danger-zone .button.button-sm {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-gray-700);
}
.tile-light .button.button-sm:hover,
.gm-white-card .button.button-sm:hover,
.modal-content .button.button-sm:hover,
.danger-zone .button.button-sm:hover {
  background: var(--gm-gray-50);
  border-color: var(--gm-gray-300);
}
/* Table styling for admin pages */
.tile-light .table {
  margin-bottom: 0;
}
.tile-light .table thead th {
  border-bottom: 1px solid var(--gm-glass-black-8);
  background-color: transparent;
}
.tile-light .table tbody tr {
  border-bottom: 1px solid var(--gm-glass-black-5);
  transition: all 150ms ease-in-out;
}
.tile-light .table tbody tr:last-child {
  border-bottom: none;
}
.tile-light .table tbody td {
  padding: 16px;
  vertical-align: middle;
}
/* Account badges in table */
.tile-light .badge.bg-light {
  background-color: rgb(241 245 249 / 80%) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--gm-glass-black-5);
}
/* Light surface context — flip tokens to dark-on-light values */
.tile-light,
.gm-white-card,
.gm-card-padded,
.gm-bg-white {
  --gm-ctx-text-primary: var(--gm-gray-900);
  --gm-ctx-text-secondary: var(--gm-gray-700);
  --gm-ctx-text-muted: var(--gm-gray-500);
  --gm-ctx-text-link: var(--gm-blue-600);
  --gm-ctx-separator: var(--gm-glass-black-8);
  --gm-ctx-bg-field: var(--gm-gray-50);
  --gm-ctx-bg-subtle: var(--gm-gray-100);
}

/* ############################################################################ */
/* ################################## ATOMS ################################### */
/* ############################################################################ */

/* ============================================================================ */
/* == Atom — Icon =========================================================== */
/* ============================================================================ */
/* Bootstrap Icons */
.bi {
  font-family: bootstrap-icons, sans-serif !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================ */
/* == Atom — Button ========================================================= */
/* ============================================================================ */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--gm-glass-white-10);
  border: 1px solid var(--gm-glass-white-20);
  border-radius: 8px;
  cursor: pointer;
  color: var(--gm-white);
  transition: all 0.2s ease;
}
.menu-toggle:hover {
  background: var(--gm-glass-white-15);
  border-color: var(--gm-glass-white-30);
}
.menu-toggle:active {
  transform: scale(0.95);
}
@media (width <= 1024px) {
  .menu-toggle {
    display: flex;
  }
}
.expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: background 0.2s;
  justify-self: end;
  margin-right: 0;
}
.expand-button:hover {
  background: var(--gm-glass-white-10);
}
.button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 180px;
  width: auto;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 16px;
  position: relative;
  border-radius: 30px;
  border: none;
  background: var(--gm-teal-200);
  color: var(--gm-white);
  cursor: pointer;
  transition: all 0.2s;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(3 162 102 / 30%);
}
.button .button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.button .button-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: Figtree, Helvetica, sans-serif;
  font-weight: 700;
  color: inherit;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 21px;
  white-space: nowrap;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px;
  background: linear-gradient(178deg, var(--gm-glass-white-50) 0%, rgb(3 162 102 / 50%) 100%);
  mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}
.tab-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: rgb(52 111 129 / 40%);
  border: none;
  border-radius: 0;
  font-family: Figtree, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-glass-white-80);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-button:first-child {
  border-radius: 24px 0 0 24px;
}
.tab-button:last-child {
  border-radius: 0 24px 24px 0;
}
.tab-button:hover {
  background: rgb(52 111 129 / 60%);
  color: var(--gm-white);
}
.tab-button.active {
  background: var(--gm-green-600);
  color: var(--gm-white);
}
.tab-button.disabled,
.tab-button:disabled {
  cursor: not-allowed !important;
  background: rgb(52 111 129 / 40%);
  color: var(--gm-glass-white-80);
  pointer-events: none !important;
  opacity: 0.5;
}
/* Completely disable hover effects on disabled tabs */
.tab-button.disabled:hover,
.tab-button:disabled:hover,
.tab-button[disabled]:hover {
  background: rgb(52 111 129 / 40%) !important;
  color: var(--gm-glass-white-80) !important;
  transform: none !important;
  box-shadow: none !important;
}
.button-primary,
.button-secondary {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: Figtree, sans-serif;
}
.button-primary {
  position: relative;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  color: var(--gm-white) !important;
  font-weight: 700;
  border: none;
}
.button-primary span {
  position: relative;
  z-index: 2;
}
.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 30px;
  background: linear-gradient(178deg, var(--gm-glass-white-50) 0%, rgb(3 162 102 / 50%) 100%);
  mask:
    linear-gradient(var(--gm-white) 0 0) content-box,
    linear-gradient(var(--gm-white) 0 0);
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}
.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(3 162 102 / 30%);
}
.button-secondary {
  background: transparent;
  color: var(--gm-gray-300);
  border: 1px solid var(--gm-glass-white-20);
}
.button-secondary:hover {
  background: var(--gm-glass-white-5);
  border-color: var(--gm-glass-white-30);
}
.button-primary.hidden,
.button-secondary.hidden {
  display: none;
}
/* Task Action Buttons */
.task-action-btn {
  background: transparent;
  border: none;
  color: var(--gm-slate-500);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-action-btn:hover {
  background: var(--gm-slate-100);
  color: var(--gm-slate-800); /* slate-800 — outside palette */
}
.task-action-btn i {
  color: inherit !important;
}
/* danger-delete-btn removed — DangerActionRow now uses Button(variant: :danger) */
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(52 111 130 / 40%); /* teal shadow — keep composite literal */
}
.button-secondary:hover {
  background: var(--gm-surface-glass-dark) !important;
  transform: translateY(-2px);
}
.password-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--gm-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}
.password-toggle-btn:hover {
  color: var(--gm-gray-700);
}
.password-toggle-hidden {
  display: none;
}
/* Light green button variant */
.button.button-light-green {
  background: linear-gradient(
    135deg,
    var(--gm-green-400) 0%,
    var(--gm-green-500) 100%
  ); /* Tailwind green-400/500 - outside palette */
  color: var(--gm-white);
}
.button.button-light-green:hover {
  background: linear-gradient(135deg, var(--gm-green-500) 0%, var(--gm-green-700) 100%);
  box-shadow: 0 4px 12px var(--gm-green-300-overlay-30);
}
/* Ensure inline-block buttons respect their natural width */
.button.d-inline-block {
  width: fit-content !important;
  display: inline-flex !important;
}
.button.button-secondary-light {
  background: var(--gm-white);
  border: 1px solid var(--gm-gray-200);
  color: var(--gm-slate-800);
  min-width: auto;
  padding: 8px 16px;
  height: auto;
}
.button.button-secondary-light::before {
  display: none;
}
.button.button-secondary-light:hover {
  background: var(--gm-slate-50);
  border-color: var(--gm-gray-300);
  transform: none;
  box-shadow: none;
}
.button.button-tertiary {
  background: var(--gm-gray-200);
  border: 1px solid var(--gm-gray-300);
  color: var(--gm-gray-700);
}
.button.button-tertiary::before {
  display: none;
}
.button.button-tertiary:hover {
  background: var(--gm-gray-300);
  border-color: var(--gm-gray-400);
  transform: none;
  box-shadow: none;
}
/* modal-close overrides button-tertiary — restore circular icon-button style */
.button.modal-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  gap: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gm-glass-white-10);
  color: var(--gm-white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}
.button.modal-close:hover {
  background: var(--gm-glass-white-5);
  border-color: var(--gm-glass-white-20);
  color: var(--gm-white);
  transform: none;
  box-shadow: none;
}
.task-action-btn:hover {
  background: var(--gm-slate-100);
  color: var(--gm-slate-800);
}
/* Override TabButton styles for subtle appearance */
.task-inspect-tabs .tab-button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--gm-gray-500) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.2s ease !important;
}
.task-inspect-tabs .tab-button:hover {
  color: var(--gm-gray-700) !important;
  background: transparent !important;
}
.task-inspect-tabs .tab-button.active {
  color: var(--gm-gray-800) !important;
  border-bottom-color: var(--gm-teal-400) !important;
  background: transparent !important;
}
/* Hide icons in tabs for minimal look */
.task-inspect-tabs .tab-button i {
  display: none;
}
.task-inspect-tabs .tab-button.active .tab-badge {
  background: var(--gm-teal-400) !important;
  color: var(--gm-white) !important;
}
.context-tabs .tab-button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 0.4rem 0.5rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--gm-gray-500) !important;
  transition: all 0.2s ease !important;
}
.context-tabs .tab-button:hover {
  color: var(--gm-gray-700) !important;
  background: transparent !important;
}
.context-tabs .tab-button.active {
  color: var(--gm-gray-800) !important;
  border-bottom-color: var(--gm-teal-400) !important;
  background: transparent !important;
}
.context-tabs .tab-button i {
  display: none;
}
/* Danger button variant for destructive actions */
.button-danger {
  background: var(--gm-red-600) !important;
  border-color: var(--gm-red-600) !important;
  color: var(--gm-white) !important;
}
.button-danger:hover:not(.disabled, :disabled) {
  background: var(--gm-red-700) !important; /* red-700 — not in palette, keep literal */
  border-color: var(--gm-red-700) !important;
}
/* Disabled button visual state */
.button.disabled,
.button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
/* ── Small button variant (.button-sm) ────────────────────────────────────────
   Compact inline buttons for card-level actions, table rows, and panel headers.
   Uses a flat rectangular shape (border-radius: 6px) instead of the default pill.
   ─────────────────────────────────────────────────────────────────────────── */
.button.button-sm {
  display: inline-flex;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0.3125rem 0.75rem;
  border-radius: 6px;
  background: var(--gm-glass-white-8);
  border: 1px solid var(--gm-glass-white-20);
  color: var(--gm-gray-200);
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.button.button-sm::before {
  display: none;
}
.button.button-sm:hover {
  transform: none;
  background: var(--gm-glass-white-15);
  border-color: var(--gm-glass-white-30);
  box-shadow: 0 1px 3px var(--gm-glass-black-6);
}
.button.button-sm .button-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.button.button-sm.button-primary {
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  border: none;
  color: var(--gm-white) !important;
  height: auto;
  padding: 0.3125rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.button.button-sm.button-primary:hover {
  transform: none;
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-500) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgb(3 162 102 / 30%);
  filter: brightness(1.06);
}
.button.button-sm.button-danger {
  background: var(--gm-red-50) !important;
  border: 1px solid var(--gm-red-100) !important;
  color: var(--gm-red-600) !important;
}
.button.button-sm.button-danger:hover:not(.disabled, :disabled) {
  background: var(--gm-red-200) !important;
  border-color: var(--gm-red-300) !important;
  box-shadow: none;
  transform: none;
}
/* Large size variant */
.button.button-lg {
  height: 48px;
  padding: 8px 28px;
  font-size: 1.0625rem;
  border-radius: 30px;
}

/* ============================================================================ */
/* == Atom — Badge ========================================================== */
/* ============================================================================ */
.gm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 14px;
  border-radius: 16px;
  color: var(--gm-white);
  white-space: nowrap;
}
.gm-badge .bi {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* Size modifier */
.gm-badge-sm {
  font-size: 11px;
  padding: 2px 7px;
}
/* Color variants — reuse existing primitive tokens */
/* 6 visual badge colors */
.gm-badge-slate {
  background: var(--gm-slate-500);
}
.gm-badge-teal {
  background: var(--gm-teal-500);
}
.gm-badge-green {
  background: var(--gm-green-500);
}
.gm-badge-amber {
  background: var(--gm-yellow-500);
}
.gm-badge-red {
  background: var(--gm-red-500);
}
.gm-badge-blue {
  background: var(--gm-blue-500);
}
/* Soft badge variants — tinted bg + colored text for light surfaces */
.gm-badge-soft-slate {
  background: var(--gm-gray-100);
  color: var(--gm-gray-600);
}
.gm-badge-soft-teal {
  background: var(--gm-teal-overlay-8);
  color: var(--gm-teal-600);
}
.gm-badge-soft-green {
  background: var(--gm-green-500-overlay-8);
  color: var(--gm-green-700);
}
.gm-badge-soft-amber {
  background: var(--gm-yellow-overlay-8);
  color: var(--gm-amber-600);
}
.gm-badge-soft-red {
  background: var(--gm-red-overlay-8);
  color: var(--gm-red-700);
}
.gm-badge-soft-blue {
  background: var(--gm-blue-100);
  color: var(--gm-blue-800);
}
/* Score color variants — reuse existing score tokens */
.gm-badge-score-excellent {
  background: var(--gm-score-excellent);
}
.gm-badge-score-good {
  background: var(--gm-score-good);
}
.gm-badge-score-fair {
  background: var(--gm-score-fair);
}
.gm-badge-score-poor {
  background: var(--gm-score-poor);
}
.gm-badge-score-low {
  background: var(--gm-score-low);
}
/* Step/number badge — circle variant, same font/weight */
.gm-badge-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gm-white);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.gm-badge-step-sm {
  width: 20px;
  height: 20px;
  font-size: 11px;
  padding-top: 1px;
}
.gm-badge-step-md {
  width: 32px;
  height: 32px;
}
.gm-badge-step-lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.gm-badge-step-default {
  background: var(--gm-gray-500);
}
.gm-badge-step-active {
  background: var(--gm-teal-500);
}
.gm-badge-step-completed {
  background: var(--gm-green-500);
}
.gm-badge-step-disabled {
  background: var(--gm-badge-muted);
}
.gm-badge-step-signal {
  background: var(--gm-blue-500);
}
/* "step" state — used in wizard intro overview lists (Badge.number / Badge.step variant: :step).
   Automatically adapts: gradient on dark glass surfaces, solid teal on light/white surfaces. */
.gm-badge-step-step {
  background: linear-gradient(135deg, var(--gm-green-600) 0%, var(--gm-green-600) 100%);
  color: var(--gm-white);
  box-shadow: 0 2px 4px var(--gm-glass-black-20);
  border: none;
}
/* Score Badge */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  min-width: 50px;
  box-shadow: 0 2px 4px var(--gm-glass-black-15);
}
/* Stakeholders Badge */
.stakeholders-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-glass-white-20);
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-white);
  white-space: nowrap;
}
/* Products Badge - green like prospects */
.products-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-green-500);
  font-size: 12px;
  font-weight: 600;
  color: var(--gm-white);
  white-space: nowrap;
}
/* Prospects Badge - green variant */
/* Expand Icon */
.expand-icon {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expand-icon.collapsed {
  color: var(--gm-gray-400);
}
.expand-icon.expanded {
  color: var(--gm-green-600);
}
/* Expanded Content */
.expanded-content {
  padding: 0 16px 16px;
  display: none;
}
.expanded-content.visible {
  display: block;
  animation: slideDown 0.3s ease;
}
.tag-badge {
  padding: 4px 12px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--gm-teal-400) 0%, var(--gm-teal-200) 100%);
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-white);
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--gm-glass-white-15);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-white);
  backdrop-filter: blur(10px);
  text-decoration: none;
}
.badge-pill .bi {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
a.badge-pill:hover {
  background: var(--gm-glass-white-30);
  color: var(--gm-white);
  text-decoration: none;
}
.stakeholder-row.stakeholder-secondary .contact-item i,
.stakeholder-row.stakeholder-secondary .contact-item svg,
.stakeholder-row.stakeholder-secondary .expand-icon {
  color: var(--gm-glass-white-85) !important;
}
.engagement-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  border: 2px solid var(--gm-white);
}
/* Round modifier — perfectly circular badge for avatar overlays */
.gm-badge-round {
  width: 20px;
  height: 20px;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  font-size: 10px;
}
.stakeholder-expand-btn .expand-icon {
  transition: transform 0.3s ease;
}
.stakeholder-row.expanded .stakeholder-expand-btn .expand-icon {
  transform: rotate(180deg);
  color: var(--gm-green-600);
}
/* EventTypeBadge Atom Styles */
.event-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
}
/* Status badge variants */
.gm-badge-enabled {
  background: var(--gm-green-50);
  color: var(--gm-green-700);
}
.gm-badge-neutral {
  background: var(--gm-gray-100);
  color: var(--gm-gray-500);
}
.gm-badge-revoked {
  background: var(--gm-red-50);
  color: var(--gm-red-600);
}
.gm-badge-expired {
  background: var(--gm-amber-50);
  color: var(--gm-amber-600);
}
.gm-badge-linkedin-active {
  background: var(--gm-green-100);
  color: var(--gm-green-900);
}
/* Region Badge Styles */
.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.region-badge-world {
  background: linear-gradient(135deg, rgb(139 92 246 / 20%) 0%, rgb(139 92 246 / 10%) 100%);
  border: 1px solid rgb(139 92 246 / 30%);
  color: var(--gm-purple-500);
}
.region-badge-continental {
  background: linear-gradient(135deg, rgb(17 170 100 / 20%) 0%, rgb(17 170 100 / 10%) 100%);
  border: 1px solid rgb(17 170 100 / 30%);
  color: var(--gm-green-400);
}
.region-badge-subregional {
  background: linear-gradient(135deg, rgb(59 130 246 / 20%) 0%, rgb(59 130 246 / 10%) 100%);
  border: 1px solid rgb(59 130 246 / 30%);
  color: var(--gm-blue-500);
}
.region-badge-country {
  background: linear-gradient(135deg, rgb(245 158 11 / 20%) 0%, var(--gm-status-warning-bg) 100%);
  border: 1px solid rgb(245 158 11 / 30%);
  color: var(--gm-yellow-500);
}
.region-badge-default {
  background: linear-gradient(135deg, var(--gm-glass-white-10) 0%, var(--gm-glass-white-5) 100%);
  border: 1px solid var(--gm-glass-white-20);
  color: var(--gm-glass-white-80);
}
.region-badge-text {
  line-height: 1;
}
.region-badge-code {
  opacity: 0.8;
  font-size: 0.75rem;
}
.region-badge-remove {
  background: none;
  border: none;
  color: currentcolor;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}
.region-badge-remove:hover {
  background-color: var(--gm-glass-black-20);
  opacity: 1;
}
/* Region type badge (for subregions in RegionSelect) */
/* Continent badge variant (darker/more prominent) */
/* Stakeholder count badge */
.qual-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 16px;
  background: var(--gm-teal-400);
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-white);
  white-space: nowrap;
}
/* Tag badge variants for action buttons */
.tag-badge-green {
  background: rgb(17 170 100 / 20%);
  color: var(--gm-green-400);
  text-decoration: none;
}
.tag-badge-green:hover {
  background: var(--gm-green-300-overlay-30);
}
/* Number badge sizes */
/* Number badge step variants */
/* Step variant - matches modal header step indicator */
.upcoming-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: rgb(16 185 129 / 15%);
  color: var(--gm-green-500);
  letter-spacing: 0.02em;
}
/* StatBadge variants for light contexts */
/* Priority Badges */
/* Verification badge container */
/* Role badge styling in table */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 9999px;
}
/* Prospects badge: solid green override */
/* Products badge: solid green override */
.products-badge.status-badge-primary {
  background: var(--gm-green-500) !important;
  color: var(--gm-white) !important;
}
.badge-tool-success {
  color: var(--gm-green-500);
}
.badge-tool-error {
  color: var(--gm-red-500, #ef4444);
}
.badge-tool-pending {
  color: var(--gm-gray-400);
}
/* Count pill — 3 numbers: total / in-period / in-selection */
.activity-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  background: var(--gm-glass-white-15);
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.activity-count-pill-number {
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-glass-white-60);
  line-height: 1;
}
.activity-count-pill-number--active {
  font-size: 14px;
  font-weight: 700;
  color: var(--gm-white);
}

/* ============================================================================ */
/* == Atom — Input ========================================================== */
/* ============================================================================ */
.select-wrapper {
  position: relative;
}
.select-input {
  width: 180px;
  padding: 8px 36px 8px 12px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--gm-gray-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}
.select-input:focus {
  outline: 2px solid var(--gm-green-600);
  outline-offset: 2px;
}
/* Filter selectors - ensure background overrides select */
.select-input.select {
  width: 180px;
  padding: 8px 36px 8px 12px;
  background: var(--gm-glass-white-95);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--gm-gray-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%231f2937'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}
.form-col-half {
  flex: 1;
  min-width: 0;
}
.form-col-sm {
  flex: 0 0 140px;
  min-width: 0;
}
.form-col-lg {
  flex: 1;
  min-width: 0;
}
@media (width <= 576px) {
  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .form-col-sm,
  .form-col-half {
    flex: 1;
  }
  .modal-container {
    width: 98%;
    max-height: 96vh;
    border-radius: 12px;
  }
}
.label {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-700);
}
.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 16px;
  background: rgb(51 97 111 / 7%); /* 8-digit hex with alpha — leave as literal */
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
}
.select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--gm-teal-200); /* ≈ teal-200 (var(--gm-teal-200)) — close enough, leave as is */
  background: var(--gm-white);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--gm-gray-500);
}
.textarea {
  resize: vertical;
  min-height: 52px;
}
.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--gm-red-500) !important;
  animation: shake 0.3s ease;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* Textarea: position icon at top-right */
.textarea.is-invalid,
textarea.is-invalid {
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
/* Select: adjust for dropdown arrow */
.select.is-invalid,
select.is-invalid {
  padding-right: calc(3em + 0.75rem);
  background-position: right calc(1.5em + 0.1875rem) center;
}
.input-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gm-gray-500);
}
.select[multiple] {
  min-height: 120px;
  padding: 8px 12px;
  background-image: none;
}
.select[multiple] option {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--gm-gray-900);
}
.select[multiple] option:checked {
  background-color: var(--gm-teal-200);
  color: var(--gm-white);
}
.select[multiple]::-webkit-scrollbar {
  width: 8px;
}
.select[multiple]::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
  border-radius: 4px;
}
.select[multiple]::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 4px;
}
.select[multiple]::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}
/* Selectable Radio Cards (frequency step, etc.) */
.selectable-card {
  border: 2px solid var(--gm-glass-white-15);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.selectable-card:hover:not(.selectable-card--selected) {
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  background-color: rgba(var(--bs-primary-rgb), 0.03);
}
.selectable-card--selected {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.06);
  box-shadow: 0 0 0 1px var(--bs-primary);
}
/* Form validation error messages - Bootstrap 5 standard */
.invalid-feedback {
  color: var(--gm-red-500);
  font-size: 0.875rem;
  margin-top: -4px;
  margin-bottom: 4px;
  min-height: 1.25rem;
  visibility: hidden;
  display: block;
}
.invalid-feedback.show {
  visibility: visible;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.invalid-feedback.show::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}
.invalid-feedback.has-loading {
  visibility: visible;
  color: var(--gm-blue-500); /* Blue for loading */
}
.invalid-feedback.has-success {
  visibility: visible;
  color: var(--gm-green-500); /* Green for success */
}
.form-input-glass {
  background: var(--gm-glass-black-30); /* dark bg — no matching token, keep composite */
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--gm-glass-white-10);
  color: var(--gm-white);
  font-size: 14px;
  width: 100%;
  transition: all 0.2s;
}
/* Form input with suffix (like subdomain + domain) */
/* Form Toggle Switch backgrounds */
.form-toggle-track {
  position: relative;
  display: inline-flex;
  height: 24px;
  width: 44px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: background-color 0.2s ease;
}
.form-toggle-track-off {
  background: var(--gm-glass-white-30);
}
.form-toggle-track-on {
  background: var(--gm-green-500);
}
.form-toggle-knob {
  pointer-events: none;
  display: inline-block;
  height: 20px;
  width: 20px;
  transform: translateX(0);
  border-radius: 9999px;
  background-color: var(--gm-white);
  box-shadow: 0 1px 3px var(--gm-glass-black-20);
  transition: transform 0.2s ease;
}
.form-toggle-knob-on {
  transform: translateX(20px);
}
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrapper .password-input {
  flex: 1;
  padding-right: 2.75rem;
}
.form-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-gray-700);
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  background: rgb(51 97 111 / 7%);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
}
.form-select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form-select[multiple],
.form-select[size] {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  background: rgb(51 97 111 / 7%);
  border: 1px solid var(--gm-gray-200);
  border-radius: 12px;
  color: var(--gm-gray-900);
  font-size: 15px;
  font-family: Figtree, sans-serif;
  transition: all 0.2s ease;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  min-height: 100px;
  max-height: 100px;
  padding: 8px 12px;
  background-image: none;
}
.form-select[multiple] option,
.form-select[size] option {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--gm-gray-900);
}
.form-select[multiple] option:checked,
.form-select[size] option:checked {
  background-color: var(--gm-teal-200);
  color: var(--gm-white);
}
.form-select[multiple]::-webkit-scrollbar,
.form-select[size]::-webkit-scrollbar {
  width: 8px;
}
.form-select[multiple]::-webkit-scrollbar-track,
.form-select[size]::-webkit-scrollbar-track {
  background: var(--gm-gray-100);
  border-radius: 4px;
}
.form-select[multiple]::-webkit-scrollbar-thumb,
.form-select[size]::-webkit-scrollbar-thumb {
  background: var(--gm-gray-300);
  border-radius: 4px;
}
.form-select[multiple]::-webkit-scrollbar-thumb:hover,
.form-select[size]::-webkit-scrollbar-thumb:hover {
  background: var(--gm-gray-400);
}
/* Hierarchical select styling */
.form-select option:disabled {
  font-weight: 600;
  color: var(--gm-gray-700);
  background-color: var(--gm-gray-100);
}
.gm-input-with-icon {
  padding-left: 36px;
}
/* Select field style */
.gm-select-field {
  padding: 0.75rem;
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
  width: 100%;
}
/* Select background: white bg + gray-300 border + padding */
.gm-select-bg {
  padding: 0.75rem;
  background-color: var(--gm-white);
  border: 1px solid var(--gm-gray-300);
}
/* Checkbox alignment container (flex-centered, 24px height) */
.gm-checkbox-align {
  display: flex;
  align-items: center;
  height: 24px;
}
.gm-input-white {
  background-color: var(--gm-white);
  color: var(--gm-gray-900);
  border: 1px solid var(--gm-gray-300);
  padding-block: 8px;
  font-size: 14px;
}
.gm-input-white::placeholder {
  color: var(--gm-gray-400);
}
.gm-input-white:focus {
  background-color: var(--gm-white);
  color: var(--gm-gray-900);
  border-color: var(--gm-teal-300);
  box-shadow: 0 0 0 0.2rem var(--gm-teal-overlay-15);
}
.gm-input-group-stretch {
  display: flex;
  align-items: stretch;
}
.gm-subdomain-input {
  background: var(--gm-gray-50);
  border: 1px solid var(--gm-gray-100);
  flex: 1;
  min-width: 0;
}
.gm-subdomain-suffix {
  background: var(--gm-gray-200);
  border: 1px solid var(--gm-gray-100);
  border-left: none;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ============================================================================ */
/* == Atom — Checkbox ======================================================= */
/* ============================================================================ */
/* Checkbox Atom Styles */
.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--bs-primary);
  cursor: pointer;
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.checkbox-label-text {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  cursor: pointer;
}

/* ============================================================================ */
/* == Atom — Heading ======================================================== */
/* ============================================================================ */
.heading {
  color: var(--gm-ctx-text-primary, var(--gm-white));
}
.heading-dark {
  color: var(--gm-gray-800);
}
.heading-muted {
  color: var(--gm-glass-white-70);
}
.heading-muted-light {
  color: var(--gm-glass-white-60);
}
.heading-muted-dark {
  color: var(--gm-gray-500);
}

/* ============================================================================ */
/* == Atom — Text =========================================================== */
/* ============================================================================ */
.data-row-grid.data-row-grid--assistant .description-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
  font-size: 14px;
}
/* Company Name */
.row-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gm-white);
  margin-right: 30px;
}
/* Description Text */
.description-text {
  font-size: 15px;
  color: var(--gm-gray-200);
  line-height: 1.5;
}
.description-text.product {
  color: var(--gm-gray-300);
  margin-left: 12px;
}
/* Responsive Design */
@media (width <= 1899px) {
  .data-row-grid {
    grid-template-columns: 90px 36px minmax(160px, auto) 80px 120px 120px 190px 1fr 55px;
    gap: 14px;
  }

  .data-row-grid.data-row-grid--company {
    grid-template-columns: 36px minmax(180px, 2fr) 90px minmax(120px, 1.5fr) 100px 120px 1fr 50px;
  }

  .data-row-grid.data-row-grid--product {
    grid-template-columns: 36px minmax(150px, auto) 80px minmax(140px, auto) 90px 120px 1fr;
  }

  .data-row-grid.data-row-grid--assistant {
    grid-template-columns: 40px minmax(100px, auto) auto 1fr 44px;
  }

  .description-text.product {
    display: none;
  }
}
.row-title-header {
  font-size: 32px;
  font-weight: 700;
  color: var(--gm-white);
  letter-spacing: -0.02em;
  margin: 0;
}
.entity-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gm-white);
  opacity: 0.95;
  max-width: 100%;
}
/* DescriptionText Atom Styles */
.description-text {
  font-size: 0.875rem;
  color: var(--gm-gray-200);
  line-height: 1.5;
}
.description-text.product {
  color: var(--gm-gray-300);
  font-weight: 500;
}
.data-row-grid .row-title {
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  cursor: pointer;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 600;
  color: var(--gm-white);
  margin-right: 30px;
  min-width: 240px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Company index: full name visible, no truncation */
.data-row-grid.data-row-grid--company .row-title {
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0;
}
.paragraph-light {
  color: var(--gm-white);
}
.paragraph-dark {
  color: var(--gm-gray-800);
}
.paragraph-muted {
  color: var(--gm-glass-white-70);
}
.paragraph-muted-light {
  color: var(--gm-glass-white-60);
}
.paragraph-muted-dark {
  color: var(--gm-gray-500);
}
/* Light surface opt-in: containers with .gm-surface-light flip paragraph colors */
.gm-surface-light .paragraph-light {
  color: var(--gm-gray-900);
}
.gm-surface-light .paragraph-muted,
.gm-surface-light .paragraph-muted-light {
  color: var(--gm-gray-500);
}
/* Size variants for text */
.text-xs {
  font-size: 11px;
}
.text-sm {
  font-size: 13px;
}
.text-md {
  font-size: 14px;
}
.text-lg {
  font-size: 16px;
}
.text-xl {
  font-size: 18px;
}
.text-primary-dark {
  color: var(--gm-gray-800);
}
.timeline-date-header .paragraph-muted-light {
  color: var(--gm-glass-white-70) !important;
}
/* Text utilities — resolve to correct color based on surface context */
.gm-text-primary {
  color: var(--gm-ctx-text-primary, var(--gm-white)) !important;
}
.gm-text-secondary {
  color: var(--gm-ctx-text-secondary, var(--gm-gray-300)) !important;
}
.gm-text-muted {
  color: var(--gm-ctx-text-muted, var(--gm-gray-400)) !important;
}
.gm-text-link {
  color: var(--gm-ctx-text-link, var(--gm-blue-500)) !important;
}
/* Accent */
.gm-text-accent {
  color: var(--gm-accent, var(--gm-blue-500)) !important;
}
/* Preformatted text */
.gm-pre-wrap {
  white-space: pre-wrap;
}
/* --- Text color utilities ------------------------------------------------ */
.gm-text-gray-300 {
  color: var(--gm-gray-300) !important;
}
.gm-text-gray-900 {
  color: var(--gm-gray-900) !important;
}
.gm-text-blue-primary {
  color: var(--gm-blue-primary) !important;
}
.gm-text-blue-500 {
  color: var(--gm-blue-500) !important;
}
.gm-text-blue-800 {
  color: var(--gm-blue-800) !important;
}
.gm-text-red-500 {
  color: var(--gm-red-500) !important;
}
.gm-text-red-600 {
  color: var(--gm-red-600) !important;
}
.gm-text-red-700 {
  color: var(--gm-red-700) !important;
}
.gm-text-red-800 {
  color: var(--gm-red-700) !important;
}
.gm-text-red-900 {
  color: var(--gm-red-700) !important;
}
.gm-text-green-300 {
  color: var(--gm-green-300) !important;
}
.gm-text-green-500 {
  color: var(--gm-green-500) !important;
}
.gm-text-green-600 {
  color: var(--gm-green-600) !important;
}
.gm-text-green-800 {
  color: var(--gm-green-700) !important;
}
.gm-text-amber-600 {
  color: var(--gm-amber-600) !important;
}
.gm-text-amber-800 {
  color: var(--gm-amber-800) !important;
}
.gm-text-amber-900 {
  color: var(--gm-amber-900) !important;
}
.gm-text-teal-400 {
  color: var(--gm-teal-400) !important;
}
.gm-text-teal-500 {
  color: var(--gm-teal-500) !important;
}
.gm-text-teal-600b {
  color: var(--gm-teal-600) !important;
}
.gm-text-sky-700 {
  color: var(--gm-sky-700) !important;
}
.gm-text-gray-600 {
  color: var(--gm-gray-600) !important;
}
.gm-text-slate-500 {
  color: var(--gm-slate-500) !important;
}
.gm-text-slate-800 {
  color: var(--gm-slate-800) !important;
}
.gm-text-indigo-400 {
  color: var(--gm-indigo-400) !important;
}
.gm-text-white {
  color: var(--gm-white) !important;
}
.gm-text-glass-white-60 {
  color: var(--gm-glass-white-60) !important;
}
.gm-text-glass-white-70 {
  color: var(--gm-glass-white-70) !important;
}
.gm-text-emerald-800 {
  color: var(--gm-green-900) !important;
}
/* --- Typography utilities ------------------------------------------------ */
.gm-letter-spacing-xs {
  letter-spacing: 0.02em;
}
.gm-letter-spacing-sm {
  letter-spacing: 0.03em;
}
.gm-letter-spacing-md {
  letter-spacing: 0.5px;
}
.gm-letter-spacing-lg {
  letter-spacing: 0.05em;
}
.gm-letter-spacing-xl {
  letter-spacing: 0.06em;
}
/* Text colors (extended) */
.gm-text-blue-700 {
  color: var(--gm-blue-800) !important;
}
.gm-text-emerald-700 {
  color: var(--gm-green-700) !important;
}
.gm-text-amber-700 {
  color: var(--gm-amber-600) !important;
}
.gm-text-green-700 {
  color: var(--gm-green-700) !important;
}
.gm-text-green-900 {
  color: var(--gm-green-900) !important;
}
/* Green-tw-500 text (Tailwind green) */
.gm-text-green-tw-500 {
  color: var(--gm-green-500) !important;
}
.gm-text-glass-white-85 {
  color: var(--gm-glass-white-85) !important;
}
.gm-text-sky-400 {
  color: var(--gm-teal-500) !important;
}
.gm-text-inherit {
  color: inherit !important;
}
.gm-text-yellow-400 {
  color: var(--gm-yellow-500) !important;
}
.gm-text-yellow-500 {
  color: var(--gm-yellow-500) !important;
}
.gm-text-yellow-800 {
  color: var(--gm-yellow-800) !important;
}
.gm-text-violet-700 {
  color: var(--gm-violet-700) !important;
}
.gm-text-shadow-sm {
  text-shadow: 0 1px 3px var(--gm-glass-black-30);
}
.gm-text-gray-500 {
  color: var(--gm-gray-500) !important;
}
.gm-text-indigo-500 {
  color: var(--gm-indigo-500) !important;
}
.gm-text-amber-500 {
  color: var(--gm-amber-500) !important;
}

/* ============================================================================ */
/* == Atom — Link =========================================================== */
/* ============================================================================ */
.gm-link-underline {
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================================ */
/* == Atom — Separator ====================================================== */
/* ============================================================================ */
/* Separator */
.separator {
  width: 100%;
  border-top: 2px dashed var(--gm-teal-800);
  flex-shrink: 0;
}
.gm-separator-top {
  border-top: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8)) !important;
}
.gm-separator-bottom {
  border-bottom: 1px solid var(--gm-ctx-separator, var(--gm-glass-black-8)) !important;
}
.gm-border-top-slate-100 {
  border-top: 1px solid var(--gm-slate-100) !important;
}
/* Divider */
.gm-divider {
  border-top: 1px solid var(--gm-gray-200);
  margin: 1.25rem 0;
}
.gm-border-bottom-2 {
  border-bottom: 2px solid var(--gm-ctx-separator, var(--gm-glass-black-6)) !important;
}

/* ============================================================================ */
/* == Atom — Spinner ======================================================== */
/* ============================================================================ */
.radar-loader {
  position: relative;
  border-radius: 50%;
  border: 1px solid rgb(59 130 246 / 30%);
  background: radial-gradient(circle, rgb(59 130 246 / 10%) 0%, transparent 70%);
  overflow: hidden;
  box-shadow: 0 0 10px rgb(59 130 246 / 20%);
  margin: 0 auto;
  box-sizing: border-box;
}
.radar-xs {
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid rgb(59 130 246 / 80%);
  background: radial-gradient(circle, rgb(59 130 246 / 25%) 0%, transparent 70%);
  box-shadow: 0 0 4px rgb(59 130 246 / 40%);
}
/* Enhanced visibility for xs size */
.radar-xs .radar-grid {
  display: none; /* Too small for grid details */
}
.radar-xs .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(59 130 246 / 40%) 40deg,
    rgb(59 130 246 / 90%) 90deg,
    transparent 91deg
  );
  animation: radar-spin 1.4s linear infinite;
}
.radar-xs .radar-dot {
  display: none; /* Too small for dots */
}
/* Size classes */
.radar-sm {
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.radar-md {
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.radar-lg {
  width: 128px;
  height: 128px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.radar-xl {
  width: 256px;
  height: 256px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.radar-full {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
/* Grid lines */
.radar-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 49.5%,
      rgb(59 130 246 / 20%) 49.5%,
      rgb(59 130 246 / 20%) 50.5%,
      transparent 50.5%
    ),
    linear-gradient(
      0deg,
      transparent 49.5%,
      rgb(59 130 246 / 20%) 49.5%,
      rgb(59 130 246 / 20%) 50.5%,
      transparent 50.5%
    );
}
.radar-grid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  height: 66%;
  border: 1px solid rgb(59 130 246 / 20%);
  border-radius: 50%;
}
.radar-grid::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 33%;
  height: 33%;
  border: 1px solid rgb(59 130 246 / 20%);
  border-radius: 50%;
}
/* Sweep effect */
.radar-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(59 130 246 / 10%) 60deg,
    rgb(59 130 246 / 50%) 90deg,
    transparent 91deg
  );
  animation: radar-spin 2s linear infinite;
  pointer-events: none;
}
/* Dots */
.radar-dot {
  position: absolute;
  width: 6%;
  height: 6%;
  background-color: var(--gm-blue-500);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px var(--gm-blue-500);
  pointer-events: none;
}
.dot-1 {
  top: 30%;
  left: 60%;
  animation: radar-dot-pulse 3s ease-in-out infinite;
  animation-delay: 0.5s;
}
.dot-2 {
  top: 70%;
  left: 40%;
  animation: radar-dot-pulse 3s ease-in-out infinite;
  animation-delay: 1.2s;
}
.dot-3 {
  top: 40%;
  left: 20%;
  animation: radar-dot-pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}
.radar-loader.radar-success {
  border-color: rgb(16 185 129 / 30%);
  background: radial-gradient(circle, rgb(16 185 129 / 10%) 0%, transparent 70%);
  box-shadow: 0 0 10px rgb(16 185 129 / 20%);
}
.radar-success .radar-grid {
  background:
    linear-gradient(
      90deg,
      transparent 49.5%,
      rgb(16 185 129 / 20%) 49.5%,
      rgb(16 185 129 / 20%) 50.5%,
      transparent 50.5%
    ),
    linear-gradient(
      0deg,
      transparent 49.5%,
      rgb(16 185 129 / 20%) 49.5%,
      rgb(16 185 129 / 20%) 50.5%,
      transparent 50.5%
    );
}
.radar-success .radar-grid::before,
.radar-success .radar-grid::after {
  border-color: var(--gm-green-300-overlay-15);
}
.radar-success .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(16 185 129 / 10%) 60deg,
    rgb(16 185 129 / 50%) 90deg,
    transparent 91deg
  );
}
.radar-success .radar-dot {
  background-color: var(--gm-green-300);
  box-shadow: 0 0 6px var(--gm-green-300);
}
/* Extra small radar - green variant */
.radar-xs.radar-success {
  border-color: rgb(16 185 129 / 80%);
  background: radial-gradient(circle, rgb(16 185 129 / 25%) 0%, transparent 70%);
  box-shadow: 0 0 4px rgb(16 185 129 / 40%);
}
.radar-xs.radar-success .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(16 185 129 / 40%) 40deg,
    rgb(16 185 129 / 90%) 90deg,
    transparent 91deg
  );
}
/* White radar variant for dark backgrounds */
.radar-loader.radar-white {
  border-color: var(--gm-glass-white-60) !important;
  background: radial-gradient(circle, var(--gm-glass-white-20) 0%, transparent 70%) !important;
  box-shadow: 0 0 15px var(--gm-glass-white-50) !important;
}
.radar-white .radar-grid {
  background:
    linear-gradient(
      90deg,
      transparent 49.5%,
      var(--gm-glass-white-50) 49.5%,
      var(--gm-glass-white-50) 50.5%,
      transparent 50.5%
    ),
    linear-gradient(
      0deg,
      transparent 49.5%,
      var(--gm-glass-white-50) 49.5%,
      var(--gm-glass-white-50) 50.5%,
      transparent 50.5%
    ) !important;
}
.radar-white .radar-grid::before,
.radar-white .radar-grid::after {
  border-color: var(--gm-glass-white-30) !important;
}
.radar-white .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--gm-glass-white-30) 60deg,
    var(--gm-glass-white-80) 90deg,
    transparent 91deg
  ) !important;
}
.radar-white .radar-dot {
  background-color: var(--gm-white) !important;
  box-shadow:
    0 0 10px var(--gm-white),
    0 0 5px var(--gm-white) !important;
}
/* Small radar - white variant (subtle border, no glow) */
.radar-loader.radar-sm.radar-white {
  border: 1px solid var(--gm-glass-white-30) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.radar-sm.radar-white .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--gm-glass-white-60) 50deg,
    var(--gm-glass-white-95) 90deg,
    transparent 91deg
  ) !important;
}
/* Extra small radar - white variant */
.radar-xs.radar-white {
  border-color: var(--gm-glass-white-80) !important;
  background: radial-gradient(circle, var(--gm-glass-white-30) 0%, transparent 70%) !important;
  box-shadow: 0 0 4px var(--gm-glass-white-30) !important;
}
.radar-xs.radar-white .radar-sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--gm-glass-white-50) 40deg,
    var(--gm-glass-white-95) 90deg,
    transparent 91deg
  ) !important;
}
.spinner-rotate {
  animation: spin 1s linear infinite;
}
.radar-loader.radar-success {
  border: 1px solid rgb(16 185 129 / 30%);
  background: radial-gradient(circle, rgb(16 185 129 / 10%) 0%, transparent 70%);
  box-shadow: 0 0 10px rgb(16 185 129 / 20%);
}
.radar-success .radar-grid {
  border-color: var(--gm-green-300-overlay-15);
}

/* ============================================================================ */
/* == Atom — ProgressBar ==================================================== */
/* ============================================================================ */
/* Progress bar base */
.progress-bar-track {
  width: 100%;
  background: var(--gm-gray-200);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 10px;
  border-radius: 999px;
  transition: all 0.3s ease;
}
.progress-bar-green {
  background: var(--gm-green-400);
}
.progress-bar-blue {
  background: var(--gm-teal-500);
}
.progress-bar-orange {
  background: var(--gm-score-poor);
}
.progress-bar-red {
  background: var(--gm-score-low);
}
.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--gm-glass-black-10);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.progress-bar-blue {
  background: linear-gradient(90deg, var(--gm-sky-700), var(--gm-teal-500)); /* sky — not in palette */
}
.progress-bar-green {
  background: linear-gradient(90deg, var(--gm-green-500), var(--gm-green-300));
}
.progress-bar-orange {
  background: linear-gradient(90deg, var(--gm-yellow-500), var(--gm-amber-500)); /* amber-400 keep literal */
}
.progress-bar-red {
  background: linear-gradient(90deg, var(--gm-red-500), var(--gm-red-500)); /* red-400 keep literal */
}
/* Progress label for light backgrounds */
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.progress-label-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-gray-800);
}
.progress-label-percentage {
  font-size: 14px;
  font-weight: 600;
}
.progress-bar-wrapper {
  margin-bottom: 1rem;
}
.progress-section {
  padding: 1rem 0;
}
.progress-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-slate-800);
  margin-bottom: 1.5rem;
}
.progress-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gm-progress-h {
  height: 8px;
}
.gm-progress-track {
  height: 6px;
  background: var(--gm-gray-200);
}
.gm-progress-bar-h {
  height: 6px;
}
/* Email tab gradient top bars */
.gm-gradient-bar-yellow {
  background: linear-gradient(135deg, var(--gm-yellow-500) 0%, var(--gm-amber-600) 100%);
}
.gm-gradient-bar-green {
  background: linear-gradient(135deg, var(--gm-green-500) 0%, var(--gm-green-600) 100%);
}
.gm-gradient-bar-gray {
  background: linear-gradient(135deg, var(--gm-gray-500) 0%, var(--gm-gray-600) 100%);
}
/* Usage progress bar color variants */
.gm-progress-green {
  background: var(--gm-green-300);
}
.gm-progress-amber {
  background: var(--gm-yellow-500);
}
.gm-progress-red {
  background: var(--gm-red-500);
}

/* ============================================================================ */
/* == Atom — FlexRow / FlexColumn =========================================== */
/* ============================================================================ */
/* Base flex-row */
.flex-row {
  display: flex;
  flex-direction: row;
}
/* Base flex-column */
.flex-column {
  display: flex;
  flex-direction: column;
}
.gm-align-self-start {
  align-self: flex-start;
}
/* Flex column fill (flex: 1, min-width: 0, column layout) */
.gm-flex-col-fill {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================================ */
/* == Atom — Grid =========================================================== */
/* ============================================================================ */
.gm-auto-grid-340 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* ============================================================================ */
/* == Atom — IconContainer ================================================== */
/* ============================================================================ */
.globe-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.section-icon {
  font-size: 16px;
  color: currentcolor;
}
/* Common component patterns */
/* Icon circle in rich stat header */
.gm-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
/* Icon tint backgrounds use ~12% opacity for visible contrast on white surfaces.
   Icon foreground colors use -700/-800 shades for WCAG AA contrast (≥4.5:1). */
.gm-stat-icon-green {
  background: var(--gm-green-700-overlay-12);
  color: var(--gm-green-700); /* green-700 */
}
.gm-stat-icon-blue {
  background: var(--gm-sky-700-overlay-12);
  color: var(--gm-sky-700); /* sky-700 */
}
.gm-stat-icon-purple {
  background: rgb(109 40 217 / 12%);
  color: var(--gm-violet-700); /* violet-700 */
}
.gm-stat-icon-amber {
  background: var(--gm-amber-overlay-12);
  color: var(--gm-amber-600); /* amber-700 */
}
.gm-stat-icon-red {
  background: var(--gm-red-600-overlay-12);
  color: var(--gm-red-600); /* red-600 */
}
.gm-stat-icon-slate {
  background: var(--gm-gray-500-overlay-12);
  color: var(--gm-gray-700); /* gray-700 */
}
.icon-container-brand {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.icon-container-bg-light {
  background: var(--gm-glass-white-10);
}
.icon-container-bg-gradient {
  background: linear-gradient(135deg, rgb(52 111 130 / 30%), rgb(52 111 130 / 10%));
}
/* Icon box containers */
.gm-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gm-icon-box-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 32px;
}
.gm-icon-box-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.gm-icon-circle-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gm-icon-circle-xs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* --- Size utilities ------------------------------------------------------ */
.gm-icon-box-48 {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
}
.gm-icon-box-64 {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
}
/* Provider icon (48x48 with bg) */
.gm-provider-icon {
  width: 48px;
  height: 48px;
  background: rgb(59 130 246 / 8%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Feature check icon (green enabled) */
.gm-feature-check-icon {
  width: 22px;
  height: 22px;
  background: var(--gm-green-300-overlay-15);
}
/* Feature check icon (gray disabled) */
.gm-feature-x-icon {
  width: 22px;
  height: 22px;
  background: var(--gm-glass-black-5);
}
/* Section icon backgrounds for specific colors */
.gm-section-icon-blue {
  background: var(--gm-blue-overlay-8);
}
.gm-section-icon-green {
  background: var(--gm-green-500-overlay-8);
}
.gm-section-icon-purple {
  background: rgb(139 92 246 / 8%);
}
.gm-section-icon-amber {
  background: var(--gm-yellow-overlay-8);
}
.gm-section-icon-gray {
  background: var(--gm-gray-400-overlay-8);
}
.gm-icon-box-36 {
  width: 36px;
  height: 36px;
}
/* Icon-box theme helpers (bg + text color pairs) */
.gm-icon-box-yellow {
  background: var(--gm-yellow-overlay-8);
}
.gm-icon-box-green {
  background: var(--gm-green-500-overlay-8);
}
.gm-icon-box-gray {
  background: var(--gm-gray-400-overlay-8);
}
.gm-icon-box-blue {
  background: var(--gm-blue-overlay-8);
}
.gm-icon-box-red {
  background: var(--gm-red-overlay-10);
}
.gm-icon-box-amber {
  background: var(--gm-yellow-overlay-8);
}
.gm-icon-box-violet {
  background: rgb(109 40 217 / 12%);
}
/* GDPR metric accent backgrounds */
.gm-icon-circle-success {
  background: var(--gm-green-500-overlay-12);
}
.gm-icon-circle-info {
  background: var(--gm-indigo-500-overlay-12);
}
.gm-icon-circle-warning {
  background: var(--gm-amber-overlay-12);
}
.gm-icon-circle-primary {
  background: var(--gm-blue-primary-overlay-12);
}
.gm-icon-circle-danger {
  background: var(--gm-red-500-overlay-15);
}
/* Subscription audit icon themes */
.gm-audit-icon-blue {
  background: var(--gm-blue-500-overlay-12);
  color: var(--gm-blue-500);
}
.gm-audit-icon-green {
  background: var(--gm-green-300-overlay-12);
  color: var(--gm-green-300);
}
.gm-audit-icon-amber {
  background: var(--gm-amber-overlay-12);
  color: var(--gm-yellow-500);
}
.gm-audit-icon-red {
  background: var(--gm-red-500-overlay-12);
  color: var(--gm-red-500);
}
.gm-audit-icon-default {
  background: var(--gm-glass-black-5);
  color: var(--gm-gray-500);
}

/* ============================================================================ */
/* == Atom — CodeBlock ====================================================== */
/* ============================================================================ */
/* Code block for styleguide code examples */
.code-block-wrapper {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--gm-slate-50);
}
.code-block {
  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
  font-size: 0.8125rem;
  color: var(--gm-slate-500);
  white-space: pre-wrap;
  margin: 0;
}
/* Code box */
.gm-code-box {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  padding: 0.5rem 0.75rem;
  color: var(--gm-gray-700);
}
/* Code box (hardcoded hex variant for admin pages) */
.gm-code-box-hex {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
  word-break: break-all;
}
/* Code box small (compact variant for inline use) */
.gm-code-box-sm {
  background: var(--gm-gray-100);
  border: 1px solid var(--gm-gray-200);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--gm-gray-700);
}

/* ============================================================================ */
/* == Atom — ConfidenceDot ================================================== */
/* ============================================================================ */
.confidence-dot-icon {
  font-size: 0.5rem;
}
.gm-dot-8 {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
}
.gm-dot-8-pulse {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* ============================================================================ */
/* == Atom — MomentumIndicator ============================================== */
/* ============================================================================ */
/* Momentum Indicator — rising/falling arrow on prospect rows */
.momentum-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
  cursor: default;
}

/* ============================================================================ */
/* == Atom — InlineScore ==================================================== */
/* ============================================================================ */
/* Base score number badge */
.score-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  min-width: 50px;
  margin-bottom: 0;
  box-shadow: 0 2px 4px var(--gm-glass-black-15);
}
/* Score badge variants - threshold names matching ScoreHelpers */
.score-nr-excellent {
  background: var(--gm-score-excellent);
  color: var(--gm-white);
}
.score-nr-good {
  background: var(--gm-score-good);
  color: var(--gm-white);
}
.score-nr-fair {
  background: var(--gm-score-fair);
  color: var(--gm-white);
}
.score-nr-poor {
  background: var(--gm-score-poor);
  color: var(--gm-white);
}
.score-nr-low {
  background: var(--gm-score-low);
  color: var(--gm-white);
}

/* ============================================================================ */
/* == Atom — InfoRow ======================================================== */
/* ============================================================================ */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--gm-glass-white-15);
  gap: 16px;
  font-size: 15px;
}
.info-row:last-child {
  border-bottom: none;
}
.info-row strong {
  font-weight: 600;
  color: var(--gm-white);
  min-width: 120px;
  flex-shrink: 0;
}
.info-row span {
  color: var(--gm-glass-white-85);
  text-align: right;
  line-height: 1.5;
}
.info-row a {
  color: var(--gm-white);
  text-decoration: none;
}
.info-row a:hover {
  text-decoration: underline;
  color: var(--gm-white);
}

/* ############################################################################ */
/* ################################ ANIMATIONS ################################ */
/* ############################################################################ */

/* ============================================================================ */
/* == Keyframe Animations =================================================== */
/* ============================================================================ */
@keyframes twt-slide-active {
  from {
    transform: translateX(19px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes twt-slide-off {
  from {
    transform: translateX(-19px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 2000px;
  }
}
@keyframes modalSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes wizardStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes task-modal-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes radar-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes radar-dot-pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Fade in with scale animation */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Logout button spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes radar-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes radar-ring-pulse {
  0%,
  100% {
    border-color: rgb(16 185 129 / 25%);
  }
  50% {
    border-color: rgb(16 185 129 / 55%);
  }
}
@keyframes agent-glow {
  0% {
    box-shadow:
      0 0 30px rgb(59 130 246 / 25%),
      0 0 60px var(--gm-teal-overlay-15);
  }
  100% {
    box-shadow:
      0 0 40px rgb(59 130 246 / 35%),
      0 0 80px var(--gm-teal-overlay-20);
  }
}
@keyframes agent-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes agent-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@keyframes agent-blink {
  50% {
    opacity: 0;
  }
}
@keyframes agent-typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* all scrollbars */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 160, 0.45) transparent;
}

/* width of scrollbar */
*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

/* track */
*::-webkit-scrollbar-track {
  background: transparent;
  margin: 20px; /* space top/bottom */
}

/* thumb */
*::-webkit-scrollbar-thumb {
  background: rgba(120, 140, 160, 0.45);
  border-radius: 999px;

  /* creates space around thumb */
  border: 4px solid transparent;

  background-clip: content-box;
}

/* hover */
*::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 140, 160, 0.7);
  background-clip: content-box;
}

/* Utility: fixed-width label column in detail rows (e.g. stakeholder profile) */
.gm-detail-label {
  min-width: 110px;
}

/* Utility: clickable card — cursor pointer */
.gm-clickable {
  cursor: pointer;
}

/* =========================================
   Analytics Dashboard
   ========================================= */

.analytics-dashboard {
  padding: 0;
}

.analytics-chart-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.analytics-chart-half {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 360px;
}

.analytics-chart-card {
  overflow: hidden;
}

.analytics-chart-header {
  margin-bottom: 1rem;
}

.analytics-chart-icon {
  color: var(--gm-primary, #6366f1);
  opacity: 0.8;
}

.analytics-chart-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--gm-text-primary, #1e293b);
}

.analytics-chart-subtitle {
  font-size: 0.8rem;
  color: var(--gm-text-secondary, #64748b);
  margin: 0;
  line-height: 1.3;
}

/* Chart legend checkboxes row */
.chart-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0.25rem;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--gm-text-secondary, #64748b);
  user-select: none;
}

.chart-legend-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--gm-primary, #6366f1);
  cursor: pointer;
}

.chart-legend-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend-label {
  font-size: 0.8rem;
}

/* Heatmap SVG container */
.heatmap-svg-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.heatmap-svg-container svg {
  display: block;
}

/* Responsive: stack charts on small screens */
@media (max-width: 768px) {
  .analytics-chart-half {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ── Progress bar utilities ── */
.gm-progress-thin {
  height: 6px;
}

.gm-progress-xtra-thin {
  height: 4px;
}

.gm-progress-bar-teal {
  background: var(--gm-teal);
  width: var(--gm-progress-width, 0%);
}

.gm-progress-bar-dynamic {
  width: var(--gm-progress-width, 0%);
  background: var(--gm-progress-color, var(--gm-teal));
}

/* ── Score/dimension display ── */
.gm-score-label {
  min-width: 30px;
  text-align: right;
}

.gm-progress-score {
  height: 4px;
  max-width: 100px;
}

.gm-progress-confidence {
  height: 6px;
  max-width: 120px;
}

/* ── Transition utilities ── */
.gm-rotate-transition {
  transition: transform 0.3s;
}

/* ── Stage widget progress segment ── */
.gm-stage-segment {
  height: 4px;
  background: var(--gm-stage-color, rgba(255, 255, 255, 0.15));
}

.gm-stage-segment--active {
  background: var(--gm-teal);
}