/**
 * Palantir-Inspired Design System for Metropolis VLM
 *
 * A dark, data-dense interface design inspired by Palantir's analytical platforms.
 * Optimized for information density, readability, and professional aesthetics.
 *
 * Usage: Include this CSS alongside Bootstrap for enhanced dark theme styling.
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Background Colors - GitHub Dark Tones */
  --palantir-bg-primary: #0d1117;
  --palantir-bg-secondary: #161b22;
  --palantir-bg-tertiary: #21262d;
  --palantir-bg-elevated: #30363d;
  --palantir-bg-hover: #292e36;

  /* Accent Colors */
  --palantir-cyan: #00d4ff;
  --palantir-cyan-dim: #00a3c4;
  --palantir-cyan-glow: rgba(0, 212, 255, 0.15);
  --palantir-blue: #0969da;
  --palantir-blue-dim: #0550ae;
  --palantir-purple: #8b5cf6;
  --palantir-purple-dim: #7c3aed;

  /* Status Colors */
  --palantir-success: #3fb950;
  --palantir-success-dim: #238636;
  --palantir-warning: #d29922;
  --palantir-warning-dim: #9e6a03;
  --palantir-danger: #f85149;
  --palantir-danger-dim: #da3633;
  --palantir-info: #58a6ff;

  /* Text Colors */
  --palantir-text-primary: #e6edf3;
  --palantir-text-secondary: #8b949e;
  --palantir-text-tertiary: #6e7681;
  --palantir-text-muted: #484f58;

  /* Border Colors */
  --palantir-border: #30363d;
  --palantir-border-muted: #21262d;
  --palantir-border-emphasis: #484f58;

  /* Typography */
  --palantir-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --palantir-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;

  /* Short aliases for convenience */
  --p-bg-primary: var(--palantir-bg-primary);
  --p-bg-secondary: var(--palantir-bg-secondary);
  --p-bg-tertiary: var(--palantir-bg-tertiary);
  --p-bg-elevated: var(--palantir-bg-elevated);
  --p-cyan: var(--palantir-cyan);
  --p-blue: var(--palantir-blue);
  --p-purple: var(--palantir-purple);
  --p-success: var(--palantir-success);
  --p-warning: var(--palantir-warning);
  --p-danger: var(--palantir-danger);
  --p-text-primary: var(--palantir-text-primary);
  --p-text-secondary: var(--palantir-text-secondary);
  --p-text-muted: var(--palantir-text-muted);
  --p-border: var(--palantir-border);
  --p-font-mono: var(--palantir-font-mono);

  /* Spacing */
  --palantir-spacing-xs: 0.25rem;
  --palantir-spacing-sm: 0.5rem;
  --palantir-spacing-md: 1rem;
  --palantir-spacing-lg: 1.5rem;
  --palantir-spacing-xl: 2rem;

  /* Border Radius */
  --palantir-radius-sm: 4px;
  --palantir-radius-md: 6px;
  --palantir-radius-lg: 8px;

  /* Shadows */
  --palantir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --palantir-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --palantir-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --palantir-shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.2);
  --palantir-shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.2);

  /* Transitions */
  --palantir-transition-fast: 150ms ease;
  --palantir-transition-normal: 250ms ease;
  --palantir-transition-slow: 350ms ease;
}


/* ============================================
   Base Palantir Theme Override
   ============================================ */
.palantir-theme {
  background-color: var(--palantir-bg-primary);
  color: var(--palantir-text-primary);
  font-family: var(--palantir-font-sans);
}

.palantir-theme body,
body.palantir-theme {
  background-color: var(--palantir-bg-primary);
  color: var(--palantir-text-primary);
}


/* ============================================
   Typography Classes
   ============================================ */

/* Monospace text for data, IDs, timestamps, codes */
.data-mono {
  font-family: var(--palantir-font-mono);
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

.data-mono-sm {
  font-family: var(--palantir-font-mono);
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}

.data-mono-lg {
  font-family: var(--palantir-font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

/* Text utilities */
.text-cyan { color: var(--palantir-cyan) !important; }
.text-purple { color: var(--palantir-purple) !important; }
.text-muted-palantir { color: var(--palantir-text-secondary) !important; }


/* ============================================
   Palantir Card Component
   ============================================ */
.palantir-card {
  background-color: var(--palantir-bg-secondary);
  border: 1px solid var(--palantir-border);
  border-radius: var(--palantir-radius-lg);
  padding: var(--palantir-spacing-lg);
  transition: all var(--palantir-transition-normal);
  position: relative;
  overflow: hidden;
}

.palantir-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--palantir-cyan), var(--palantir-purple));
  opacity: 0;
  transition: opacity var(--palantir-transition-normal);
}

.palantir-card:hover {
  border-color: var(--palantir-border-emphasis);
  box-shadow: var(--palantir-shadow-md), var(--palantir-shadow-glow-cyan);
  transform: translateY(-2px);
}

.palantir-card:hover::before {
  opacity: 1;
}

/* Card variants */
.palantir-card--elevated {
  background-color: var(--palantir-bg-tertiary);
}

.palantir-card--flat {
  border: none;
  background-color: var(--palantir-bg-tertiary);
}

.palantir-card--interactive {
  cursor: pointer;
}

.palantir-card--interactive:active {
  transform: translateY(0);
}

/* Card sections */
.palantir-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--palantir-spacing-md);
  padding-bottom: var(--palantir-spacing-sm);
  border-bottom: 1px solid var(--palantir-border-muted);
}

.palantir-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--palantir-text-secondary);
  margin: 0;
}

.palantir-card__body {
  flex: 1;
}

.palantir-card__footer {
  margin-top: var(--palantir-spacing-md);
  padding-top: var(--palantir-spacing-sm);
  border-top: 1px solid var(--palantir-border-muted);
}


/* ============================================
   Palantir Metric Component
   ============================================ */
.palantir-metric {
  display: flex;
  flex-direction: column;
  gap: var(--palantir-spacing-xs);
}

.palantir-metric__value {
  font-family: var(--palantir-font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--palantir-text-primary);
  letter-spacing: -0.02em;
}

.palantir-metric__value--lg {
  font-size: 3.5rem;
}

.palantir-metric__value--sm {
  font-size: 1.75rem;
}

.palantir-metric__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--palantir-text-secondary);
}

.palantir-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--palantir-spacing-xs);
  font-family: var(--palantir-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}

.palantir-metric__delta--positive {
  color: var(--palantir-success);
}

.palantir-metric__delta--negative {
  color: var(--palantir-danger);
}

.palantir-metric__delta--neutral {
  color: var(--palantir-text-secondary);
}

/* Metric with accent colors */
.palantir-metric--cyan .palantir-metric__value {
  color: var(--palantir-cyan);
}

.palantir-metric--purple .palantir-metric__value {
  color: var(--palantir-purple);
}

.palantir-metric--success .palantir-metric__value {
  color: var(--palantir-success);
}

.palantir-metric--warning .palantir-metric__value {
  color: var(--palantir-warning);
}

.palantir-metric--danger .palantir-metric__value {
  color: var(--palantir-danger);
}


/* ============================================
   Palantir Badge Component
   ============================================ */
.palantir-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--palantir-spacing-xs);
  padding: 0.25rem 0.625rem;
  font-family: var(--palantir-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--palantir-radius-sm);
  white-space: nowrap;
}

/* Badge with status dot */
.palantir-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Badge variants */
.palantir-badge--info {
  background-color: rgba(0, 212, 255, 0.15);
  color: var(--palantir-cyan);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.palantir-badge--info::before {
  background-color: var(--palantir-cyan);
  box-shadow: 0 0 6px var(--palantir-cyan);
}

.palantir-badge--success {
  background-color: rgba(63, 185, 80, 0.15);
  color: var(--palantir-success);
  border: 1px solid rgba(63, 185, 80, 0.3);
}

.palantir-badge--success::before {
  background-color: var(--palantir-success);
  box-shadow: 0 0 6px var(--palantir-success);
}

.palantir-badge--warning {
  background-color: rgba(210, 153, 34, 0.15);
  color: var(--palantir-warning);
  border: 1px solid rgba(210, 153, 34, 0.3);
}

.palantir-badge--warning::before {
  background-color: var(--palantir-warning);
  box-shadow: 0 0 6px var(--palantir-warning);
}

.palantir-badge--critical,
.palantir-badge--danger {
  background-color: rgba(248, 81, 73, 0.15);
  color: var(--palantir-danger);
  border: 1px solid rgba(248, 81, 73, 0.3);
}

.palantir-badge--critical::before,
.palantir-badge--danger::before {
  background-color: var(--palantir-danger);
  box-shadow: 0 0 6px var(--palantir-danger);
  animation: pulse-danger 2s infinite;
}

.palantir-badge--neutral {
  background-color: var(--palantir-bg-elevated);
  color: var(--palantir-text-secondary);
  border: 1px solid var(--palantir-border);
}

.palantir-badge--neutral::before {
  background-color: var(--palantir-text-tertiary);
}

.palantir-badge--purple {
  background-color: rgba(139, 92, 246, 0.15);
  color: var(--palantir-purple);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.palantir-badge--purple::before {
  background-color: var(--palantir-purple);
  box-shadow: 0 0 6px var(--palantir-purple);
}

/* Badge without dot */
.palantir-badge--no-dot::before {
  display: none;
}

/* Badge sizes */
.palantir-badge--sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
}

.palantir-badge--lg {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* ============================================
   Palantir Grid Component (Dense Data Grid)
   ============================================ */
.palantir-grid {
  display: grid;
  gap: 1px;
  background-color: var(--palantir-border);
  border: 1px solid var(--palantir-border);
  border-radius: var(--palantir-radius-md);
  overflow: hidden;
}

.palantir-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.palantir-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.palantir-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.palantir-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.palantir-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit responsive grid */
.palantir-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.palantir-grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.palantir-grid__cell {
  background-color: var(--palantir-bg-secondary);
  padding: var(--palantir-spacing-md);
  transition: background-color var(--palantir-transition-fast);
}

.palantir-grid__cell:hover {
  background-color: var(--palantir-bg-hover);
}

.palantir-grid__cell--header {
  background-color: var(--palantir-bg-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--palantir-text-secondary);
}

.palantir-grid__cell--highlight {
  background-color: var(--palantir-cyan-glow);
  border-left: 2px solid var(--palantir-cyan);
}

/* Dense variant */
.palantir-grid--dense .palantir-grid__cell {
  padding: var(--palantir-spacing-sm) var(--palantir-spacing-md);
}

/* Compact variant */
.palantir-grid--compact .palantir-grid__cell {
  padding: var(--palantir-spacing-xs) var(--palantir-spacing-sm);
  font-size: 0.8125rem;
}


/* ============================================
   Palantir Data Table
   ============================================ */
.palantir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

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

.palantir-table th {
  background-color: var(--palantir-bg-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--palantir-text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.palantir-table tbody tr {
  transition: background-color var(--palantir-transition-fast);
}

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

.palantir-table tbody tr.selected {
  background-color: var(--palantir-cyan-glow);
}

/* Dense table variant */
.palantir-table--dense th,
.palantir-table--dense td {
  padding: var(--palantir-spacing-xs) var(--palantir-spacing-sm);
  font-size: 0.8125rem;
}

/* Striped table */
.palantir-table--striped tbody tr:nth-child(even) {
  background-color: var(--palantir-bg-tertiary);
}

.palantir-table--striped tbody tr:nth-child(even):hover {
  background-color: var(--palantir-bg-hover);
}


/* ============================================
   Palantir Timeline Component
   ============================================ */
.palantir-timeline {
  position: relative;
  padding-left: var(--palantir-spacing-xl);
}

.palantir-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--palantir-cyan),
    var(--palantir-purple),
    var(--palantir-border)
  );
}

.palantir-timeline__item {
  position: relative;
  padding-bottom: var(--palantir-spacing-lg);
}

.palantir-timeline__item:last-child {
  padding-bottom: 0;
}

.palantir-timeline__marker {
  position: absolute;
  left: calc(-1 * var(--palantir-spacing-xl) + 4px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--palantir-cyan);
  border: 2px solid var(--palantir-bg-primary);
  box-shadow: 0 0 8px var(--palantir-cyan);
}

.palantir-timeline__item--warning .palantir-timeline__marker {
  background-color: var(--palantir-warning);
  box-shadow: 0 0 8px var(--palantir-warning);
}

.palantir-timeline__item--critical .palantir-timeline__marker {
  background-color: var(--palantir-danger);
  box-shadow: 0 0 8px var(--palantir-danger);
  animation: pulse-danger 2s infinite;
}

.palantir-timeline__item--success .palantir-timeline__marker {
  background-color: var(--palantir-success);
  box-shadow: 0 0 8px var(--palantir-success);
}

.palantir-timeline__item--neutral .palantir-timeline__marker {
  background-color: var(--palantir-text-tertiary);
  box-shadow: none;
}

.palantir-timeline__time {
  font-family: var(--palantir-font-mono);
  font-size: 0.75rem;
  color: var(--palantir-text-secondary);
  margin-bottom: var(--palantir-spacing-xs);
}

.palantir-timeline__content {
  background-color: var(--palantir-bg-secondary);
  border: 1px solid var(--palantir-border);
  border-radius: var(--palantir-radius-md);
  padding: var(--palantir-spacing-md);
}

.palantir-timeline__title {
  font-weight: 600;
  margin-bottom: var(--palantir-spacing-xs);
  color: var(--palantir-text-primary);
}

.palantir-timeline__description {
  font-size: 0.875rem;
  color: var(--palantir-text-secondary);
  margin: 0;
}


/* ============================================
   Palantir Header Component
   ============================================ */
.palantir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--palantir-spacing-md) 0;
  margin-bottom: var(--palantir-spacing-lg);
  border-bottom: 1px solid var(--palantir-border);
}

.palantir-header__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--palantir-text-primary);
  margin: 0;
}

.palantir-header__subtitle {
  font-size: 0.875rem;
  color: var(--palantir-text-secondary);
  margin-top: var(--palantir-spacing-xs);
}

.palantir-header__actions {
  display: flex;
  gap: var(--palantir-spacing-sm);
}

/* Section header (smaller) */
.palantir-section-header {
  display: flex;
  align-items: center;
  gap: var(--palantir-spacing-sm);
  margin-bottom: var(--palantir-spacing-md);
}

.palantir-section-header__title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--palantir-text-secondary);
  margin: 0;
}

.palantir-section-header__line {
  flex: 1;
  height: 1px;
  background-color: var(--palantir-border);
}

.palantir-section-header__count {
  font-family: var(--palantir-font-mono);
  font-size: 0.75rem;
  color: var(--palantir-text-tertiary);
}


/* ============================================
   Palantir Button Component
   ============================================ */
.palantir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--palantir-spacing-sm);
  padding: 0.5rem 1rem;
  font-family: var(--palantir-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--palantir-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--palantir-transition-fast);
  text-decoration: none;
}

.palantir-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--palantir-cyan-glow);
}

.palantir-btn--primary {
  background-color: var(--palantir-cyan);
  color: var(--palantir-bg-primary);
  border-color: var(--palantir-cyan);
}

.palantir-btn--primary:hover {
  background-color: var(--palantir-cyan-dim);
  border-color: var(--palantir-cyan-dim);
}

.palantir-btn--secondary {
  background-color: transparent;
  color: var(--palantir-text-primary);
  border-color: var(--palantir-border);
}

.palantir-btn--secondary:hover {
  background-color: var(--palantir-bg-tertiary);
  border-color: var(--palantir-border-emphasis);
}

.palantir-btn--ghost {
  background-color: transparent;
  color: var(--palantir-text-secondary);
  border-color: transparent;
}

.palantir-btn--ghost:hover {
  background-color: var(--palantir-bg-tertiary);
  color: var(--palantir-text-primary);
}

.palantir-btn--danger {
  background-color: var(--palantir-danger);
  color: white;
  border-color: var(--palantir-danger);
}

.palantir-btn--danger:hover {
  background-color: var(--palantir-danger-dim);
  border-color: var(--palantir-danger-dim);
}

/* Button sizes */
.palantir-btn--sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.palantir-btn--lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}


/* ============================================
   Palantir Input Component
   ============================================ */
.palantir-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--palantir-font-sans);
  font-size: 0.875rem;
  color: var(--palantir-text-primary);
  background-color: var(--palantir-bg-tertiary);
  border: 1px solid var(--palantir-border);
  border-radius: var(--palantir-radius-md);
  transition: all var(--palantir-transition-fast);
}

.palantir-input:focus {
  outline: none;
  border-color: var(--palantir-cyan);
  box-shadow: 0 0 0 3px var(--palantir-cyan-glow);
}

.palantir-input::placeholder {
  color: var(--palantir-text-tertiary);
}

.palantir-input--mono {
  font-family: var(--palantir-font-mono);
}

/* Input with icon */
.palantir-input-group {
  position: relative;
}

.palantir-input-group .palantir-input {
  padding-left: 2.5rem;
}

.palantir-input-group__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--palantir-text-tertiary);
}


/* ============================================
   Palantir Progress Component
   ============================================ */
.palantir-progress {
  width: 100%;
  height: 6px;
  background-color: var(--palantir-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.palantir-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--palantir-cyan), var(--palantir-purple));
  border-radius: 3px;
  transition: width var(--palantir-transition-normal);
}

.palantir-progress--success .palantir-progress__bar {
  background: var(--palantir-success);
}

.palantir-progress--warning .palantir-progress__bar {
  background: var(--palantir-warning);
}

.palantir-progress--danger .palantir-progress__bar {
  background: var(--palantir-danger);
}

/* Animated progress */
.palantir-progress--animated .palantir-progress__bar {
  background-size: 30px 30px;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%,
    transparent
  );
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 30px 0; }
}


/* ============================================
   Palantir Status Indicators
   ============================================ */
.palantir-status {
  display: inline-flex;
  align-items: center;
  gap: var(--palantir-spacing-sm);
}

.palantir-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.palantir-status--online .palantir-status__dot {
  background-color: var(--palantir-success);
  box-shadow: 0 0 8px var(--palantir-success);
}

.palantir-status--offline .palantir-status__dot {
  background-color: var(--palantir-text-tertiary);
}

.palantir-status--warning .palantir-status__dot {
  background-color: var(--palantir-warning);
  box-shadow: 0 0 8px var(--palantir-warning);
  animation: pulse-warning 2s infinite;
}

.palantir-status--critical .palantir-status__dot {
  background-color: var(--palantir-danger);
  box-shadow: 0 0 8px var(--palantir-danger);
  animation: pulse-danger 2s infinite;
}

.palantir-status--processing .palantir-status__dot {
  background-color: var(--palantir-cyan);
  box-shadow: 0 0 8px var(--palantir-cyan);
  animation: pulse-processing 1.5s infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes pulse-processing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ============================================
   Palantir Tooltip
   ============================================ */
.palantir-tooltip {
  position: relative;
}

.palantir-tooltip__content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--palantir-spacing-xs) var(--palantir-spacing-sm);
  background-color: var(--palantir-bg-elevated);
  color: var(--palantir-text-primary);
  font-size: 0.75rem;
  border-radius: var(--palantir-radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--palantir-transition-fast);
  z-index: 1000;
  box-shadow: var(--palantir-shadow-md);
  margin-bottom: var(--palantir-spacing-xs);
}

.palantir-tooltip:hover .palantir-tooltip__content {
  opacity: 1;
  visibility: visible;
}


/* ============================================
   Palantir Alert Component
   ============================================ */
.palantir-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--palantir-spacing-md);
  padding: var(--palantir-spacing-md);
  border-radius: var(--palantir-radius-md);
  border-left: 3px solid;
}

.palantir-alert--info {
  background-color: rgba(0, 212, 255, 0.1);
  border-color: var(--palantir-cyan);
  color: var(--palantir-cyan);
}

.palantir-alert--success {
  background-color: rgba(63, 185, 80, 0.1);
  border-color: var(--palantir-success);
  color: var(--palantir-success);
}

.palantir-alert--warning {
  background-color: rgba(210, 153, 34, 0.1);
  border-color: var(--palantir-warning);
  color: var(--palantir-warning);
}

.palantir-alert--danger {
  background-color: rgba(248, 81, 73, 0.1);
  border-color: var(--palantir-danger);
  color: var(--palantir-danger);
}

.palantir-alert__icon {
  flex-shrink: 0;
}

.palantir-alert__content {
  flex: 1;
}

.palantir-alert__title {
  font-weight: 600;
  margin-bottom: var(--palantir-spacing-xs);
}

.palantir-alert__message {
  color: var(--palantir-text-secondary);
  font-size: 0.875rem;
}


/* ============================================
   Palantir Divider
   ============================================ */
.palantir-divider {
  height: 1px;
  background-color: var(--palantir-border);
  margin: var(--palantir-spacing-lg) 0;
}

.palantir-divider--gradient {
  background: linear-gradient(
    90deg,
    transparent,
    var(--palantir-border),
    transparent
  );
}


/* ============================================
   Palantir Scrollbar Override
   ============================================ */
.palantir-scrollbar::-webkit-scrollbar,
.palantir-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.palantir-scrollbar::-webkit-scrollbar-track,
.palantir-theme ::-webkit-scrollbar-track {
  background: var(--palantir-bg-secondary);
}

.palantir-scrollbar::-webkit-scrollbar-thumb,
.palantir-theme ::-webkit-scrollbar-thumb {
  background: var(--palantir-bg-elevated);
  border-radius: 4px;
}

.palantir-scrollbar::-webkit-scrollbar-thumb:hover,
.palantir-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--palantir-border-emphasis);
}


/* ============================================
   Utility Classes
   ============================================ */

/* Background utilities */
.bg-palantir-primary { background-color: var(--palantir-bg-primary) !important; }
.bg-palantir-secondary { background-color: var(--palantir-bg-secondary) !important; }
.bg-palantir-tertiary { background-color: var(--palantir-bg-tertiary) !important; }
.bg-palantir-elevated { background-color: var(--palantir-bg-elevated) !important; }

/* Border utilities */
.border-palantir { border-color: var(--palantir-border) !important; }
.border-palantir-cyan { border-color: var(--palantir-cyan) !important; }
.border-palantir-purple { border-color: var(--palantir-purple) !important; }

/* Glow effects */
.glow-cyan {
  box-shadow: var(--palantir-shadow-glow-cyan);
}

.glow-purple {
  box-shadow: var(--palantir-shadow-glow-purple);
}

/* Text selection */
.palantir-theme ::selection {
  background-color: var(--palantir-cyan);
  color: var(--palantir-bg-primary);
}


/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
  .palantir-grid--cols-4,
  .palantir-grid--cols-5,
  .palantir-grid--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .palantir-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--palantir-spacing-md);
  }

  .palantir-header__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .palantir-metric__value {
    font-size: 2rem;
  }

  .palantir-metric__value--lg {
    font-size: 2.5rem;
  }

  .palantir-card {
    padding: var(--palantir-spacing-md);
  }
}

@media (max-width: 480px) {
  .palantir-grid--cols-2,
  .palantir-grid--cols-3 {
    grid-template-columns: 1fr;
  }

  .palantir-timeline {
    padding-left: var(--palantir-spacing-lg);
  }

  .palantir-timeline__marker {
    left: calc(-1 * var(--palantir-spacing-lg) + 4px);
  }
}


/* ============================================
   Bootstrap Integration Overrides
   ============================================ */

/* Override Bootstrap card when using palantir-theme */
.palantir-theme .card {
  background-color: var(--palantir-bg-secondary);
  border-color: var(--palantir-border);
  color: var(--palantir-text-primary);
}

.palantir-theme .card-header {
  background-color: var(--palantir-bg-tertiary);
  border-color: var(--palantir-border);
}

/* Override Bootstrap forms */
.palantir-theme .form-control,
.palantir-theme .form-select {
  background-color: var(--palantir-bg-tertiary);
  border-color: var(--palantir-border);
  color: var(--palantir-text-primary);
}

.palantir-theme .form-control:focus,
.palantir-theme .form-select:focus {
  background-color: var(--palantir-bg-tertiary);
  border-color: var(--palantir-cyan);
  box-shadow: 0 0 0 3px var(--palantir-cyan-glow);
  color: var(--palantir-text-primary);
}

/* Override Bootstrap buttons */
.palantir-theme .btn-primary {
  background-color: var(--palantir-cyan);
  border-color: var(--palantir-cyan);
  color: var(--palantir-bg-primary);
}

.palantir-theme .btn-primary:hover {
  background-color: var(--palantir-cyan-dim);
  border-color: var(--palantir-cyan-dim);
}

.palantir-theme .btn-outline-primary {
  color: var(--palantir-cyan);
  border-color: var(--palantir-cyan);
}

.palantir-theme .btn-outline-primary:hover {
  background-color: var(--palantir-cyan);
  color: var(--palantir-bg-primary);
}

/* Override Bootstrap tables */
.palantir-theme .table {
  color: var(--palantir-text-primary);
}

.palantir-theme .table > :not(caption) > * > * {
  background-color: transparent;
  border-color: var(--palantir-border);
}

.palantir-theme .table-dark {
  background-color: var(--palantir-bg-secondary);
}

/* Override Bootstrap modals */
.palantir-theme .modal-content {
  background-color: var(--palantir-bg-secondary);
  border-color: var(--palantir-border);
}

.palantir-theme .modal-header {
  border-color: var(--palantir-border);
}

.palantir-theme .modal-footer {
  border-color: var(--palantir-border);
}

/* Override Bootstrap navbar */
.palantir-theme .navbar-dark {
  background-color: var(--palantir-bg-secondary) !important;
}

.palantir-theme .navbar-dark .navbar-nav .nav-link {
  color: var(--palantir-text-secondary);
}

.palantir-theme .navbar-dark .navbar-nav .nav-link:hover {
  color: var(--palantir-text-primary);
}

.palantir-theme .navbar-dark .navbar-nav .nav-link.active {
  color: var(--palantir-cyan);
}

/* Override Bootstrap dropdowns */
.palantir-theme .dropdown-menu {
  background-color: var(--palantir-bg-tertiary);
  border-color: var(--palantir-border);
}

.palantir-theme .dropdown-item {
  color: var(--palantir-text-primary);
}

.palantir-theme .dropdown-item:hover {
  background-color: var(--palantir-bg-hover);
  color: var(--palantir-text-primary);
}

/* Override Bootstrap list groups */
.palantir-theme .list-group-item {
  background-color: var(--palantir-bg-secondary);
  border-color: var(--palantir-border);
  color: var(--palantir-text-primary);
}

.palantir-theme .list-group-item:hover {
  background-color: var(--palantir-bg-hover);
}