/*=============================================
SAVVY ANALYTIQS BRAND FONT (Inter)
Self-hosted from /assets/fonts/. Inter is licensed under the SIL Open
Font License. Replaces Halyard Display from the original mockup.
=============================================*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/Inter-Bold.woff2") format("woff2");
}

/*=============================================
ROOT STYLES
=============================================*/
:root {
  /* === Savvy AnalytIQs brand tokens === */
  --savvy-navy: #162D75;
  /* Role-type accent colors. One source of truth used by chart card
     borders, role dots, panel pills, and any future role indicator.
     If you need to tint these (faded backgrounds), use the
     --role-*-tint variants below. */
  --role-existing: #94a3b8;
  --role-modified: #3b82f6;
  --role-future: #6366f1;
  --role-redundant: #f59e0b;
  --role-eliminated: #7F1D1D;
  --savvy-navy-hover: #0E1F55;
  --savvy-navy-text: #273866;
  --savvy-lime: #CEEA95;
  --savvy-lime-deep: #B8D679;
  --savvy-ice: #EBF6FA;
  --savvy-plum: #6D28D9;
  --savvy-elim: #7F1D1D;

  /* Colors — brand-aligned (was Microsoft blue, now Savvy navy) */
  --primary-color: var(--savvy-navy);
  --primary-hover: var(--savvy-navy-hover);
  --primary-bg-light: rgba(22, 45, 117, 0.1);
  --secondary-color: #f0f0f0;
  --secondary-hover-bg: var(--savvy-ice);
  --success-color: #28a745;
  --success-hover: #218838;
  --danger-color: #d13438;
  --danger-bg-light: rgba(209, 52, 56, 0.1);
  --danger-hover: #a61e22;
  --text-color: #333333;
  --light-bg: #f9f9f9;
  --white: #ffffff;
  --border-color: #dddddd;
  --body-bg: #f4f4f4;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #666;
  --scrollbar-thumb-hover: #444;
  --tab-active: var(--savvy-navy);
  --tab-hover: var(--savvy-navy-hover);
  --table-hover-bg: var(--savvy-ice);
  --disabled-color: var(--scrollbar-thumb);
  --dropdown-hover: var(--secondary-color);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-dark: rgba(0, 0, 0, 0.2);
  --header-color: var(--savvy-navy);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --text-primary: #333333;
  --text-secondary: #605e5c;
  --secondary-text: #605e5c;
  --text-color-secondary: #605e5c;
  --bg-secondary: #f4f4f4;
  --bg-hover: #e8e8e8;
  --background-secondary: #f4f4f4;
  --warning-bg: #fff3cd;
  --warning-border: #ffeaa7;
  --warning-text: #856404;
  --info-bg: #e7f3ff;

  /*Font size */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  /* Borders */
  --border-radius-md: 6px;
  --border-radius: 4px;
  --border-width: 2px;

  /* Z-index levels */
  --z-dropdown: 5000;
  --z-modal: 9999;
}

/*=============================================
LAYOUT & BASE STYLES
=============================================*/
/* General Styles */
body {
  font-family: "Inter", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
}

#app-body {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  transition: max-width var(--transition-normal);
  overflow-x: auto;
  overflow-y: auto;
  height: calc(100vh - 100px);
  position: relative;
  flex: 1;
  min-height: 0;
}

/* Custom scrollbar styling. Wrapped in @supports so older engines
   that don't understand these properties skip the rule entirely
   without producing compat warnings. Office WebView2 is modern
   Chromium so the styling applies. */
@supports (scrollbar-color: auto) {
  #app-body {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}

/* Ensure content inside app-body doesn't get cut off */
#app-body > * {
  min-width: min-content;
}

#app-body::-webkit-scrollbar {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  display: block;
}

#app-body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 2px var(--shadow-color);
}

#app-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: calc(var(--border-radius) * 2);
  border: var(--border-width) solid var(--scrollbar-track);
  min-height: 30px;
  min-width: 30px;
}

#app-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover); 
}

#app-body::-webkit-scrollbar-corner {
  background: var(--scrollbar-track); 
}

.hidden {
  display: none
}

.legal-info-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
}

.legal-info-title {
    margin-bottom: 10px;
    font-size: 1.1em;
}

.footer-left, .footer-right {
  display: flex;
  gap: var(--spacing-sm); 
}

.right-aligned {
  justify-content: flex-end;
}

/* Pagination Controls */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--light-bg);
  border-radius: var(--border-radius);
}

.pagination-info {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-sm);
}

.stacked-bar-chart-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 250px;
  padding: 20px;
  gap: 15px;
}

.manager-bar {
  background: linear-gradient(to top, #107c10, #2da72d);
}

.manager-bar:hover {
  background: linear-gradient(to top, #0e5e0e, #107c10);
}

.ic-bar {
  background: linear-gradient(to top, #5c2d91, #7c4dae);
}

.ic-bar:hover {
  background: linear-gradient(to top, #4a2476, #5c2d91);
}

.level-bars-container {
  padding: 20px;
}

.level-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
}

.level-bar-row .level-label {
  width: 80px;
  font-weight: 600;
  color: var(--text-color);
}

.stacked-bar-container {
  flex: 1;
  display: flex;
  height: 35px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stacked-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
}

.manager-segment {
  background: linear-gradient(90deg, #107c10, #2da72d);
}

.manager-segment:hover {
  background: linear-gradient(90deg, #0e5e0e, #107c10);
}

.ic-segment {
  background: linear-gradient(90deg, #5c2d91, #7c4dae);
}

.ic-segment:hover {
  background: linear-gradient(90deg, #4a2476, #5c2d91);
}

.segment-label {
  color: white;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 8px;
}

.detail-section {
  margin-top: 20px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: var(--border-radius);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.detail-header h5 {
  margin: 0;
  color: var(--primary-color);
}

/* Info Button Styles */
.metric-info-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #9ca3af;
    color: white;
    text-align: center;
    line-height: 12px;
    font-size: 9px;
    font-style: italic;
    font-family: serif;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 10;
}

.metric-info-btn:hover {
    background-color: #6b7280;
}

.metric-info-btn::after {
    content: "Click for more info";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f8f9fa;
    color: #6b7280;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.metric-info-btn:hover::after {
    opacity: 1;
}

/* Modal Styles */
.metric-info-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.metric-info-modal.hidden {
    display: none;
}

.metric-info-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.metric-info-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.metric-info-close:hover,
.metric-info-close:focus {
    color: #000;
}

.metric-info-section {
    margin-bottom: 20px;
}

.metric-info-section h3 {
    color: #2c5282;
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.metric-info-section p,
.metric-info-section ul {
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

.metric-info-section ul {
    padding-left: 20px;
    margin-top: 5px;
}

/*=============================================
WELCOME STYLES
=============================================*/
.ms-welcome {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ms-welcome__main:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--light-bg);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Note: the legacy .ms-welcome__header (logo + "Savvy Org Charts" h1) was
   removed during the redesign. Brand identity is now carried per-tab via
   the .op-tab-header pattern (see "ORG PLANNING TAB" section below). */

.ms-welcome__main > h2 {
  width: 100%;
  text-align: center;
}

/*=============================================
TAB NAVIGATION STYLES
=============================================*/
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
  padding: 0 4px;
  align-self: stretch;
  overflow-x: auto;
  min-width: 0;
  border-bottom: 1px solid #e2e8f0;
  background: var(--white);
}

/* Ensure the tab content container is scrollable */
.tab-content {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  padding-bottom: var(--spacing-xl);
}

/* Tab navigation — clean, brand-aligned. Inactive tabs are transparent
   with bold slate text; the active tab gets a navy text color and a 2px
   lime underline (brand accent). Hover gives a subtle ice-tint background. */
.tab-link {
  padding: 6px 14px;
  background: transparent;
  color: var(--savvy-navy-text);
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.tab-link:not(.active):not(.disabled-tab):hover {
  background-color: var(--savvy-ice);
  color: var(--savvy-navy);
}

.tab-link.active {
  color: var(--savvy-navy);
  font-weight: 700;
  border-bottom-color: var(--savvy-lime);
}

/*=============================================
ACCORDION COMPONENT STYLES
=============================================*/
.accordion-section {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius);
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.accordion-header {
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  padding: var(--spacing-lg);
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--font-size-lg);
  font-weight: 600;
  transition: all var(--transition-normal);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background-color: var(--primary-hover);
}

.accordion-content {
  padding: var(--spacing-lg);
  background-color: var(--light-bg);
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.customization-exclusion-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.exclusion-heading {
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

.connector-lines-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.legend-toggles-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Data Validation Modal */
.validation-description {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.validation-section {
    margin-bottom: 14px;
}

.validation-group-header {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-error-header {
    color: #c0392b;
}

.validation-warning-header {
    color: #e67e22;
}

.validation-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.validation-badge-error {
    background: #c0392b;
}

.validation-badge-warning {
    background: #e67e22;
}

.validation-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.validation-item-error {
    background: #fef2f2;
    border-left: 3px solid #c0392b;
}

.validation-item-warning {
    background: #fff8f0;
    border-left: 3px solid #e67e22;
}

.validation-item-count {
    font-weight: 700;
}

.validation-item-description {
    color: #555;
    font-size: 11px;
    margin-top: 3px;
}

/*=============================================
BUTTON STYLES
=============================================*/
.button {
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2);
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: all var(--transition-fast);
  display: inline-block;
  text-align: center;
  line-height: 1.5;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-color);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

.button:disabled {
  background: var(--border-color);
  color: var(--disabled-color);
  cursor: not-allowed;
  opacity: 0.6;
}

.button-primary {
  background-color: var(--primary-color); 
  color: var(--white);  /* Changed from white */
}

.button-primary:hover {
  background-color: var(--primary-hover);
}

/* Secondary variant - outline buttons */
.button-secondary {
  background-color: var(--white);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.button-secondary:hover {
  background-color: var(--secondary-hover-bg);
  border-color: var(--primary-hover);
}

/* Danger variant - destructive actions */
.button-danger {
  background-color: var(--danger-color); 
  color: var(--white);
}

.button-danger:hover {
  background-color: var(--danger-hover);
}

/* Success variant - positive actions */
.button-success {
  background-color: var(--success-color);
  color: var(--white);
}

.button-success:hover {
  background-color: var(--success-hover);
}

/* demo variant */
.button-demo {
  background-color: #ff6b35;
  color: var(--white);
  border: none;
}

.button-demo:hover {
  background-color: #ff5722;  /* Slightly darker orange */
}

/* Size modifiers */
.button-full-width {
    width: 100%;
}

.button-small {
  padding: calc(var(--spacing-md) * 0.5) var(--spacing-md); 
  font-size: var(--font-size-sm);
}

.button-mini {
  padding: calc(var(--spacing-md) * 0.25) var(--spacing-sm);
  font-size: var(--font-size-xs);
  min-width: auto;
}

/* Special modifier for action buttons */
.button-action:hover {
    transform: scale(1.1);
}

/* Button containers */
.button-container,
.filter-controls {
    margin-top: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
}

/* Button row - used for Continue to Chart Builder button */
.button-row {
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.button-row .button {
    flex: 0 0 auto;
    min-width: 120px;
}

/* Mobile responsive */
@media (max-width: 400px) {
    .button-row {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .button-row .button {
        width: 100%;
    }
}

.button-container {
  justify-content: center;
}

.button-container-centered {
    margin-top: 15px;
    text-align: center;
}

/* Build hierarchy section button sizing */
.build-hierarchy-section .button {
    min-width: 150px;
}

/* Action containers for button groups */
.action-buttons{
    display: flex;
    gap: var(--spacing-md); 
}

/* Close button */
.close-btn {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--scrollbar-thumb);
  padding: 0;
  width: 30px;
  height: 30px;
}

.text-button {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-md);
}

.button-group {
    display: flex;
    gap: 8px;
}

.button-settings {
    padding: 6px 12px;
    font-size: 12px;
    margin-left: auto;
}

.badge-inline {
  margin-left: 5px;
}

.button-margin-top {
  margin-top: 10px;
}

.button-custom-bg {
  background-color: var(--primary-color);
}

#addDisplayRuleBtn.hidden {
  display: none;
}

#displaySaveSection.hidden {
  display: none;
}

#displayDataTypeToggle.hidden {
  display: none;
}

/* ========================================
   SCENARIO PLANNING STYLES
   ======================================== */

/* Layout Components */
.scenario-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.scenario-form {
    margin-top: 12px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.scenario-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Statistics Dashboard */
.scenario-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #0078d4;
    margin-bottom: 1px;
}

.stat-label {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
}

.stat-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.stat-card-clickable:hover {
    border-color: #0078d4;
    box-shadow: 0 1px 4px rgba(0, 120, 212, 0.2);
}

/* Mode Tabs */
.mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
}

.mode-tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    background: none;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.mode-tab:hover {
    color: #0078d4;
    background: #f8f9fa;
}

.mode-tab.active {
    color: #0078d4;
    border-bottom-color: #0078d4;
    font-weight: 600;
}

/* Bulk Changes */
.bulk-search-section {
    margin-bottom: 16px;
}

.bulk-search-section h4,
#bulk-results-section h4 {
    margin: 0 0 8px;
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-row.hidden {
    display: none;
}

.succession-readiness-warning {
    font-size: var(--font-size-sm);
    color: var(--warning-text);
    margin-top: 4px;
    padding: 0;
}

.succession-readiness-warning.hidden {
    display: none;
}

.coming-soon-notice {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-secondary);
}

.coming-soon-notice h3 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.coming-soon-notice p {
    font-size: var(--font-size-sm);
}

.coming-soon-notice.hidden {
    display: none;
}

/* Succession Scenario Planning */
.succession-scenario-bar {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

#scenario-succession-content .empty-state {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.succession-summary-placeholder {
    text-align: center;
    padding: 16px;
    color: var(--text-secondary);
}

.succession-summary-placeholder h4 {
    margin-bottom: 4px;
    color: var(--text-primary);
}

/* Succession Impact Metrics Dashboard */
.succession-impact-metrics {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.succession-metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.succession-metrics-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.succession-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.succession-metric-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 10px 12px;
    text-align: center;
}

.succession-metric-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.succession-metric-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.succession-metric-change {
    font-size: 10px;
    margin-top: 3px;
    font-weight: 500;
}

.succession-metric-change.positive {
    color: #107c10;
}

.succession-metric-change.negative {
    color: #d13438;
}

.succession-metric-change.neutral {
    color: var(--text-secondary);
}

.succession-chains-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.succession-chains-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.chain-delete-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--border-radius);
}

.chain-delete-btn:hover {
    background: #fde7e9;
    color: #d13438;
}

.chain-delete-btn.confirm {
    background: #d13438;
    color: #ffffff;
}

.chain-header-clickable {
    cursor: pointer;
}

/* Succession Cascade Builder */
.departure-search-container {
    margin-bottom: var(--spacing-md);
}

.departure-search-container .search-input-wrapper {
    position: relative;
}

.departure-search-container .departure-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.departure-search-container .departure-dropdown .dropdown-custom-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid #f0f0f0;
}

.departure-search-container .departure-dropdown .dropdown-custom-item:hover {
    background: #f0f7ff;
}

.departure-search-container .departure-dropdown .dropdown-note {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--text-secondary);
    background: #fafafa;
}

/* Chain step wrapper */
.chain-step {
    margin-bottom: 0;
}

/* Chain connector (vertical line + arrow) */
.chain-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.connector-line {
    width: 2px;
    height: 20px;
    background: #ccc;
}

.connector-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #ccc;
}

/* Step cards */
.step-card {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: #fff;
}

.step-card.departure {
    border-color: var(--danger-color);
}

.step-card.filled {
    border-color: var(--success-color);
}

.step-card.pending {
    border: 2px dashed var(--primary-color);
}

.step-card.terminal {
    border-color: #ff9800;
}

.step-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step-card.departure .step-header {
    background: #fde8e8;
    color: var(--danger-color);
}

.step-card.filled .step-header {
    background: #e8f5e9;
    color: #2e7d32;
}

.step-card.pending .step-header {
    background: #e3f2fd;
    color: var(--primary-color);
}

.step-card.terminal .step-header {
    background: #fff3e0;
    color: #e65100;
}

.step-body {
    padding: 10px 12px;
}

.step-person-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.step-person-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.step-person-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.step-info-line {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* Undo button */
.undo-btn {
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    opacity: 0.7;
}

.undo-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.3);
}

/* Successor options */
.successor-options-section {
    margin-top: 8px;
}

.successor-options-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.successor-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    margin-bottom: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.successor-option:hover {
    border-color: var(--primary-color);
    background: #f0f7ff;
}

.successor-option.selected {
    border-color: var(--success-color);
    background: #e8f5e9;
}

.successor-option.already-placed {
    border-color: var(--danger-color);
    background: #fff5f5;
    opacity: 0.85;
}

.successor-option.confirm-reassignment {
    border-color: #ff9800;
    background: #fff8e1;
    opacity: 1;
}

.option-info {
    flex: 1;
    min-width: 0;
}

.option-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.option-title {
    font-size: 11px;
    color: var(--text-secondary);
}

.option-warning {
    font-size: 11px;
    color: var(--danger-color);
    margin-top: 2px;
}

/* Readiness badges */
.option-readiness {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
}

.option-readiness.readiness-now {
    background: #e8f5e9;
    color: #2e7d32;
}

.option-readiness.readiness-soon {
    background: #fff8e1;
    color: #f57f17;
}

.option-readiness.readiness-later {
    background: #fce4ec;
    color: #c62828;
}

.option-readiness.readiness-default {
    background: #f5f5f5;
    color: #666;
}

/* Step action buttons */
.step-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #eee;
}

.step-action-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 12px;
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: center;
}

.step-action-btn:hover {
    background: #eee;
    border-color: #bbb;
}

/* Internal pick / External hire inline forms */
.step-inline-form {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.step-inline-form .field-row {
    margin-bottom: var(--spacing-xs);
}

.step-inline-form .field-row:last-child {
    margin-bottom: 0;
}

.step-inline-form input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

/* Readiness picker */
.readiness-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.readiness-picker-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    display: block;
}

.readiness-option {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}

.readiness-option:hover {
    border-color: var(--primary-color);
}

.readiness-option.selected {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Warnings panel */
.warnings-panel {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fff8e1;
    border: 1px solid #ffe0b2;
    border-radius: var(--border-radius);
}

.warnings-title {
    font-size: 11px;
    font-weight: 600;
    color: #e65100;
    margin-bottom: 4px;
}

.warning-item {
    font-size: 12px;
    color: #795548;
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.warning-icon {
    flex-shrink: 0;
    font-size: 12px;
}

/* Terminal / unfilled gap */
.terminal-node {
    text-align: center;
    padding: 8px 12px;
}

.terminal-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    background: #fff3e0;
    color: #e65100;
}

/* Departure search inline in cascade */
.cascade-departure-search {
    position: relative;
}

.cascade-departure-search .departure-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.cascade-departure-search .departure-results-dropdown .dropdown-custom-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid #f0f0f0;
}

.cascade-departure-search .departure-results-dropdown .dropdown-custom-item:hover {
    background: #f0f7ff;
}

.step-critical-badge {
    display: inline-block;
    margin-top: 4px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
}

.filter-group .input {
    min-width: 130px;
}

.filter-group-grow {
    flex: 1;
}

.filter-group-grow .input,
.filter-group-grow #bulk-search-value-container .input {
    width: 100%;
}

.bulk-results-table-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 350px;
    overflow: auto;
    margin-bottom: 16px;
}

.bulk-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bulk-results-table th {
    background: #f5f7fa;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 2px solid #ddd;
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.bulk-results-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.bulk-results-table tr:hover {
    background: #f8fbff;
}

.bulk-results-table input[type="checkbox"] {
    cursor: pointer;
}

.select-all-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.results-count {
    color: #666;
    font-size: 12px;
}

.bulk-actions-panel {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
}

.bulk-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bulk-actions-header h4 {
    margin: 0;
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selected-count-badge {
    background: #0078d4;
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.bulk-actions-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.bulk-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.bulk-field-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
}

.bulk-field-card label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.bulk-field-card .input {
    width: 100%;
}

.bulk-field-card .manager-field-wrapper {
    position: relative;
}

.bulk-field-card .manager-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
}

.field-hint {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}

.bulk-apply-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Bulk Add Roles */
.manager-field-wrapper {
    position: relative;
}

.bulk-section-heading {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.bulk-add-controls {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.input-narrow {
    width: 60px;
}

.bulk-add-note {
    font-size: 11px;
    color: #888;
    margin: 0 0 16px 0;
}

.new-roles-table-container {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 12px;
}

.new-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.new-roles-table th {
    position: sticky;
    top: 0;
    background: #f5f7fa;
    padding: 8px 6px;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.new-roles-table td {
    padding: 4px 4px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.new-roles-table .input {
    padding: 4px 6px;
    font-size: 12px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.new-roles-table select.input {
    padding: 4px 4px;
}

.new-roles-table td:first-child {
    width: 28px;
    text-align: center;
    color: #999;
    font-size: 11px;
}

.new-roles-table td:last-child {
    width: 28px;
    text-align: center;
}

.remove-row-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
}

.remove-row-btn:hover {
    color: #e74c3c;
    background: #fef2f2;
}

.bulk-add-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.bulk-add-actions-right {
    display: flex;
    gap: 8px;
}

.new-roles-table .manager-dropdown {
    min-width: 200px;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}

/* Main Grid Layout */
.scenario-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.search-panel,
.details-panel {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
}

/* Search Results */
.search-results-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #ffffff;
    margin-top: 8px;
}

.no-results {
    padding: 20px;
    text-align: center;
    color: #999;
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.scenario-add-role {
    margin-top: 12px;
}

/* Employee Details */
.employee-details {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
}

/* Bulk Operations */
.bulk-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.bulk-op-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
}

.bulk-op-card h4 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 16px;
}

/* Action Buttons */
.scenario-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 16px;
}

.scenario-actions-left {
    display: flex;
    gap: 8px;
}

/* Utility Classes */
.button-full {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .scenario-main-grid {
        grid-template-columns: 1fr;
    }
    
    .scenario-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bulk-ops-grid {
        grid-template-columns: 1fr;
    }

    .bulk-field-grid {
        grid-template-columns: 1fr;
    }

    .scenario-actions {
        flex-direction: column;
    }
    
    .scenario-actions-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .scenario-actions button {
        width: 100%;
    }
}

/* Small screens */
@media (max-width: 480px) {
    .scenario-controls {
        flex-wrap: wrap;
    }
    
    .scenario-controls select {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .quick-actions button {
        width: 100%;
    }
}

/* Employee Details Section */
.no-selection-message {
    padding: 20px;
    text-align: center;
    color: #999;
}

/* Export Change Log Section */
.change-log-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Employee Details Panel */
.role-section-header {
  margin-top: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-section-title {
  margin: 0;
  color: #666;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.employee-header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.employee-name {
  margin: 0;
  color: #333;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-container label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  display: block;
}

.field-container input,
.field-container select {
  width: 100%;
  padding: 4px;
  margin-top: 4px;
}

.field-current {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.manager-dropdown {
  position: absolute;
  top: 100%;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.manager-container {
  position: relative;
}

.compare-controls-container .field-row,
.org-selector .field-row {
  position: relative;
}

.actions-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  display: flex;
  gap: 8px;
}

.chart-button-small {
  font-size: 12px;
  padding: 4px 8px;
}

/* Organizational Tree Styles */
.org-tree-manager-name {
  margin-right: 12px;
}

.org-tree-edit-btn {
  padding: 2px 8px;
  font-size: 11px;
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 3px;
  cursor: pointer;
}

.org-tree-no-reports {
  color: #999;
  font-style: italic;
}

.org-tree-employee-container {
  margin-bottom: 4px;
}

.org-tree-report-row {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.org-tree-subreports {
  margin-left: 24px;
  border-left: 1px dotted #ccc;
  padding-left: 8px;
  margin-top: 4px;
}

.org-tree-expand-icon {
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
  width: 16px;
  display: inline-block;
  font-size: 12px;
}

.org-tree-spacer {
  width: 24px;
  display: inline-block;
}

.org-tree-checkbox {
  margin-right: 8px;
}

.org-tree-employee-name {
  margin-right: 12px;
}

.org-tree-small-edit-btn {
  padding: 2px 6px;
  font-size: 11px;
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 3px;
  cursor: pointer;
}

.org-tree-loading {
  color: #999;
}

.dropdown-item {
  padding: 8px;
  cursor: pointer;
}

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

/* Modal dialog styles */
.modal-body-left {
  text-align: left;
}

.modal-changes-box {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
}

.modal-note {
  margin-top: 10px;
  padding: 10px;
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 4px;
}

.modal-warning {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.instructions-list {
  padding-left: 20px;
  line-height: 1.8;
}

.checkbox-container {
  margin-top: 20px;
  margin-bottom: 15px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-button {
  margin-top: 20px;
}

/* Organizational View Styles */
.org-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #e0e0e0;
}

.org-header {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reports-to-section {
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.reports-to-label {
  font-weight: 600;
  margin-right: 8px;
}

.direct-reports-header {
  font-weight: 600;
  margin-bottom: 12px;
}

.tree-container {
  padding-left: 0;
}

.bulk-move-section {
  margin-top: 20px;
  padding: 16px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.bulk-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

.bulk-expand-icon {
  margin-right: 8px;
  font-size: 12px;
}

.bulk-content {
  margin-top: 16px;
}

.bulk-content.hidden {
  display: none;
}

.bulk-instructions {
  color: #666;
  font-size: 13px;
  margin-bottom: 12px;
}

.manager-search-container {
  margin-bottom: 16px;
  position: relative;
}

.manager-search-label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.manager-search-input {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.selected-manager-display {
  margin-top: 8px;
  padding: 8px;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-size: 12px;
  display: none;
}

.manager-search-dropdown {
  position: absolute;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.move-option-container {
  margin-bottom: 12px;
  padding: 12px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.move-branch-btn {
  background-color: #4CAF50;
  color: white;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
}

.move-description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.modal-eliminated-warning {
  background-color: #ffebee;
  border: 1px solid #f44336;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.search-result-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.search-result-item:hover {
  background-color: #f5f5f5;
}

.role-type-eliminated {
  text-decoration: line-through;
  opacity: 0.6;
}

.role-type-future {
  font-style: italic;
  color: #0066cc;
}

.role-type-modified {
  font-weight: bold;
}
/*=============================================
FORM ELEMENTS & INPUTS
=============================================*/
.input {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-md) * 0.5) var(--spacing-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

/* Width variants */
.input-small {
  width: 60px;
}

.input-medium {
  width: 100px;
}

.input-large {
  width: 200px;
}

.input-full {
  width: 100%;
}

/* Special variants */
.input-color {
  width: 38px;
  height: 30px;
  padding: 2px;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  vertical-align: middle;
  flex-shrink: 0;
}

.input-code {
  font-family: monospace;
  text-transform: uppercase;
}

/* Flex input that grows */
.input-flex {
  flex: 1;
}

/* Error state */
.input.duplicate {
  border-color: var(--danger-color);
  background-color: var(--danger-bg-light);
}

/* Specific input adjustments (only unique properties) */
.transparency-input {
    width: 50px;
}

.hex-input {
    width: 70px;
    font-size: var(--font-size-xs);
}

.preset-rename-input {
  margin-right: var(--spacing-md);
}

/* Radio buttons */
.radio-group {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* Form rows */
.setting-row,
.field-row {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
}

.setting-row label {
  min-width: 150px;
}

.field-row label {
  min-width: 120px;
  margin-right: var(--spacing-md);
}

.field-value {
  font-weight: bold;
  padding: var(--spacing-xs);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  min-height: 20px;
}

.full-width {
  flex-grow: 1;
}

.duplicate-warning {
  color: var(--danger-color);
  margin-left: var(--spacing-xs);
  font-weight: bold;
}

.input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); 
  margin-bottom: var(--spacing-sm);
}

.input-row input[type="number"] {
  padding: 6px 10px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  font-weight: 600;
  background: white;
}

.input-row input[type="number"]:focus {
  border-color: var(--primary-color);
  outline: none;
}

.percentage-symbol {
    font-size: 12px;
    color: #666;
}

/*=============================================
DROPDOWN COMPONENTS
=============================================*/
.dropdown-custom {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--white);
}

/* For standard select dropdowns in the mapping section */
#dropdownContainer select.dropdown-custom-list {
  position: static;
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  cursor: pointer;
}

.leader-filter-row .dropdown-custom-list {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  overflow-y: auto;
  z-index: var(--z-dropdown);
  width: 100%;
  max-height: 300px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.leader-filter-row .dropdown-custom-list:not(.hidden) {
  display: block;
}

.leader-filter-row .dropdown-custom-list.hidden {
  display: none;
}

.dropdown-custom-header {
  padding: calc(var(--spacing-md) * 0.5) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  cursor: pointer;
}

.dropdown-custom-header:hover,
.dropdown-custom-item:hover {
  background-color: var(--light-bg);
}

.dropdown-custom-item {
  padding: var(--spacing-xs);
  cursor: pointer;
}

.dropdown-custom-item label {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-base);
}

.dropdown-custom-item input[type="checkbox"] {
  margin-right: var(--spacing-sm);
}

.symbol-dropdown {
    width: 120px;
}

/* Specific width variants */
.dropdown-values {
  min-width: 150px;
  flex: 2;
}

/* Controls within dropdown */
.dropdown-controls {
  background-color: var(--light-bg);
  padding: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

/* Checkbox container within dropdown */
.dropdown-checkboxes {
  padding: var(--spacing-xs);
}

.dropdown-note {
  padding: 8px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  color: #666;
}

.dropdown-no-results {
  padding: 10px;
  color: #999;
}

/*==================================================
HIERARCHICAL CHECKBOX TREE (People Filter)
==================================================*/
.leader-group {
  margin-left: 0;
  padding-left: 0;
}

.leader-item,
.sublevel-item,
.sub-sublevel-item {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.leader-item {
  display: flex;
  align-items: center;
}

.leader-item:hover {
  background-color: var(--dropdown-hover);
}

.leader-label {
  display: flex;
  flex-grow: 1;
  align-items: center;
  cursor: pointer;
}

.toggle-button {
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-right: var(--spacing-sm);
  width: 16px;
  text-align: center;
}

.toggle-button.toggle-hidden {
  visibility: hidden;
}

.sublevel-container,
.sub-sublevel-container {
  margin-left: var(--spacing-xl);
  border-left: 2px solid var(--border-color);
  padding-left: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

/*=============================================
TABLE STYLES
=============================================*/
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.table th,
.table td {
  padding: var(--spacing-md);
  text-align: left;
  border: 1px solid var(--border-color);
}

.table th {
  background-color: var(--light-bg);
  font-weight: 600;
  color: var(--primary-color);
}

.table tr:nth-child(even) {
  background-color: var(--light-bg);
}

.table tr:hover {
  background-color: var(--table-hover-bg);
}

/* Table variants */
.table-compact th,
.table-compact td {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/* Sortable column headers */
.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Table wrapper for scroll */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

.comparison-table {
  overflow-x: auto;
}

.feature-comparison {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

/* Keep these specific color classes */
.feature-comparison .feature-available {
  color: var(--success-color);
}

.feature-comparison .feature-unavailable {
  color: var(--danger-color);
}

/* Details table specific styles */
.details-table-container {
  overflow-x: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.details-table {
  background-color: var(--white);
  width: 100%;
}

.details-table th {
  border-bottom: 2px solid var(--border-color);
  padding: var(--spacing-md) var(--spacing-sm);
}

.details-table td {
  border-bottom: 1px solid var(--border-color);
  padding: calc(var(--spacing-md)*.75) var(--spacing-sm);
}

/* Manager table cell styling */
.manager-name {
  font-weight: 500;
  color: var(--primary-color);
  cursor: pointer;
}

.manager-name:hover {
  text-decoration: underline;
}

.center {
  text-align: center;
}

/*=============================================
MODAL/DIALOG COMPONENTS
=============================================*/
.modal-overlay:not(.hidden) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
}

/* Base modal content */
.modal-content {
  background-color: var(--white);
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: 0 4px 8px var(--shadow-color-dark);
  max-width: 400px;
  width: 90%;
  padding: var(--spacing-xl);
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content-medium {
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  margin: 50px auto;
  position: relative;
  top: 0;
}

/* Modal sections */
.modal-header {
  padding: calc(var(--spacing-md) * 2);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2,
.modal-title {
  margin: 0;
  color: var(--primary-color);
  font-size: var(--font-size-xl);
}

.modal-body {
  padding: calc(var(--spacing-md) * 2);
  text-align: left;
  margin-bottom: var(--spacing-xl);
}

.modal-body p {
  margin: var(--spacing-lg) 0;
  line-height: 1.5;
  font-size: var(--font-size-base);
}

.modal-footer {
  padding: var(--spacing-lg) calc(var(--spacing-md)*2);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Button container in modals */
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: 20px;
}

.modal-additional-message {
  margin-top: 20px;
}

.modal-content-comparison {
  max-width: 600px;
}

.modal-cta-text {
  margin-top: 20px;
}

.feature-comparison th,
.feature-comparison td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.feature-comparison th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.feature-available {
  color: #28a745;
  font-weight: bold;
}

.feature-unavailable {
  color: #dc3545;
  font-weight: bold;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  z-index: 10000;
  padding: 50px 0;
}

.modal-overlay.modal-visible {
  display: flex;
}

/*=============================================
BOX SELECTION LAYOUT
=============================================*/
.box-selection-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.box-row {
  display: flex;
  gap: var(--spacing-md);
}

.row-top, .row-bottom-1, .row-bottom-2 {
  justify-content: space-between;
}

.row-top select, 
.row-bottom-1 select, 
.row-bottom-2 select {
  flex: 1;
}

.row-mid-1, .row-mid-2 {
  justify-content: center;
}

.single-box-wrapper {
  display: flex;
  flex: 3;
}

.single-box-wrapper select {
  flex: 1;
  width: 100%;
}

/*=============================================
COLOR SETTINGS & SORT SETTINGS
=============================================*/
.color-section {
  margin-bottom: var(--spacing-xl);
}

/* Applied to both color and sort containers */
.color-levels-container,
.sort-levels-container {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  background-color: var(--light-bg);
}

.color-levels-container:not(:empty),
.sort-levels-container:not(:empty) {
  display: block;
}

/* Applied to both color and sort level rows */
.color-level-row,
.sort-level-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  align-items: center;
}

/* Combined placeholder styles */
.color-level-row.placeholder,
.sort-level-row.placeholder {
  justify-content: center;
  padding: var(--spacing-md);
  color: var(--disabled-color);
}

/* Sort Order Input */
.sort-order-container {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

/* Combined heading styles for containers */
.color-levels-container h4,
.sort-levels-container h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: bold;
}

/* Additional sort section styles */
.sort-variable-section {
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.sort-variable-section:last-of-type {
    border-bottom: none;
}

.setting-row.with-remove {
    align-items: center;
}

.setting-row.with-remove select {
    flex: 1;
    margin-right: var(--spacing-sm);
}

.color-input {
  opacity: 1;
}

/*=============================================
LOADING & NOTIFICATION COMPONENTS
=============================================*/
.loading-overlay:not(.hidden) {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  justify-content: center;
  align-items: center;
}

.loading-content {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 6px var(--shadow-color);
  text-align: center;
  max-width: 400px;
}

.loading-spinner {
  border: 5px solid var(--scrollbar-track);
  border-radius: 50%;
  border-top: 5px solid var(--primary-color);
  width: 40px;
  height: 40px;
  margin: 0 auto var(--spacing-lg) auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading-message {
  font-size: var(--font-size-lg);
  margin: 0;
  color: var(--text-color);
}

/* Notification styles - combined success and error */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius);
  color: var(--white);
  z-index: var(--z-modal);
  box-shadow: 0 2px 10px var(--shadow-color-dark);
  font-weight: bold;
  min-width: 200px;
  max-width: 80%;
  text-align: center;
}

.notification.success {
  background-color: var(--success-color);
}

.notification.error {
  background-color: var(--danger-color);
}

/* Info/Alert boxes - base styles */
.insight-box,
.info-box-blue {
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}

.insight-box {
  background-color: var(--warning-bg);
  border: 1px solid var(--warning-border);
  margin-bottom: var(--spacing-lg);
}

/* Info box */
.info-box-blue {
  background: var(--info-bg);
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  margin-top: var(--spacing-lg);
}

.info-box {
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  margin-top: var(--spacing-lg);
  line-height: 1.5;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 8px 0 0 0;
}

.insight-box.warning {
  color: var(--warning-text);
}

/* Chart loading specific styles */
.chart-loading-container {
  text-align: center;
}

.chart-loading-main {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: var(--text-color);
}

.chart-loading-sub {
  font-size: 0.9em;
  color: var(--secondary-text);
}

/*=============================================
PRESET MANAGEMENT STYLES
=============================================*/
#presetApplyDropdown {
    flex: 1;
}

.preset-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.preset-header-row {
  display: flex;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
  padding: 0 var(--spacing-xs);
}

.preset-name-header {
  flex: 1;
}

.preset-actions-header {
  width: 110px;
  text-align: center;
}

.preset-default-header {
  width: 60px;
  text-align: center;
}

.preset-row:not(.hidden) {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.preset-actions {
  display: flex;
  width: 110px;
  gap: var(--spacing-xs);
  justify-content: flex-start;
  margin-right: var(--spacing-md);
}

.preset-default-container {
  width: 60px;
  display: flex;
  justify-content: center;
}

.new-preset-container {
  padding: var(--spacing-sm);
  background-color: #e6f2ff;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
}

.preset-description {
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-base);
  color: var(--disabled-color);
  font-style: italic;
}

.section-separator {
  height: 1px;
  background-color: var(--border-color);
  margin: var(--spacing-lg) 0;
}

/* Save Settings Section styles */
.save-section {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md);
  background-color: #f0f7ff;
  border: 1px solid #cce5ff;
  border-radius: var(--border-radius);
}

.save-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  color: #0067b8;
}

.save-section p {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-base);
  color: var(--disabled-color);
}

/*=============================================
PROFESSIONAL/UPGRADE FEATURES
=============================================*/

/* professional Feature Styling */
.professional-feature {
  position: relative;
  opacity: 0.85;
  background-color: var(--light-bg);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
  overflow: visible;
}

/* professional feature overlay and badge */
.professional-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 1;
}

.professional-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--primary-color);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: bold;
  padding: calc(var(--spacing-xs) * 0.5) calc(var(--spacing-md) * 0.5);
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 3px var(--shadow-color);
}

/* professional feature controls - disabled state styling */
.professional-feature select,
.professional-feature input,
.professional-feature button:not(.upgrade-button) {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Hover effect on professional feature containers */
.professional-feature:hover {
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
}

/* Upgrade button that appears in professional features */
.upgrade-button {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  z-index: 3;
  position: relative;
  pointer-events: auto;
}

.upgrade-button:hover {
  background-color: var(--primary-hover);
}

/* Why Upgrade section/button */
.why-upgrade-button {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: var(--spacing-md) 0;
}

.why-upgrade-button:hover {
  background-color: var(--primary-bg-light);
}

/* For accordion sections that contain professional features */
.accordion-section.contains-professional-features .accordion-header {
  position: relative;
}

.accordion-section.contains-professional-features .accordion-header::after {
  content: 'Pro';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-color);
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: calc(var(--spacing-xs) * 0.5) calc(var(--spacing-md) * 0.5);
  border-radius: 3px;
}

.accordion-section.contains-professional-features .professional-feature .professional-badge {
  display: none;
}

.radio-group .professional-option {
  position: relative;
  padding-right: calc(var(--spacing-xl)*2);
}

.radio-group .professional-option .professional-badge {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.tab-link.disabled-tab {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}

.tab-link.disabled-tab:hover {
  background-color: transparent;
  color: var(--savvy-navy-text);
}

/* Fix for bullet alignment in the dialog */
.upgrade-dialog ul {
  list-style-position: outside;
  margin-left: 20px;
  text-align: left;
}

.upgrade-dialog li {
  text-align: left;
  margin-bottom: 8px;
}

.upgrade-dialog-content {
  text-align: left;
}

.modal-body ul {
  padding-left: 20px;
  list-style-type: disc;
}

.modal-body li {
  text-align: left;
}

.tab-link .professional-badge.badge-inline {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
  font-size: 9px;
  padding: 1px 3px;
}

/*=============================================
ACCOUNT/SUBSCRIPTION STYLES
=============================================*/

/* Account value section (expand existing if you have similar) */
.account-value {
    background: #f0f7ff;
    border: 1px solid #d1e7ff;
    border-radius: calc(var(--border-radius) * 2);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.account-value h3 {
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.account-value p {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.account-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); 
}

.account-benefit {
    display: block;
    font-size: var(--font-size-base);
    color: var(--disabled-color);
    padding: var(--spacing-xs) 0;
}

.account-benefit::before {
    content: "✓";
    color: var(--success-color);
    font-weight: bold;
    font-size: var(--font-size-base);
    margin-right: var(--spacing-sm);
}

/* Action section styles */
.action-section {
    text-align: center;
    margin-top: var(--spacing-xxl);
}

.skip-link {
    color: var(--disabled-color);
    text-decoration: none;
    font-size: var(--font-size-base);
    margin-top: var(--spacing-lg);
    display: inline-block;
}

.skip-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/*=============================================
DEMO MODE BANNER
=============================================*/

/* Demo Mode Banner Styles */
.demo-mode-banner:not(.hidden) {
  background: linear-gradient(90deg, #ff6b35, #e55100);
  color: var(--white);
  padding: var(--spacing-sm) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px var(--shadow-color-dark);
  transition: background-color var(--transition-fast);
  text-align: center;
}

.demo-mode-banner:hover {
  background: linear-gradient(90deg, #e55100, #cc4400);
}

.demo-mode-banner .banner-link {
  font-size: var(--font-size-sm);
  opacity: 0.95;
  font-weight: 600;
}

.demo-mode-banner .banner-link:hover {
  opacity: 1;
}

.demo-mode-banner .banner-hint {
  font-size: var(--font-size-xs);
  opacity: 0.85;
  font-weight: 400;
}

/*=============================================
TRANSPARENCY CONTROLS
=============================================*/
.transparency-section {
  border-top: 1px solid var(--secondary-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.transparency-global {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.transparency-slider {
  flex: 1;
  height: 6px;
  background: linear-gradient(to right, transparent 0%, #2196F3 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.transparency-individual {
  width: 45px;
  padding: var(--spacing-xs) calc(var(--spacing-md) * 0.5);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: var(--font-size-sm);
  text-align: center;
}

.transparency-unit {
  font-size: var(--font-size-sm);
  color: var(--disabled-color);
  min-width: 15px;
}

/* Advanced mode styling */
.advanced-mode .transparency-individual {
  display: block;
}

.simple-mode .transparency-individual,
.simple-mode .transparency-unit {
  display: none;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); 
  font-size: var(--font-size-base);
  color: var(--disabled-color);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
}

.advanced-toggle input[type="checkbox"] {
  margin: 0;
}

.modal-subtitle {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: var(--text-color-secondary);
  font-weight: normal;
}

.option-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.option-row:last-child {
  margin-bottom: 0;
}

.option-content {
  flex: 1;
  padding-right: var(--spacing-md);
}

.option-title {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
  font-size: 14px;
}

.option-description {
  font-size: 13px;
  color: var(--text-color-secondary);
  line-height: 1.4;
}

/*=============================================
DATA DISPLAY OPTIONS
=============================================*/
.data-type-toggle {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.data-type-toggle h4 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-base);
}

.display-levels-container {
    margin-top: var(--spacing-xl);
}

.display-levels-container h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.display-level-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    gap: var(--spacing-sm); 
}

.display-level-row.placeholder {
    color: var(--disabled-color);
    font-style: italic;
    justify-content: center;
}

.level-label {
    min-width: 80px;
    text-align: right;
    padding-right: 10px;
    font-size: var(--font-size-sm);
    color: var(--disabled-color);
    font-weight: 500;
    flex-shrink: 0;
  }

.range-separator {
    margin: 0 var(--spacing-xs);
    font-weight: bold;
}

.display-type-toggle {
    display: flex;
    gap: var(--spacing-md);
}

.display-type-toggle label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: normal;
    min-width: auto;
}

/*=============================================
BUILD HIERARCHY
=============================================*/
.build-hierarchy-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.build-hierarchy-section label {
    display: block;
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    color: var(--text-color);
}

.build-hierarchy-section .button-container {
    text-align: center;
}

.build-hierarchy-section .button {
    min-width: 150px;
}

/*=============================================
SUCCESSION PLANNING DATA MAPPING
=============================================*/
.succession-section {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--white);
    overflow: hidden;
}

.succession-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--light-bg);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}

.succession-header:hover {
    background: #eaeaea;
}

.succession-header.open {
    border-bottom-color: var(--border-color);
}

.succession-header h3 {
    margin: 0;
    font-size: 14px;
}

.succession-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.succession-expand-icon {
    font-size: 11px;
    color: #666;
    transition: transform 0.2s;
    display: inline-block;
}

.succession-expand-icon.expanded {
    transform: rotate(90deg);
}

.optional-badge {
    font-size: 10px;
    color: #666;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.succession-content {
    padding: var(--spacing-lg);
}

.succession-description {
    font-size: var(--font-size-sm);
    color: #666;
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.successor-pair {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.successor-pair-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #555;
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.successor-pair .field-row {
    margin-bottom: var(--spacing-xs);
}

.successor-pair .field-row label {
    min-width: 110px;
    font-size: 12px;
}

.remove-pair-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1;
}

.remove-pair-btn:hover {
    background: #fee;
}

.successor-pair .dropdown-duplicate-warning {
    border-color: #ff9800;
    background-color: #fff8e1;
}

.add-successor-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.add-successor-count {
    font-size: 11px;
    color: var(--disabled-color);
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
}

.standalone-section h4 {
    font-size: 13px;
    color: #555;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.critical-role-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: #fce4ec;
    border: 1px solid #f8bbd0;
    border-radius: var(--border-radius);
}

.critical-role-section h4 {
    font-size: 13px;
    color: #880e4f;
    margin-bottom: var(--spacing-sm);
}

.critical-role-note {
    font-size: 11px;
    color: #ad1457;
    margin-bottom: var(--spacing-sm);
}

.ready-now-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: #fff8e1;
    border: 1px solid #ffecb3;
    border-radius: var(--border-radius);
}

.ready-now-section h4 {
    font-size: 13px;
    color: #7b6b2e;
    margin-bottom: var(--spacing-sm);
}

.ready-now-note {
    font-size: 11px;
    color: #9e8c3e;
    margin-bottom: var(--spacing-sm);
}

/*=============================================
VIEW MODE TOGGLE (Hierarchy / Succession)
=============================================*/
.view-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.view-mode-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.view-mode-toggle {
    display: flex;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
}

.view-mode-btn {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.view-mode-btn:first-child {
    border-right: 1px solid #d0d0d0;
}

.view-mode-btn:hover:not(.active) {
    background: #eaeaea;
}

.view-mode-btn.active {
    background: #0b6abf;
    color: #fff;
    cursor: default;
}

/*=============================================
SCENARIO PLANNING STYLES
=============================================*/
.coming-soon-container {
    padding: var(--spacing-xl);
    text-align: center;
}

.coming-soon-text {
    color: #666;
    margin: 40px 0;
}

.coming-soon-note {
    color: #999;
    font-style: italic;
}

/*=============================================
HELP TAB SPECIFIC STYLES
=============================================*/

/* Help container - override the main app container for help page */
#helpGuide .help-container {
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-xl);
    background-color: var(--white);
    border-radius: calc(var(--border-radius) * 2);
    box-shadow: none;
}

#helpGuide h1 {
    color: var(--header-color);
    text-align: center;
    margin-bottom: calc(var(--spacing-lg)*2);
    font-size: 2.2em;
}

#helpGuide h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-xs);
    margin-top: calc(var(--spacing-lg)*2);
}

/* App overview section */
#helpGuide .app-overview {
    background-color: var(--secondary-hover-bg);
    padding: var(--spacing-xl);
    border-radius: calc(var(--border-radius) * 2);
    margin-bottom: calc(var(--spacing-lg)*2);
    border-left: 4px solid var(--primary-color);
}

#helpGuide .key-features {
    background-color: var(--light-bg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-xl) 0;
}

#helpGuide .key-features h3 {
    color: var(--header-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

#helpGuide .key-features ul {
    margin: 0;
    padding-left: var(--spacing-xl);
}

#helpGuide .key-features li {
    margin-bottom: var(--spacing-sm);
}

/* Sub-accordion styles */
#helpGuide .sub-accordion-section {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
    border-radius: 3px;
}

#helpGuide .sub-accordion-header {
    background-color: var(--light-bg);
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#helpGuide .sub-accordion-header:hover {
    background-color: var(--secondary-color);
}

#helpGuide .sub-accordion-content:not(.hidden) {
    display: block;
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
}

#helpGuide .sub-accordion-content.hidden {
    display: none;
}

/* Step list styling */
#helpGuide .step-list {
    counter-reset: step-counter;
    padding-left: calc(var(--spacing-lg)*2);
}

#helpGuide .step-list li {
    counter-increment: step-counter;
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    position: relative;
}

#helpGuide .step-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: -25px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: bold;
}

/* Information boxes */
#helpGuide .data-requirements {
    background-color: var(--warning-bg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border-left: 4px solid #ffc107;
    margin: var(--spacing-lg) 0;
}

#helpGuide .tip-box {
    background-color: #d4edda;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--success-color);
    margin: var(--spacing-lg) 0;
}

#helpGuide .warning-box {
    background-color: #f8d7da;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--danger-color);
    margin: var(--spacing-lg) 0;
}

/* Feature comparison table */
#helpGuide .feature-comparison {
    overflow-x: auto;
}

#helpGuide .feature-comparison table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

#helpGuide .feature-comparison th,
#helpGuide .feature-comparison td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#helpGuide .feature-comparison th {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Support info section */
#helpGuide .support-info {
    background-color: var(--info-bg);
    padding: var(--spacing-xl);
    border-radius: calc(var(--border-radius) * 2);
    text-align: center;
    margin-top: calc(var(--spacing-lg)*2);
}

#helpGuide .checkmark {
  color: var(--success-color);
  font-weight: bold;
  text-align: center;
}

#helpGuide .x-mark {
  color: var(--danger-color);
  font-weight: bold;
  text-align: center;
}

/* Link styling within help section */
#helpGuide .support-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

#helpGuide .support-info a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

#helpGuide .support-info a:visited {
    color: var(--primary-color);
}

/* Legal links section styling */
#helpGuide .support-info h3 {
    color: var(--header-color);
    margin: 0;
}

/* Separator styling between legal links */
#helpGuide .support-info a + a::before {
    content: " ";
    margin: 0 var(--spacing-sm);
}

/* =============================================
   ANALYZE TAB STYLES
   ============================================= */
.clickable-card {
  cursor: pointer;
}

.sortable-header {
  cursor: pointer;
}

.loading-cell {
  text-align: center;
  padding: 20px;
}

.analysis-mode-selection {
    margin-bottom: var(--spacing-md);
     padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.analysis-mode-selection .radio-group {
    display: flex;
    gap: var(--spacing-md);
    margin: 0;
}

.analysis-mode-selection .radio-group label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm); 
    font-weight: 600;
    cursor: pointer;
}

.analysis-view {
    margin-bottom: var(--spacing-xxl);
}

.analysis-header {
    margin-bottom: var(--spacing-xxl);
}

.analysis-header h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--primary-color);
}

.analysis-header p {
    margin: 0;
    color: var(--disabled-color);
    font-style: italic;
}

.info-message {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.info-message h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--warning-text);
    font-size: 1rem;
}

.info-message p {
    margin: 0;
    color: var(--warning-text);
    font-size: 0.875rem;
}

/* Add spacing above the info message */
.analysis-controls .button-container {
    margin-bottom: var(--spacing-lg);
}

.metrics-container,
.compare-org,
.comparison-container {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.metrics-container {
    padding: calc(var(--spacing-md) * 2);
}

.compare-org {
    padding: var(--spacing-xl);
}

.comparison-container {
    padding: calc(var(--spacing-md) * 2);
    margin-bottom: var(--spacing-xxl);
}

.metrics-header {
    margin-bottom: var(--spacing-xxl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.metrics-header h4,
.compare-org h4,
.comparison-container h4 {
    margin: 0;
    color: var(--primary-color);
}

.metrics-header h4 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-xl);
}

.metrics-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metrics-title {
    margin: 0 0 4px 0;
}

.compare-org h4 {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-lg);
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.comparison-container h4 {
    margin: 0 0 var(--spacing-xl) 0;
    text-align: center;
}

.metrics-header span {
    color: var(--disabled-color);
    font-size: var(--font-size-base);
    font-style: italic;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--disabled-color);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.metric-value {
    font-size: calc(var(--font-size-sm) * 2);
    font-weight: 700;
    color: var(--primary-color);
}

.compare-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
}

.org-selector .field-row {
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.org-selector .field-row label {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-color);
}

.compare-controls {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-xxl);
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.analysis-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: calc(var(--spacing-md) * 2);
    border-top: 1px solid var(--border-color);
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-header h3 {
  margin: 0;
  color: #0078d4;
}

.popup-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.popup-footer {
  border-top: 1px solid #e9ecef;
  padding-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.manager-details-container {
  margin: 20px 0;
}

.manager-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.manager-field {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 12px;
}

.manager-field-label {
  font-weight: 600;
  color: #0078d4;
  font-size: 12px;
  margin-bottom: 4px;
}

.manager-field-value {
  color: #333;
  font-size: 14px;
}

.input-error {
  border-color: #dc3545 !important;
}

.validation-error-box {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 13px;
}

.error-list {
  margin: 8px 0 0 20px;
  padding: 0;
}

.button-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

#role-type-checkboxes label,
#scenarios-role-type-checkboxes label,
#compare-role-type-checkboxes label {
    display: block;
    width: 100%;
    padding: 4px 8px;
}

#role-type-checkboxes label:hover,
#scenarios-role-type-checkboxes label:hover,
#compare-role-type-checkboxes label:hover {
    background-color: #f0f0f0;
}

#role-type-checkboxes input[type="checkbox"],
#scenarios-role-type-checkboxes input[type="checkbox"],
#compare-role-type-checkboxes input[type="checkbox"] {
    margin-right: 8px;
}

.icon-circle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.icon-circle:not(.hidden) {
    display: flex;
}

.button.hidden,
.icon-circle.hidden {
    display: none;
}

.button-outline {
    background: transparent;
    border: 2px solid #007bff;
    color: #007bff;
}

.button-outline:hover {
    background: #007bff;
    color: white;
}

/*=============================================
PYRAMID CHART STYLES
=============================================*/
.card-details .pyramid-container {
  margin: 0;
  padding: var(--spacing-sm);
  background: var(--light-bg);
  border-radius: var(--border-radius);
}

.pyramid-level-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-right: 50px;
}

.pyramid-level-row .level-bar {
  margin: 0 auto;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.pyramid-level-row .level-bar:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Data label in third column */
.pyramid-data-label {
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 8px;
}

/* Split view styles */
.split-bars-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  width: 100%;
}

.split-view-row {
  padding-right: 0;
}

.manager-bar-wrapper,
.ic-bar-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  height: 30px;
  position: relative;
}

.manager-bar-wrapper {
  justify-content: flex-end;
}

.ic-bar-wrapper {
  justify-content: flex-start;
}

.center-divider {
  width: 0;
  height: 30px;
  background-color: var(--border-color);
  flex-shrink: 0;
}

/* Manager bar */
.manager-bar-wrapper .managers-bar {
  background: linear-gradient(90deg, #2da72d, #107c10);
  height: 25px;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  position: relative;
  margin-right: 0;
}

/* IC bar */
.ic-bar-wrapper .ics-bar {
  background: linear-gradient(90deg, #5c2d91, #7c4dae);
  height: 25px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: relative;
  margin-left: 0; 
}

/* Labels positioned outside bars */
.split-label-left {
  position: absolute;
  right: 100%;
  padding-right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
  color: var(--text-color);
  font-weight: 600;
  white-space: nowrap;
}

.split-label-right {
  position: absolute;
  left: 100%;
  padding-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
  color: var(--text-color);
  font-weight: 600;
  white-space: nowrap;
}

/* Box Plot Visualization Styles */
.box-plot-visualization {
  margin: var(--spacing-xl) 0;
}

.box-plot-legend {
  display: flex;
  gap: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--light-bg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-color);
}

.legend-box {
  width: 20px;
  height: 12px;
  background: #dbeafe;
  border: 2px solid #3b82f6;
  border-radius: 2px;
}

.legend-line {
  width: 20px;
  height: 2px;
  background: #1e40af;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.mean {
  background: #3b82f6;
}

.legend-dot.outlier {
  background: #f59e0b;
}

.box-plot-area {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.box-plot-row {
  display: flex;
  align-items: center;
  height: 50px;
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.box-plot-row .level-stats-tooltip {
  display: none;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

.level-stats-tooltip .stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0;
}

.level-stats-tooltip .stat-label {
  color: var(--disabled-color);
}

.level-stats-tooltip .stat-value {
  font-weight: 500;
  color: var(--text-color);
}

.box-plot-label:hover .level-stats-tooltip {
  display: block;
}

.box-plot-label {
  position: relative;
  cursor: help;  /* Shows the help cursor on hover */
}

.box-plot-wrapper {
  flex: 1;
  position: relative;
  height: 30px;
}

.whisker-line {
  position: absolute;
  height: 1px;
  background: #cbd5e1;
  top: 15px;
}

.whisker-end {
  position: absolute;
  width: 1px;
  height: 10px;
  background: #94a3b8;
  top: 10px;
}

.compensation-box {
  position: absolute;
  height: 30px;
  background: #dbeafe;
  border: 2px solid #3b82f6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.compensation-box:hover {
  background: #bfdbfe;
  transform: scale(1.02);
}

.median-line {
  position: absolute;
  width: 2px;
  height: 26px;
  background: #1e40af;
  top: 0;
}

.mean-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #3b82f6; 
  border-radius: 50%;
  top: 11px;
  cursor: default;
}

.outlier-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  top: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.outlier-dot:hover {
  transform: scale(1.5);
  background: #d97706;
}

.box-plot-scale {
  position: relative;
  height: 30px;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
}

.box-plot-scale span {
  position: absolute;
  font-size: var(--font-size-xs);
  color: var(--disabled-color);
  transform: translateX(-50%);
  top: 8px;
}

.box-plot-row.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 5px;
  margin: -5px;
  border-radius: 4px;
}

.box-plot-row.clickable-row:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.compensation-filters {
  padding: var(--spacing-lg);
  background: var(--light-bg);
  border-radius: var(--border-radius);
  margin: var(--spacing-lg) 0;
  border: 1px solid var(--border-color);
}

.filter-group {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-weight: 500;
  color: var(--text-color);
  margin-right: var(--spacing-sm);
}

/* Position badges in table */
.position-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.position-badge.q1 {
  background: #fee2e2;
  color: #991b1b;
}

.position-badge.q2 {
  background: #fef3c7;
  color: #92400e;
}

.position-badge.q4 {
  background: #d1fae5;
  color: #065f46;
}

.position-badge.outlier {
  background: #fff5f5;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* =============================================
   EXPANDABLE CARDS STYLES
   ============================================= */
   /* Metrics Summary Styles */
.metrics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background: var(--light-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.metrics-summary .metric-box {
  text-align: center;
  padding: var(--spacing-md);
  background: white;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  cursor: default;
  pointer-events: none;
}

.metrics-summary .metric-label {
  font-size: var(--font-size-sm);
  color: var(--disabled-color);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.metrics-summary .metric-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-color);
}

.metric-item {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    position: relative;
}

.metric-item.expanded {
  grid-column: 1 / -1;
  max-width: 100%;
}

.metric-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.metric-item[data-clickable="true"] {
  cursor: pointer;
}

/* Succession Analysis — Scope Controls */
.scope-controls {
  background-color: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  overflow: visible;
}

.scope-controls h4 {
  font-size: var(--font-size-sm);
  color: var(--disabled-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 var(--spacing-md) 0;
}

.scope-row {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.scope-field {
  flex: 1;
  position: relative;
}

.scope-field-full {
  flex: unset;
  width: 100%;
}

.scope-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--disabled-color);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

/* Positions Dropdown */
.positions-dropdown-wrapper {
  position: relative;
}

.positions-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: white;
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.positions-dropdown-header:hover {
  border-color: var(--primary-color);
}

.positions-dropdown-list {
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  max-height: 200px;
  overflow-y: auto;
  background: white;
}

.positions-dropdown-list.collapsed {
  display: none;
}

.select-all-item {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
}

.select-all-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none;
  font-weight: normal;
  color: var(--text-color);
  margin-bottom: 0;
}

.position-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.position-item.position-hidden {
  display: none;
}

.position-item:hover {
  background-color: #edf2f7;
}

.position-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  color: #666;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  border-radius: 2px;
}

.position-toggle:hover {
  background-color: #ddd;
}

.position-toggle.expanded {
  transform: rotate(90deg);
}

.position-toggle-spacer {
  width: 16px;
  flex-shrink: 0;
}

.position-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
  text-transform: none;
  font-weight: normal;
  color: var(--text-color);
  margin-bottom: 0;
}

.position-item.indent-0 { padding-left: 10px; }
.position-item.indent-1 { padding-left: 24px; }
.position-item.indent-2 { padding-left: 40px; }
.position-item.indent-3 { padding-left: 56px; }
.position-item.indent-4 { padding-left: 72px; }
.position-item.indent-5 { padding-left: 88px; }

.critical-flag {
  display: inline-block;
  font-size: 10px;
  background: #dc3545;
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 4px;
}

/* Scope Warning & Summary */
.scope-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff8e1;
  border: 1px solid #ffecb3;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  color: #7b6b2e;
  margin-top: var(--spacing-sm);
}

.scope-summary {
  font-size: 11px;
  color: var(--disabled-color);
  margin-top: var(--spacing-sm);
}

/* Metric sub text */
.metric-sub {
  font-size: var(--font-size-sm);
  color: var(--disabled-color);
  margin-top: var(--spacing-xs);
}

/* Card details container */
.card-details {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 2px solid var(--border-color);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 1000px;
    overflow: visible;
  }
}

/* Details header section */
.details-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}

.details-header h4 {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.details-subtitle {
  margin: 0;
  color: var(--disabled-color);
  font-size: var(--font-size-base);
}

.details-actions {
  display: flex;
  gap: var(--spacing-sm); 
}

/* Total Compensation Card Styles */
.view-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
}

.view-toggle-label {
  font-weight: 500;
  color: var(--text-color);
  margin-right: var(--spacing-sm);
}

.toggle-btn {
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn:hover {
  background: var(--light-bg);
}

.toggle-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.chart-container {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.bar-chart-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 250px;
  padding: 20px;
  gap: 10px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
  cursor: pointer;
}

.bar-wrapper {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar {
  width: 80%;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  min-height: 10px;
}

.bar:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.bar.active {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.comp-bar {
  width: 100%;
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.comp-bar:hover {
  background: linear-gradient(to top, #2563eb, #3b82f6);
  transform: translateY(-2px);
}

.bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.bar-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--disabled-color);
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.percentage-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.hoverable-row {
  cursor: pointer;
  transition: background-color 0.2s;
}

.hoverable-row:hover {
  background-color: var(--light-bg);
}

.text-right {
  text-align: right;
}

.filter-select {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  background: white;
  cursor: pointer;
  max-width: 200px;
}

.no-data-message {
  padding: 40px;
  text-align: center;
  color: var(--disabled-color);
  font-style: italic;
}

.range-categories-table {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* Scenario Management Modal Specific */
.scenarios-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.scenario-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  gap: var(--spacing-sm);
}

.scenario-name {
  flex: 1;
  font-weight: 600;
}

.scenario-name-input {
  flex: 1;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: none;
}

.scenario-item.editing .scenario-name {
  display: none;
}

.scenario-item.editing .scenario-name-input {
  display: block;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  color: var(--text-color-secondary);
}

.modal-close:hover {
  color: var(--text-color);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

/*=============================================
HISTOGRAM/CHARTS
=============================================*/
.histogram-container {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.histogram-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.histogram {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 8px;
  padding: 0 var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.histogram .bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.histogram .bar {
  width: 100%;
  background: linear-gradient(to top, var(--primary-color), #40a6ff);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  min-height: 2px;
}

.histogram .bar.narrow-span {
  background: linear-gradient(to top, #EA580C, #FB923C);
}

.histogram .bar.narrow-span:hover {
  background: linear-gradient(to top, #C2410C, #EA580C);
}

.histogram .bar.wide-span {
  background: linear-gradient(to top, #EA580C, #FB923C);
}

.histogram .bar.wide-span:hover {
  background: linear-gradient(to top, #C2410C, #EA580C);
}

.histogram .bar:hover {
  background: linear-gradient(to top, var(--primary-hover), var(--primary-color));
  transform: translateY(-2px);
}

.histogram .bar-count {
  position: absolute;
  bottom: calc(100% + 4px);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-color);
}

.histogram .bar-label {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--disabled-color);
  text-align: center;
}

.histogram .bar.optimal-range {
  background: linear-gradient(to top, #6B7280, #9CA3AF);
}

.histogram .bar.optimal-range:hover {
  background: linear-gradient(to top, #4B5563, #6B7280);
}

.level-bar.bar-empty { background-color: #e0e0e0; }
.level-bar.bar-managers { background-color: #107c10; }
.level-bar.bar-ics { background-color: #5c2d91; }
.level-bar.bar-default { background-color: #0078d4; }

/*=============================================
SETTINGS STYLES
=============================================*/
.settings-section {
  margin-bottom: calc(var(--spacing-lg)*2);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-color);
}

.setting-group {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--light-bg);
  border-radius: var(--border-radius);
}

.setting-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--header-color);
  font-size: var(--font-size-base);
}

.setting-description {
  font-size: var(--font-size-sm);
  color: var(--disabled-color);
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.range-preview {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
  border: 1px solid var(--primary-color); 
}

.range-preview-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.range-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm); 
}

.range-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); 
  font-size: var(--font-size-base);
}

.range-badge {
  padding: calc(var(--spacing-xs) * 0.5) var(--spacing-sm);
  background: var(--info-bg);
  color: var(--primary-color);
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.range-badge.narrow,
.range-badge.wide {
  background: #fed7aa;
  color: #ea580c;
}

.range-badge.optimal {
  background: #e5e7eb;
  color: #6b7280;
}

.range-badge.below-optimal,
.range-badge.above-optimal {
  background: var(--info-bg);
  color: var(--primary-color);
}

.toggle-icon {
  display: inline-block;
  transition: transform var(--transition-fast);
  margin-right: var(--spacing-sm);
}

/*=============================================
SCENARIO PLANNING STYLES
=============================================*/
.filter-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.role-filter-controls {
    display: inline-flex;
    gap: 8px;
    margin-left: 10px;
}

.role-type-checkboxes {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.role-type-checkboxes label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

#analysis-manager-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.analysis-controls {
    margin-top: 10px;
}

.analysis-controls .field-row {
    margin-bottom: 10px;
    position: relative;
}

/* =============================================
   RESPONSIVE STYLES - ALL BREAKPOINTS
   ============================================= */

/* 768px Breakpoint */
@media (max-width: 768px) {
    /* Analysis Section */
    .compare-selection {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-lg);
    }
    
    .compare-controls {
        flex-direction: column;
        gap: var(--spacing-md); 
    }
    
    .analysis-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Details Table */
    .details-header {
        flex-direction: column;
        gap: var(--spacing-sm); 
    }
    
    .details-table {
        font-size: var(--font-size-sm);
    }
    
    .details-table th,
    .details-table td {
        padding: var(--spacing-sm) calc(var(--spacing-md) * 0.5);
    }
}

/* 600px Breakpoint */
@media (max-width: 600px) {
    /* App Body */
    #app-body {
        max-width: 100%;
        padding: 0 var(--spacing-md);
        overflow-x: auto;
        overflow-y: auto;
        height: calc(100vh - 100px);
        position: relative;
        flex: 1;
        min-height: 0;
        padding-bottom: var(--spacing-lg); 
    }

    /* Help Guide */
    #helpGuide .help-container {
        padding: var(--spacing-md);
    }
    
    #helpGuide h1 {
        font-size: 1.8em;
    }
    
    #helpGuide .step-list {
        padding-left: var(--spacing-xl);
    }
    
    #helpGuide .feature-comparison table {
        font-size: var(--font-size-base);
    }
}

.symbol-preview {
    min-width: 30px;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: bold;
    padding: var(--spacing-xs);
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.org-chart-subtitle {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.employee-filter-buttons {
    display: flex;
    gap: 0.2rem;
    margin: 0.25rem 0;
    justify-content: center;
}

.filter-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #e8e8e8;
}

.filter-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* Role Distribution Bar Chart Specific Styles */
.role-chart-container {
  background: #fff;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
}

.role-bar-chart {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 15px;
  padding: 20px 0;
}

.role-bar-chart .bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100px;
}

.role-bar-chart .bar-wrapper {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.role-bar-chart .bar {
  width: 80%;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  min-height: 10px;
}

.role-bar-chart .bar:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.role-bar-chart .bar.active {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.role-bar-chart .bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 14px;
}

.role-bar-chart .bar-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Role badge styles */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.role-badge.role-existing { background: #E5E7EB; color: #6B7280; }
.role-badge.role-modified { background: #DBEAFE; color: #1E40AF; }
.role-badge.role-future { background: #D1FAE5; color: #065F46; }
.role-badge.role-redundant { background: #FEF3C7; color: #92400E; }
.role-badge.role-eliminated { background: #FEE2E2; color: #991B1B; }

.table-message, .filter-info {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

.role-filter-inline {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.role-filter-inline label {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.role-filter-inline input[type="checkbox"] {
  margin-right: 5px;
}

.compare-controls-container {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.org-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 20px;
}

.org-selector {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.org-selector h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #0078d4;
}

/* Scenarios comparison table specific styles */
.scenarios-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.scenarios-comparison-table th,
.scenarios-comparison-table td {
  padding: var(--spacing-sm);
  text-align: left;
  border: 1px solid var(--border-color);
}

.scenarios-comparison-table .metric-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.scenarios-comparison-table .metric-value {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
}

.scenarios-comparison-table th {
  background-color: var(--bg-secondary);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Add scenario button styling */
.add-scenario-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--primary-color);
  cursor: pointer;
  white-space: nowrap;
}

.add-scenario-btn:hover {
  background-color: var(--bg-hover);
}

.scenarios-comparison-table .text-center {
  text-align: center;
}

.scenarios-comparison-table .icon-circle {
  margin: 0 auto;
}

/* Scenario header with remove button */
.scenario-header-cell {
  position: relative;
  padding-right: 20px;
}

.remove-scenario-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #dc3545;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  opacity: 0.6;  /* Changed from 0 to 0.6 - always visible but subtle */
  transition: opacity 0.2s;
  background: none;
  border: none;
  padding: 2px 4px;
  line-height: 1;
}

.scenario-header-cell:hover .remove-scenario-btn {
  opacity: 1;  /* Full opacity on hover */
}

.remove-scenario-btn:hover {
  color: #a02633;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 2px;
}

.export-container {
  margin-top: var(--spacing-lg);
}

.comparison-header {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.comparison-results-table {
  border-collapse: collapse;
}

.comparison-results-table th {
  border-bottom: 2px solid #ddd;
  padding: 8px;
}

.comparison-results-table th.arrow-header {
  width: 30px;
}

.comparison-results-table td {
  padding: 8px;
}

.comparison-results-table .metric-label {
  font-weight: 600;
}

.comparison-results-table .metric-row {
  border-bottom: 1px solid #eee;
}

.arrow-cell {
  padding: 4px !important;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.arrow-cell.arrow-up {
  color: #7F39FB;
}

.arrow-cell.arrow-down {
  color: #FA8925;
}

.delta-cell.delta-none {
  color: #666;
}

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

.bar.role-existing { background-color: #6B7280; }
.bar.role-modified { background-color: #3B82F6; }
.bar.role-future { background-color: #10B981; }
.bar.role-redundant { background-color: #F59E0B; }
.bar.role-eliminated { background-color: #EF4444; }

.org-tree-employee-name.eliminated-name {
  text-decoration: line-through;
  opacity: 0.6;
}

.org-tree-employee-name.future-name {
  font-style: italic;
}

.button-danger.confirming {
  background-color: #dc3545;
}

.comparison-subtitle {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.scenario-option {
  display: block;
  margin: 10px 0;
}

.manager-field-note {
  grid-column: 1 / -1;
  padding: 12px;
  background: #e3f2fd;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Succession Card Detail Styles */
.pipeline-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.pipeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

.pipeline-dot.filled {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.pipeline-dot.empty {
  background: var(--light-bg);
}

.pipeline-dot.warning {
  background: var(--danger-color);
  border-color: var(--danger-color);
}

.sole-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  background: #ffebee;
  color: #c62828;
  margin-left: 4px;
}

.critical-role-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  background: #fff3e0;
  color: #e65100;
  margin-left: 4px;
}

.dup-person {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.dup-person:hover {
  border-color: var(--primary-color);
  background: #f8fbff;
}

.dup-person.active {
  border-color: var(--primary-color);
  background: #e8f4fd;
}

.dup-person-info {
  flex: 1;
}

.dup-person-name {
  font-weight: 600;
  font-size: var(--font-size-base);
}

.dup-person-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.dup-person-detail {
  font-size: var(--font-size-sm);
  color: #555;
  margin-top: 2px;
}

.dup-person-risk {
  font-size: var(--font-size-sm);
  color: var(--danger-color);
  font-weight: 600;
  margin-top: 2px;
}

.dup-count {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--danger-color);
  min-width: 40px;
  text-align: center;
}

.row-warning {
  background: #fff5f5;
}

.duplicate-list {
  margin: var(--spacing-lg) 0;
}

.metric-box.clickable {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
}

.metric-box.clickable:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.15);
  transform: translateY(-1px);
}

.metric-box.clickable.active {
  border-color: var(--primary-color);
  background: #f0f7ff;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.badge-critical {
  background: #fef3c7;
  color: #92400e;
}

.badge-warning {
  background: #fef9c3;
  color: #854d0e;
}

.covered-segment {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.covered-segment:hover {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.uncovered-segment {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.uncovered-segment:hover {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* Badge Popover */
.badge-popover {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
}

.badge-popover-title {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f3f4f6;
}

.badge-popover-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #f9fafb;
  gap: 8px;
}

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

.badge-popover-name {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.badge-popover-title-text {
  font-size: 11px;
  color: #6b7280;
}

.badge-popover-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-popover-tag.critical {
  background: #fee2e2;
  color: #991b1b;
}

.badge.clickable-badge {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.badge.clickable-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #f0f4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid #bfdbfe;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0 6px;
}

.count-badge:hover {
  background: #dbeafe;
  border-color: #3b82f6;
  transform: scale(1.1);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.25);
}

.count-badge.success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.count-badge.success:hover {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.25);
}

.badge-popover-readiness {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}

.stacked-segment.clickable {
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
}

.stacked-segment.clickable:hover {
  filter: brightness(0.9);
}

.stacked-segment.clickable.active {
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
}

/* Risk Legend */
.risk-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #4b5563;
}

.risk-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.risk-legend-item .badge {
  font-size: 10px;
  padding: 1px 6px;
}

/*=============================================
ORG PLANNING TAB — Sticky Scope Bar (Phase 2)
All `.op-*` classes are scoped to the Org Planning module. Visual styling
only — pickers and chips are non-interactive in Phase 2.
=============================================*/

/* --- Container & sticky behavior --- */
.op-scope-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid var(--savvy-lime);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* No negative side margins — parent .tab-content has no horizontal
     padding to absorb them, so they would push the bar 32px past parent
     and trigger .tab-content's overflow-x:auto (extra scrollbar). */
}

.op-scope-bar-inner {
  padding: 0 16px;
}

/* --- Identity band --- */
.op-identity-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}

.op-savvy-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.op-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.op-wordmark-savvy {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--savvy-navy);
}

.op-wordmark-analytiqs {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--savvy-lime-deep);
}

.op-wordmark-iq {
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-identity-subtitle {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.op-identity-summary {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.op-scope-bar--collapsed .op-identity-summary {
  display: inline-flex;
}

.op-identity-summary-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #e2e8f0;
  margin: 0 4px;
}

.op-identity-summary-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #475569;
}

.op-identity-summary-leader {
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-summary-dot {
  color: #cbd5e1;
}

/* --- Collapse / Expand toggle ---
   Sticky to the right edge of its scroll viewport so it lands at the
   trailing edge of the identity band even when the band is wider
   than the visible area. flex-shrink:0 + order:99 keep it on the
   trailing edge of the row before sticky kicks in. */
.op-collapse-toggle {
  position: sticky;
  top: 12px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: var(--white);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--savvy-navy);
  cursor: pointer;
  flex-shrink: 0;
  order: 99;
  z-index: 2;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.op-collapse-toggle:focus-visible {
  outline: 2px solid var(--savvy-lime-deep);
  outline-offset: 1px;
}

.op-collapse-toggle:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
}

/* --- Functional rows --- */
.op-functional-rows {
  display: block;
}

.op-functional-rows--hidden {
  display: none;
}

.op-scope-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
}

/* Subsequent row labels (e.g., the second "Edit" label sharing the
   View row) shouldn't reserve the 92px column-alignment width — that's
   only meaningful for the FIRST label in each row. Let them collapse
   to their text, with a leading margin to separate from the prior
   group's last control. */
.op-scope-row .op-row-label:not(:first-child) {
  min-width: 0;
  margin-left: 40px;
}

/* Action buttons docked into a scope row should match the height of
   the view toggle buttons rather than the chunkier 7px-padded default. */
.op-scope-row .op-action-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* --- Row label (lime marker + uppercase text) --- */
.op-row-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 92px;
  margin-right: 4px;
}

.op-lime-marker {
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--savvy-lime);
}

.op-row-label-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

/* --- Picker chips (Leader, Scenario, Refine) --- */
.op-picker-wrapper {
  position: relative;
  display: inline-block;
}

.op-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.op-picker-chip:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.op-picker-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.op-picker-label {
  font-weight: 600;
  color: var(--savvy-navy);
}

/* --- Refine button + count badge --- */
.op-refine-button {
  position: relative;
}

.op-refine-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 9999px;
  background: var(--savvy-navy);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* --- Metrics section (Phase 9 — Settings hub) --- */
.op-metrics-section {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
}

/* Org Chart section — mirrors the Metrics section's lime-marker
   heading pattern. Header is a thin row above the chart toolbar so
   the section reads as labeled even though the toolbar carries most
   of the controls. */
.op-chart-section {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
}

.op-chart-section-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.op-chart-section-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.op-chart-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-chart-section-heading-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-chart-section-header-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Right cluster of the chart section header — depth, card fields,
   zoom, edit & export. Re-rendered each chart pass to reflect the
   current snapshot/view mode. */
.op-chart-section-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The breadcrumb-only toolbar row sits below the section header on
   its own line. Keeps the breadcrumb readable when the chain is long
   without crowding the header controls. */
.op-chart-toolbar--breadcrumb {
  justify-content: flex-start;
}

.op-metrics-header-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Compare-mode chart — multi-column list view shown when the user
   has 1+ comparisons. Replaces the single visual tree with a row of
   side-by-side columns (cap 3). Each column is an independent
   position-tree, modeled on the Refine popover's positions tree. */
.op-chart-compare-wrap {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 16px 16px 16px;
  width: 100%;
  min-height: 320px;
  overflow-x: auto;
}

.op-chart-compare-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

/* Active column gets a 2px lime accent at the top to match the
   "Active" treatment used elsewhere in the redesign. */
.op-chart-compare-col--active {
  border-top: 2px solid var(--savvy-lime-deep);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.op-chart-compare-col-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
}

/* Comparison column header is a button — clicking it promotes that
   scope to be the main (active) selection. The active column's
   header is a div (non-interactive). */
.op-chart-compare-col-header--clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.op-chart-compare-col-header--clickable:hover {
  background: var(--savvy-ice);
}

.op-chart-compare-col-active-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--savvy-lime-deep);
}

.op-chart-compare-col-leader {
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-chart-compare-col-scenario {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-chart-compare-col-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 12px;
  color: var(--savvy-navy);
}

.op-chart-compare-col-loading,
.op-chart-compare-col-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-chart-compare-tree {
  display: flex;
  flex-direction: column;
}

.op-chart-compare-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  min-height: 26px;
  border-radius: 4px;
}

.op-chart-compare-row:hover {
  background: var(--savvy-ice);
}

.op-chart-compare-expander {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-chart-compare-expander--blank {
  cursor: default;
  visibility: hidden;
}

.op-chart-compare-label {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.op-chart-compare-name,
.op-chart-compare-name-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-chart-compare-name-link {
  cursor: pointer;
}

.op-chart-compare-name-link:hover {
  text-decoration: underline;
  color: var(--savvy-navy-hover);
}

.op-chart-compare-title {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section-level view toggle (Hierarchy / Succession) — appears in
   each section header (Metrics + Org Chart). Compact pill toggle
   style. */
.op-section-view-toggle {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.op-section-view-toggle-btn {
  padding: 3px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-section-view-toggle-btn:hover {
  color: var(--savvy-navy);
}

.op-section-view-toggle-btn--active {
  background: var(--white);
  color: var(--savvy-navy);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Matrix overlay toggle — on/off pill next to the view toggle. The
   dashed underline hints at the dotted-line relationship it surfaces. */
.op-matrix-toggle {
  margin-left: 6px;
  padding: 3px 10px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-bottom: 2px dashed #94a3b8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-matrix-toggle:hover {
  color: var(--savvy-navy);
}

.op-matrix-toggle--active {
  background: var(--white);
  color: var(--savvy-navy);
  border-color: #94a3b8;
  border-bottom: 2px dashed #64748b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.op-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.op-metrics-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-metrics-heading-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-metrics-settings-btn {
  padding: 5px 12px;
  font-size: 11px;
}

/* Right-side controls in the metrics header — Depth selector +
   Settings button. Inline group, tight spacing. */
.op-metrics-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-metrics-depth-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.op-metrics-depth-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.op-metrics-depth-select {
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  background: var(--white);
  cursor: pointer;
}

.op-metrics-depth-select:focus {
  outline: none;
  border-color: var(--savvy-navy);
}

.op-metrics-section .op-metrics {
  padding: 0;
}

/* Vs-target line on metric cards. Renders when a target is set in
   the Settings modal. Up arrow when current > target, down when
   current < target — direction-neutral coloring since "good" depends
   on the metric. */
.op-metric-target {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  margin-top: 4px;
  color: var(--text-secondary);
}

.op-metric-target-label {
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-metric-target-delta {
  font-variant-numeric: tabular-nums;
}

.op-metric-target-delta--up {
  color: var(--savvy-navy);
}

.op-metric-target-delta--down {
  color: var(--text-secondary);
}

/* Compare-mode metric card (Phase 10) — replaces the value+tick+
   subtitle stack with a small horizontal bar chart. The card itself
   needs no extra styling; the visual change lives entirely in the
   inner .op-metric-bars block below. */

.op-metric-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.op-metric-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto 22px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  text-align: left;
}

.op-metric-bar-row--clickable {
  cursor: pointer;
}

.op-metric-bar-row--clickable:hover {
  background: var(--savvy-ice);
  border-color: #e2e8f0;
}

.op-metric-bar-row--current {
  background: rgba(184, 214, 121, 0.10);
}

.op-metric-bar-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.op-metric-bar-leader {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-metric-bar-scenario {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-metric-bar-track {
  display: flex;
  align-items: center;
  height: 14px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.op-metric-bar {
  display: block;
  height: 100%;
  background: var(--savvy-navy);
  border-radius: 3px 0 0 3px;
}

.op-metric-bar--current {
  background: var(--savvy-lime-deep);
}

.op-metric-bar-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.op-metric-bar-value-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-metric-bar-delta {
  font-size: 10px;
  font-weight: 600;
}

.op-metric-bar-delta--up {
  color: #166534;
}

.op-metric-bar-delta--down {
  color: #b45309;
}

/* Promote-to-main icon button on each comparison row. Sits in the
   row's last grid column. The current row uses the placeholder
   variant to keep this column's width consistent across rows. */
.op-metric-bar-make-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-metric-bar-make-main:hover {
  background: var(--savvy-ice);
  border-color: #cbd5e1;
  color: var(--savvy-navy);
}

.op-metric-bar-make-main--placeholder {
  cursor: default;
  pointer-events: none;
}

.op-metric-bar-make-main--placeholder:hover {
  background: transparent;
  border-color: transparent;
}

/* Compare row chips (Phase 10) — user-added comparison chips and
   the empty-state hint when none are present. */
.op-compare-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  /* No flex-grow — chips wrap sizes to content so the Add button
     sits immediately after the last chip. */
}

.op-compare-chips:empty {
  /* Hide entirely when there are no chips so the Add button is
     flush against the row label. */
  display: none;
}

.op-compare-empty-hint {
  display: none;
}

.op-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: var(--white);
}

.op-compare-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.op-compare-chip-dot--user {
  background: var(--savvy-navy);
}

.op-compare-chip-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
}

.op-compare-chip-leader {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-compare-chip-scenario {
  font-size: 10px;
  color: var(--text-secondary);
}

.op-compare-chip-remove {
  background: transparent;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.op-compare-chip-remove:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* Drag-to-reorder visual states for comparison chips. The first N
   chips render as chart columns alongside the active scope; users
   drag to swap which comparisons land in the chart. Order also
   determines the bar order in metric compare cards. */
.op-compare-chip {
  cursor: grab;
}

.op-compare-chip:active {
  cursor: grabbing;
}

/* Strong lime treatment on chips that render in the chart so the
   "shown in chart vs metrics-only" split is unmistakable in the
   sticky band. Changes background, border, and dot color all at
   once for a clearly distinct chip. */
.op-compare-chip--in-chart {
  background: rgba(184, 214, 121, 0.30);
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 1px var(--savvy-lime-deep);
}

.op-compare-chip--in-chart .op-compare-chip-dot--user {
  background: var(--savvy-lime-deep);
}

.op-compare-chip--in-chart .op-compare-chip-leader {
  font-weight: 700;
}

/* Source chip during drag — fade to signal pickup. */
.op-compare-chip--dragging {
  opacity: 0.45;
}

/* Drop-side indicators — a 2px lime line on the side the drop will
   land on, so the gap is unambiguous mid-drag. */
.op-compare-chip--drop-before {
  box-shadow: -3px 0 0 0 var(--savvy-lime-deep);
}

.op-compare-chip--drop-after {
  box-shadow: 3px 0 0 0 var(--savvy-lime-deep);
}

/* Add comparison picker dropdown */
.op-add-comparison-wrapper {
  position: relative;
}

.op-add-comparison-dropdown {
  width: 260px;
}

.op-dropdown-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--savvy-navy);
  text-transform: uppercase;
  border-bottom: 1px solid #f1f5f9;
}

.op-dropdown-heading-icon {
  color: var(--text-secondary);
}

.op-dropdown-back {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--savvy-navy);
  cursor: pointer;
  padding: 0 4px;
}

.op-dropdown-back:hover {
  color: var(--savvy-navy-hover);
}

.op-dropdown-item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Add Comparison picker — two stacked searchable selectors */
.op-add-comparison-dropdown {
  width: 280px;
  padding: 10px;
}

.op-add-comparison-dropdown .op-dropdown-heading {
  padding: 0 0 8px;
  border-bottom: none;
}

.op-add-comparison-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.op-add-comparison-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--savvy-navy);
}

.op-add-comparison-field-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-add-comparison-field-trigger:hover {
  border-color: var(--savvy-lime-deep);
}

.op-add-comparison-field-trigger-text {
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-add-comparison-field-trigger-text--placeholder {
  color: var(--text-secondary);
  font-weight: 500;
}

.op-add-comparison-field-trigger-chev {
  color: var(--text-secondary);
  margin-left: 8px;
}

.op-add-comparison-field-panel {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: var(--white);
  overflow: hidden;
}

.op-add-comparison-field-list {
  max-height: 200px;
  overflow-y: auto;
}

.op-add-comparison-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.op-add-comparison-footer .op-action-btn {
  padding: 5px 12px;
  font-size: 11px;
}

.op-add-comparison-reason {
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  margin: 6px 2px 0;
  line-height: 1.3;
  font-style: italic;
}

.op-add-comparison-reason.op-hidden {
  display: none;
}

/* --- Settings modal (Phase 9) ---
   Wider than the standard confirm modal to accommodate three
   sections of form fields. */
.op-settings-card {
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.op-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px 0;
}

.op-settings-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  border-bottom: 1px solid #e2e8f0;
  margin-top: 6px;
}

.op-settings-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
}

.op-settings-tab:hover {
  color: var(--savvy-navy);
}

.op-settings-tab--active {
  color: var(--savvy-navy);
  border-bottom-color: var(--savvy-lime-deep);
}

.op-settings-body {
  padding: 16px 20px;
  flex: 1;
}

.op-settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.op-settings-help {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.op-settings-help--warn {
  padding: 8px 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  color: var(--savvy-navy-text);
}

.op-settings-input--locked {
  background: #f8fafc;
  color: var(--text-secondary);
  cursor: not-allowed;
  border-style: dashed;
}

.op-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-settings-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-settings-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
  box-sizing: border-box;
}

.op-settings-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

.op-settings-field-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

.op-settings-readonly {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
}

.op-settings-readonly-value {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Sub-section heading inside a settings tab — used to break the
   Data Mapping tab into Identity / Optional / Critical Role /
   Succession Planning groups. */
.op-settings-subheading {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-settings-subheading:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Successor slot list — one card per slot with an inline ×. */
.op-settings-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-settings-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fafbfc;
}

.op-settings-slot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.op-settings-slot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-settings-slot-remove {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.op-settings-slot-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

.op-settings-add-slot {
  align-self: flex-start;
}

/* Scenario sync prompt — opens on top of the Settings modal when
   the user changes a scenario-affecting mapping. Reuses confirm
   styles, just wider + with bumped z-index. */
.op-sync-prompt-overlay {
  z-index: 9950;
}

.op-sync-prompt-card {
  max-width: 520px;
}

.op-sync-prompt-changes {
  margin: 6px 0 12px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--savvy-navy-text);
}

.op-sync-prompt-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
}

.op-sync-prompt-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
}

.op-sync-prompt-option:hover {
  background: var(--savvy-ice);
}

.op-sync-prompt-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.op-sync-prompt-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.op-sync-prompt-option-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-sync-prompt-option-detail {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.op-settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid #f1f5f9;
}

/* --- Metrics grid (Phase 8) ---
   Six cards laid out in a responsive grid between the scope bar and
   the chart. Hard-capped at 3 columns at wide widths; drops to 2 or
   1 at narrower widths.
   The per-column min uses max(180px, calc((100% - 16px) / 3)) — so
   at wide widths each column is at least one-third of the container
   (minus gap), which prevents a 4th column from ever fitting. */
.op-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - 16px) / 3)), 1fr));
  gap: 8px;
  padding: 12px 16px 0;
}

.op-metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.op-metric-card--clickable {
  cursor: pointer;
}

.op-metric-card--clickable:hover {
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.op-metric-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-metric-label {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-metric-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-secondary);
  cursor: help;
  padding: 0;
  line-height: 1;
}

.op-metric-info:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
  border-color: var(--savvy-lime-deep);
}

.op-metric-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--savvy-navy);
  margin-top: 2px;
}

.op-metric-tick {
  width: 24px;
  height: 3px;
  background: var(--savvy-lime);
  border-radius: 2px;
  margin-top: 2px;
}

.op-metric-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Threshold-style subtitle (Management Ratio): leading colored dot
   followed by ratio + threshold label. */
.op-metric-subtitle--threshold {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.op-metric-threshold-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Insight banner — colored panel above level breakdown in the
   Management Ratio drilldown. Threshold modifier classes set the
   background tint to match the label color. */
.op-drilldown-insight {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: var(--savvy-navy-text);
  margin-bottom: 12px;
}

.op-drilldown-insight-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.op-drilldown-insight--lean {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.op-drilldown-insight--balanced {
  background: rgba(184, 214, 121, 0.18);
  border-color: var(--savvy-lime-deep);
}

.op-drilldown-insight--dense {
  background: #fff7ed;
  border-color: #fed7aa;
}

.op-drilldown-insight--topHeavy {
  background: #fef2f2;
  border-color: #fecaca;
}

/* Level breakdown — one row per org level with a stacked bar. */
.op-drilldown-level-section {
  margin-bottom: 12px;
}

.op-drilldown-section-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--savvy-navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.op-drilldown-level-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-drilldown-level-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: var(--white);
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
}

.op-drilldown-level-label {
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-drilldown-level-bar {
  display: flex;
  height: 14px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.op-drilldown-level-seg {
  display: block;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: filter 0.12s, outline 0.12s;
}

.op-drilldown-level-seg:hover {
  filter: brightness(1.1);
}

.op-drilldown-level-seg--active {
  outline: 2px solid var(--savvy-lime-deep);
  outline-offset: -2px;
}

.op-drilldown-level-seg--mgr {
  background: var(--savvy-navy);
}

.op-drilldown-level-seg--ic {
  background: var(--role-existing);
}

.op-drilldown-level-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--savvy-navy-text);
}

/* View toggle for the Management Layers pyramid (Total / Managers /
   ICs). Matches the segmented-control pattern used by Total Employees'
   drilldown filter row. */
.op-drilldown-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 6px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.op-drilldown-view-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-drilldown-view-btn:hover {
  color: var(--savvy-navy);
}

.op-drilldown-view-btn--active {
  background: var(--white);
  color: var(--savvy-navy);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.op-drilldown-pyramid-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.op-drilldown-pyramid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-drilldown-pyramid-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.op-drilldown-pyramid-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-drilldown-pyramid-bar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.op-drilldown-pyramid-bar {
  height: 18px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: filter 0.12s, outline 0.12s;
  padding: 0;
}

.op-drilldown-pyramid-bar:hover {
  filter: brightness(1.1);
}

.op-drilldown-pyramid-bar--active {
  outline: 2px solid var(--savvy-lime-deep);
  outline-offset: -2px;
}

.op-drilldown-pyramid-bar--total {
  background: var(--savvy-navy);
}

.op-drilldown-pyramid-bar--managers {
  background: var(--savvy-navy);
}

.op-drilldown-pyramid-bar--ics {
  background: var(--role-existing);
}

.op-drilldown-pyramid-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--savvy-navy-text);
}

/* Insight banner — reuse Mgmt Ratio's threshold modifiers. Add the
   shape modifiers used by Layers' insight buckets. */
.op-drilldown-insight--pyramid {
  background: rgba(184, 214, 121, 0.18);
  border-color: var(--savvy-lime-deep);
}

.op-drilldown-insight--bottomHeavy,
.op-drilldown-insight--middleHeavy {
  background: #fff7ed;
  border-color: #fed7aa;
}

.op-drilldown-insight--inverted {
  background: #fef2f2;
  border-color: #fecaca;
}

.op-drilldown-insight--flat {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

/* Span insight banner buckets — reuse the lime/amber/red palette. */
.op-drilldown-insight--balanced {
  background: rgba(184, 214, 121, 0.18);
  border-color: var(--savvy-lime-deep);
}

.op-drilldown-insight--narrowHeavy,
.op-drilldown-insight--mixed {
  background: #fff7ed;
  border-color: #fed7aa;
}

.op-drilldown-insight--wideHeavy {
  background: #fef2f2;
  border-color: #fecaca;
}

/* Span histogram — vertical bars, one column per DR count. Color
   per bucket so narrow/optimal/wide are visually distinguishable. */
.op-drilldown-span-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.op-drilldown-span-hist {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 0 4px;
}

.op-drilldown-span-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.op-drilldown-span-col:disabled {
  cursor: default;
}

.op-drilldown-span-col:hover:not(:disabled) .op-drilldown-span-bar {
  filter: brightness(1.08);
}

.op-drilldown-span-track {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #e2e8f0;
}

.op-drilldown-span-col--active .op-drilldown-span-track {
  border-bottom: 3px solid var(--savvy-lime-deep);
}

.op-drilldown-span-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: filter 0.12s;
}

.op-drilldown-span-bar--narrow { background: #f59e0b; }
.op-drilldown-span-bar--below { background: #fbbf24; }
.op-drilldown-span-bar--optimal { background: var(--savvy-lime-deep); }
.op-drilldown-span-bar--above { background: #fbbf24; }
.op-drilldown-span-bar--wide { background: #dc2626; }

.op-drilldown-span-label {
  font-size: 10px;
  color: var(--savvy-navy-text);
  font-variant-numeric: tabular-nums;
}

.op-drilldown-span-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  font-variant-numeric: tabular-nums;
}

.op-drilldown-span-col--active .op-drilldown-span-count {
  font-size: 12px;
}

/* Insight banner — extra modifier for the missing-data flag in the
   Total Compensation drilldown. */
.op-drilldown-insight--missing {
  background: #fff7ed;
  border-color: #fed7aa;
}

/* Total Compensation per-level breakdown — horizontal bar per level
   with stats next to it. Bars left-aligned (not centered like the
   layers pyramid) since comp totals don't form a meaningful shape. */
.op-drilldown-comp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-drilldown-comp-row {
  display: grid;
  /* Auto-sized stats column so the three stats always fit on one
     line. Bar gets the remaining space. */
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: var(--white);
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.op-drilldown-comp-row:hover {
  background: var(--savvy-ice);
  border-color: #e2e8f0;
}

.op-drilldown-comp-row--active {
  border-color: var(--savvy-lime-deep);
  background: rgba(184, 214, 121, 0.12);
}

.op-drilldown-comp-label {
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-drilldown-comp-bar-wrap {
  display: flex;
  align-items: center;
  height: 8px;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
}

.op-drilldown-comp-bar {
  display: block;
  height: 100%;
  background: var(--savvy-navy);
}

.op-drilldown-comp-stats {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-secondary);
}

.op-drilldown-comp-stat--active {
  color: var(--savvy-navy);
  font-weight: 700;
}

.op-drilldown-comp-stat-sep {
  color: #cbd5e1;
}

/* Heading row holds the section title plus the view toggle so the
   toggle sits on the right edge of the section. */
.op-drilldown-comp-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Top earners spotlight — small chip above the table that highlights
   compensation concentration. Only renders when sample size is big
   enough for the stat to be meaningful. */
.op-drilldown-spotlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(184, 214, 121, 0.18);
  border: 1px solid var(--savvy-lime-deep);
  border-radius: 4px;
  font-size: 11px;
  color: var(--savvy-navy);
  align-self: flex-start;
}

.op-drilldown-spotlight-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--savvy-lime-deep);
}

/* Breakdown strip — used by Role Type Changes to show the four role
   categories with leading symbols + counts. */
.op-metric-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.op-metric-breakdown-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  color: var(--savvy-navy);
}

.op-metric-breakdown-sym {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.op-metric-breakdown-count {
  font-weight: 600;
  color: var(--savvy-navy);
}

/* Role type badges in the drilldown table. Pull from the role color
   variables so chart card borders and these badges stay in sync. */
.op-drilldown-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}

.op-drilldown-role-badge--existing {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.op-drilldown-role-badge--modified {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.30);
}

.op-drilldown-role-badge--future {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.30);
}

.op-drilldown-role-badge--redundant {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}

.op-drilldown-role-badge--eliminated {
  background: #fef2f2;
  color: var(--role-eliminated);
  border-color: #fecaca;
}

.op-drilldown-role-badge--critical {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Inline-in-popover form sits next to a name; tighter spacing. */
.op-drilldown-badge-popover-inline-badge {
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 6px;
}

/* Callout appended to the insight banner — usually a critical-coverage
   gap line that follows the headline. */
.op-drilldown-insight-callout {
  font-weight: 600;
  margin-left: 4px;
}

/* Warning row tint — used for "0 successors" rows in Bench Strength
   and "no own bench" rows in Pipeline Depth. */
.op-drilldown-row--warning {
  background: #fff7ed;
}

/* Center-aligned cell content (used for badges in the table). */
.op-drilldown-cell-center {
  text-align: center;
}

/* Pill-shaped count badge in tables — clickable to open a popover. */
.op-drilldown-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--savvy-navy);
  color: var(--white);
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.op-drilldown-count-badge:hover {
  background: var(--savvy-navy-hover);
}

/* Lime variant — used for "Ready Now" counts and other positive-cue
   badges so they read distinctly from the navy default. */
.op-drilldown-count-badge--good {
  background: var(--savvy-lime-deep);
  color: var(--savvy-navy);
}

.op-drilldown-count-badge--good:hover {
  background: var(--savvy-lime);
}

/* Danger variant — used for "Sole For" badges in Duplicate Alert
   where the count is itself a risk signal. */
.op-drilldown-count-badge--danger {
  background: #dc2626;
  color: var(--white);
}

.op-drilldown-count-badge--danger:hover {
  background: #b91c1c;
}

/* Risk badges — High / Medium / Low pills used in the Duplicate
   Alert table. Distinct from role-type badges so the column reads
   instantly even at small sizes. */
.op-drilldown-risk-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid;
}

.op-drilldown-risk-badge--high {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.op-drilldown-risk-badge--medium {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}

.op-drilldown-risk-badge--low {
  background: rgba(184, 214, 121, 0.20);
  color: var(--savvy-navy);
  border-color: var(--savvy-lime-deep);
}

/* Stacked horizontal bar — Critical Coverage drilldown. Two segments
   (Covered + Uncovered), each clickable to filter the table. */
.op-drilldown-stacked-wrap {
  padding: 0 12px;
  margin-bottom: 12px;
}

.op-drilldown-stacked-track {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: #f1f5f9;
}

.op-drilldown-stacked-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  transition: opacity 150ms ease-out;
}

.op-drilldown-stacked-seg:hover {
  opacity: 0.85;
}

.op-drilldown-stacked-seg--covered {
  background: var(--savvy-lime-deep);
  color: var(--savvy-navy);
}

.op-drilldown-stacked-seg--uncovered {
  background: #dc2626;
}

/* Amber variant — softer signal than uncovered (red). Used for the
   "Not Ready Now" segment where positions still have some succession
   coverage, just not immediate. */
.op-drilldown-stacked-seg--at-risk {
  background: #f59e0b;
}

/* No Successors — level distribution bars. One row per org level,
   count of uncovered positions at that level. Click to filter the
   table by level. */
.op-no-succ-dist-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.op-no-succ-dist-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.op-no-succ-dist-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.op-no-succ-dist-row:hover {
  background: var(--savvy-ice);
  border-color: #e2e8f0;
}

.op-no-succ-dist-row--active {
  background: rgba(184, 214, 121, 0.16);
  border-color: var(--savvy-lime-deep);
}

.op-no-succ-dist-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  white-space: nowrap;
}

.op-no-succ-dist-track {
  height: 14px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.op-no-succ-dist-bar {
  display: block;
  height: 100%;
  border-radius: 3px 0 0 3px;
  background: #f59e0b;
}

.op-no-succ-dist-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Readiness Mix — distribution bars. One row per readiness category,
   sorted Ready Now first then by count desc. The bars ARE the primary
   filter for this drilldown; click to scope, click again to clear. */
.op-readiness-dist-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.op-readiness-dist-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 80px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.op-readiness-dist-row:hover {
  background: var(--savvy-ice);
  border-color: #e2e8f0;
}

.op-readiness-dist-row--active {
  background: rgba(184, 214, 121, 0.16);
  border-color: var(--savvy-lime-deep);
}

.op-readiness-dist-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-readiness-dist-row--no-value .op-readiness-dist-label {
  color: var(--text-secondary);
  font-style: italic;
}

.op-readiness-dist-track {
  height: 14px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.op-readiness-dist-bar {
  display: block;
  height: 100%;
  border-radius: 3px 0 0 3px;
  background: var(--savvy-navy);
}

.op-readiness-dist-bar--ready-now {
  background: var(--savvy-lime-deep);
}

.op-readiness-dist-bar--no-value {
  background: #cbd5e1;
}

.op-readiness-dist-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Toggle-only filter row (Readiness Mix uses bars as primary filter,
   so the row only contains the Critical-only toggle). */
.op-drilldown-filter-row--toggle-only {
  background: transparent;
  padding: 0;
}

.op-drilldown-filter-row--toggle-only .op-drilldown-filter-toggle {
  margin-left: 0;
}

.op-drilldown-filter-row--toggle-only .op-drilldown-filter-toggle::before {
  display: none;
}

/* Readiness Mix — table cell styles. Position cell stacks the
   incumbent name (with optional Critical badge inline) above their
   title. */
.op-readiness-position-name {
  font-weight: 600;
  color: var(--savvy-navy);
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-readiness-position-badge {
  font-size: 10px;
  padding: 1px 6px;
}

.op-readiness-position-title {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Readiness badge — variants for Ready Now (lime) and No Value
   (outline-only). Default is a slate pill for everything else. */
.op-readiness-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: var(--savvy-navy);
  border: 1px solid #e2e8f0;
}

.op-readiness-badge--ready-now {
  background: rgba(184, 214, 121, 0.20);
  color: var(--savvy-navy);
  border-color: var(--savvy-lime-deep);
}

.op-readiness-badge--no-value {
  background: transparent;
  color: var(--text-secondary);
  border-color: #cbd5e1;
  font-style: italic;
}

.op-drilldown-stacked-seg--active {
  outline: 2px solid var(--savvy-navy);
  outline-offset: -2px;
}

.op-drilldown-stacked-label {
  white-space: nowrap;
  padding: 0 8px;
}

/* Distribution bars — Bench Depth view. Horizontal stack of clickable
   rows, each bar shows the count for one bucket. */
.op-drilldown-bench-dist-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.op-bench-dist-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.op-bench-dist-row:hover {
  background: var(--savvy-ice);
  border-color: #e2e8f0;
}

.op-bench-dist-row--active {
  background: rgba(184, 214, 121, 0.16);
  border-color: var(--savvy-lime-deep);
}

.op-bench-dist-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-bench-dist-track {
  height: 14px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.op-bench-dist-bar {
  display: block;
  height: 100%;
  border-radius: 3px 0 0 3px;
}

.op-bench-dist-bar--danger {
  background: #dc2626;
}

.op-bench-dist-bar--warning {
  background: #f59e0b;
}

.op-bench-dist-bar--ok {
  background: var(--savvy-navy);
}

.op-bench-dist-bar--good {
  background: var(--savvy-lime-deep);
}

.op-bench-dist-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Popover anchored to a count badge — listing successors or
   incumbents. Positioned absolutely by JS. */
.op-drilldown-badge-popover {
  position: fixed;
  z-index: 9750;
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  overflow: auto;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  padding: 10px 12px;
  font-size: 12px;
}

.op-drilldown-badge-popover-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-drilldown-badge-popover-empty {
  color: var(--text-secondary);
  font-style: italic;
}

.op-drilldown-badge-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-drilldown-badge-popover-item {
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
}

.op-drilldown-badge-popover-item:first-child {
  border-top: none;
  padding-top: 0;
}

.op-drilldown-badge-popover-name {
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-drilldown-badge-popover-title {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.op-drilldown-badge-popover-readiness {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: var(--savvy-navy);
  font-size: 10px;
  font-weight: 600;
}

/* Vertical bar chart — five columns above the filter pills in the
   Role Type Changes drilldown. Existing is included to give scale;
   change bars are clickable to filter. */
.op-drilldown-bar-chart {
  display: flex;
  align-items: stretch;
  gap: 36px;
  padding: 0 12px;
  margin-bottom: 14px;
}

.op-drilldown-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.op-drilldown-bar-col:disabled {
  cursor: default;
}

.op-drilldown-bar-col:hover:not(:disabled) .op-drilldown-bar {
  filter: brightness(1.08);
}

.op-drilldown-bar-track {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #e2e8f0;
}

/* Active state — when this column's role type is currently filtering
   the table. Thicker lime baseline + bolder count below. */
.op-drilldown-bar-col--active .op-drilldown-bar-track {
  border-bottom: 3px solid var(--savvy-lime-deep);
}

.op-drilldown-bar-col--active .op-drilldown-bar-count {
  color: var(--savvy-navy);
  font-size: 13px;
}

.op-drilldown-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: filter 0.12s;
}

.op-drilldown-bar--existing { background: var(--role-existing); }
.op-drilldown-bar--future { background: var(--role-future); }
.op-drilldown-bar--modified { background: var(--role-modified); }
.op-drilldown-bar--redundant { background: var(--role-redundant); }
.op-drilldown-bar--eliminated { background: var(--role-eliminated); }

.op-drilldown-bar-label {
  text-align: center;
  line-height: 1.2;
}

.op-drilldown-bar-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-drilldown-bar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
  margin-top: 2px;
}

/* Metric info popover — centered overlay opened from the "i" button. */
.op-metric-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9600;
  padding: 16px;
}

.op-metric-info-card {
  background: var(--white);
  border-top: 3px solid var(--savvy-lime);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 16px 20px 20px;
  max-width: 460px;
  max-height: 85vh;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.op-metric-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.op-metric-info-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-metric-info-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}

.op-metric-info-close:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
}

.op-metric-info-section {
  margin-top: 14px;
}

.op-metric-info-section-heading {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-metric-info-section-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--savvy-navy-text);
}

.op-metric-info-section-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 12px;
  line-height: 1.5;
  color: var(--savvy-navy-text);
}

.op-metric-info-section-list li {
  margin-bottom: 2px;
}

/* --- Drilldown overlay (Phase 8 — Total Employees) ---
   Centered modal with a wider card to fit the table comfortably. */
.op-drilldown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9700;
  padding: 16px;
}

.op-drilldown-card {
  background: var(--white);
  border-top: 3px solid var(--savvy-lime);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 18px 20px 16px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  /* The entire card scrolls when content overflows. Inner sections
     (table, level breakdown) flow naturally so users can see the
     visualization and full table by scrolling, instead of cramming
     the table into a small auto-shrunken region. */
  overflow-y: auto;
  box-sizing: border-box;
}

.op-drilldown-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  /* Stays pinned to the top while the rest of the card scrolls. The
     negative margin-top + matching padding-top is necessary because
     the card's padding sits above this element in the scroll
     container. */
  position: sticky;
  top: -18px;
  z-index: 2;
  background: var(--white);
  padding-top: 18px;
  margin-top: -18px;
}

.op-drilldown-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-drilldown-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-drilldown-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}

.op-drilldown-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}

.op-drilldown-close:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
}

/* Right-side cluster of header buttons — primary actions then close. */
.op-drilldown-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.op-drilldown-header-action {
  background: var(--white);
  border: 1px solid var(--savvy-lime-deep);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 120ms, color 120ms;
}

.op-drilldown-header-action:hover:not(:disabled) {
  background: var(--savvy-lime-deep);
  color: var(--savvy-navy);
}

.op-drilldown-header-action:disabled {
  opacity: 0.55;
  cursor: progress;
}

.op-drilldown-filter-row {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 6px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.op-drilldown-filter-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-drilldown-filter-btn:hover {
  color: var(--savvy-navy);
}

.op-drilldown-filter-btn--active {
  background: var(--white);
  color: var(--savvy-navy);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Toggle pill (e.g. "Critical only") — combines with the primary
   filter rather than replacing it. Sits at the right of the filter
   row, separated from the primary pills by a thin divider. */
.op-drilldown-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  margin-left: 8px;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-drilldown-filter-toggle::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #cbd5e1;
}

.op-drilldown-filter-toggle:hover {
  color: var(--savvy-navy);
}

.op-drilldown-filter-toggle--on {
  background: var(--savvy-navy);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.op-drilldown-filter-toggle--on:hover {
  background: var(--savvy-navy-hover);
  color: var(--white);
}

.op-drilldown-filter-toggle-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  font-size: 10px;
  line-height: 1;
  color: var(--savvy-navy);
}

.op-drilldown-filter-toggle--on .op-drilldown-filter-toggle-check {
  background: var(--savvy-lime-deep);
  border-color: var(--savvy-lime-deep);
  color: var(--savvy-navy);
}

/* Small count chip on a toggle pill — used by "All edits" to surface
   how many Existing roles have hidden field edits the user could see
   if they flipped the toggle on. */
.op-drilldown-filter-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #5a7a1f;
  background: rgba(168, 207, 79, 0.22);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.op-drilldown-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-drilldown-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.op-drilldown-empty {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-drilldown-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

.op-drilldown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.op-drilldown-table thead {
  background: var(--savvy-ice);
}

.op-drilldown-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--savvy-navy);
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
}

.op-drilldown-th-sortable {
  cursor: pointer;
  user-select: none;
}

.op-drilldown-th-sortable:hover {
  background: #e2e8f0;
}

.op-drilldown-th-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  color: #94a3b8;
}

.op-drilldown-th-sortable--active .op-drilldown-th-arrow {
  color: var(--savvy-navy);
}

.op-drilldown-table td {
  padding: 8px 10px;
  color: var(--savvy-navy-text);
  border-bottom: 1px solid #f1f5f9;
}

.op-drilldown-table tbody tr:last-child td {
  border-bottom: none;
}

.op-drilldown-table tbody tr:hover {
  background: var(--savvy-ice);
}

.op-drilldown-name-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  text-align: left;
  cursor: pointer;
}

.op-drilldown-name-link:hover {
  text-decoration: underline;
  color: var(--savvy-navy-hover);
}

.op-drilldown-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

/* Footnote shown at the bottom of compare-mode drilldowns to explain
   why employee names aren't clickable. */
.op-drilldown-compare-footnote {
  margin-top: 12px;
  padding: 8px 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
}

/* === Scenario Changes drilldown — row expansion (WHAT CHANGED) === */

/* Leading chevron column: tight width, no header label. */
.op-drilldown-th-expand {
  width: 28px;
  padding-right: 0 !important;
}

.op-drilldown-td-expand {
  width: 28px;
  padding-right: 0 !important;
  vertical-align: middle;
  text-align: center;
}

.op-drilldown-expand-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  color: #64748b;
  padding: 4px 6px;
  border-radius: 3px;
  line-height: 1;
  transition: color 120ms, background 120ms;
}

.op-drilldown-expand-btn:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
}

.op-drilldown-expand-btn--open {
  color: var(--savvy-navy);
}

.op-drilldown-expand-row > td {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
}

.op-drilldown-expand-content {
  padding: 12px 16px 14px 40px;
}

.op-drilldown-expand-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 8px;
}

.op-drilldown-diff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-drilldown-diff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.op-drilldown-diff-label {
  flex: 0 0 110px;
  color: #475569;
  font-weight: 600;
}

.op-drilldown-diff-values {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.op-drilldown-diff-before {
  color: #94a3b8;
  text-decoration: line-through;
}

.op-drilldown-diff-arrow {
  color: #cbd5e1;
  font-weight: 600;
}

.op-drilldown-diff-after {
  color: var(--savvy-navy);
  font-weight: 600;
}

.op-drilldown-diff-magnitude {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  letter-spacing: 0.02em;
}

.op-drilldown-diff-magnitude--up {
  background: rgba(168, 207, 79, 0.18);
  color: #5a7a1f;
}

.op-drilldown-diff-magnitude--down {
  background: rgba(220, 75, 75, 0.12);
  color: #b13030;
}

.op-drilldown-page-btn {
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-drilldown-page-btn:hover:not(:disabled) {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-drilldown-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.op-drilldown-page-status {
  font-size: 11px;
  color: var(--text-secondary);
}

/* --- Refine popover (Phase 7) ---
   Anchored to the Refine button via the wrapping op-picker-wrapper. */
.op-refine-wrapper {
  position: relative;
}

.op-refine-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  width: 380px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--savvy-lime);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  box-sizing: border-box;
}

.op-refine-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.op-refine-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.op-refine-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-refine-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--savvy-navy);
  text-transform: uppercase;
}

.op-refine-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.op-refine-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-refine-link-btn:hover {
  text-decoration: underline;
}

.op-refine-empty {
  padding: 8px 4px;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-refine-helper {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Search input */
.op-refine-search {
  position: relative;
  display: flex;
  align-items: center;
}

.op-refine-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.op-refine-search-input {
  flex: 1;
  width: 100%;
  padding: 6px 10px 6px 28px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  background: var(--white);
  box-sizing: border-box;
}

.op-refine-search-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

/* Positions tree */
.op-refine-positions-tree {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  padding: 4px 0;
}

.op-refine-position-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--savvy-navy-text);
}

.op-refine-position-row:hover {
  background: var(--savvy-ice);
}

.op-refine-position-expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 2px;
}

.op-refine-position-expander:hover {
  background: rgba(22, 45, 117, 0.08);
  color: var(--savvy-navy);
}

.op-refine-position-expander--blank {
  visibility: hidden;
  cursor: default;
  pointer-events: none;
}

.op-refine-position-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.op-refine-position-checkbox {
  margin: 0;
  flex-shrink: 0;
}

.op-refine-position-name {
  font-weight: 600;
  color: var(--savvy-navy);
}

.op-refine-position-sep {
  color: var(--text-secondary);
}

.op-refine-position-title {
  color: var(--text-secondary);
  font-size: 11px;
}

/* Filters section */
.op-refine-filter-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.op-refine-active-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-refine-active-filter {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--white);
}

.op-refine-active-filter-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.op-refine-active-filter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--savvy-lime-deep);
  flex-shrink: 0;
}

.op-refine-active-filter-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-refine-active-filter-close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.op-refine-active-filter-close:hover {
  background: #fef2f2;
  color: #dc2626;
}

.op-refine-active-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.op-refine-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-size: 11px;
  color: var(--savvy-navy);
}

/* Add filter zone */
.op-refine-add-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Search suggestions — only render when the user has typed something. */
.op-refine-column-suggestions {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
}

.op-refine-column-suggestions:empty {
  display: none;
}

.op-refine-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: var(--white);
  border: none;
  border-bottom: 1px solid #f1f5f9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-refine-suggestion:last-child {
  border-bottom: none;
}

.op-refine-suggestion:hover {
  background: var(--savvy-ice);
}

/* Inline picker — replaces the search box once a column is chosen. */
.op-refine-inline-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--savvy-ice);
}

.op-refine-inline-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-refine-inline-picker-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-refine-column-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  max-height: 200px;
  overflow-y: auto;
}

.op-refine-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--savvy-navy-text);
  cursor: pointer;
}

.op-refine-value-row input {
  margin: 0;
}

.op-refine-apply-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  font-size: 11px;
}

.op-hidden {
  display: none !important;
}

/* --- Dropdown menus (Leader picker, Scenario picker) --- */
.op-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-top: 2px solid var(--savvy-lime);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-size: 12px;
}

.op-dropdown-search {
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  color: var(--savvy-navy);
}

.op-dropdown-search:focus {
  border-bottom-color: var(--savvy-lime-deep);
  background: #fafdff;
}

.op-dropdown-list {
  max-height: 280px;
  overflow-y: auto;
}

.op-dropdown-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: var(--savvy-navy-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.op-dropdown-item:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
  font-weight: 600;
}

.op-dropdown-empty {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

/* --- Role filter strip ---
   Outer container is a bordered white box with a filter icon. Each chip
   has a small colored dot conveying role-type identity; chip background
   conveys filter state (on = visible, off = line-through faded).
*/
.op-role-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
}

.op-role-strip-icon {
  margin-left: 4px;
  color: #94a3b8;
  flex-shrink: 0;
}

.op-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    opacity var(--transition-fast);
}

.op-role-chip:hover {
  opacity: 0.85;
}

.op-role-chip--on {
  background: #f1f5f9;
  color: #0f172a;
}

.op-role-chip--off {
  color: #94a3b8;
  text-decoration: line-through;
  opacity: 0.6;
}

.op-role-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.op-role-dot--existing   { background: var(--role-existing); }
.op-role-dot--modified   { background: var(--role-modified); }
.op-role-dot--future     { background: var(--role-future); }
.op-role-dot--redundant  { background: var(--role-redundant); }
.op-role-dot--eliminated { background: var(--role-eliminated); }

/* --- Comparing row chips --- */
.op-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #f1f5f9;
}

.op-compare-chip--active {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--savvy-lime);
}

.op-compare-chip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.op-compare-chip-dot--baseline {
  background: #94a3b8;
}

.op-compare-chip-dot--active {
  background: var(--savvy-lime-deep);
}

.op-compare-chip-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.op-compare-chip-leader {
  font-size: 11px;
  font-weight: 700;
}

.op-compare-chip-leader--baseline {
  color: #475569;
}

.op-compare-chip-leader--active {
  color: var(--savvy-navy);
}

.op-compare-chip-scenario {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
}

.op-compare-chip-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-left: 2px;
}

.op-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: var(--savvy-lime);
  color: var(--savvy-navy);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.op-active-pill-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--savvy-navy);
}

.op-add-comparison {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 9999px;
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  cursor: pointer;
  font-family: inherit;
}

.op-add-comparison:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

/* --- View toggle (segmented control) --- */
.op-view-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
}

.op-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.op-view-toggle-btn:hover:not(.op-view-toggle-btn--active) {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-view-toggle-btn--active {
  background: var(--savvy-navy);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 1px 2px var(--shadow-color);
}

/* Collapsed summary stays visible on all viewport widths. (Earlier mockup
   used `md:` breakpoint to hide on narrow, but the Excel task pane is
   always narrow — hiding the summary defeated the point of collapsing.) */

/* --- Per-tab identity header (.op-tab-header)
       Used at the top of every tab section EXCEPT Org Planning, which
       has its own scope bar with an integrated identity band. Reuses the
       same .op-savvy-mark / .op-wordmark / .op-identity-subtitle classes. --- */
.op-tab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 -16px 16px;
  border-bottom: 2px solid var(--savvy-lime);
  background: var(--white);
}

/*=============================================
ORG PLANNING — INLINE CHART (Phase 4)
=============================================*/

/* --- Chart container (everything below the scope bar) --- */
.op-chart-container {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-width:0 + max-width:100% prevents the wide chart-body or long
     breadcrumb from forcing parents (.tab-content, #app-body) to grow
     wider, which would each add their own horizontal scrollbar.
     box-sizing:border-box keeps padding inside the 100% width so we
     don't overflow by 32px and trigger phantom scrollbars on parents.
     position:relative anchors the absolutely-positioned bulk panel. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* --- Chart toolbar (breadcrumb on top row, controls below) --- */
.op-chart-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--shadow-color);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Controls row (depth, card fields, zoom, edit & export). Left-aligned
   under the breadcrumb so users don't have to scroll right to reach
   them when the breadcrumb is long. Wraps if it overflows. */
.op-chart-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Depth toggle (1/2/3-deep) --- */
.op-depth-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.op-depth-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Generic segmented control (used for the depth toggle; reusable
       elsewhere if other 2-3 option pickers come up later) --- */
.op-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
}

.op-segmented-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 3px 8px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.op-segmented-btn:hover:not(.op-segmented-btn--active) {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-segmented-btn--active {
  background: var(--savvy-navy);
  color: var(--white);
  box-shadow: 0 1px 2px var(--shadow-color);
}

/* --- Breadcrumb --- */
.op-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--savvy-navy-text);
  min-width: 0;
}

.op-breadcrumb-empty {
  font-style: italic;
  color: var(--text-secondary);
}

.op-breadcrumb-link {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.op-breadcrumb-link:hover {
  background: var(--savvy-ice);
  text-decoration: underline;
}

.op-breadcrumb-current {
  font-weight: 600;
  color: var(--savvy-navy);
  padding: 2px 6px;
}

.op-breadcrumb-sep,
.op-breadcrumb-ellipsis {
  color: #94a3b8;
  font-size: 12px;
}

/* --- Toolbar buttons --- */
.op-toolbar-menu-wrapper {
  position: relative;
  display: inline-block;
}

.op-toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.op-toolbar-button:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-toolbar-button--primary {
  background: var(--savvy-navy);
  border-color: var(--savvy-navy);
  color: var(--white);
  font-weight: 600;
}

.op-toolbar-button--primary:hover {
  background: var(--savvy-navy-hover);
  border-color: var(--savvy-navy-hover);
  color: var(--white);
}

/* --- Right-anchored dropdown variant (used by Card fields menu) --- */
.op-dropdown--right {
  left: auto;
  right: 0;
}

/* --- Zoom control (chart-toolbar segment) --- */
.op-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
}

.op-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.op-zoom-btn:hover:not(:disabled) {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.op-zoom-pct {
  position: relative;
  min-width: 36px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.op-zoom-pct--active {
  color: var(--savvy-navy);
}

.op-zoom-pct--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--savvy-lime);
  border-radius: 1px;
  transform: translateX(-50%);
}

/* --- Zoom wrapper inside the chart body ---
   We use the `zoom` CSS property (not transform: scale) because zoom
   actually shrinks the layout dimensions, so the parent chart body
   resizes to fit the scaled content. transform: scale would only
   change the visual size, leaving the original layout space empty. */
.op-zoom-wrapper {
  zoom: var(--op-chart-zoom, 1);
}

/* --- Card fields menu rows --- */
.op-card-fields-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--savvy-navy-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.op-card-fields-row:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-card-fields-checkbox {
  margin: 0;
  cursor: pointer;
  accent-color: var(--savvy-navy);
}

.op-card-fields-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 8px;
}

/* --- Chart body (tree or succession) --- */
.op-chart-body {
  background: #fafbfd;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px 12px;
  overflow-x: auto;
  /* Without min-width:0, the chart-body's intrinsic width matches the
     full tree width, which propagates up and triggers extra scrollbars
     on .tab-content and #app-body. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Loading / error / empty states --- */
.op-chart-state {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

.op-chart-state--loading {
  color: var(--savvy-navy);
  font-style: italic;
}

.op-chart-state--error {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #7f1d1d;
}

.op-chart-state-heading {
  font-weight: 600;
  font-size: 14px;
  color: var(--savvy-navy);
  margin-bottom: 6px;
}

.op-chart-state--error .op-chart-state-heading {
  color: #7f1d1d;
}

.op-chart-state-detail {
  font-size: 12px;
  color: var(--text-secondary);
}

/* --- Tree layout --- */
.op-tree {
  display: inline-block;
  min-width: 100%;
  padding: 4px;
  box-sizing: border-box;
}

.op-tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.op-tree-card-wrapper {
  display: flex;
  justify-content: center;
}

.op-tree-connector-down {
  width: 2px;
  height: 16px;
  background: #cbd5e1;
}

.op-tree-children {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding-top: 0;
  position: relative;
}

.op-tree-children--single {
  gap: 0;
}

/* Terminal level: stack siblings vertically under the parent (matches
   the existing Excel org chart's positioning where the bottom row of
   reports sits under their leader rather than spreading horizontally). */
.op-tree-children--stacked {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 0;
}

.op-tree-children--stacked > .op-tree-child {
  display: block;
}

.op-tree-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.op-tree-child-connector {
  position: relative;
  width: 100%;
  height: 16px;
}

.op-tree-child-connector::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #cbd5e1;
}

.op-tree-child-connector--first::before {
  left: 50%;
}

.op-tree-child-connector--last::before {
  right: 50%;
}

.op-tree-child-connector::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #cbd5e1;
  transform: translateX(-1px);
}

/* --- Person card ---
   Width is locked so cards are visually consistent regardless of where
   they sit in the tree (horizontal sibling row vs vertical stack vs
   different subtrees). Long titles wrap to a 2nd line within the card. */
.op-card {
  position: relative;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  flex: 0 0 150px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-left: 4px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px 4px;
  box-shadow: 0 1px 3px var(--shadow-color);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
  box-sizing: border-box;
}

.op-card:hover {
  box-shadow: 0 3px 8px var(--shadow-color-dark);
  transform: translateY(-1px);
}

/* Matrix (dotted-line) instance card — dashed border + muted tint so
   it clearly reads as a reference, not a solid-line direct report. */
.op-card--matrix {
  border: 1px dashed #94a3b8;
  border-left: 4px dashed #94a3b8;
  background: #f8fafc;
}

/* Dashed connectors leading into a matrix card. Replace the solid
   bar fill with a repeating gradient to render as a dashed line. */
.op-tree-connector-down--matrix {
  background: repeating-linear-gradient(to bottom, #94a3b8 0 3px, transparent 3px 6px);
}

.op-tree-child-connector--matrix::before {
  background: repeating-linear-gradient(to right, #94a3b8 0 3px, transparent 3px 6px);
}

.op-tree-child-connector--matrix::after {
  background: repeating-linear-gradient(to bottom, #94a3b8 0 3px, transparent 3px 6px);
}

.op-card:hover .op-card-drill {
  opacity: 1;
}

.op-card--root {
  border-color: var(--savvy-navy);
  border-left-width: 4px;
  box-shadow: 0 2px 6px rgba(22, 45, 117, 0.18);
}

.op-card--selected {
  outline: 2px solid var(--savvy-lime-deep);
  outline-offset: 1px;
}

/* Sibling cards in a tree row are equalized post-render via the JS-set
   --op-row-card-min-height custom property on .op-tree-children.
   The Edge Tools compat-api warning about Firefox 22+ here is a false
   positive — Firefox has supported var() in min-height since v31 (2014),
   and Office Add-ins run in modern WebView2 anyway. */
.op-tree-children .op-card {
  /* webhint-disable-next-line compat-api/css */
  min-height: var(--op-row-card-min-height, auto);
}

.op-card--existing { border-left-color: var(--role-existing); }
.op-card--modified { border-left-color: var(--role-modified); }
.op-card--future   { border-left-color: var(--role-future); }
.op-card--redundant { border-left-color: var(--role-redundant); }
.op-card--eliminated { border-left-color: var(--role-eliminated); }

.op-card-drill {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: var(--savvy-navy);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.op-card-drill:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
  line-height: 1.2;
  padding-right: 18px;
  word-break: break-word;
}

.op-card-title {
  margin-top: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
  word-break: break-word;
}

/* Sticky-note indicator pinned to the card's top-right when a
   scenario note exists. Lime-tinted to match the scope-bar marker.
   The full note text shows on hover via the title attribute. Positioned
   24px from the right so it doesn't collide with the drill icon
   (which sits at right:4px on hover). */
.op-card-note-icon {
  position: absolute;
  top: 6px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--savvy-lime-deep);
  pointer-events: auto;
}

.op-card-fields {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

/* Field rows are value-only — the column header isn't rendered to save
   space. The originating column name is set as the value's title
   attribute so users can hover to see which field the value came from. */
.op-card-field-row {
  display: flex;
  align-items: baseline;
  margin: 0;
}

.op-card-field-value {
  margin: 0;
  color: var(--savvy-navy-text);
  text-align: left;
  word-break: break-word;
}

/* --- Bottom action bar (Phase 5: Undo + Add Roles / Bulk Changes) --- */
.op-chart-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--shadow-color);
}

.op-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.op-action-btn--secondary {
  background: var(--white);
  border: 1px solid #cbd5e1;
  color: #475569;
}

.op-action-btn--secondary:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
  color: var(--savvy-navy);
}

.op-action-btn--primary {
  background: var(--savvy-navy);
  border: 1px solid var(--savvy-navy);
  color: var(--white);
  box-shadow: 0 1px 2px var(--shadow-color);
}

.op-action-btn--primary:hover {
  background: var(--savvy-navy-hover);
  border-color: var(--savvy-navy-hover);
}

.op-action-btn--danger {
  background: #b91c1c;
  border: 1px solid #b91c1c;
  color: var(--white);
  box-shadow: 0 1px 2px var(--shadow-color);
}

.op-action-btn--danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

/* --- Scenario manager modal (New + Manage) --- */
.op-dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 6px 0;
}

.op-dropdown-item--action {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--savvy-navy);
  font-weight: 600;
}

.op-dropdown-item--action:hover {
  background: var(--savvy-ice);
}

.op-scenario-modal {
  max-width: 440px;
}

.op-scenario-modal--wide {
  max-width: 520px;
}

.op-scenario-modal-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.op-scenario-modal-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  margin-top: 8px;
}

.op-scenario-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
}

.op-scenario-modal-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(178, 211, 76, 0.25);
}

.op-scenario-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 14px;
}

.op-scenario-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}

.op-scenario-row:last-child {
  border-bottom: none;
}

.op-scenario-row-name {
  flex: 1;
  min-width: 0;
}

.op-scenario-row-name-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-radius: 3px;
}

.op-scenario-row-name-btn:hover {
  background: var(--savvy-ice);
}

.op-scenario-row-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--savvy-lime-deep);
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  background: var(--white);
}

.op-scenario-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.op-scenario-row-delete:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.op-scenario-row-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Employee panel (Phase 6 — right-side dock) ---
   Anchored to viewport via position:fixed so it doesn't push the
   chart around. Slides in via display toggle. */
.op-emp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: var(--white);
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.10);
  display: none;
  flex-direction: column;
  /* Sits above the drilldown overlay (z 9700) so the panel stacks on
     top of the drilldown when launched from a row's name link. */
  z-index: 9800;
  box-sizing: border-box;
}

.op-emp-panel--open {
  display: flex;
}

.op-emp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.op-emp-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.op-emp-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-emp-panel-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.op-emp-panel-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.op-emp-panel-close:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-emp-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Header pills (role + employee id) */
.op-emp-panel-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.op-emp-panel-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: var(--text-secondary);
  border: 1px solid #e2e8f0;
}

.op-emp-panel-pill--role {
  text-transform: uppercase;
}

.op-emp-panel-pill--existing {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.op-emp-panel-pill--modified {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.30);
}

.op-emp-panel-pill--future {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.30);
}

.op-emp-panel-pill--redundant {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}

.op-emp-panel-pill--eliminated {
  background: #fef2f2;
  color: var(--savvy-elim);
  border-color: #fecaca;
}

/* Footer */
.op-emp-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Sections */
.op-emp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.op-emp-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-emp-section-heading-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Field label/input */
.op-emp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-emp-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.op-emp-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
  box-sizing: border-box;
}

.op-emp-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

/* Read-only Identity field — Full Name uses this since names aren't
   scenario-scoped. Visually distinct so the user knows it's not a
   live edit affordance. */
.op-emp-input--readonly,
.op-emp-input--readonly:focus {
  background: #f8fafc;
  color: var(--text-secondary);
  border-style: dashed;
  box-shadow: none;
}

/* Role Type chips */
.op-emp-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.op-emp-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.op-emp-role-chip:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-emp-role-chip--selected {
  background: var(--savvy-ice);
  border-color: var(--savvy-navy);
  color: var(--savvy-navy);
  font-weight: 600;
}

/* Manager picker wrapper inside the form */
.op-emp-mgr-wrap {
  /* Reuses .op-add-form-mgr-picker styles via buildManagerPicker. */
  width: 100%;
}

/* Reporting Tree */
.op-emp-tree-summary {
  font-size: 12px;
  color: var(--text-secondary);
}

.op-emp-tree-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each report is a button — click switches the panel to that person. */
.op-emp-tree-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.op-emp-tree-item:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-emp-tree-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--savvy-navy);
}

.op-emp-tree-item:hover .op-emp-tree-name {
  font-weight: 600;
}

.op-emp-tree-title {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* Notes */
.op-emp-notes-helper {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.op-emp-notes-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
  resize: vertical;
  box-sizing: border-box;
}

.op-emp-notes-textarea:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

/* Succession */
.op-emp-succession-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-emp-succession-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-emp-successor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
}

.op-emp-successor-row .op-emp-avatar {
  flex: 0 0 28px;
}

.op-emp-successor-row .op-emp-successor-info {
  flex: 1 1 auto;
}

.op-emp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
}

.op-emp-successor-info {
  min-width: 0;
}

.op-emp-successor-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-emp-successor-name--link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}

.op-emp-successor-name--link:hover {
  text-decoration: underline;
  color: var(--savvy-navy-hover);
}

.op-emp-successor-title {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-emp-readiness-select {
  padding: 4px 6px;
  font-size: 11px;
}

.op-emp-readiness-input {
  flex: 0 0 130px;
  padding: 4px 6px;
  font-size: 11px;
  width: 130px;
}

/* Add successor — starts collapsed to a single trigger button. */
.op-emp-add-successor {
  margin-top: 10px;
}

.op-emp-add-successor-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: var(--white);
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-emp-add-successor-trigger:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-emp-add-successor-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: var(--savvy-ice);
}

.op-emp-add-successor-form .op-emp-field-label {
  margin: 0;
}

.op-emp-add-successor-readiness {
  font-size: 12px;
}

.op-emp-add-successor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Pending-state row treatments */
.op-emp-successor-row--removed .op-emp-successor-name,
.op-emp-successor-row--removed .op-emp-successor-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.op-emp-successor-row--removed {
  opacity: 0.7;
}

.op-emp-successor-row--added {
  border-color: #b2d34c;
  background: #f6fae6;
}

.op-emp-successor-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.op-emp-successor-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--savvy-lime);
  color: var(--savvy-navy);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.op-emp-readiness-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 11px;
  color: var(--savvy-navy);
}

.op-emp-successor-remove {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.op-emp-successor-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* All Employee Data — collapsible */
.op-emp-all-data {
  margin-bottom: 12px;
}

.op-emp-all-data-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.op-emp-all-data-header:hover {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-emp-all-data--open .op-emp-all-data-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.op-emp-all-data-body {
  display: none;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: var(--white);
}

.op-emp-all-data--open .op-emp-all-data-body {
  display: block;
}

.op-emp-all-data-loading {
  padding: 8px 4px;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Tighter manager-details-grid inside the panel since we're at 380px wide */
.op-emp-all-data-body .manager-details-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

.op-emp-all-data-body .manager-field {
  padding: 8px 10px;
}

.op-emp-all-data-body .manager-field-label {
  color: var(--savvy-navy);
  font-size: 11px;
  text-transform: none;
}

.op-emp-all-data-body .manager-field-value {
  font-size: 12px;
  word-break: break-word;
}

.op-emp-all-data-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-emp-all-data-icon {
  color: var(--text-secondary);
  font-size: 14px;
}

.op-emp-all-data-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.op-emp-all-data-chev {
  color: var(--text-secondary);
  font-size: 16px;
}

/* View on chart placeholder */
.op-emp-view-chart-wrap {
  margin-bottom: 12px;
}

.op-emp-panel-stub {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}

/* --- Succession view (Phase 4 stub) --- */
.op-succession {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.op-succession-leader-row {
  display: flex;
  justify-content: center;
}

.op-succession-stub {
  width: 100%;
  max-width: 480px;
  padding: 16px;
  background: var(--white);
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  text-align: center;
}

.op-succession-stub-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--savvy-navy);
  margin-bottom: 4px;
}

.op-succession-stub-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Add / Edit Roles drawer ---
   Anchored to viewport via position: fixed at the bottom edge so
   nothing about chart-container's layout can affect its visibility.
   Slides in via display toggle (no transition — fast and reliable). */
.op-bulk-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70vh;
  max-height: 70vh;
  background: var(--white);
  border-top: 3px solid var(--savvy-lime);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
  z-index: 9000;
  box-sizing: border-box;
}

.op-bulk-drawer--open {
  display: flex;
}

.op-bulk-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.op-bulk-drawer-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-bulk-drawer-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}

.op-bulk-drawer-close:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-bulk-drawer-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-bulk-drawer-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 0;
  border-bottom: 1px solid #e2e8f0;
}

.op-bulk-drawer-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.op-bulk-drawer-undo {
  margin-left: auto;
  padding: 5px 10px;
  font-size: 11px;
}

.op-bulk-drawer-collapse {
  background: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.op-bulk-drawer-collapse:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

/* Collapsed state — hides everything except the header so the user
   can see the chart updates while keeping the drawer accessible. */
.op-bulk-drawer--collapsed {
  height: auto;
  max-height: none;
}

.op-bulk-drawer--collapsed .op-bulk-drawer-tabs,
.op-bulk-drawer--collapsed .op-bulk-drawer-body,
.op-bulk-drawer--collapsed .op-bulk-drawer-footer {
  display: none;
}

/* Chart body is grab-to-pan when content overflows horizontally —
   means users can pan the chart even when the bottom scrollbar is
   covered by the drawer header. */
.op-chart-body {
  cursor: grab;
}

.op-chart-body--panning {
  cursor: grabbing;
  user-select: none;
}

.op-bulk-drawer-tab {
  padding: 6px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.op-bulk-drawer-tab:hover {
  color: var(--savvy-navy);
}

.op-bulk-drawer-tab--active {
  color: var(--savvy-navy);
  border-bottom-color: var(--savvy-lime);
}

.op-bulk-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  font-size: 13px;
  color: var(--savvy-navy-text);
}

.op-bulk-drawer-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--savvy-navy);
  margin-bottom: 4px;
}

.op-bulk-drawer-section-sub {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 14px;
}

.op-bulk-drawer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.op-bulk-drawer-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-bulk-drawer-field-placeholder {
  height: 28px;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  color: #94a3b8;
  background: #f8fafc;
}

.op-bulk-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.op-bulk-drawer-footer-hint {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-bulk-drawer-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-bulk-drawer-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Add form (inside the drawer) --- */
.op-add-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.op-add-form-grid {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr;
  gap: 8px 10px;
}

.op-add-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.op-add-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-add-form-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
  box-sizing: border-box;
  min-width: 0;
}

.op-add-form-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

.op-add-form-generate {
  width: 100%;
  justify-content: center;
}

/* Rows table */
.op-add-form-rows-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow-x: auto;
}

.op-add-form-rows-table {
  display: table;
  width: 100%;
  font-size: 11px;
}

.op-add-form-rows-head,
.op-add-form-row {
  display: grid;
  grid-template-columns: 28px 110px 130px 130px 130px 100px 110px 28px;
  align-items: center;
  min-width: 770px;
}

.op-add-form-rows-head {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 8px;
  gap: 6px;
}

.op-add-form-rows-th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 2px;
}

.op-add-form-rows-body {
  display: flex;
  flex-direction: column;
}

.op-add-form-row {
  padding: 6px 8px;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.op-add-form-row:last-child {
  border-bottom: none;
}

.op-add-form-cell {
  min-width: 0;
}

.op-add-form-cell-idx {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.op-add-form-readonly {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

.op-add-form-cell-del {
  text-align: right;
}

.op-add-form-del {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.op-add-form-del:hover {
  background: #fef2f2;
  color: #dc2626;
}

.op-add-form-rows-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Add another row */
.op-add-form-addrow-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.op-add-form-addrow {
  padding: 6px 10px;
  font-size: 11px;
}

.op-add-form-hint {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Manager picker (search-driven) */
.op-add-form-mgr-picker {
  position: relative;
  min-width: 0;
}

.op-add-form-mgr-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  min-width: 0;
}

.op-add-form-mgr-trigger:hover {
  border-color: var(--savvy-lime-deep);
}

.op-add-form-mgr-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-add-form-mgr-label--placeholder {
  color: #94a3b8;
}

.op-add-form-mgr-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-add-form-mgr-clear:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-add-form-mgr-dropdown {
  /* op-dropdown base provides absolute positioning + styling */
  min-width: 220px;
}

/* --- Edit form (Bulk Change tab) --- */
.op-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.op-edit-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.op-edit-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-edit-form-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--savvy-navy-text);
  background: var(--white);
  box-sizing: border-box;
  min-width: 0;
}

.op-edit-form-input:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(184, 214, 121, 0.25);
}

.op-edit-form-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}

/* Top search row — two equal columns */
.op-edit-form-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Bulk edit row */
.op-edit-bulk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--savvy-lime-deep);
  border-radius: 6px;
  background: rgba(206, 234, 149, 0.10);
}

.op-edit-bulk-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--savvy-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-edit-bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}

.op-edit-bulk-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.op-edit-bulk-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status bar */
.op-edit-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  min-height: 16px;
}

.op-edit-status-changed {
  font-weight: 600;
  color: var(--savvy-navy);
}

/* Results table */
.op-edit-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow-x: auto;
}

.op-edit-table-head,
.op-edit-table-row {
  display: grid;
  grid-template-columns: 32px 150px 130px 130px 100px 110px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-width: 700px;
}

.op-edit-table-head {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.op-edit-table-th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}

.op-edit-table-master {
  margin: 0;
  cursor: pointer;
  accent-color: var(--savvy-navy);
}

.op-edit-table-row {
  border-bottom: 1px solid #f1f5f9;
}

.op-edit-table-row:last-child {
  border-bottom: none;
}

.op-edit-table-row--changed {
  background: rgba(206, 234, 149, 0.10);
}

.op-edit-table-cell {
  min-width: 0;
}

.op-edit-table-cell-check {
  text-align: center;
}

.op-edit-table-cell-check input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--savvy-navy);
}

.op-edit-table-cell-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-edit-table-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--savvy-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-edit-table-id {
  font-size: 10px;
  color: var(--text-secondary);
}

.op-edit-table-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Pagination */
.op-edit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

.op-edit-pagination:empty {
  display: none;
}

.op-edit-page-btn {
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
  font-size: 11px;
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-edit-page-btn:hover:not(:disabled) {
  background: var(--savvy-ice);
  border-color: var(--savvy-lime-deep);
}

.op-edit-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.op-edit-page-info {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Confirm modal (used for Apply changes confirmation) --- */
.op-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above the panel (9800) so confirms triggered from inside the panel
     (e.g. the save flow) sit on top of the panel itself. */
  z-index: 9900;
  padding: 16px;
}

.op-confirm-card {
  background: var(--white);
  border-top: 3px solid var(--savvy-lime);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 16px 18px;
  max-width: 380px;
  width: 100%;
  box-sizing: border-box;
}

.op-confirm-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-confirm-message {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--savvy-navy-text);
  line-height: 1.4;
}

.op-confirm-message--pre {
  white-space: pre-line;
}

.op-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Bulk Changes / Add Roles dock panel (Phase 5 step 2) ---
   Renders to the right of the chart when open. Stays open after Save
   so the user can see the chart update behind it before moving on.
   Always present in DOM (form state persists across chart re-renders)
   — visibility toggled via the --open class. */
.op-bulk-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: var(--white);
  border-left: 1px solid #e2e8f0;
  border-top: 3px solid var(--savvy-lime);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  z-index: 20;
  box-sizing: border-box;
}

.op-bulk-panel--open {
  display: flex;
}

.op-bulk-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.op-bulk-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.op-bulk-panel-title-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--savvy-navy);
}

.op-bulk-panel-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.op-bulk-panel-close:hover {
  background: var(--savvy-ice);
  color: var(--savvy-navy);
}

.op-bulk-panel-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.op-bulk-panel-tab {
  padding: 6px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.op-bulk-panel-tab:hover {
  color: var(--savvy-navy);
}

.op-bulk-panel-tab--active {
  color: var(--savvy-navy);
  border-bottom-color: var(--savvy-lime);
}

.op-bulk-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.op-bulk-panel-body-stub {
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

.op-bulk-panel-body-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--savvy-navy);
  margin-bottom: 6px;
}

.op-bulk-panel-body-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.op-bulk-panel-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.op-bulk-panel-footer-note {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

.op-bulk-panel-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ===========================================================
   Edit & Export drawer — bottom drawer hosting the chart
   styling controls migrated from the legacy Org Chart tab.
   =========================================================== */
.op-ee-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 9750;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 220ms ease;
}

.op-ee-drawer-overlay--open {
  background: rgba(15, 23, 42, 0.32);
}

.op-ee-drawer {
  width: 100%;
  max-width: 1400px;
  height: 60vh;
  min-height: 420px;
  background: var(--white);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 220ms ease;
  overflow: hidden;
}

.op-ee-drawer--open {
  transform: translateY(0);
}

.op-ee-drawer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: var(--white);
  flex-shrink: 0;
}

.op-ee-drawer-preset-slot {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.op-ee-drawer-preset-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.op-ee-drawer-preset-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  cursor: pointer;
  max-width: 180px;
}

.op-ee-drawer-preset-saveas,
.op-ee-drawer-preset-update {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-ee-drawer-preset-saveas:hover,
.op-ee-drawer-preset-update:hover {
  background: #f1f5f9;
  border-color: var(--savvy-lime-deep);
}

.op-ee-drawer-preset-input {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--savvy-lime-deep);
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  width: 180px;
}

.op-ee-drawer-preset-confirm {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid var(--savvy-navy);
  border-radius: 4px;
  background: var(--savvy-navy);
  color: var(--white);
  cursor: pointer;
}

.op-ee-drawer-preset-confirm:hover {
  background: var(--savvy-navy-hover);
}

.op-ee-drawer-preset-cancel {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
}

.op-ee-drawer-preset-cancel:hover {
  background: #f1f5f9;
}

.op-ee-drawer-preset-menu-btn {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 2px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
}

.op-ee-drawer-preset-menu-btn:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
  border-color: var(--savvy-lime-deep);
}

.op-ee-drawer-preset-menu-action {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-ee-drawer-preset-menu-action:hover {
  background: #f1f5f9;
  border-color: var(--savvy-lime-deep);
}

.op-ee-drawer-preset-menu-action--danger {
  color: #b13030;
  border-color: rgba(220, 75, 75, 0.30);
}

.op-ee-drawer-preset-menu-action--danger:hover {
  background: rgba(220, 75, 75, 0.08);
  border-color: #b13030;
}

.op-ee-drawer-preset-confirm-text {
  font-size: 12px;
  color: var(--savvy-navy);
  font-weight: 600;
}

.op-ee-drawer-preset-delete {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid #b13030;
  border-radius: 4px;
  background: #b13030;
  color: var(--white);
  cursor: pointer;
}

.op-ee-drawer-preset-delete:hover {
  background: #8a2424;
}

.op-ee-drawer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.op-ee-drawer-save {
  background: var(--savvy-navy);
  color: var(--white);
  border: 1px solid var(--savvy-navy);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms;
}

.op-ee-drawer-save:hover:not(:disabled) {
  background: var(--savvy-navy-hover);
}

.op-ee-drawer-save:disabled {
  opacity: 0.55;
  cursor: progress;
}

.op-ee-drawer-open-ppt {
  background: var(--white);
  color: var(--savvy-navy);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
}

.op-ee-drawer-open-ppt:hover {
  background: #f1f5f9;
  border-color: var(--savvy-lime-deep);
}


.op-ee-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}

.op-ee-drawer-close:hover {
  background: #f1f5f9;
  color: var(--savvy-navy);
}

.op-ee-drawer-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  flex-shrink: 0;
}

.op-ee-drawer-scope-label {
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.op-ee-drawer-scope-value {
  color: var(--savvy-navy);
  font-weight: 600;
}

.op-ee-drawer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f8fafc;
}

.op-ee-drawer-section {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  min-width: 0;
  overflow: hidden;
  /* Don't let sections shrink within the flex column — they should
     render at natural content height and let the parent scroll. */
  flex-shrink: 0;
}

.op-ee-drawer-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 10px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.op-ee-drawer-section-header:hover .op-ee-drawer-section-title {
  color: var(--savvy-navy);
}

.op-ee-drawer-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.op-ee-drawer-section-chevron {
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1;
  margin-left: 8px;
  transition: transform 160ms ease;
  transform-origin: center;
}

.op-ee-drawer-section--collapsed .op-ee-drawer-section-chevron {
  transform: rotate(-90deg);
}

.op-ee-drawer-section--collapsed {
  padding-bottom: 12px;
}

.op-ee-drawer-section--collapsed .op-ee-drawer-section-header {
  margin-bottom: 0;
}

.op-ee-drawer-section--collapsed .op-ee-drawer-section-body {
  display: none;
}

.op-ee-drawer-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-ee-drawer-section--placeholder {
  border-style: dashed;
  border-color: #cbd5e1;
  background: #fafbfc;
}

.op-ee-drawer-section-placeholder {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 16px 4px;
  text-align: center;
}

.op-ee-drawer-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--savvy-navy);
  cursor: pointer;
  padding: 3px 0;
  line-height: 1.3;
}

.op-ee-drawer-check input {
  cursor: pointer;
  margin: 0;
}

.op-ee-drawer-radio-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.op-ee-drawer-radio-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.op-ee-drawer-separator {
  height: 1px;
  background: #e2e8f0;
  margin: 6px 0;
}

/* Card Content section ----------------------------------- */

.op-ee-card-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.op-ee-card-row {
  display: grid;
  gap: 6px;
}

.op-ee-card-row--cols-1 {
  grid-template-columns: 1fr;
}

.op-ee-card-row--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.op-ee-card-cell {
  min-width: 0;
}

.op-ee-card-select {
  width: 100%;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  cursor: pointer;
}

.op-ee-card-select:disabled {
  background: #f8fafc;
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Color Coding section ----------------------------------- */

.op-ee-drawer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-ee-drawer-field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.op-ee-drawer-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.op-ee-drawer-field-select {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  cursor: pointer;
  width: 100%;
}

.op-ee-drawer-field-select:disabled {
  background: #f8fafc;
  color: var(--text-secondary);
}

.op-ee-drawer-field-number {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  width: 70px;
}

.op-ee-drawer-transparency-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-ee-drawer-transparency-slider {
  flex: 1;
  cursor: pointer;
}

.op-ee-drawer-transparency-number {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  width: 56px;
}

.op-ee-drawer-transparency-pct {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Hosts the borrowed legacy fill/border level picker containers.
   Legacy widget rows can be wider than the drawer column at narrow
   widths — let them scroll horizontally WITHIN this host so they
   don't push the entire drawer to overflow. */
.op-ee-drawer-color-levels-host {
  margin-top: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.op-ee-drawer-color-levels-host .color-levels-container {
  margin-top: 8px;
}

.op-ee-drawer-color-levels-host .color-levels-container h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  letter-spacing: 0;
  text-transform: none;
}

/* Icons & Indicators ----------------------------------- */

.op-ee-drawer-display-host {
  margin-top: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.op-ee-drawer-display-host > .data-type-toggle h4,
.op-ee-drawer-display-host > .display-levels-container h4,
.op-ee-drawer-display-host > .save-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  letter-spacing: 0;
  text-transform: none;
}

.op-ee-drawer-display-host .save-section p {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 4px 0 8px 0;
  line-height: 1.4;
}

/* Sort section ----------------------------------- */

.op-ee-drawer-sort-host {
  margin-top: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.op-ee-drawer-sort-host h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  letter-spacing: 0;
  text-transform: none;
}

.op-ee-drawer-sort-host .sort-variable-section {
  margin-bottom: 12px;
}

/* ===========================================================
   Org Planning — Pro feature gating
   =========================================================== */

/* Hide entirely. Used for top-level rows that don't make sense at
   all on Basic (Comparing chip row, Add/Edit Roles row). */
.op-pro-gated--hidden {
  display: none !important;
}

/* Locked inline control. Element stays visible but appears disabled
   with a small PRO badge. Click is intercepted by JS to open the
   upgrade dialog, so cursor stays as pointer (the click is productive). */
.op-pro-gated--locked {
  position: relative;
  opacity: 0.55;
  cursor: pointer !important;
}

.op-pro-gated--locked > * {
  pointer-events: none;
}

.op-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--savvy-lime-deep);
  border-radius: 3px;
  vertical-align: middle;
  pointer-events: auto;
}

/* Card-level overlay for surfaces where we want the user to still
   see the visual layout. Clicking opens the upgrade dialog, so
   cursor stays pointer (the click is productive). */
.op-pro-gated--overlay {
  position: relative;
  cursor: pointer !important;
}

/* Upgrade dialog — visually ties to the PRO badges with a lime accent
   and a small "Professional" pill above the title. */
.op-upgrade-overlay {
  display: flex;
}

.op-upgrade-modal {
  position: relative;
  padding-top: 28px;
  border-top: 4px solid var(--savvy-lime);
}

.op-upgrade-pill {
  display: inline-block;
  padding: 3px 9px;
  margin-bottom: 10px;
  background: var(--savvy-lime);
  color: var(--brand-navy, #162d75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-transform: uppercase;
}

.op-upgrade-title {
  margin-top: 0 !important;
  margin-bottom: 8px;
}

.op-upgrade-modal .modal-body p {
  margin: 8px 0 12px;
  color: var(--text-secondary, #555);
  font-size: 13px;
}

.op-upgrade-modal .modal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.op-upgrade-modal .modal-body li {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.op-upgrade-modal .modal-additional-message {
  margin-top: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 12px;
}

.op-pro-overlay {
  position: absolute;
  inset: 0;
  /* Solid enough to mask the actual metric values while still
     letting the card outline + label peek through faintly so
     users see "this exists, you can't access it" rather than a
     blank panel. */
  background: rgba(248, 250, 252, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 5;
}

.op-pro-overlay-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--savvy-navy);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}

/* Skeleton metric card shown to Basic users — just label + lime
   marker, no value computed. Gives the "you can see what's here"
   signal without exposing any data in the DOM. */
.op-metric-card--gated {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Inline PRO badge sitting next to a section heading. */
.op-pro-badge--inline {
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
  background: var(--savvy-navy);
}

/* ===========================================================
   Setup tab — merged License + Data Mapping
   =========================================================== */

.setup-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 0;
}

.op-setup-panel {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.op-setup-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 14px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 12px;
}

.op-setup-panel-titlewrap {
  flex: 1;
  min-width: 0;
}

.op-setup-panel-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--savvy-navy);
  letter-spacing: 0.01em;
}

.op-setup-panel-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.op-setup-panel-chevron {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
  margin-top: 4px;
  transition: transform 160ms ease;
}

.op-setup-panel--collapsed .op-setup-panel-chevron {
  transform: rotate(-90deg);
}

.op-setup-panel--collapsed {
  padding-bottom: 14px;
}

.op-setup-panel--collapsed .op-setup-panel-header {
  margin-bottom: 0;
}

.op-setup-panel--collapsed .op-setup-panel-body {
  display: none;
}

.op-setup-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-setup-lock-notice {
  font-size: 12px;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.op-setup-panel--locked .op-setup-mapping-body {
  opacity: 0.45;
  pointer-events: none;
}

/* ===========================================================
   Welcome tab — branded to match Setup / Org Planning
   =========================================================== */

#welcomeContent {
  padding: 0;
}

#welcomeContent > h2 {
  margin: 18px 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--savvy-navy);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

#welcomeContent > p {
  margin: 0 0 18px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

#welcomeContent .account-value {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

#welcomeContent .account-value h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--savvy-navy);
  letter-spacing: 0.01em;
}

#welcomeContent .account-value > p {
  margin: 0 0 14px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

#welcomeContent .account-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#welcomeContent .account-benefit {
  position: relative;
  padding: 10px 12px 10px 28px;
  font-size: 12px;
  color: var(--savvy-navy);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--savvy-lime-deep);
  border-radius: 4px;
  line-height: 1.45;
}

#welcomeContent .account-benefit::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--savvy-lime-deep);
  border-radius: 50%;
}

#welcomeContent .account-benefit strong {
  color: var(--savvy-navy);
  font-weight: 700;
}

#welcomeContent .action-section {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

#welcomeContent .action-section .button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

#welcomeContent .action-section .button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

#welcomeContent .action-section .button-primary {
  background: var(--savvy-navy);
  color: var(--white);
  border: 1px solid var(--savvy-navy);
}

#welcomeContent .action-section .button-primary:hover:not(:disabled) {
  background: var(--savvy-navy-hover);
}

#welcomeContent .action-section .button-secondary {
  background: var(--white);
  color: var(--savvy-navy);
  border: 1px solid #cbd5e1;
}

#welcomeContent .action-section .button-secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: var(--savvy-lime-deep);
}

#welcomeContent .skip-link {
  display: inline-block;
  font-size: 11px;
  color: var(--savvy-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

#welcomeContent .skip-link:hover {
  color: var(--savvy-lime-deep);
  text-decoration-color: var(--savvy-lime-deep);
}

/* -----------------------------------------------------------
   Setup tab — License + Mapping panel content styling.
   Scoped to .op-setup-panel-body (set on each panel body by
   setup-tab.ts) so styles apply only inside Setup.
   ----------------------------------------------------------- */

/* Hide the section-level <h3>s inside license-entry / license-info /
   headerrowsection — the Setup panel header already shows the title
   ("1. Activate" / "2. Map your data"), and the License entry's intro
   sentence is replaced by the panel header subtitle. */
.op-setup-panel-body #headerrowsection > h3,
.op-setup-panel-body #license-entry > h3,
.op-setup-panel-body #license-entry > p,
.op-setup-panel-body #license-info > h3 {
  display: none;
}

/* License entry form. :not(.hidden) so the .hidden class still wins
   when the legacy code toggles visibility (e.g., switching from
   "no license" to "license info" view). */
.op-setup-panel-body #license-entry:not(.hidden),
.op-setup-panel-body #license-info:not(.hidden),
.op-setup-panel-body #headerrowsection:not(.hidden),
.op-setup-panel-body #dropdownContainer:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The dropdownContainer mapping <select>s share the legacy
   `.dropdown-custom-list` class with a custom dropdown component.
   Legacy global click handlers add `.hidden` to every element with
   that class when the user clicks outside a real custom dropdown —
   which mistakenly hides our field selects. Force them visible to
   counteract the global hide signal. */
.op-setup-panel-body #dropdownContainer select.dropdown-custom-list,
.op-setup-panel-body #dropdownContainer select.dropdown-custom-list.hidden {
  display: block !important;
  width: 100%;
}

/* Tier-based gating for the data mapping panel — keeps Comp and
   Succession hidden for Basic users even if the legacy form
   re-renders or toggles classes. */
.op-setup-mapping-body[data-tier="basic"] #succession-section {
  display: none !important;
}

/* Hide the compensation field-row. WebView2 (Edge) supports :has()
   so this works without JS. The applyTierGates JS also adds the
   `hidden` class as a fallback. */
.op-setup-mapping-body[data-tier="basic"] .field-row:has(#compensation) {
  display: none !important;
}

/* Field rows — stack label above input for cleaner readability
   on the narrow task pane. Labels small, inputs full-width below. */
.op-setup-panel-body .field-row {
  display: block;
  margin-bottom: 10px;
}

.op-setup-panel-body .field-row label {
  display: block;
  min-width: 0;
  margin: 0 0 4px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.op-setup-panel-body .field-row select,
.op-setup-panel-body .field-row input {
  display: block;
  width: 100%;
}

.op-setup-panel-body .field-value {
  font-weight: 600;
  color: var(--savvy-navy);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 10px;
}

/* Inputs + selects — modernize borders, padding, focus state. */
.op-setup-panel-body input[type="text"],
.op-setup-panel-body input[type="number"],
.op-setup-panel-body select {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: var(--white);
  color: var(--savvy-navy);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
}

.op-setup-panel-body input[type="text"]:focus,
.op-setup-panel-body input[type="number"]:focus,
.op-setup-panel-body select:focus {
  outline: none;
  border-color: var(--savvy-lime-deep);
  box-shadow: 0 0 0 2px rgba(168, 207, 79, 0.18);
}

/* Buttons — match the modern primary/secondary pattern used in
   the Org Planning tab. Drops the old gradient/shadow look. */
.op-setup-panel-body .button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.op-setup-panel-body .button-primary {
  background: var(--savvy-navy);
  color: var(--white);
  border: 1px solid var(--savvy-navy);
}

.op-setup-panel-body .button-primary:hover:not(:disabled) {
  background: var(--savvy-navy-hover);
}

.op-setup-panel-body .button-secondary {
  background: var(--white);
  color: var(--savvy-navy);
  border: 1px solid #cbd5e1;
}

.op-setup-panel-body .button-secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: var(--savvy-lime-deep);
}

.op-setup-panel-body .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.op-setup-panel-body .button-container {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Activate License — primary action when no license. Full width
   reads as "this is what to do next" without competing buttons
   on the same line. */
.op-setup-panel-body #license-entry .button-container {
  margin-top: 4px;
}

.op-setup-panel-body #activate-license-btn {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
}

/* License-info action group — Manage Subscription + Change License
   sit side-by-side under the status fields. */
.op-setup-panel-body #license-info .button-container {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.op-setup-panel-body #license-info .button-container .button {
  flex: 1;
}

/* Demo toggle — last resort entry path for users without a license.
   Soft text-link styling rather than a hard button so it doesn't
   compete with Activate License. Sits below a divider so it reads
   as the alternative path. */
.op-setup-panel-body #license-container > .button-container:last-child {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
  margin-top: 14px;
  justify-content: center;
}

.op-setup-panel-body #demo-toggle-btn {
  background: transparent;
  border: 0;
  color: var(--savvy-navy);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
}

.op-setup-panel-body #demo-toggle-btn:hover {
  color: var(--savvy-lime-deep);
  text-decoration-color: var(--savvy-lime-deep);
}

/* Header row (worksheet + row number) — keep them inline since
   they're a tight pair that asks two related questions. */
.op-setup-panel-body #headerrowsection {
  gap: 10px;
}

.op-setup-panel-body #headerrowsection > .field-row + label,
.op-setup-panel-body #headerrowsection > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}

.op-setup-panel-body #userInput {
  width: 80px;
}

.op-setup-panel-body #submitButton {
  align-self: flex-start;
  margin-top: 4px;
}

/* Message line under license activation. */
.op-setup-panel-body #license-message {
  font-size: 12px;
  margin: 0;
  min-height: 16px;
}

.op-setup-panel-body #license-message.success {
  color: var(--savvy-lime-deep);
  font-weight: 600;
}

.op-setup-panel-body #license-message.error {
  color: #b13030;
  font-weight: 600;
}

/* Succession accordion — tighten the spacing and modernize
   header look. */
.op-setup-panel-body .succession-section {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.op-setup-panel-body .succession-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
}

.op-setup-panel-body .succession-header:hover {
  background: #f1f5f9;
}

.op-setup-panel-body .succession-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--savvy-navy);
  letter-spacing: 0.02em;
}

.op-setup-panel-body .succession-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-setup-panel-body .succession-expand-icon {
  font-size: 9px;
  color: var(--text-secondary);
  transition: transform 160ms;
}

.op-setup-panel-body .succession-section.expanded .succession-expand-icon,
.op-setup-panel-body #succession-toggle.expanded .succession-expand-icon {
  transform: rotate(90deg);
}

.op-setup-panel-body .optional-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 2px 7px;
}

.op-setup-panel-body .succession-content:not(.hidden) {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.op-setup-panel-body .succession-description {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.op-setup-panel-body .section-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 8px 0 4px;
}

.op-setup-panel-body .standalone-section h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.op-setup-panel-body .add-successor-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-setup-panel-body .add-successor-count {
  font-size: 11px;
  color: var(--text-secondary);
}

/* "My Successors" section — single column field + format help block */
.op-setup-panel-body .my-successors-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-setup-panel-body .my-successors-help {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.op-setup-panel-body .my-successors-help-line,
.op-setup-panel-body .my-successors-help-contact {
  margin: 0;
}

.op-setup-panel-body .my-successors-help code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-primary);
}

.op-setup-panel-body .my-successors-help-contact {
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
  margin-top: 2px;
}

.op-setup-panel-body .my-successors-help-contact a {
  color: var(--brand-navy, #162d75);
  text-decoration: underline;
}

/* Build hierarchy section — strip the legacy box styling. The
   redundant label is hidden because the button itself reads as
   "do this thing". */
.op-setup-panel-body .build-hierarchy-section {
  margin-top: 16px;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  border-top: 1px solid #e2e8f0;
}

.op-setup-panel-body .build-hierarchy-section > label {
  display: none;
}

.op-setup-panel-body .build-hierarchy-section .button-container {
  margin-top: 0;
}

/* "Map Your Data" heading row — heading on the left, Reset button
   docked top-right so it stays visible at the top of the panel
   without scrolling past the column mappings. */
.op-setup-panel-body .op-setup-mapping-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.op-setup-panel-body .op-setup-mapping-heading-row h3 {
  margin: 0;
}

.op-setup-panel-body .op-setup-mapping-heading-row #resetButton {
  flex: 0 0 auto;
}

.op-setup-panel-body #headerrowsection .button-container {
  margin-top: 8px;
  justify-content: flex-end;
}

/*=============================================
HELP TAB — MODERN STYLES
=============================================*/

/* Reset the legacy help-container box-shadow + chrome inside
   the modern help wrapper so the page feels lighter. */
#helpGuide .help-container.op-help-modern {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) * 2);
  max-width: 100%;
}

/* Intro panel — short pitch + email link. */
.op-help-intro {
  background: linear-gradient(135deg, #F4F8FF 0%, #FFFFFF 60%);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.op-help-intro-title {
  margin: 0 0 var(--spacing-xs);
  color: var(--header-color);
  font-size: 1.4em;
  font-weight: 700;
  border: none;
  padding: 0;
}

.op-help-intro-body {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-color);
  font-size: 0.95em;
  line-height: 1.5;
}

.op-help-support-link {
  display: inline-block;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92em;
}

.op-help-support-link:hover {
  text-decoration: underline;
}

.op-help-support-text {
  margin: 0;
  font-size: 0.92em;
  color: var(--text-color);
  font-weight: 500;
}

/* Modern accordion — overrides the legacy accordion-header blue bar
   look only inside the new Help tab. */
#helpGuide .accordion-section.op-help-section {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

#helpGuide .accordion-section.op-help-section:hover {
  border-color: #C7D2E8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

#helpGuide .op-help-section .accordion-header {
  background: var(--white);
  color: var(--header-color);
  font-size: 0.98em;
  font-weight: 600;
  padding: 14px var(--spacing-md);
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

#helpGuide .op-help-section .accordion-header:hover {
  background: #F7FAFF;
  color: var(--primary-color);
}

#helpGuide .op-help-section .accordion-header .accordion-arrow {
  color: var(--primary-color);
  font-size: 0.78em;
  transition: transform 0.18s ease;
}

#helpGuide .op-help-section .accordion-content {
  background: #FAFBFF;
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-md);
}

#helpGuide .op-help-section .accordion-content p,
#helpGuide .op-help-section .accordion-content li {
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--text-color);
}

/* Placeholder text — visible but visually muted so it's clear the
   section is awaiting real content. */
.op-help-placeholder {
  margin: 0;
  padding: var(--spacing-md);
  background: #FFF7E6;
  border: 1px dashed #E0B070;
  border-radius: 8px;
  color: #8A5A1A;
  font-size: 0.88em;
  font-style: italic;
}

/* Lead line at the top of a section — slightly larger, sets the tone. */
.op-help-lead {
  margin: 0 0 var(--spacing-md);
  font-size: 1em;
  font-weight: 600;
  color: var(--header-color);
}

/* Numbered step block. */
.op-help-step {
  margin-bottom: var(--spacing-md);
}

.op-help-step:last-child {
  margin-bottom: 0;
}

.op-help-step-title {
  margin: 0 0 6px;
  color: var(--primary-color);
  font-size: 0.96em;
  font-weight: 700;
}

#helpGuide .op-help-section .op-help-step p {
  margin: 0 0 6px;
}

#helpGuide .op-help-section .op-help-step ul,
#helpGuide .op-help-section .op-help-step ol {
  margin: 4px 0 0;
  padding-left: 22px;
}

#helpGuide .op-help-section .op-help-step ul li,
#helpGuide .op-help-section .op-help-step ol li {
  margin-bottom: 4px;
  line-height: 1.55;
}

/* Nested bullets — slightly indented and tighter than the parent. */
#helpGuide .op-help-section .op-help-step ul ul {
  margin: 4px 0 6px;
  padding-left: 18px;
}

#helpGuide .op-help-section .op-help-step ul ul li {
  margin-bottom: 2px;
  font-size: 0.95em;
  color: var(--text-secondary, #475569);
}

/* Inline callout for hints / asides inside a step. */
.op-help-callout {
  margin: 8px 0 0 !important;
  padding: 10px 12px;
  background: #F4F8FF;
  border-left: 3px solid var(--primary-color);
  border-radius: 0 6px 6px 0;
  color: var(--text-color);
  font-size: 0.9em;
}

/* Basic vs Professional comparison table. */
.op-help-tier-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-md);
  font-size: 0.9em;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.op-help-tier-table thead {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.op-help-tier-table th {
  padding: 10px 12px;
  color: var(--white);
  font-weight: 700;
  text-align: left;
  font-size: 0.92em;
}

.op-help-tier-table th.op-help-tier-col {
  text-align: center;
  width: 90px;
}

.op-help-tier-table td {
  padding: 9px 12px;
  border-top: 1px solid var(--border-color);
  color: var(--text-color);
  vertical-align: middle;
}

.op-help-tier-table td.op-help-tier-yes,
.op-help-tier-table td.op-help-tier-no {
  text-align: center;
  font-size: 1em;
  width: 90px;
}

.op-help-tier-table td.op-help-tier-yes {
  color: #1F8B4C;
  font-weight: 700;
}

.op-help-tier-table td.op-help-tier-no {
  color: #94A3B8;
}

.op-help-tier-table tbody tr:nth-child(even) {
  background: #F7FAFF;
}

.op-help-upgrade-note {
  margin: 0;
  padding: 12px 14px;
  background: #F4F8FF;
  border-left: 3px solid var(--primary-color);
  border-radius: 0 6px 6px 0;
  font-size: 0.92em;
  color: var(--text-color);
}

.op-help-upgrade-note a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.op-help-upgrade-note a:hover {
  text-decoration: underline;
}

/* Support footer — cleaner than the legacy support-info block. */
.op-help-support {
  margin-top: calc(var(--spacing-lg) * 1.5);
  padding: var(--spacing-lg);
  background: var(--secondary-hover-bg);
  border-radius: 12px;
  text-align: center;
}

.op-help-support-title {
  margin: 0 0 var(--spacing-sm);
  color: var(--header-color);
  font-size: 1.1em;
  font-weight: 700;
}

.op-help-support-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.op-help-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--primary-color);
  color: var(--white);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
  transition: background 0.15s ease;
}

.op-help-support-btn:hover {
  background: var(--primary-hover);
  color: var(--white);
}

.op-help-support-btn--ghost {
  background: var(--white);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.op-help-support-btn--ghost:hover {
  background: var(--primary-color);
  color: var(--white);
}

.op-help-legal {
  margin: 0;
  font-size: 0.82em;
  color: var(--text-secondary, #64748B);
}

.op-help-legal a {
  color: var(--text-secondary, #64748B);
  text-decoration: none;
}

.op-help-legal a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.op-help-legal span {
  margin: 0 8px;
  color: #C7D2E8;
}
/*=============================================
CUSTOMIZATION HOST
Permanent off-screen container for the chart-build controls (Chart
Options / Card Content / Color Coding / Sort / Icons / Preset Mgmt).
Hidden from the user — the Edit & Export drawer borrows visible
controls from here when open, and chart-build reads values from the
hidden ones at Save-chart time.
=============================================*/
.customization-host {
  display: none;
}