/**
 * Ex Nihilo Admin Console - Styles
 * Modern dark theme with professional aesthetics
 * 
 * Design tokens imported from design-system.css
 */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

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

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1117 0%, #1c2128 100%);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.login-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  transition: var(--transition-slow);
  overflow: hidden;
  width: 100%;
  max-width: 400px;
}

.login-box.collapsed {
  min-height: 140px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: var(--transition-base);
}

.login-box.collapsed.visible {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.login-box.collapsed .login-content {
  display: none !important;
}

.login-box.collapsed .brand-logo {
  transform: translateY(-3px);
}

.login-box.expanded {
  min-height: auto;
  padding: 40px;
}

.login-box.expanded .brand-logo {
  transform: translateY(0);
}

.brand-logo {
  font-size: 5rem;
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition-slow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo .symbol,
.brand-logo .brace {
  font-size: 5rem;
}

.brand-logo.shrinking {
  font-size: 2.5rem;
}

.brand-logo.shrinking .symbol,
.brand-logo.shrinking .brace {
  font-size: 2.5rem;
}

.brand-logo.clickable {
  cursor: pointer;
}

.brand-logo.clickable .symbol {
  transition: var(--transition-fast);
  cursor: pointer;
}

.brand-logo.clickable:hover .symbol {
  transform: scale(1.15);
}

.brand-logo .brace {
  color: var(--text-muted);
  font-weight: 300;
  flex-shrink: 0;
}

.brand-logo .symbol {
  background: var(--btn-bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--accent-primary); /* Fallback for browsers that don't support background-clip */
  display: inline-block;
  transition: var(--transition-fast);
  line-height: 1;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  flex-shrink: 0;
}

.brand-logo .brand-text {
  display: none;
  color: var(--text-primary);
  margin-left: 0.3em;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 0.05em;
  position: relative;
  top: 0.08em;
}

.expanded .brand-logo {
  margin-bottom: 5px;
}

.logo-spacer {
  display: none;
}

.login-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition-slow);
  pointer-events: none;
}

.login-content.visible {
  opacity: 1;
  max-height: none;
  pointer-events: auto;
}

.brand-subtitle {
  text-align: center;
  margin-bottom: 25px;
  margin-top: 0;
}

.brand-subtitle .powered-by {
  font-size: 0.7rem;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-weight: 700;
}

.brand-subtitle h2 {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  margin-top: 15px;
  font-weight: normal;
  letter-spacing: 0.03em;
}

.brand-subtitle h2 .game-name-text {
  color: var(--text-primary);
  font-weight: 500;
}

.brand-subtitle h2 .admin-console-text {
  color: var(--text-primary);
  font-weight: 500;
}

.placeholder-brand {
  font-weight: 700;
  color: var(--text-primary);
}

.powered-by a,
.powered-by a .placeholder-brand {
  color: #888 !important;
  text-decoration: none;
}

.powered-by a:hover,
.powered-by a:hover .placeholder-brand {
  color: #999 !important;
}

.placeholder-logo {
  font-weight: 900 !important;
  color: var(--accent-green);
  margin-left: 2px;
}

.placeholder-logo .logo-brace {
  color: var(--text-muted);
}

/* Animation keyframes */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes greenFlash {
  0%, 100% { 
    color: var(--text-primary);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% { 
    color: var(--accent-green);
    filter: drop-shadow(0 0 12px var(--accent-green));
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.symbol.flash {
  animation: flash 0.15s ease-in-out;
}

.symbol.pulse {
  animation: pulse 0.08s ease-in-out;
}

.symbol.green-flash {
  animation: greenFlash 0.4s ease-in-out;
  background: var(--accent-green) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

.login-box.error-state {
  border-color: var(--accent-red);
  box-shadow: 0 8px 32px rgba(248, 81, 73, 0.2);
}

.login-box.shake {
  animation: shake 0.5s;
}

.btn.error {
  background: var(--accent-red);
  pointer-events: none;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.form-group input {
  width: 100%;
  padding: var(--input-padding);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: var(--transition-fast);
}

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

.password-input-wrapper input {
  padding-right: 45px;
}

.password-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.password-toggle:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.password-toggle.active {
  color: var(--accent-primary);
}

.eye-icon {
  width: 20px;
  height: 20px;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow);
}

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

.btn {
  padding: var(--btn-padding-primary);
  background: var(--btn-bg);
  color: #fff;
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-primary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

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

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  width: 100%;
  background: var(--btn-bg);
}

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

.error-message {
  margin-top: 15px;
  padding: 12px;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid var(--accent-red);
  border-radius: 6px;
  color: var(--accent-red);
  font-size: 0.9rem;
  display: none;
}

/* ============================================
   2FA TOTP OVERLAY MODAL
   ============================================ */

.totp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: var(--transition-base);
}

.totp-overlay.visible {
  opacity: 1;
}

.totp-modal {
  background: var(--modal-bg);
  border: var(--card-border);
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  box-shadow: var(--modal-shadow);
  max-width: 480px;
  width: 90%;
  transform: scale(0.9);
  transition: var(--transition-base);
}

.totp-overlay.visible .totp-modal {
  transform: scale(1);
}

.totp-modal h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.03em;
}

.totp-modal p {
  margin: 0 0 24px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
  font-weight: normal;
}

.totp-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 20px auto;
}

.totp-digit {
  width: 50px !important;
  height: 60px;
  padding: 0 !important;
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.totp-digit:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow);
  transform: scale(1.05);
}

.totp-actions {
  text-align: center;
  margin-top: 16px;
}

.backup-link {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: var(--transition-fast);
}

.backup-link:hover {
  color: var(--accent-primary);
}

.backup-input-wrapper {
  margin: 0 auto 20px auto;
  max-width: 280px;
}

.backup-code-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  letter-spacing: 2px;
  transition: var(--transition-fast);
}

.backup-code-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow);
}

.backup-code-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
  font-weight: normal;
  letter-spacing: normal;
}

/* Mobile adjustments for TOTP modal */
@media (max-width: 480px) {
  .totp-modal {
    padding: 24px 20px;
    width: 95%;
  }
  
  .totp-modal h3 {
    font-size: 1.1rem;
  }
  
  .totp-boxes {
    gap: 8px;
  }
  
  .totp-digit {
    width: 42px !important;
    height: 52px;
    font-size: 1.5rem;
  }
  
  .backup-code-input {
    font-size: 1.1rem;
  }
}

/* ============================================
   TRANSITION OVERLAY (Morph Animation)
   ============================================ */

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: var(--transition-slow);
  pointer-events: none;
}

.transition-overlay.hidden {
  opacity: 0;
}

body.loading {
  overflow: hidden;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  background: var(--navbar-bg);
  border-bottom: var(--navbar-border);
  padding: var(--navbar-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: var(--z-nav);
  height: var(--navbar-height);
  margin: 0 !important;
  flex-shrink: 0;
}

.nav-left {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  cursor: pointer;
  padding: 0px;
  user-select: none;
}

.nav-logo {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  position: relative;
  height: 1.6rem;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.nav-logo .brace {
  color: var(--text-muted);
  font-weight: 300;
}

.nav-logo .symbol {
  background: var(--btn-bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--accent-primary);
  display: inline-block;
  transition: var(--transition-fast);
  font-weight: 300;
}

.menu-toggle {
  width: 100%;
  text-align: center;
  margin-top: -6px;
}

.menu-label {
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  line-height: var(--line-height-tight);
  padding: 0;
  margin: 0;
}

.nav-logo-container:hover .menu-label {
  color: var(--text-primary);
}

.hamburger-icon {
  width: 16px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: var(--transition-fast);
}

.nav-logo-container:hover .hamburger-icon {
  display: flex;
  opacity: 1;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--btn-bg);
  border-radius: 2px;
}

.nav-logo-container:hover .nav-logo .symbol {
  opacity: 0;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition-base);
  z-index: var(--z-dropdown);
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-fast);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--border-color);
}

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

.menu-item:first-child {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.menu-item:last-child {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.menu-item:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.menu-item.active {
  background: rgba(88, 166, 255, 0.15);
  color: var(--accent-primary);
  border-left: 3px solid var(--accent-primary);
  font-weight: var(--font-weight-semibold);
  padding-left: calc(var(--space-3) - 3px); /* Compensate for border */
}

.menu-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

/* Nav Center - Stats */
.nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  justify-content: center;
  padding: 0 var(--space-5);
}

.stat-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.stat-inline-label {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.stat-inline-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  min-width: 50px;
}

.health-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.health-bar-mini {
  width: 3px;
  height: 14px;
  border-radius: 1px;
  transition: background 0.3s ease;
  /* Dark version of the health color (set by JS) */
  background: var(--bar-color-dark);
  --bar-color: var(--accent-green);
  --bar-color-dark: rgba(63, 185, 80, 0.2);
}

/* Active/lit state - controlled by JavaScript */
.health-bar-mini.active {
  background: var(--bar-color);
}

/* Nav Right */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-right span {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.btn-small {
  padding: var(--btn-padding-secondary);
  font-size: var(--btn-font-secondary);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--btn-radius);
  color: #fff;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

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

.btn-small:active {
  transform: scale(0.98);
}

.btn-small.active {
  background: var(--btn-bg-active);
}

.btn-icon {
  padding: var(--btn-padding-secondary);
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0rem;
  line-height: 1;
}

.btn-emoji {
  font-size: 1.0rem;
  line-height: 1;
  display: inline-block;
}

.btn-icon .icon-hidden {
  display: none;
}

/* ============================================
   CONTAINER
   ============================================ */

.container {
  max-width: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  animation: fadeIn 0.5s ease;
}

/* Database Warnings Container - No gap when empty */
.db-warnings-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
}

.db-warnings-container:not(:empty) {
  padding: var(--space-1) var(--space-3);
}

.db-warnings-container:empty {
  height: 0;
  padding: 0;
  border: none;
}

/* Individual Database Warning */
.db-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.12) 0%, rgba(218, 165, 32, 0.04) 100%);
  border: 1px solid var(--accent-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-sm);
  animation: slideDown 0.2s ease;
}

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

.db-warning-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

.db-warning-text {
  flex: 1;
  color: var(--text-secondary);
}

.db-warning-text strong {
  color: var(--accent-warning);
}

.db-warning-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.db-warning-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--btn-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.db-warning-btn:hover {
  background: var(--btn-bg-hover);
}

.db-warning-btn.primary {
  background: var(--accent-warning);
  color: #000;
}

.db-warning-btn.primary:hover {
  filter: brightness(1.1);
}

.db-warning-btn.dismiss {
  background: transparent;
  color: var(--text-muted);
  padding: var(--space-1);
}

.db-warning-btn.dismiss:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ============================================
   PERMISSION WARNINGS
   ============================================ */

/* Permission Warnings Container - Similar to db-warnings but per-page */
.permission-warnings-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
}

.permission-warnings-container:not(:empty) {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.permission-warnings-container:empty {
  height: 0;
  padding: 0;
  border: none;
}

/* Individual Permission Warning */
.permission-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.12) 0%, rgba(88, 166, 255, 0.04) 100%);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-sm);
  animation: slideDown 0.2s ease;
}

.permission-warning-icon {
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 2px;
}

.permission-warning-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.permission-warning-title {
  color: var(--accent-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-sm);
}

.permission-warning-text {
  color: var(--text-secondary);
  line-height: 1.4;
}

.permission-warning-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.permission-node {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: var(--font-xs);
  color: var(--text-primary);
}

.permission-node-icon {
  font-size: 0.9em;
}

.permission-warning-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: flex-start;
}

.permission-warning-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--btn-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.permission-warning-btn:hover {
  background: var(--btn-bg-hover);
}

.permission-warning-btn.primary {
  background: var(--accent-primary);
  color: #fff;
}

.permission-warning-btn.primary:hover {
  filter: brightness(1.1);
}

.permission-warning-btn.dismiss {
  background: transparent;
  color: var(--text-muted);
  padding: var(--space-1);
}

.permission-warning-btn.dismiss:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ============================================
   CUSTOM CONFIRMATION MODAL
   ============================================ */

.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.confirm-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 320px;
  width: 90%;
  text-align: center;
  animation: scaleIn 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.confirm-modal-icon {
  display: none;
}

.confirm-modal-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.confirm-modal-message {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.4;
}

.confirm-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.confirm-modal-actions .btn-small {
  min-width: 80px;
}

.confirm-modal-actions .btn-primary {
  background: var(--accent-warning);
  color: #000;
}

.confirm-modal-actions .btn-primary:hover {
  filter: brightness(1.1);
}

/* ============================================
   LOG CONTAINER & HEADER
   ============================================ */

.log-container {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Important for flex children with overflow */
  margin: 0 !important;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  gap: var(--space-3);
  flex-shrink: 0; /* Don't shrink the header */
}

.log-header-left,
.log-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.log-menu-container {
  position: relative;
  display: inline-block;
}

.log-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--btn-padding-secondary);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--btn-radius);
  color: #fff;
  font-size: var(--btn-font-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.log-header-btn:hover {
  background: var(--btn-bg-hover);
}

.log-header-btn:active {
  transform: scale(0.98);
}

.log-header-btn.active {
  background: var(--btn-bg-active);
}

/* Log Dropdown Menus (matches main nav style) */
.log-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  max-width: 400px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition-base);
  z-index: var(--z-dropdown);
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.log-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.log-dropdown-menu::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.log-dropdown-menu::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-sm);
}

.log-dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.log-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.log-dropdown-section {
  border-bottom: 1px solid var(--border-color);
}

.log-dropdown-section:last-child {
  border-bottom: none;
}

.log-dropdown-section:first-child .log-dropdown-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.log-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.log-dropdown-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
}

.log-dropdown-actions a {
  color: var(--accent-primary);
  text-decoration: none;
  cursor: pointer;
}

.log-dropdown-actions a:hover {
  text-decoration: underline;
}

.log-dropdown-actions span {
  color: var(--text-muted);
}

.log-dropdown-content {
  padding: 8px;
  overflow-y: auto;
  max-height: 300px;
}

.log-dropdown-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.log-dropdown-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-sm);
}

.log-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.log-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.dropdown-search {
  padding: var(--space-1) var(--space-2);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  width: 80px;
}

.dropdown-search:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.dropdown-search-main {
  width: 100%;
  padding: var(--space-2) var(--space-2);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.dropdown-search-main:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.log-header-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.log-header-checkbox:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.log-header-checkbox input {
  cursor: pointer;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.filter-checkbox input {
  cursor: pointer;
}

.filter-checkbox:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Command Input */
.command-input-container {
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  padding: var(--space-2) var(--space-3);
  flex-shrink: 0; /* Don't shrink the command input */
}

.command-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.command-prompt {
  color: var(--accent-green);
  font-weight: 600;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.95rem;
}

.command-input {
  flex: 1;
  padding: var(--space-2) var(--space-2);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-size-sm);
}

.command-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.command-send-btn {
  padding: var(--btn-padding-secondary);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--btn-radius);
  color: #fff;
  font-size: var(--btn-font-secondary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.command-send-btn:hover {
  background: var(--btn-bg-hover);
}

.command-send-btn:active {
  transform: scale(0.98);
}

.command-send-btn.active {
  background: var(--btn-bg-active);
}

/* ============================================
   LOG VIEWER
   ============================================ */

.log-viewer {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  min-height: 0; /* Important for flex children with overflow */
}

.log-viewer::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.log-viewer::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-sm);
}

.log-viewer::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.log-viewer::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.log-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
  font-size: 1.1rem;
}

.log-entry {
  padding: var(--space-1) var(--space-2);
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: var(--transition-fast);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.log-entry .log-time,
.log-entry .log-category {
  flex-shrink: 0;
}

.log-entry .log-text {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.log-entry:hover {
  background: var(--bg-hover);
}

.log-time {
  color: var(--text-muted);
  font-size: 0.75rem;
  opacity: 0.7;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.log-category {
  font-weight: 600;
  min-width: 100px;
  display: inline-block;
  font-size: 0.8rem;
}

.log-text {
  color: var(--text-primary);
  font-size: 0.8rem;
}

/* Display toggles */
.log-viewer.hide-timestamps .log-time {
  display: none;
}

.log-viewer.hide-categories .log-category {
  display: none;
}

.log-viewer.hide-indicator .log-entry {
  border-left-color: transparent !important;
}

.log-viewer.minimal-spacing .log-entry {
  padding: 2px 8px;
  margin-bottom: 0;
  line-height: 1.2;
}

.log-viewer.minimal-spacing {
  line-height: 1.2;
}

/* Category-specific colors */
.log-debug { border-left-color: var(--text-muted); }
.log-debug .log-category { color: var(--text-muted); }

.log-events { border-left-color: var(--accent-info); }
.log-events .log-category { color: var(--accent-info); }

.log-channels { border-left-color: var(--accent-secondary); }
.log-channels .log-category { color: var(--accent-secondary); }

.log-errors { border-left-color: var(--accent-red); }
.log-errors .log-category { color: var(--accent-red); }

.log-security { border-left-color: var(--accent-yellow); }
.log-security .log-category { color: var(--accent-yellow); }

.log-performance { border-left-color: var(--accent-green); }
.log-performance .log-category { color: var(--accent-green); }

.log-actions { border-left-color: #79c0ff; }
.log-actions .log-category { color: #79c0ff; }

.log-commands { border-left-color: #6e7681; }
.log-commands .log-category { color: #6e7681; }

/* Documentation Viewer */
.doc-viewer {
  padding: var(--space-4);
  overflow-y: auto;
  font-family: var(--font-body);
  line-height: 1.6;
}

.doc-viewer h1 {
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
}

.doc-viewer h1:first-child {
  margin-top: 0;
}

.doc-viewer h2 {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-5) 0 var(--space-2) 0;
  color: var(--text-primary);
}

.doc-viewer h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-4) 0 var(--space-2) 0;
  color: var(--text-secondary);
}

.doc-viewer h4 {
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-3) 0 var(--space-1) 0;
  color: var(--text-secondary);
}

.doc-viewer p {
  margin: var(--space-2) 0;
  color: var(--text-primary);
}

.doc-viewer code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent-blue);
}

.doc-viewer pre {
  background: var(--bg-secondary);
  padding: var(--space-3);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: var(--space-2) 0;
  border: 1px solid var(--border-color);
}

.doc-viewer pre code {
  background: none;
  padding: 0;
  color: var(--text-primary);
}

.doc-viewer ul, .doc-viewer ol {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.doc-viewer li {
  margin: var(--space-1) 0;
  color: var(--text-primary);
}

.doc-viewer table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
}

.doc-viewer th {
  background: var(--bg-secondary);
  padding: var(--space-2);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.doc-viewer td {
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.doc-viewer blockquote {
  border-left: 4px solid var(--accent-blue);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.doc-viewer a {
  color: var(--accent-blue);
  text-decoration: none;
}

.doc-viewer a:hover {
  text-decoration: underline;
}

.doc-viewer hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--space-4) 0;
}

.doc-viewer img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-2) 0;
}

.log-combat { border-left-color: #ff6b6b; }
.log-combat .log-category { color: #ff6b6b; }

.log-error {
  text-align: center;
  color: var(--accent-red);
  padding: 40px;
  font-size: 1.1rem;
}

/* ============================================
   VIEWS
   ============================================ */

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

/* Note: Main .view styles are defined at line ~923. Animation applied inline where needed. */

.view-placeholder {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-7);
  text-align: center;
  flex-shrink: 0; /* Don't shrink placeholder */
}

.view-placeholder h2 {
  color: var(--text-primary);
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.view-placeholder p {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  /* Login Page Mobile Optimizations */
  .login-page {
    padding: 20px 0;
  }
  
  .login-container {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  
  .login-box {
    width: 100%;
    max-width: 100%;
    padding: 30px 20px;
    margin: 0 auto;
  }
  
  .login-box.collapsed {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  
  .login-box.expanded {
    padding: 30px 20px;
  }
  
  .brand-logo {
    font-size: 4rem;
    width: 100%;
  }
  
  .brand-logo.shrinking {
    font-size: 2rem;
  }
  
  /* Force symbol and braces to absolute size on tablet/mobile */
  .brand-logo .symbol {
    font-size: 4rem !important;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  }
  
  .brand-logo .brace {
    font-size: 4rem !important;
  }
  
  .brand-logo.shrinking .symbol {
    font-size: 2rem !important;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  }
  
  .brand-logo.shrinking .brace {
    font-size: 2rem !important;
  }
  
  /* Navbar Mobile Optimizations */
  .navbar {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 12px;
  }
  
  .nav-center {
    order: 3;
    width: 100%;
    justify-content: space-around;
    padding: 10px 0 0 0;
    border-top: 1px solid var(--border-color);
  }
  
  .stat-inline {
    font-size: 0.75rem;
  }
  
  .stat-inline-value {
    min-width: 40px;
  }
  
  .health-bars {
    gap: 1px;
    height: 10px;
  }
  
  .health-bar-mini {
    width: 3px;
    height: 10px;
  }
  
  .nav-right {
    gap: 10px;
  }
  
  .nav-right span {
    display: none; /* Hide account name on mobile */
  }
  
  /* Dashboard Mobile Optimizations */
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .controls-left,
  .controls-right {
    width: 100%;
    justify-content: center;
  }
  
  .search-input {
    width: 100%;
  }
  
  .container {
    height: calc(100vh - 120px); /* More navbar height on mobile */
  }
  
  .log-viewer {
    font-size: 0.8rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .login-container {
    padding: 10px;
  }
  
  .login-box {
    padding: 20px 15px;
    border-radius: 8px;
  }
  
  .login-box.collapsed {
    padding: 0 15px;
    min-height: 120px;
  }
  
  .login-box.expanded {
    padding: 25px 15px;
  }
  
  .brand-logo {
    font-size: 3.5rem;
  }
  
  .brand-logo.shrinking {
    font-size: 1.75rem;
  }
  
  /* Force symbol and braces to absolute size on mobile */
  .brand-logo .symbol {
    font-size: 3.5rem !important;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  }
  
  .brand-logo .brace {
    font-size: 3.5rem !important;
  }
  
  .brand-logo.shrinking .symbol {
    font-size: 1.75rem !important;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  }
  
  .brand-logo.shrinking .brace {
    font-size: 1.75rem !important;
  }
  
  .brand-subtitle h2 {
    font-size: 0.85rem;
  }
  
  .powered-by {
    font-size: 0.65rem !important;
  }
  
  .form-group input {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Even smaller navbar on tiny screens */
  .nav-logo {
    font-size: 1.4rem;
  }
  
  .menu-label {
    font-size: 0.65rem;
  }
  
  .stat-inline {
    flex-direction: column;
    gap: 2px;
    align-items: center;
  }
  
  .stat-inline-label {
    font-size: 0.65rem;
  }
  
  .stat-inline-value {
    font-size: 0.75rem;
  }
}

/* ============================================
   DATABASE WARNING & SETTINGS
   ============================================ */

/* Global Database Warning Banner */
.global-db-warning {
  margin: 0 0 var(--space-4) 0;
  background: linear-gradient(135deg, rgba(248, 81, 73, 0.15), rgba(210, 153, 34, 0.15));
  border: 2px solid var(--accent-danger);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  animation: slideDown 0.4s ease-out;
  flex-shrink: 0; /* Don't shrink the warning */
}

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

.global-db-warning-content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.global-db-warning .warning-icon {
  font-size: 2rem;
  flex-shrink: 0;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

.global-db-warning .warning-text {
  flex: 1;
}

.global-db-warning .warning-text strong {
  display: block;
  font-size: 1.1rem;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.global-db-warning .warning-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.global-db-warning .warning-btn {
  background: var(--accent-danger);
  color: white;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition: var(--transition-fast);
  font-size: var(--font-size-base);
}

.global-db-warning .warning-btn:hover {
  background: var(--accent-danger-hover);
  transform: translateX(3px);
}

/* Settings Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.info-item {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-item label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item span {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Settings Sections */
.settings-container {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Important for flex children with overflow */
  width: 100%; /* Fill available width */
}

.settings-container::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.settings-container::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-sm);
}

.settings-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-sm);
}

.settings-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.settings-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Slim Info Bar */
.settings-info-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.info-badge {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.info-divider {
  color: var(--border-color);
}

.settings-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
}

.settings-tab {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: var(--transition-fast);
  position: relative;
}

.settings-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-tab.active {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
  margin-bottom: -1px;
}

.settings-tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.settings-tab-content.active {
  display: block;
}

/* fadeIn animation defined in login section (line 1385) */

.settings-section {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.settings-section h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Collapsible Submenus */
.settings-submenu {
  margin-bottom: var(--space-3);
}

.submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.submenu-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.submenu-icon {
  font-size: var(--font-size-xs);
  transition: transform var(--transition-fast);
}

.submenu-toggle.active .submenu-icon {
  transform: rotate(90deg);
}

.submenu-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.submenu-content.open {
  max-height: 2000px;
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
  margin-top: -1px;
}

/* Setting Rows */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

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

.setting-row-full {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.setting-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.setting-label span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.setting-label small {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: var(--transition-fast);
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--btn-bg);
  border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: white;
}

/* Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--btn-bg);
  cursor: pointer;
  border: 2px solid var(--accent-primary);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--btn-bg);
  cursor: pointer;
  border: 2px solid var(--accent-primary);
}

.settings-description {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

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

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.form-help {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Database Status Cards */
.db-status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.db-status-card {
  background: var(--bg-tertiary);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  transition: var(--transition-fast);
}

.db-status-card.connected {
  border-color: var(--accent-success);
  background: rgba(63, 185, 80, 0.05);
}

.db-status-card.disconnected {
  border-color: var(--accent-danger);
  background: rgba(248, 81, 73, 0.05);
}

.db-status-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.db-icon {
  font-size: 1.8rem;
}

.db-status-header h3 {
  flex: 1;
  font-size: 1.2rem;
  margin: 0;
  color: var(--text-primary);
}

.db-status-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.db-status-badge.connected {
  background: var(--accent-success);
  color: white;
}

.db-status-badge.disconnected {
  background: var(--accent-danger);
  color: white;
}

.db-status-badge.checking {
  background: var(--accent-warning);
  color: white;
}

.db-status-details {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.db-status-details p {
  margin: 4px 0;
}

/* Setup Guide */
.setup-guide {
  background: var(--bg-tertiary);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin: var(--space-5) 0;
}

.setup-guide h3 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.setup-steps {
  margin: 0;
  padding-left: 24px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.setup-steps li {
  margin-bottom: 12px;
}

.setup-steps strong {
  color: var(--text-primary);
}

.setup-steps a {
  color: var(--accent-primary);
  text-decoration: none;
}

.setup-steps a:hover {
  text-decoration: underline;
}

.setup-steps code {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--accent-success);
}

.setup-note {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  color: var(--text-secondary);
}

/* Database Config Forms */
.db-config-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.db-config-form {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.db-config-form h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-5);
  color: var(--text-primary);
}

/* Button Styles (Settings-specific) */
.settings-container .btn {
  padding: var(--btn-padding-primary);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-container .btn-primary {
  background: var(--btn-bg);
  color: white;
}

.settings-container .btn-primary:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.settings-container .btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.settings-container .btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.settings-container .btn-danger {
  background: var(--accent-danger);
  color: white;
}

.settings-container .btn-danger:hover {
  background: var(--accent-danger-hover);
}

.settings-container .btn-success {
  background: var(--accent-success);
  color: white;
}

.settings-container .btn-success:hover {
  background: var(--accent-success-hover);
}

.settings-container .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-container .btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Appearance Settings */
.appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.appearance-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.appearance-group > label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* Theme Selector */
.theme-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-tertiary);
}

.theme-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.theme-option.active {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  box-shadow: var(--shadow-glow);
}

.theme-preview {
  width: 100%;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.theme-preview-color {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-preview-default {
  background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
}

.theme-preview-purple {
  background: linear-gradient(135deg, var(--purple-500), var(--blue-500));
}

.theme-preview-green {
  background: linear-gradient(135deg, var(--green-500), var(--cyan-500));
}

.theme-preview-red {
  background: linear-gradient(135deg, var(--red-500), var(--pink-500));
}

.theme-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.theme-option.active .theme-label {
  color: var(--accent-primary);
  font-weight: var(--font-weight-semibold);
}

/* Radio Groups */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-tertiary);
  user-select: none;
}

.radio-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.radio-option input[type="radio"] {
  cursor: pointer;
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
}

.radio-option span {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.radio-option:has(input:checked) {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.radio-option:has(input:checked) span {
  color: var(--accent-primary);
  font-weight: var(--font-weight-semibold);
}

/* Custom Color Pickers */
.custom-color-pickers {
  display: flex;
  gap: var(--space-4);
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.color-picker-item label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.color-picker-item input[type="color"] {
  width: 100%;
  height: 60px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-tertiary);
  padding: var(--space-1);
}

.color-picker-item input[type="color"]:hover {
  border-color: var(--accent-primary);
}

.color-picker-item input[type="color"]:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow);
}

/* Settings Actions */
.settings-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* Appearance Message */
.appearance-message {
  position: fixed;
  top: calc(var(--navbar-height) + var(--space-5));
  right: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  color: white;
  font-weight: var(--font-weight-semibold);
  z-index: 10001;
  animation: slideInRight 0.3s ease-out;
  box-shadow: var(--shadow-md);
  display: none;
}

.appearance-message-success {
  background: linear-gradient(135deg, var(--accent-success), var(--accent-info));
}

.appearance-message-warning {
  background: linear-gradient(135deg, var(--accent-warning), var(--accent-danger));
}

.appearance-message.hiding {
  animation: slideOutRight 0.3s ease-in;
}

/* Appearance Message Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* Color System Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal-content {
  background: var(--bg-secondary);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

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

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

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

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

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.color-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.color-system-section h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.color-var-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.color-var-item label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.color-var-item input[type="color"] {
  width: 50px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
}

/* ============================================
   SETTINGS VIEW (DROPDOWN STYLE)
   ============================================ */

/* Settings Container */
.settings-container {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Settings Header (Like Live Feed) */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.settings-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-header-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.settings-info-inline {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
}

.info-badge-inline {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.settings-header-right {
  display: flex;
  gap: var(--space-2);
}

/* Settings Tabs (Dropdown Style) */
.settings-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-4);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.settings-tab-container {
  position: relative;
}

.settings-tab {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}

.settings-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.settings-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* Settings Tab Dropdown Menu */
.settings-tab-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -1px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  min-width: 200px;
  overflow: hidden;
}

.settings-tab-dropdown.show {
  display: block;
}

.settings-tab-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
  cursor: pointer;
}

.settings-tab-item:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.settings-tab-item.active {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.coming-soon {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Settings Panels */
.settings-panels {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

.settings-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.settings-panel-content {
  max-width: 600px;
}

/* Database Configuration Styles */
.settings-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.db-status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.db-status-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.db-status-card.connected {
  border-color: var(--accent-success);
}

.db-status-card.disconnected {
  border-color: var(--accent-danger);
}

.db-status-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

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

.db-status-header h3 {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.db-status-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.db-status-badge.connected {
  background: var(--accent-success);
  color: white;
}

.db-status-badge.disconnected {
  background: var(--accent-danger);
  color: white;
}

.db-status-details {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.db-status-details p {
  margin: var(--space-1) 0;
}

.setup-guide {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.setup-guide h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
}

.setup-steps {
  margin: 0;
  padding-left: var(--space-5);
  line-height: 1.6;
}

.setup-steps li {
  margin-bottom: var(--space-2);
}

.setup-steps ul {
  margin: var(--space-1) 0;
  padding-left: var(--space-4);
}

.setup-note {
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.db-config-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.db-config-form {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.db-config-form h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
}

.form-group {
  margin-bottom: var(--space-3);
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"] {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.settings-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.config-messages {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: none;
}

.config-messages.show {
  display: block;
}

/* Settings Options Grid */
.settings-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Settings Option Button (Like Live Feed Buttons) */
.settings-menu-container {
  position: relative;
}

.settings-option-btn {
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}

.settings-option-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.settings-option-btn.active {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Settings Dropdown Menu (Like Live Feed Dropdowns) */
.settings-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  min-width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

.settings-dropdown-menu.show {
  display: block;
}

.settings-dropdown-content {
  padding: var(--space-3);
}

/* Settings Checkbox (Like Filter Checkbox) */
.settings-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.settings-checkbox:hover {
  color: var(--accent-primary);
}

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

/* Settings Slider Group */
.settings-slider-group {
  margin: var(--space-2) 0;
}

.settings-slider-group label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.slider-value {
  float: right;
  color: var(--accent-primary);
}

.settings-slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--btn-bg);
  cursor: pointer;
  border: 1px solid var(--accent-primary);
}

.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--btn-bg);
  cursor: pointer;
  border: 1px solid var(--accent-primary);
}

/* Settings Divider */
.settings-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) 0;
}

/* Mobile Responsiveness for Settings */
@media (max-width: 768px) {
  .settings-header {
    padding: var(--space-2) var(--space-3);
  }
  
  .settings-header-title {
    font-size: var(--font-size-sm);
  }
  
  .settings-info-inline {
    display: none;
  }
  
  .settings-tabs {
    padding: 0 var(--space-3);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .settings-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }
  
  .settings-panels {
    padding: var(--space-3);
  }
  
  .settings-panel-title {
    font-size: var(--font-size-base);
  }
  
  .db-status-cards,
  .db-config-forms {
    grid-template-columns: 1fr;
  }
  
  .settings-actions {
    flex-direction: column;
  }
  
  .settings-actions .btn {
    width: 100%;
  }
  
  .color-system-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-overlay {
    padding: var(--space-2);
  }
}

/* ============================================
   ACCOUNTS & CHARACTERS DATA BROWSER
   ============================================ */

/* Tab buttons in header - use log-header-btn style but add active state */
.log-header-btn.data-tab.active {
  background: var(--btn-bg-active);
}

.log-header-btn .tab-count {
  opacity: 0.7;
  font-size: 0.85em;
  margin-left: var(--space-1);
}

/* Search dropdown for data browser */
#dataSearchDropdown .search-autocomplete {
  position: relative;
  top: 0;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--font-xs);
}

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

.autocomplete-item .item-name {
  color: var(--text-primary);
}

.autocomplete-item .item-type {
  color: var(--text-muted);
  font-size: 0.85em;
  margin-left: auto;
}

/* Content Area */
.data-browser-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* List Panel - Tight & Clean */
.data-list-panel {
  width: 220px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.data-list {
  flex: 1;
  overflow-y: auto;
}

.data-list-loading {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Tight list items - just names */
.data-list-item {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.1s ease;
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.data-list-item:hover {
  background: var(--bg-hover);
}

.data-list-item.selected {
  background: var(--accent-primary);
  color: #fff;
}

.data-list-item .item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.data-list-item .item-badge {
  padding: 0 4px;
  background: var(--accent-warning);
  color: #000;
  font-size: 9px;
  font-weight: 600;
  border-radius: 2px;
  text-transform: uppercase;
}

.data-list-item.selected .item-badge {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Compact pagination */
.data-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  font-size: var(--font-xs);
}

.pagination-info {
  color: var(--text-muted);
}

/* Detail Panel - Clean & Tight */
.data-detail-panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--bg-primary);
}

.detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.detail-placeholder .placeholder-icon {
  font-size: 2em;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.detail-content {
  max-width: 600px;
  position: relative;
}

/* Slim header bar for detail */
.detail-header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.detail-header-bar h2 {
  font-size: var(--font-md);
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.detail-badge {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 2px;
  text-transform: uppercase;
}

.detail-badge.staff {
  background: var(--accent-secondary);
  color: #fff;
}

.detail-badge.superadmin {
  background: var(--accent-danger);
  color: #fff;
}

.detail-actions {
  display: flex;
  gap: var(--space-1);
}

/* Detail Table - Clean & Uniform */
.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  margin-bottom: var(--space-3);
}

.detail-table tr {
  border-bottom: 1px solid var(--border-color);
}

.detail-table td {
  padding: var(--space-1) 0;
}

.detail-table .dt-label {
  color: var(--text-muted);
  font-size: var(--font-xs);
  text-transform: uppercase;
  width: 100px;
  vertical-align: top;
}

.detail-table a {
  color: var(--accent-primary);
  text-decoration: none;
}

.detail-table a:hover {
  text-decoration: underline;
}

.text-muted {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Flag Badges - Compact */
.flag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.flag-badge {
  padding: 1px 5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: 10px;
  color: var(--text-secondary);
}

.flag-badge.active {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: #fff;
}

/* Edit Overlay - Animates in-place */
.detail-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  padding: var(--space-3);
  overflow-y: auto;
  animation: slideIn 0.2s ease;
}

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

.edit-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}

/* Edit Form Elements */
.edit-form-section {
  margin-bottom: var(--space-2);
}

.edit-form-section label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.edit-form-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.edit-form-row label {
  width: 80px;
  margin: 0;
  flex-shrink: 0;
}

.edit-input,
.edit-input-small {
  padding: var(--space-1) var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.edit-input {
  flex: 1;
}

.edit-input-small {
  width: 80px;
}

.edit-input:focus,
.edit-input-small:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.edit-textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  resize: vertical;
}

.edit-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.edit-form-group.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.edit-form-group.checkbox-group label {
  margin: 0;
  text-transform: none;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.edit-form-group.checkbox-group input[type="checkbox"] {
  cursor: pointer;
}

/* Compact Sections */
.detail-section-compact {
  margin-bottom: var(--space-2);
}

.section-header-compact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-color);
}

.section-header-compact .section-count {
  opacity: 0.7;
}

/* Compact Character List */
.character-list-compact {
  font-size: var(--font-sm);
}

.character-list-compact .char-item {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.character-list-compact .char-item:hover {
  color: var(--accent-primary);
}

.character-list-compact .char-level {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Compact Data Preview */
.data-preview-compact {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  margin: var(--space-1) 0;
  max-height: 150px;
  overflow: auto;
  white-space: pre;
  color: var(--text-secondary);
}

.raw-yaml-compact {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow: auto;
  white-space: pre;
  color: var(--text-secondary);
}

/* Collapsible Sections - Compact */
.detail-section-compact.collapsible {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.detail-section-compact .collapsible-header {
  cursor: pointer;
  user-select: none;
  padding: var(--space-1) var(--space-2);
  border-bottom: none;
}

.detail-section-compact .collapsible-header:hover {
  background: var(--bg-hover);
}

.detail-section-compact .collapse-icon {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
  transition: transform 0.15s ease;
}

.detail-section-compact.collapsed .collapsible-content {
  display: none;
}

.detail-section-compact:not(.collapsed) .collapse-icon {
  transform: rotate(90deg);
}

.detail-section-compact .collapsible-content {
  padding: 0 var(--space-2) var(--space-2);
}

.collapsible.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

.collapsible-content {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-color);
}

.collapsible.collapsed .collapsible-content {
  display: none;
}

/* Data Preview (for objects/arrays) */
.data-preview {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
}

.data-preview .yaml-key {
  color: var(--accent-info);
}

.data-preview .yaml-value {
  color: var(--accent-success);
}

.data-preview .yaml-string {
  color: var(--accent-warning);
}

/* Raw YAML View */
.raw-view {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.raw-yaml, .raw-json {
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  max-height: 400px;
  white-space: pre;
  line-height: 1.5;
}

.raw-yaml .yaml-key {
  color: var(--accent-info);
}

.raw-yaml .yaml-value {
  color: var(--accent-success);
}

.raw-yaml .yaml-comment {
  color: var(--text-muted);
  font-style: italic;
}

.empty-state {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-2);
}

/* Responsive */
@media (max-width: 900px) {
  .data-browser-content {
    flex-direction: column;
  }
  
  .data-list-panel {
    width: 100%;
    max-height: 40%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  
  .data-browser-header {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .data-browser-search {
    width: 100%;
  }
}

/* ============================================
PLACEHOLDER VIEWS
   ============================================ */

/* Note: .view-placeholder already defined at line ~1589. Duplicate removed. */

/* ============================================
   MAIN CONTAINER & VIEWS
   ============================================ */

/* Duplicate definitions removed - see lines 910-930 for actual container/view styles */

/* ============================================
   EDIT MODAL STYLES
   ============================================ */

.modal-large {
  max-width: 700px;
  width: 90%;
}

.modal-small {
  max-width: 450px;
  width: 90%;
}

.modal-header-warning {
  background: linear-gradient(135deg, rgba(210, 153, 34, 0.2), rgba(248, 81, 73, 0.1));
  border-bottom: 1px solid var(--accent-warning);
}

.modal-header-warning h2 {
  color: var(--accent-warning);
}

/* Edit Form */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.edit-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.edit-form-group label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.edit-form-group label .field-type {
  font-weight: normal;
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.edit-form-group input,
.edit-form-group textarea,
.edit-form-group select {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-form-group input:focus,
.edit-form-group textarea:focus,
.edit-form-group select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 88, 166, 255), 0.2);
  outline: none;
}

.edit-form-group textarea {
  min-height: 100px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
}

.edit-form-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.edit-form-group.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.edit-form-group.readonly input,
.edit-form-group.readonly textarea {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
}

.edit-form-section {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.edit-form-section h4 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Validation Errors */
.edit-validation-errors {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.edit-validation-errors ul {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--accent-danger);
  font-size: var(--font-sm);
}

/* Confirmation Dialog */
.confirm-details {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  max-height: 150px;
  overflow-y: auto;
}

/* Audit Log Panel */
.audit-log-panel {
  position: fixed;
  right: 0;
  top: 60px;
  width: 350px;
  height: calc(100vh - 60px);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

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

.audit-log-header h3 {
  margin: 0;
  font-size: var(--font-md);
}

.audit-log-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.audit-entry {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--accent-info);
}

.audit-entry.dangerous {
  border-left-color: var(--accent-danger);
}

.audit-entry-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.audit-entry-action {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.audit-entry-changes {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.audit-entry-changes code {
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}

/* Danger Button Style */
.btn-danger {
  background: var(--accent-danger);
  color: white;
}

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

.btn-icon.btn-danger {
  background: transparent;
  color: var(--accent-danger);
}

.btn-icon.btn-danger:hover {
  background: rgba(248, 81, 73, 0.15);
}

/* Audit Log States */
.audit-loading, .audit-empty, .audit-error {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.audit-error {
  color: var(--accent-danger);
}

/* ============================================
   FILE EDITOR SYSTEM (Config & Help Files)
   ============================================ */

.file-editor-container {
  display: flex;
  gap: var(--space-3);
  height: 600px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* File List Panel */
.file-list-panel {
  width: 300px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-tertiary);
}

.file-list-header {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-2);
  background: var(--bg-secondary);
}

.file-search {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.file-search:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.file-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-1);
}

.file-list-loading,
.file-list-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.file-item {
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
  transition: var(--transition-fast);
}

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

.file-item.active {
  background: var(--accent-primary);
  color: #000;
}

.file-item-name {
  font-size: var(--font-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.file-item-info {
  font-size: var(--font-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

.file-item.active .file-item-info {
  color: rgba(0, 0, 0, 0.6);
}

/* File Editor Panel */
.file-editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.file-editor-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.file-editor-placeholder .placeholder-icon {
  font-size: 3em;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.file-editor-placeholder p {
  font-size: var(--font-lg);
  font-style: italic;
}

.file-editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-editor-header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
}

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

.file-editor-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.file-editor-info {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.code-editor {
  flex: 1;
  padding: var(--space-3);
  border: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-sm);
  line-height: 1.6;
  resize: none;
  tab-size: 2;
}

.code-editor:focus {
  outline: none;
}

.editor-messages {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  min-height: 40px;
}

.editor-message {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  margin-bottom: var(--space-1);
}

.editor-message.success {
  background: rgba(63, 185, 80, 0.15);
  color: var(--accent-success);
  border-left: 3px solid var(--accent-success);
}

.editor-message.error {
  background: rgba(248, 81, 73, 0.15);
  color: var(--accent-danger);
  border-left: 3px solid var(--accent-danger);
}

.editor-message.info {
  background: rgba(88, 166, 255, 0.15);
  color: var(--accent-primary);
  border-left: 3px solid var(--accent-primary);
}

.editor-message.warning {
  background: rgba(210, 153, 34, 0.15);
  color: var(--accent-warning);
  border-left: 3px solid var(--accent-warning);
}

/* ============================================
   APPROVAL QUEUE SYSTEM
   ============================================ */

.approval-queue-container {
  display: flex;
  gap: var(--space-3);
  height: 600px;
}

.approval-list {
  width: 350px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow-y: auto;
  background: var(--bg-tertiary);
  padding: var(--space-2);
}

.approval-list-loading,
.approval-list-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.approval-item {
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-secondary);
}

.approval-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.approval-item.active {
  background: var(--accent-primary);
  color: #000;
  border-color: var(--accent-primary);
}

.approval-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.approval-item-type {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.approval-item.active .approval-item-type {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}

.approval-item-file {
  font-size: var(--font-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  word-break: break-all;
}

.approval-item-meta {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.approval-item.active .approval-item-meta {
  color: rgba(0, 0, 0, 0.6);
}

.approval-detail-panel {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
}

.approval-detail-header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
}

.approval-detail-header h4 {
  margin: 0;
  font-size: var(--font-lg);
}

.approval-detail-actions {
  display: flex;
  gap: var(--space-2);
}

.approval-detail-info {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.info-row {
  display: flex;
  padding: var(--space-1) 0;
  font-size: var(--font-sm);
}

.info-label {
  width: 120px;
  color: var(--text-muted);
  font-weight: 500;
}

.approval-content-preview {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.approval-content-preview h5 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.code-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-sm);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-primary);
}

/* Badge for approval count */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--accent-danger);
  color: white;
  font-size: var(--font-xs);
  font-weight: 600;
  margin-left: var(--space-1);
}

.menu-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--accent-warning);
  color: #000;
  font-size: var(--font-xs);
  font-weight: 700;
  margin-left: var(--space-2);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Compact Database Status */
.db-status-compact {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.db-status-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.db-icon {
  font-size: 1.2em;
}

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

.db-status-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
}

/* Collapsible Sections */
.collapsible-section {
  margin: var(--space-3) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.collapsible-header {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--text-primary);
  list-style: none;
  transition: var(--transition-fast);
}

.collapsible-header::-webkit-details-marker {
  display: none;
}

.collapsible-header::before {
  content: '▶';
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

details[open] .collapsible-header::before {
  transform: rotate(90deg);
}

.collapsible-header:hover {
  background: var(--bg-hover);
}

.collapsible-content {
  padding: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.db-config-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.db-config-form {
  background: var(--bg-secondary);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.db-config-form h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-md);
  color: var(--text-primary);
}

.form-group {
  margin-bottom: var(--space-2);
}

.form-group label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.form-group input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.setup-steps {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
  font-size: var(--font-sm);
  line-height: 1.8;
}

.setup-steps li {
  margin-bottom: var(--space-1);
}

.setup-steps code {
  background: var(--bg-primary);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: var(--font-xs);
}

/* Settings Content Container */
.settings-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-secondary);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.settings-panel {
  width: 100%;
  padding: var(--space-3);
  display: none; /* Hidden by default */
}

.settings-panel.active {
  display: block; /* Show active panel */
}

.settings-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--font-sm);
}

.settings-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.settings-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-3) 0;
}

.settings-slider-group {
  margin: var(--space-3) 0;
}

.settings-slider-group label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.slider-value {
  color: var(--accent-primary);
  font-weight: 600;
}

.settings-slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-tertiary);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
}

.settings-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: none;
}

.coming-soon {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================
   NOTIFICATION BADGE (Red bubble with count)
   ============================================ */

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  margin-left: var(--space-1);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  margin-left: var(--space-1);
}

/* ============================================
   EDIT QUEUE & HISTORY (matches Accounts layout)
   ============================================ */

/* Comments Section */
.comments-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.comments-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-sm);
  text-align: center;
  padding: var(--space-2);
}

.comment-item {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-sm);
}

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

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.comment-author {
  font-weight: var(--font-weight-semibold);
  color: var(--accent-primary);
}

.comment-time {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.comment-text {
  color: var(--text-primary);
  line-height: 1.4;
}

.comment-text.system-comment {
  color: var(--accent-warning);
  font-style: italic;
}

.comment-input-container {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.comment-input-container textarea {
  flex: 1;
  resize: vertical;
  min-height: 60px;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-family: inherit;
}

.comment-input-container textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Detail Section Headers */
.detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.detail-section-header h4 {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Approval Item Styles */
.data-list .approval-item {
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-secondary);
}

.data-list .approval-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.data-list .approval-item.selected {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--accent-primary);
}

.approval-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-1);
}

.approval-item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.approval-item-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

.approval-item-badge.pending {
  background: rgba(255, 193, 7, 0.2);
  color: var(--accent-warning);
}

.approval-item-badge.approved {
  background: rgba(63, 185, 80, 0.2);
  color: var(--accent-green);
}

.approval-item-badge.rejected {
  background: rgba(248, 81, 73, 0.2);
  color: var(--accent-red);
}

.approval-item-badge.applied {
  background: rgba(88, 166, 255, 0.2);
  color: var(--accent-primary);
}

.approval-item-meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.approval-item-type {
  text-transform: capitalize;
}

/* Code Preview */
.code-preview {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-sm);
  line-height: 1.5;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Status badges in detail view */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
}

.status-badge.pending {
  background: rgba(255, 193, 7, 0.2);
  color: var(--accent-warning);
}

.status-badge.approved {
  background: rgba(63, 185, 80, 0.2);
  color: var(--accent-green);
}

.status-badge.rejected {
  background: rgba(248, 81, 73, 0.2);
  color: var(--accent-red);
}

.status-badge.applied {
  background: rgba(88, 166, 255, 0.2);
  color: var(--accent-primary);
}

/* Legacy approval styles (keeping for compatibility) */
.approval-queue-container {
  flex: 1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow: hidden;
  min-height: 0;
}

.approval-list {
  width: 350px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow-y: auto;
  background: var(--bg-tertiary);
  padding: var(--space-2);
}

.approval-list-loading,
.approval-list-empty,
.data-list-loading {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.approval-item {
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-secondary);
}

.approval-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.approval-item.active {
  background: var(--accent-primary);
  color: #000;
  border-color: var(--accent-primary);
}

.approval-detail-panel {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  padding: var(--space-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

.approval-detail-header h4 {
  margin: 0;
  color: var(--text-primary);
}

.approval-detail-actions {
  display: flex;
  gap: var(--space-2);
}

.approval-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.info-row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-sm);
}

.info-label {
  color: var(--text-muted);
  min-width: 100px;
}

.approval-content-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.approval-content-preview h5 {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.code-preview {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-y: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* YAML Syntax Highlighting */
.code-editor.yaml-highlight {
  background: linear-gradient(to bottom, var(--bg-primary) 0%, rgba(33, 38, 45, 0.95) 100%);
}

/* Line numbers for code editor */
.code-editor-with-lines {
  display: flex;
  flex: 1;
}

.code-line-numbers {
  padding: var(--space-3) var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-sm);
  line-height: 1.6;
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border-color);
}

/* ============================================
   CONNECTIONS VIEW
   ============================================ */

/* Header title (non-button) */
.header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  padding: 6px 10px;
}

/* Dropdown select styling */
.dropdown-select {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
}

.dropdown-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* Duplicate IP highlighting */
.data-list-item.duplicate-ip {
  border-left: 3px solid var(--accent-warning);
}

.duplicate-badge {
  background: var(--accent-warning) !important;
  color: #000 !important;
  font-size: 9px !important;
}

/* Clickable account/character links in connections */
.link-to-account,
.link-to-character {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
}

.link-to-account:hover,
.link-to-character:hover {
  text-decoration: underline;
}

/* Connection State Badges (works with both .connection-state-badge and .item-badge) */
.connection-state-badge {
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* State colors - slim badges for list items */
.item-badge.state-connecting,
.state-connecting {
  background: var(--accent-warning) !important;
  color: #000 !important;
}

.item-badge.state-connected,
.state-connected {
  background: var(--accent-info) !important;
  color: #000 !important;
}

.item-badge.state-authenticating,
.state-authenticating {
  background: var(--accent-secondary) !important;
  color: #fff !important;
}

.item-badge.state-authenticated,
.state-authenticated {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

.item-badge.state-character-select,
.state-character-select {
  background: var(--accent-highlight) !important;
  color: #000 !important;
}

.item-badge.state-playing,
.state-playing {
  background: var(--accent-success) !important;
  color: #000 !important;
}

.item-badge.state-disconnected,
.state-disconnected {
  background: var(--accent-danger) !important;
  color: #fff !important;
}

.item-badge.state-unknown,
.state-unknown {
  background: var(--text-muted) !important;
  color: #000 !important;
}

/* Connection Detail Panel */
.connection-section-content {
  padding: var(--space-2);
}

.connection-section-content .detail-table {
  margin: 0;
}

.connection-section-content p.text-muted {
  margin: 0;
  font-size: var(--font-sm);
  font-style: italic;
}

/* Empty/Loading States for Connections */
.data-list-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.data-list-error {
  padding: var(--space-3);
  text-align: center;
  color: var(--accent-danger);
  font-size: var(--font-sm);
}

/* Header Checkbox */
.header-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.header-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Text Mono utility */
.text-mono {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-xs);
  word-break: break-all;
}

/* Form Textarea */
.form-textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-sm);
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 88, 166, 255), 0.2);
}

/* Danger Button variant */
.btn-danger {
  background: var(--accent-danger) !important;
  color: #fff !important;
  border: none;
}

.btn-danger:hover {
  filter: brightness(1.1);
}

/* ==========================================
   PERFORMANCE DASHBOARD
   ========================================== */

.performance-dashboard {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-primary);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(798px, 1fr));
  gap: 8px;
  align-content: start;
}

.perf-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.perf-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.perf-section-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.perf-status {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perf-status.healthy {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.perf-status.warning {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.perf-status.degraded {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 195px);
  gap: 6px;
  margin-bottom: 6px;
}

.perf-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px;
  transition: border-color 0.2s ease;
  min-height: 60px;
  display: flex;
  flex-direction: column;
}

.perf-card:hover {
  border-color: var(--accent-primary);
}

.perf-card-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-variant: small-caps;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  line-height: 1.1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.perf-card-value {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  line-height: 1.2;
}

.perf-card-subtext {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Chart Container - Match row width (4 boxes × 195px + 3 gaps × 6px = 798px) */
.perf-chart-container {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 6px;  /* Reduced top padding from 6px to 4px to move content up */
  padding-bottom: 6px;  /* Reduced from 8px */
  height: 88px;  /* Slightly reduced to account for padding changes */
  display: flex;
  flex-direction: column;
  width: 798px;
  overflow: hidden;
  position: relative;
}

.perf-chart-header {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-variant: small-caps;
  letter-spacing: 0.3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;  /* Reduced from 6px to move content up */
  flex-shrink: 0;
  min-height: 14px;  /* Reduced from 16px */
  position: relative;
  z-index: 2;
}

.perf-chart-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.perf-chart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.perf-chart-container canvas {
  display: block;
  background: transparent;
  max-width: 100%;
  line-height: 0;
  font-size: 0;
  position: relative;
  z-index: 1;
  margin-top: -2px;  /* Move canvas up 2 pixels as requested */
}

/* Performance Info Icons - White circle with lowercase 'i' cutout */
.perf-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  color: var(--bg-secondary);
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  cursor: help;
  transition: all 0.2s ease;
  user-select: none;
  margin-left: 4px;
  font-family: 'Segoe UI', Arial, sans-serif;
  line-height: 1;
  padding-top: 0px;
}

.perf-info-icon:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--bg-tertiary);
}

/* Canvas Tooltip for graph hover */
.canvas-tooltip {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--text-primary);
  z-index: 10001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  display: none;
  white-space: nowrap;
}

.perf-chart-range {
  display: flex;
  gap: 4px;
}

.perf-range-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  line-height: 1;
}

.perf-range-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.perf-range-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.perf-info-tooltip {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--font-xs);
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 250px;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.perf-info-tooltip strong {
  color: var(--accent-primary);
  display: block;
  margin-bottom: 4px;
}


/* Performance Alerts */
.perf-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.perf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.perf-alert.error {
  background: rgba(248, 113, 113, 0.1);
  border-left: 3px solid #f87171;
}

.perf-alert.warning {
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid #fbbf24;
}

.perf-alert-icon {
  font-size: var(--font-lg);
}

.perf-alert-content {
  flex: 1;
}

.perf-alert-message {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.perf-alert-time {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .perf-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .perf-card-value {
    font-size: var(--font-lg);
  }
}