/**
 * Aegis DB Dashboard - Global Styles
 * Matches NexusForge theme - cream/teal/terracotta palette
 */

:root {
  /* Primary backgrounds */
  --background: #faf9f6;
  --card-bg: #f5ebe0;
  --highlight: #fff7ed;
  --teal-bg: #f0fdfa;
  --slate-bg: #f3f4f6;

  /* Primary accents */
  --terracotta: #c4a484;
  --terracotta-dark: #a08060;
  --teal: #14b8a6;
  --teal-dark: #0d9488;

  /* Text colors */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-light: #fffdf7;

  /* Borders */
  --border: #e5e7eb;
  --border-cream: #f5ebe0;
  --border-teal: #ccfbf1;

  /* Status colors */
  --success: #10b981;
  --success-bg: #f0fdf4;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --error: #ef4444;
  --error-bg: #fef2f2;
  --info: #3b82f6;
  --info-bg: #eff6ff;

  /* Special */
  --white: #ffffff;
  --black: #111827;

  /* Fonts */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-primary);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  color: var(--teal-dark);
}

code {
  font-family: var(--font-mono);
  background: var(--slate-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}

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

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

.spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

.spinner.large {
  width: 40px;
  height: 40px;
  border-width: 3px;
  border-color: var(--border);
  border-top-color: var(--teal);
}

/* ============================================
   LANDING PAGE STYLES
   ============================================ */

.landing-container {
  min-height: 100vh;
  background: var(--background);
}

.landing-header {
  padding: 0 24px;
}

.landing-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.nav-buttons {
  display: flex;
  gap: 12px;
}

/* Buttons */
.btn-primary {
  background: var(--teal);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
  background: var(--teal-dark);
}

.btn-secondary {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--card-bg);
  border-color: var(--terracotta);
}

.btn-large {
  padding: 16px 32px;
  font-size: 17px;
}

/* Hero */
.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 24px 100px;
}

.hero-badge {
  display: inline-block;
  background: var(--teal-bg);
  border: 1px solid var(--border-teal);
  color: var(--teal-dark);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 24px 0;
}

.hero-subtitle {
  font-size: 20px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 40px 0;
}

.hero-subtitle strong {
  color: var(--teal);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cta-note {
  font-size: 14px;
  color: var(--text-muted);
}

/* Features */
.features-section {
  padding: 80px 24px;
  background: var(--white);
}

.features-section h2, .how-it-works h2, .benefits-section h2, .cta-section h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 60px 0;
}

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--teal-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--teal);
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.feature-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* How It Works */
.how-it-works {
  padding: 80px 24px;
  background: var(--card-bg);
}

.steps-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.step {
  text-align: center;
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 0 auto 20px;
}

.step h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.step p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Benefits */
.benefits-section {
  padding: 80px 24px;
  background: var(--white);
}

.benefits-list {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--text-secondary);
}

.benefit-icon {
  color: var(--teal);
  flex-shrink: 0;
}

/* CTA Section */
.cta-section {
  padding: 100px 24px;
  text-align: center;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-icon {
  color: var(--teal);
  margin-bottom: 24px;
}

.cta-section p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0 0 32px 0;
}

/* Footer */
.landing-footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  background: var(--white);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}

.footer-links {
  display: flex;
  gap: 32px;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--teal);
}

.footer-copyright {
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

.login-container {
  width: 100vw;
  min-height: 100vh;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 420px;
  width: 100%;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.logo {
  width: 80px;
  height: 80px;
}

.welcome-text {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.design-line {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-bg) 0%, var(--teal) 25%, var(--highlight) 50%, var(--terracotta) 75%, var(--background) 100%);
  border-radius: 1px;
}

.secured-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.shield-icon {
  color: var(--teal);
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  animation: fadeIn 0.5s ease-out;
}

/* Messages */
.message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.message.success {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
}

.message.error {
  background: var(--error-bg);
  border: 1px solid var(--error);
  color: var(--error);
}

.message.info {
  background: var(--teal-bg);
  border: 1px solid var(--teal);
  color: var(--teal-dark);
}

/* Form */
.form-header {
  display: flex;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-header span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--terracotta-dark);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  z-index: 2;
  pointer-events: none;
}

.input-group input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 3rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.input-group input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.input-group input::placeholder {
  color: var(--text-muted);
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 2;
}

.password-toggle:hover {
  color: var(--teal);
  background: rgba(20, 184, 166, 0.1);
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.remember-me input[type="checkbox"] {
  accent-color: var(--teal);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.remember-me label {
  cursor: pointer;
}

.auth-button {
  width: 100%;
  padding: 0.875rem 1rem;
  background: #111827;
  color: var(--white);
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.auth-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: #1f2937;
}

.auth-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.back-button {
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-button:hover {
  background: var(--slate-bg);
  color: var(--text-primary);
}

/* MFA */
.mfa-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem 0;
}

.mfa-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.mfa-header p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.mfa-icon {
  color: var(--teal);
}

.demo-hint {
  margin-top: 16px;
  padding: 12px;
  background: var(--teal-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-footer {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ============================================
   DASHBOARD STYLES
   ============================================ */

.dashboard-container {
  display: flex;
  min-height: 100vh;
  background: var(--background);
}

/* Sidebar */
.sidebar {
  width: 260px;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  color: var(--teal);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 24px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 12px;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--slate-bg);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-info:hover {
  background: var(--slate-bg);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 12px;
  color: var(--text-muted);
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 260px;
  padding: 24px;
}

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

.page-title {
  font-size: 24px;
  font-weight: 700;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.header-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-btn-secondary {
  background: var(--white);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.header-btn-secondary:hover {
  background: var(--slate-bg);
  color: var(--text-primary);
}

.alert-badge {
  background: var(--error);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.loading-container {
  text-align: center;
  padding: 60px 0;
}

.loading-container p {
  color: var(--text-muted);
  margin-top: 16px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon.teal {
  background: var(--teal-bg);
  color: var(--teal);
}

.stat-icon.terracotta {
  background: var(--highlight);
  color: var(--terracotta-dark);
}

.stat-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.stat-icon.info {
  background: var(--info-bg);
  color: var(--info);
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
}

.stat-change.positive {
  background: var(--success-bg);
  color: var(--success);
}

.stat-change.negative {
  background: var(--error-bg);
  color: var(--error);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.card-action {
  font-size: 13px;
  color: var(--teal);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.card-action:hover {
  color: var(--teal-dark);
}

.card-body {
  padding: 20px;
}

/* Nodes List */
.nodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.node-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--background);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.node-item:hover {
  background: var(--slate-bg);
}

.node-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.node-status.healthy {
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.node-status.degraded {
  background: var(--warning);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.node-status.offline {
  background: var(--error);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

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

.node-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-role {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.node-role.leader {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.node-role.follower {
  background: var(--slate-bg);
  color: var(--text-secondary);
}

.node-address {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.node-metrics {
  display: flex;
  gap: 16px;
}

.metric {
  text-align: right;
}

.metric-value {
  font-size: 14px;
  font-weight: 600;
}

.metric-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon.query {
  background: var(--info-bg);
  color: var(--info);
}

.activity-icon.write {
  background: var(--success-bg);
  color: var(--success);
}

.activity-icon.delete {
  background: var(--error-bg);
  color: var(--error);
}

.activity-icon.config {
  background: var(--warning-bg);
  color: var(--warning);
}

.activity-icon.node {
  background: var(--teal-bg);
  color: var(--teal);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-description {
  font-size: 13px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Alerts */
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
}

.alert-item.critical {
  background: var(--error-bg);
  border: 1px solid var(--error);
}

.alert-item.warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
}

.alert-item.info {
  background: var(--info-bg);
  border: 1px solid var(--info);
}

.alert-icon {
  flex-shrink: 0;
}

.alert-item.critical .alert-icon { color: var(--error); }
.alert-item.warning .alert-icon { color: var(--warning); }
.alert-item.info .alert-icon { color: var(--info); }

.alert-content {
  flex: 1;
}

.alert-message {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.alert-source {
  font-size: 12px;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

.empty-state svg {
  margin-bottom: 8px;
}

/* Cluster Info */
.cluster-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 14px;
  font-weight: 600;
}

.info-value.leader {
  color: var(--teal);
}

/* Placeholder */
.placeholder-page {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.placeholder-page h2 {
  margin-bottom: 12px;
}

.placeholder-page p {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .main-content {
    margin-left: 0;
    padding: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .node-metrics {
    display: none;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .steps-container {
    grid-template-columns: 1fr;
  }
  .benefits-list {
    grid-template-columns: 1fr;
  }
  .hero-content h1 {
    font-size: 32px;
  }
}

/* ========================================
   NODES PAGE STYLES
   ======================================== */
.nodes-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.header-btn-primary {
  background: var(--teal);
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.header-btn-primary:hover {
  background: var(--teal-dark);
}

.nodes-table-container {
  background: var(--white);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  background: var(--cream);
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(20, 184, 166, 0.04);
}

.monospace {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
}

.status-badge, .role-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.healthy, .role-badge.healthy {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-badge.degraded {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-badge.offline {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--cream-dark);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}

.progress-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 0.3s;
}

.progress-cell span {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 35px;
}

.action-buttons {
  display: flex;
  gap: 0.25rem;
}

.btn-icon {
  padding: 0.375rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--cream);
}

.btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.nodes-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.summary-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
}

.summary-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-value.success {
  color: #16a34a;
}

/* ========================================
   DATABASE PAGE STYLES
   ======================================== */
.database-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.db-stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.db-stat-icon {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: 0.5rem;
}

.db-stat-content {
  flex: 1;
}

.db-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.db-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.storage-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.storage-bar-container {
  width: 100%;
}

.storage-bar {
  height: 12px;
  background: var(--cream-dark);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  border-radius: 6px;
  transition: width 0.3s;
}

.storage-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.storage-details {
  display: flex;
  gap: 3rem;
}

.storage-detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.detail-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.paradigms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.paradigm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.paradigm-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.paradigm-icon {
  font-size: 1.5rem;
}

.paradigm-name {
  font-weight: 600;
  color: var(--text-primary);
}

.paradigm-stats {
  display: flex;
  gap: 1.5rem;
}

.paradigm-stat {
  display: flex;
  flex-direction: column;
}

.paradigm-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.paradigm-stat .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.paradigm-action {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.paradigm-action:hover {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}

/* ========================================
   METRICS PAGE STYLES
   ======================================== */
.metrics-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

.time-range-selector {
  display: flex;
  gap: 0.25rem;
  background: var(--white);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.time-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.time-btn:hover {
  color: var(--text-primary);
}

.time-btn.active {
  background: var(--teal);
  color: white;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.metric-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.metric-card.large {
  grid-column: span 2;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.metric-title {
  font-weight: 600;
  color: var(--text-primary);
}

.metric-value-inline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--teal);
}

.chart-placeholder {
  height: 150px;
  display: flex;
  align-items: flex-end;
}

.fake-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

.chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--teal), rgba(20, 184, 166, 0.3));
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
}

.latency-stats {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
}

.latency-stat {
  text-align: center;
}

.latency-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.latency-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cache-stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.cache-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.cache-ring svg {
  width: 100%;
  height: 100%;
}

.cache-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
}

.cache-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.hit {
  background: var(--teal);
}

.legend-color.miss {
  background: #e5e7eb;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  padding: 1rem 0;
}

.health-node {
  aspect-ratio: 1;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.health-node:hover {
  transform: scale(1.1);
}

.health-legend {
  text-align: center;
  padding-top: 0.5rem;
}

.health-label {
  font-size: 0.875rem;
  color: #16a34a;
}

.replication-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.replication-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.repl-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.repl-value {
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

.network-stats {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
}

.network-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.net-icon {
  font-size: 1.5rem;
  color: var(--teal);
}

.net-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.net-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ========================================
   SETTINGS PAGE STYLES
   ======================================== */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 800px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-section.danger .settings-section-title {
  color: #dc2626;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.settings-card.danger {
  border-color: rgba(220, 38, 38, 0.3);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.setting-name {
  font-weight: 500;
  color: var(--text-primary);
}

.setting-description {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.setting-control {
  display: flex;
  align-items: center;
}

.setting-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  min-width: 200px;
  background: var(--cream);
}

.setting-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.setting-value {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
  background-color: var(--teal);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.btn-danger {
  background: #dc2626;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* Responsive adjustments for new pages */
@media (max-width: 1200px) {
  .db-stats-grid,
  .paradigms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nodes-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-card.large {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .db-stats-grid,
  .paradigms-grid,
  .nodes-summary {
    grid-template-columns: 1fr;
  }
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  .metric-card.large {
    grid-column: span 1;
  }
  .data-table {
    font-size: 0.75rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.5rem;
  }
  .setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ================================================================
   Modal Styles - Database Browsers
   ================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.modal-content {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 1000px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: var(--slate-bg);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--text-secondary);
}

/* Browser Toolbar */
.browser-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.search-input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}

.toolbar-btn {
  padding: 0.625rem 1rem;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toolbar-btn:hover {
  background: var(--teal-dark);
}

.toolbar-btn.small {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.toolbar-btn.primary {
  background: var(--teal);
}

.toolbar-btn.primary:hover {
  background: var(--teal-dark);
}

/* KV Browser */
.kv-browser .data-table {
  width: 100%;
}

.value-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collections Browser */
.collections-browser {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  min-height: 400px;
}

.collections-sidebar {
  border-right: 1px solid var(--border);
  padding-right: 1.5rem;
}

.collections-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

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

.collections-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.collection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.collection-item:hover {
  background: var(--slate-bg);
}

.collection-item.selected {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.collection-name {
  font-weight: 500;
}

.collection-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--slate-bg);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.collection-item.selected .collection-count {
  background: var(--teal);
  color: white;
}

/* Inline Forms for Collections */
.add-form-inline {
  padding: 0.75rem;
  background: var(--highlight);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.add-form-inline .form-input.small {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.form-actions-inline {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn-small {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.btn-small.primary {
  background: var(--teal);
  color: white;
}

.btn-small.primary:hover {
  background: var(--teal-dark);
}

.btn-small.secondary {
  background: var(--slate-bg);
  color: var(--text-secondary);
}

.btn-small.secondary:hover {
  background: var(--border);
}

.documents-panel {
  min-width: 0;
}

.documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.documents-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.document-item {
  background: var(--slate-bg);
  border-radius: 8px;
  padding: 1rem;
}

.document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.document-id {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--teal-dark);
}

.document-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.document-preview {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--white);
  padding: 0.75rem;
  border-radius: 4px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Graph Explorer */
.graph-explorer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.graph-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.graph-select {
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
}

.graph-container {
  background: var(--slate-bg);
  border-radius: 8px;
  padding: 1.5rem;
  min-height: 300px;
}

.graph-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.graph-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.graph-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal-dark);
}

.graph-stat .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.graph-visualization {
  background: var(--white);
  border-radius: 8px;
  padding: 2rem;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graph-placeholder {
  text-align: center;
  color: var(--text-muted);
}

.graph-placeholder .hint {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.graph-details {
  margin-top: 1rem;
}

.graph-details h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.node-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.node-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.node-id {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.node-label {
  background: var(--teal-bg);
  color: var(--teal-dark);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Query Builder */
.query-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-height: 400px;
}

.query-input-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.query-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--slate-bg);
  padding: 0.25rem;
  border-radius: 6px;
}

.query-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.query-tab.active {
  background: var(--white);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.query-textarea {
  flex: 1;
  min-height: 200px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  resize: none;
  line-height: 1.5;
}

.query-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}

.query-actions {
  display: flex;
  gap: 0.5rem;
}

.query-results-section {
  background: var(--slate-bg);
  border-radius: 8px;
  padding: 1rem;
  overflow: auto;
}

.query-success {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.result-stats {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.result-table {
  font-size: 0.8125rem;
}

.result-table th,
.result-table td {
  padding: 0.5rem 0.75rem;
}

.result-message {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-secondary);
}

.query-error {
  padding: 1rem;
  background: var(--error-bg);
  border-radius: 8px;
  border: 1px solid var(--error);
}

.error-icon {
  display: inline-block;
  background: var(--error);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.error-message {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--error);
  white-space: pre-wrap;
  margin: 0;
}

/* Modal Responsive */
@media (max-width: 768px) {
  .modal-content {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .modal-overlay {
    padding: 0;
  }

  .collections-browser {
    grid-template-columns: 1fr;
  }

  .collections-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .query-builder {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Clickable Nodes - Overview & Nodes Page
   ================================================================ */

.node-item.clickable {
  cursor: pointer;
  position: relative;
}

.node-item.clickable:hover {
  background: var(--teal-bg);
  border: 1px solid var(--teal);
  margin: -1px;
}

.node-action-hint {
  position: absolute;
  left: 36px;
  bottom: 8px;
  font-size: 0.7rem;
  color: var(--teal);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.node-item.clickable:hover .node-action-hint {
  opacity: 1;
}

.clickable-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.clickable-row:hover td {
  background: var(--teal-bg) !important;
}

/* Action Button Styles */
.btn-details,
.btn-restart,
.btn-remove {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.btn-details {
  background: var(--teal-bg);
  color: var(--teal-dark);
  border-color: var(--teal);
}

.btn-details:hover {
  background: var(--teal);
  color: white;
}

.btn-restart {
  background: var(--warning-bg);
  color: #b45309;
  border-color: var(--warning);
}

.btn-restart:hover {
  background: var(--warning);
  color: white;
}

.btn-remove {
  background: var(--error-bg);
  color: #b91c1c;
  border-color: var(--error);
}

.btn-remove:hover {
  background: var(--error);
  color: white;
}

/* ================================================================
   Node Detail Modal Styles
   ================================================================ */

.node-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.node-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.node-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.node-status-large {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.node-status-large.healthy {
  background: var(--success);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.node-status-large.degraded {
  background: var(--warning);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.node-status-large.offline {
  background: var(--error);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.node-titles h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.node-address-lg {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.node-badges {
  display: flex;
  gap: 0.5rem;
}

.status-badge-lg,
.role-badge-lg {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.status-badge-lg.healthy {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge-lg.degraded {
  background: var(--warning-bg);
  color: #b45309;
}

.status-badge-lg.offline {
  background: var(--error-bg);
  color: var(--error);
}

.role-badge-lg {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.node-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.quick-stat {
  background: var(--slate-bg);
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.quick-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.quick-value .unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.quick-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  display: block;
}

.node-resources h4,
.node-performance h4,
.node-actions-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}

.resource-gauges {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resource-gauge {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

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

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

.gauge-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gauge-bar {
  height: 8px;
  background: var(--slate-bg);
  border-radius: 4px;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.perf-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--slate-bg);
  border-radius: 0.5rem;
}

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

.perf-value {
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.action-buttons-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.action-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--slate-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.action-btn:hover {
  background: var(--card-bg);
  border-color: var(--terracotta);
}

.action-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

.action-btn.primary:hover {
  background: var(--teal-dark);
}

.action-btn.danger {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

.action-btn.danger:hover {
  background: var(--error);
  color: white;
}

/* ================================================================
   Metrics Page V2 - Enhanced Visualizations
   ================================================================ */

.metrics-page-v2 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.metrics-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.metrics-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--white);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.metrics-tab {
  padding: 0.625rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.metrics-tab:hover {
  color: var(--text-primary);
}

.metrics-tab.active {
  background: var(--teal);
  color: white;
}

.metrics-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.time-range-selector-v2 {
  display: flex;
  gap: 0.25rem;
  background: var(--white);
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

.metrics-export-btn {
  padding: 0.625rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.metrics-export-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

/* Metrics Summary Row */
.metrics-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.metric-summary-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease;
}

.metric-summary-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.summary-icon.ops {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.summary-icon.latency {
  background: var(--info-bg);
  color: var(--info);
}

.summary-icon.cache {
  background: var(--success-bg);
  color: var(--success);
}

.summary-icon.uptime {
  background: var(--highlight);
  color: var(--terracotta-dark);
}

.summary-content {
  flex: 1;
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.summary-value .unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.summary-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.summary-trend {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.summary-trend.positive {
  color: var(--success);
}

.summary-trend.negative {
  color: var(--error);
}

.summary-trend.neutral {
  color: var(--text-muted);
}

/* Charts Grid */
.metrics-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.chart-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.chart-card.chart-large {
  grid-column: span 2;
}

.chart-card.chart-wide {
  grid-column: span 3;
}

.chart-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chart-title-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.375rem;
}

.legend-dot.read {
  background: var(--teal);
}

.legend-dot.write {
  background: var(--terracotta);
}

.chart-value-lg {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--teal);
}

.chart-body {
  padding: 1.25rem;
}

/* SVG Line Chart */
.line-chart {
  width: 100%;
  height: 150px;
}

.grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-line-reads {
  stroke: var(--teal);
  stroke-width: 2.5;
  fill: none;
}

.chart-line-writes {
  stroke: var(--terracotta);
  stroke-width: 2.5;
  fill: none;
}

.chart-area-reads {
  fill: rgba(20, 184, 166, 0.1);
}

.chart-x-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* Latency Histogram */
.latency-histogram {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.histogram-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--teal), rgba(20, 184, 166, 0.4));
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
  position: relative;
  transition: all 0.2s ease;
}

.histogram-bar:hover {
  transform: scaleY(1.05);
}

.histogram-bar.warning {
  background: linear-gradient(180deg, var(--warning), rgba(245, 158, 11, 0.4));
}

.histogram-bar .bar-label {
  position: absolute;
  bottom: -1.5rem;
  font-size: 0.625rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.histogram-bar .bar-value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.latency-percentiles {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.percentile {
  text-align: center;
}

.p-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.p-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Cache Donut */
.cache-donut {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
}

.cache-donut svg {
  width: 100%;
  height: 100%;
}

.cache-progress {
  transition: stroke-dashoffset 0.5s ease;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal);
}

.donut-unit {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.cache-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cache-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cache-stat-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.cache-stat-color.hit {
  background: var(--teal);
}

.cache-stat-color.miss {
  background: #e5e7eb;
}

.cache-stat-color.evict {
  background: var(--warning);
}

.cache-stat-info {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.cache-stat-info .stat-name {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.cache-stat-info .stat-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Health Matrix */
.health-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.health-badge.healthy {
  background: var(--success-bg);
  color: var(--success);
}

.health-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.health-node-card {
  background: var(--slate-bg);
  border-radius: 0.5rem;
  padding: 0.75rem;
  position: relative;
  border-left: 3px solid var(--success);
}

.health-node-card.warning {
  border-left-color: var(--warning);
}

.health-node-card.critical {
  border-left-color: var(--error);
}

.node-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.health-node-card .node-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.leader-badge {
  background: var(--teal);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.node-metrics-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mini-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
}

.mini-metric .label {
  color: var(--text-muted);
  width: 24px;
}

.mini-bar {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
}

.mini-metric .value {
  font-weight: 600;
  color: var(--text-secondary);
  width: 28px;
  text-align: right;
}

.node-status-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--success);
}

.health-node-card.warning .node-status-icon {
  color: var(--warning);
}

.health-node-card.critical .node-status-icon {
  color: var(--error);
}

/* Storage Visual */
.storage-visual {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.storage-ring-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.storage-ring-container svg {
  width: 100%;
  height: 100%;
}

.storage-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.storage-center .pct {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.storage-center .used {
  font-size: 0.6875rem;
  color: var(--text-muted);
  display: block;
}

.storage-details-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.storage-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.storage-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.storage-color.data {
  background: var(--teal);
}

.storage-color.wal {
  background: var(--terracotta);
}

.storage-color.free {
  background: #e5e7eb;
}

.storage-name {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.storage-size {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.storage-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Network Visual */
.network-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.network-direction {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.direction-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.direction-icon.inbound {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.direction-icon.outbound {
  background: var(--highlight);
  color: var(--terracotta-dark);
}

.direction-stats {
  flex: 1;
}

.direction-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.direction-sparkline {
  height: 30px;
}

.direction-sparkline svg {
  width: 100%;
  height: 100%;
}

.network-breakdown {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.breakdown-item {
  text-align: center;
}

.breakdown-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.125rem;
}

.breakdown-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Replication Visual */
.replication-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sync-badge {
  background: var(--success-bg);
  color: var(--success);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.raft-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.raft-stat {
  text-align: center;
}

.raft-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.raft-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.raft-value.leader {
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.replication-lag h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
}

.lag-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lag-node {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  width: 80px;
}

.lag-bar-container {
  flex: 1;
  height: 6px;
  background: var(--slate-bg);
  border-radius: 3px;
  overflow: hidden;
}

.lag-bar {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
}

.lag-value {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 500;
  width: 50px;
  text-align: right;
}

/* Query Analytics */
.query-type-filter {
  display: flex;
  gap: 0.25rem;
}

.filter-btn {
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  background: var(--slate-bg);
}

.filter-btn.active {
  background: var(--teal-bg);
  border-color: var(--teal);
  color: var(--teal-dark);
}

.query-stats-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.query-stat-box {
  flex: 1;
  background: var(--slate-bg);
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}

.query-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.query-stat-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.top-queries h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
}

.query-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.query-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--slate-bg);
  border-radius: 0.5rem;
}

.query-item code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  padding: 0;
}

.query-time {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--warning);
}

.query-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Metrics Responsive */
@media (max-width: 1200px) {
  .metrics-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .metrics-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-card.chart-large {
    grid-column: span 2;
  }

  .chart-card.chart-wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .metrics-summary-row {
    grid-template-columns: 1fr;
  }

  .metrics-charts-grid {
    grid-template-columns: 1fr;
  }

  .chart-card.chart-large,
  .chart-card.chart-wide {
    grid-column: span 1;
  }

  .metrics-top-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .metrics-actions {
    width: 100%;
    justify-content: space-between;
  }

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

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

/* =============================================================================
   Node Action Messages & Logs View
   ============================================================================= */

.node-action-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 8px;
  color: var(--text-primary);
}

.node-action-message span {
  flex: 1;
}

.dismiss-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Node Logs Section */
.node-logs-section {
  margin-top: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.logs-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.close-logs-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-logs-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.logs-container {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.log-entry:last-child {
  margin-bottom: 0;
}

.log-timestamp {
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 160px;
}

.log-level {
  font-weight: 600;
  min-width: 50px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
}

.log-message {
  flex: 1;
  color: var(--text-primary);
}

/* Log level colors */
.log-error {
  background: rgba(239, 68, 68, 0.1);
}

.log-error .log-level {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.log-warn {
  background: rgba(245, 158, 11, 0.1);
}

.log-warn .log-level {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
}

.log-info {
  background: rgba(59, 130, 246, 0.05);
}

.log-info .log-level {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.2);
}

.log-debug {
  background: rgba(255, 255, 255, 0.02);
}

.log-debug .log-level {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
}

/* Scrollbar styling for logs */
.logs-container::-webkit-scrollbar {
  width: 6px;
}

.logs-container::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: 3px;
}

.logs-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.logs-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   Modal Forms & Browser Enhancements
   ============================================================================= */

.status-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}

.status-message.success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.status-message.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.add-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.add-form-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  resize: vertical;
  transition: all 0.2s ease;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--teal), #0d9488);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.btn-secondary {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.browser-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.toolbar-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.toolbar-btn.primary {
  background: linear-gradient(135deg, var(--teal), #0d9488);
  border-color: transparent;
  color: white;
}

.toolbar-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.kv-stats {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.key-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-cell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Query Builder tab styles */
.query-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.query-tab:hover {
  color: var(--text-primary);
}

.query-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* Collections Browser enhancements */
.collections-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

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

.toolbar-btn.small {
  padding: 4px 12px;
  font-size: 16px;
  line-height: 1;
}

.documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

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

/* Graph Explorer enhancements */
.graph-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.graph-select {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

.graph-stats {
  display: flex;
  gap: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin-bottom: 16px;
}

.graph-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.graph-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--teal);
}

.graph-stat .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Query Builder enhancements */
.query-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.query-type-badge {
  padding: 4px 10px;
  background: rgba(20, 184, 166, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  margin-right: auto;
}

.query-history {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.history-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

.history-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-item {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--teal);
  color: var(--text-primary);
}

/* =============================================================================
   Metrics Tab Content Styles
   ============================================================================= */

.metrics-tab-content {
  padding: 20px 0;
}

/* Performance Tab */
.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.perf-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.perf-card.large {
  grid-column: span 2;
}

.perf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.perf-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.perf-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.perf-badge.good {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.perf-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.perf-metric {
  text-align: center;
}

.perf-metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.perf-metric-value .unit {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: 2px;
}

.perf-metric-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.perf-chart-placeholder {
  height: 150px;
}

.cpu-cores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cpu-core {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.core-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.core-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.core-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #0d9488);
  border-radius: 4px;
}

.core-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.memory-breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.memory-item {
  display: grid;
  grid-template-columns: 100px 1fr 120px;
  align-items: center;
  gap: 12px;
}

.mem-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.mem-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.mem-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #0d9488);
  border-radius: 5px;
}

.mem-fill.cache { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.mem-fill.conn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.mem-fill.sys { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }

.mem-value {
  font-size: 12px;
  color: var(--text-primary);
  text-align: right;
}

.thread-pool-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pool-stat {
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.pool-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--teal);
}

.pool-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Storage Tab */
.storage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.storage-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.storage-card.large {
  grid-column: span 2;
}

.storage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.storage-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.storage-visual {
  display: flex;
  gap: 40px;
  align-items: center;
}

.storage-ring {
  position: relative;
  width: 160px;
  height: 160px;
}

.storage-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 12;
}

.ring-fill {
  fill: none;
  stroke: var(--teal);
  stroke-width: 12;
  stroke-linecap: round;
}

.ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ring-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.ring-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.storage-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.storage-type {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.type-color.data { background: var(--teal); }
.type-color.index { background: #3b82f6; }
.type-color.wal { background: #f59e0b; }
.type-color.temp { background: #8b5cf6; }
.storage-type.free .type-color { background: rgba(255, 255, 255, 0.2); }

.type-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.type-size {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.io-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.io-metric {
  display: grid;
  grid-template-columns: 60px 100px 1fr;
  align-items: center;
  gap: 12px;
}

.io-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.io-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.io-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.io-fill {
  height: 100%;
  border-radius: 4px;
}

.io-fill.read { background: var(--teal); }
.io-fill.write { background: #f59e0b; }
.io-fill.iops { background: #3b82f6; }

.table-sizes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.table-size-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.table-name {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.table-rows {
  font-size: 12px;
  color: var(--text-secondary);
}

.table-size-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}

.status-badge.running {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.compaction-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compaction-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comp-label {
  font-size: 13px;
  color: var(--text-secondary);
  width: 80px;
}

.comp-progress {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.comp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #0d9488);
  border-radius: 6px;
}

.comp-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  width: 50px;
}

.compaction-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Network Tab */
.network-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.network-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.network-card.large {
  grid-column: span 2;
}

.network-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.network-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.throughput-metrics {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.throughput-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.throughput-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.throughput-icon.in {
  background: rgba(20, 184, 166, 0.15);
  color: var(--teal);
}

.throughput-icon.out {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.throughput-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.throughput-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.network-chart {
  height: 150px;
}

.connections-donut {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}

.connections-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 10;
}

.donut-active {
  fill: none;
  stroke: var(--teal);
  stroke-width: 10;
  stroke-linecap: round;
}

.donut-idle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 10;
  stroke-linecap: round;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

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

.connection-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.legend-item {
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-item.active::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal);
  margin-right: 6px;
}

.legend-item.idle::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  margin-right: 6px;
}

.replication-nodes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repl-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 3px solid transparent;
}

.repl-node.leader {
  border-left-color: var(--teal);
  background: rgba(20, 184, 166, 0.05);
}

.repl-node.follower {
  border-left-color: rgba(255, 255, 255, 0.3);
}

.repl-node-name {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
}

.repl-lag {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
}

.packet-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.packet-stat {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.packet-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.packet-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.packet-value.good {
  color: #22c55e;
}

/* Chart time badge */
.chart-time-badge {
  padding: 3px 10px;
  background: rgba(20, 184, 166, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  margin-left: 12px;
}

/* Responsive */
@media (max-width: 1200px) {
  .performance-grid,
  .storage-grid,
  .network-grid {
    grid-template-columns: 1fr;
  }

  .perf-card.large,
  .storage-card.large,
  .network-card.large {
    grid-column: span 1;
  }

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

  .cpu-cores-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .storage-visual {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================
   Settings Page Styles
   ================================================================ */

/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--slate-bg);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.settings-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.settings-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.settings-tab.active {
  background: var(--white);
  color: var(--teal-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Section Header Row */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header-row h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Form Elements */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-grid.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input,
.form-select {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--teal);
}

.checkbox-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 1.625rem;
  margin-top: 0.125rem;
}

/* User Management Table */
.users-table-container {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th {
  background: var(--slate-bg);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.users-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.users-table tr:last-child td {
  border-bottom: none;
}

.users-table tr:hover td {
  background: var(--highlight);
}

.user-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 500;
  color: var(--text-primary);
}

.user-email {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Role Badges */
.role-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
}

.role-badge.role-admin {
  background: var(--error-bg);
  color: var(--error);
}

.role-badge.role-developer {
  background: var(--info-bg);
  color: var(--info);
}

.role-badge.role-operator {
  background: var(--warning-bg);
  color: #b45309;
}

.role-badge.role-analyst {
  background: #f3e8ff;
  color: #7c3aed;
}

.role-badge.role-viewer {
  background: var(--slate-bg);
  color: var(--text-secondary);
}

/* Status Badges */
.status-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge.enabled {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.enabled::before {
  background: var(--success);
}

.status-badge.disabled {
  background: var(--slate-bg);
  color: var(--text-muted);
}

.status-badge.disabled::before {
  background: var(--text-muted);
}

/* User Actions */
.user-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-icon:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-bg);
}

.btn-icon.danger:hover {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-bg);
}

.btn-icon svg {
  width: 14px;
  height: 14px;
}

/* RBAC Roles Grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.role-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.role-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.role-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.role-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.role-card-title h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.system-badge,
.custom-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.system-badge {
  background: var(--slate-bg);
  color: var(--text-secondary);
}

.custom-badge {
  background: var(--teal-bg);
  color: var(--teal-dark);
}

.role-user-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.role-description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Permission Tags */
.permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.permission-tag {
  padding: 0.25rem 0.5rem;
  background: var(--highlight);
  border: 1px solid var(--border-cream);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: var(--terracotta-dark);
  font-family: var(--font-mono);
}

/* Permissions Grid */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.permission-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.permission-checkbox:hover {
  border-color: var(--teal);
  background: var(--teal-bg);
}

.permission-checkbox input {
  accent-color: var(--teal);
}

.permission-checkbox span {
  font-size: 0.75rem;
  color: var(--text-primary);
}

/* Add User/Role Form */
.add-form {
  background: var(--teal-bg);
  border: 1px solid var(--border-teal);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.add-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.add-form-header h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal-dark);
  margin: 0;
}

.add-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Settings Message */
.settings-message {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-message.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

.settings-message.error {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error);
}

/* 2FA Section */
.twofa-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.twofa-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--slate-bg);
  border-radius: 0.5rem;
}

.twofa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twofa-icon.enabled {
  background: var(--success-bg);
  color: var(--success);
}

.twofa-icon.disabled {
  background: var(--warning-bg);
  color: var(--warning);
}

.twofa-icon svg {
  width: 24px;
  height: 24px;
}

.twofa-info h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.twofa-info p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.twofa-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.twofa-option {
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.twofa-option:hover {
  border-color: var(--teal);
  background: var(--teal-bg);
}

.twofa-option.active {
  border-color: var(--teal);
  background: var(--teal-bg);
}

.twofa-option-icon {
  width: 40px;
  height: 40px;
  background: var(--slate-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.twofa-option-icon svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.twofa-option.active .twofa-option-icon {
  background: var(--teal);
}

.twofa-option.active .twofa-option-icon svg {
  color: white;
}

.twofa-option h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.twofa-option p {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

/* Access Policies */
.access-policies {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.policy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.policy-info h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.policy-info p {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.policy-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.policy-toggle.active {
  background: var(--teal);
}

.policy-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.policy-toggle.active::after {
  transform: translateX(20px);
}

/* Danger Warning Modal */
.danger-warning {
  text-align: center;
  padding: 1.5rem;
  background: var(--error-bg);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.danger-warning svg {
  color: var(--error);
  margin-bottom: 1rem;
}

.danger-warning h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--error);
  margin: 0 0 0.5rem 0;
}

.danger-warning p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.confirm-input-group {
  margin-top: 1rem;
}

.confirm-input-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.confirm-input-group strong {
  color: var(--error);
}

.modal-content.small {
  max-width: 480px;
}

.modal-header.danger {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-bottom: 1px solid var(--error);
}

.modal-header.danger h2 {
  color: var(--error);
}

/* Disabled state for selects */
.setting-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--slate-bg);
}

/* Settings Responsive */
@media (max-width: 768px) {
  .settings-tabs {
    flex-direction: column;
  }

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

  .form-group.full-width {
    grid-column: span 1;
  }

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

  .twofa-options {
    grid-template-columns: 1fr;
  }

  .users-table-container {
    overflow-x: auto;
  }

  .users-table {
    min-width: 600px;
  }
}