/**
 * components.unified-modals.css
 * Unified styling system for all toolbar modals
 */

/* Settings Modal Root - Flex container for tabs + scrollable content */
.settings-modal-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Critical for flex children scrolling */
  overflow: hidden; /* Parent doesn't scroll, child does */
}

/* Remove padding from modal body when it contains settings-modal-root */
.modal-body:has(.settings-modal-root) {
  padding-top: 0 !important;
}

/* Settings Tab System */
.settings-tabs {
  flex-shrink: 0; /* Tabs don't shrink */
  display: flex;
  border-bottom: 2px solid #111;
  margin-bottom: 0;
  background: #111; /* Match modal header background */
  border-radius: 0; /* Remove top border radius to connect to header */
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);
}

/* Dark mode specific - higher specificity to override other styles */
body.dark-mode .settings-modal-root .settings-tabs,
.settings-modal-root .settings-tabs {
  background: #111 !important;
  border-bottom: 2px solid #111 !important;
}

.tab-button {
  flex: 1;
  background: none;
  border: none;
  color: #999;
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-button:hover {
  color: #ccc;
  background: rgba(255, 255, 255, 0.08);
}

.tab-button.active {
  color: #ffd700; /* Gold color to match game theme */
  border-bottom-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

/* Dark mode specific for active tab */
body.dark-mode .settings-modal-root .tab-button.active,
.settings-modal-root .tab-button.active {
  color: #ffd700 !important;
  border-bottom-color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.1) !important;
}

.tab-button.active:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffd700;
}

/* Dark mode specific for active tab arrow */
body.dark-mode .settings-modal-root .tab-button.active:after,
.settings-modal-root .tab-button.active:after {
  border-bottom-color: #ffd700 !important;
}

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

.tab-content:not(.active) {
  display: none;
}

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

/* Modal Form Structure - Scrollable flex child */
.unified-modal-form {
  flex: 1; /* Take remaining space */
  min-height: 0; /* Critical for proper flex scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.6vh;
  margin: 0;
  /* Ensure smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure form can scroll to bottom on all content */
.unified-modal-form::after {
  content: '';
  display: block;
  height: 20px; /* Extra padding at bottom for scroll clearance */
}

/* Section Headers */
.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 26px;
  font-weight: 700;
  color: #ffd700;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Form Fields */
.field {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
  color: #e4e4e4;
}

.field-input {
  background: #1a1a1a;
  border: 2px solid #ffd700;
  color: #e4e4e4;
  padding: 8px 12px;
  font-size: 0.875rem;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(255, 215, 0, 0.3);
  width: 100%;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  transition: all 0.2s ease;
}

/* Special styling for select dropdowns */
select.field-input {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffd700' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.field-input:hover {
  border-color: #ffed4e;
  box-shadow: 2px 2px 0 rgba(255, 237, 78, 0.5), 0 0 8px rgba(255, 215, 0, 0.3);
}

.field-input:focus {
  outline: none;
  border-color: #ffed4e;
  box-shadow: 2px 2px 0 rgba(255, 237, 78, 0.5), 0 0 12px rgba(255, 215, 0, 0.5);
}

.field-help {
  font-size: 0.75rem;
  color: #999;
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

/* Checkbox Styling */
.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 0;
}

.field-checkbox input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #4a90e2;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}

.checkbox-label {
  color: #e4e4e4;
  font-weight: 500;
  line-height: 1.4;
}

/* Radio Button Groups */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 6px 0;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.radio-option:hover {
  background-color: rgba(74, 144, 226, 0.1);
}

.radio-option input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #4a90e2;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.radio-option span {
  color: #e4e4e4;
  line-height: 1.4;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 16px; /* ensure equal vertical padding */
  border-top: 1px solid #444;
  position: relative;
  background: rgba(0,0,0,0.25);
  border-radius: 0 0 4px 4px;
}

/* Primary save button variant – gradient retro arcade style */
/* Simplified primary Save button style */
/* Brand primary button (Bangers font) */
/* Unified action buttons (currently only Save) */
.modal-actions .btn.save-btn {
  background: #2a2a2a;
  color: #eaeaea;
  border: 1px solid #444;
  font-size: 0.85rem;
  font-family: var(--font-family-brand,'Bangers',cursive);
  padding: 8px 20px;
  line-height: 1;
  box-shadow: 2px 2px 0 #000;
  letter-spacing: .5px;
  text-shadow: none;
}
.modal-actions .btn.save-btn:hover:not(:disabled) { background:#343434; transform:translate(1px,1px); box-shadow:1px 1px 0 #000; }
.modal-actions .btn.save-btn:active:not(:disabled) { transform:translate(2px,2px); box-shadow:none; }

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn-primary {
  background: #4a90e2;
  color: white;
  border-color: #357abd;
  box-shadow: 2px 2px 0 #357abd;
}

.btn-primary:hover {
  background: #357abd;
  box-shadow: 1px 1px 0 #357abd;
}

.btn-secondary {
  background: #2a2a2a;
  color: #e4e4e4;
  border-color: #444;
  box-shadow: 2px 2px 0 #444;
}

.btn-secondary:hover {
  background: #333;
  box-shadow: 1px 1px 0 #444;
}

.btn-danger {
  background: #e74c3c;
  color: white;
  border-color: #c0392b;
  box-shadow: 2px 2px 0 #c0392b;
}

.btn-danger:hover {
  background: #c0392b;
  box-shadow: 1px 1px 0 #c0392b;
}

.btn-success {
  background: #27ae60;
  color: white;
  border-color: #229954;
  box-shadow: 2px 2px 0 #229954;
}

.btn-success:hover {
  background: #229954;
  box-shadow: 1px 1px 0 #229954;
}

/* Content Styling */
.modal-content-scrollable {
  overflow-y: auto;
  padding: 16px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 1px solid #444;
  margin-bottom: 16px;
}

.content-section {
  margin-bottom: 20px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section h4 {
  color: #ffd700;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content-section p {
  color: #ccc;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.content-section ul {
  color: #ccc;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 20px;
}

.content-section li {
  margin-bottom: 4px;
}

/* Status Indicators */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-indicator.success {
  background: #27ae60;
  color: white;
}

.status-indicator.warning {
  background: #f39c12;
  color: white;
}

.status-indicator.error {
  background: #e74c3c;
  color: white;
}

.status-indicator.info {
  background: #4a90e2;
  color: white;
}

/* Filter Controls */
.filter-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #2a2a2a;
  border-radius: 6px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-group label {
  font-size: 0.75rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-group select,
.filter-group input {
  background: #444;
  border: 1px solid #666;
  color: #e4e4e4;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 3px;
  min-width: 80px;
}

/* Advanced Settings Buttons */
.btn.btn-warning {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  border-color: #d68910 !important;
  color: white !important;
}

.btn.btn-warning:hover {
  background: linear-gradient(135deg, #e67e22, #d35400) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(211, 84, 0, 0.3);
}

.btn.btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border-color: #a93226 !important;
  color: white !important;
}

.btn.btn-danger:hover {
  background: linear-gradient(135deg, #c0392b, #922b21) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(146, 43, 33, 0.3);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Small button variant for dev tools and replay controls */
.btn-sm {
  font-size: 0.75rem;
  padding: 4px 12px;
  line-height: 1.2;
  background: #2a2a2a;
  color: #e4e4e4;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
}

.btn-sm:hover {
  background: #333;
  border-color: #555;
  transform: translateY(-1px);
}

.btn-sm:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

/* Button groups */
.field > div:has(.btn) {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Theme preview enhancements */
.theme-preview-container {
  padding: 20px !important;
  background: #1a1a1a !important;
  border-radius: 8px !important;
  border: 1px solid #444 !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

.theme-preview-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(108, 92, 231, 0.1), transparent 70%);
  pointer-events: none;
}

.mini-power-card {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.mini-power-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Archives / Replay / AI Insight containers */
.archives-list ul li:hover { border-color:#333; background:#202020; }
.replay-list { font-size: 0.875rem; }
[data-ai-tree-host] { max-height:50vh; overflow:auto; }
[data-ai-tree-host]::-webkit-scrollbar { width:8px; }
[data-ai-tree-host]::-webkit-scrollbar-track { background:#111; }
[data-ai-tree-host]::-webkit-scrollbar-thumb { background:#333; border-radius:4px; }

/* Analytics & Insights Tab */
.analytics-overview-panel {
  margin-top: 0.8vh;
  padding: 1.2vh;
  border: 1px solid #333;
  border-radius: 0.4vh;
  background: #1a1a1a;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12vw, 1fr));
  gap: 1.2vw;
  text-align: center;
}

.analytics-stat-card {
  padding: 0.8vh;
  background: #0d1117;
  border: 1px solid #2a2a2a;
  border-radius: 0.4vh;
  box-shadow: 0 0.1vh 0.3vh rgba(0, 0, 0, 0.3);
}

.analytics-stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #e4e4e4;
}

.analytics-stat-label {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.analytics-performance-panel {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1a1a1a;
  padding: 12px;
}

.ai-decision-tree-embedded {
  margin-top: 8px;
  height: 400px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #0d1117;
  overflow: hidden;
}

/* Theme Selector */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.theme-preview-card {
  border: 2px solid #333;
  border-radius: 8px;
  padding: 12px;
  background: #1a1a1a;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-preview-card:hover {
  border-color: #6c5ce7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.2);
}

.theme-preview-card.active {
  border-color: #6c5ce7;
  background: #252525;
}

.theme-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}

.theme-preview-check {
  width: 20px;
  height: 20px;
  border: 2px solid #444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  transition: all 0.2s ease;
}

.theme-preview-card.active .theme-preview-check {
  background: #6c5ce7;
  border-color: #6c5ce7;
  color: white;
}

.theme-preview-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #e4e4e4;
  flex: 1;
}

.theme-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: #333;
  border-radius: 12px;
  color: #999;
  font-weight: 500;
}

.theme-preview-card.active .theme-badge {
  background: #6c5ce7;
  color: white;
}

.theme-preview-sample {
  background: #0d1117;
  border-radius: 6px;
  padding: 12px;
  border: 1px solid #2a2a2a;
}

/* Theme Preview Samples - Isolated from light/dark mode CSS */
/* These use specific preview- prefixed classes to avoid conflicts with global overrides */

.sample-modal {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #333;
}

/* DARK THEME PREVIEW */
.preview-dark-header {
  background: linear-gradient(135deg, #272727, #1c1c1c) !important;
  color: #f2f2f2 !important;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #333;
}

.preview-dark-body {
  background: #121212 !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.preview-dark-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 4px;
  min-width: 100px;
  justify-content: center;
}

.preview-dark-stat-card .sample-value {
  font-size: 16px;
  font-weight: bold;
  color: #e4e4e4 !important;
}

.preview-dark-button {
  padding: 8px 24px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  color: #e4e4e4 !important;
  border: 1px solid #444 !important;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* LIGHT THEME PREVIEW */
.preview-light-header {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #8b6914;
}

.preview-light-body {
  background: #fffcf0 !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.preview-light-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff9e6 !important;
  border: 1px solid #d4c89a !important;
  border-radius: 4px;
  min-width: 100px;
  justify-content: center;
}

.preview-light-stat-card .sample-value {
  font-size: 16px;
  font-weight: bold;
  color: #2d2416 !important;
}

.preview-light-button {
  padding: 8px 24px;
  background: linear-gradient(145deg, #f5e6d3, #e8d5b7) !important;
  color: #2d2416 !important;
  border: 1px solid #d4c89a !important;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* NEON THEME PREVIEW */
.preview-neon-header {
  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ff006e;
}

.preview-neon-body {
  background: #0a0a0a !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.preview-neon-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #1a0a1a !important;
  border: 1px solid #ff006e !important;
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.3);
  border-radius: 4px;
  min-width: 100px;
  justify-content: center;
}

.preview-neon-stat-card .sample-value {
  font-size: 16px;
  font-weight: bold;
  color: #ff006e !important;
  text-shadow: 0 0 5px rgba(255, 0, 110, 0.5);
}

.preview-neon-button {
  padding: 8px 24px;
  background: linear-gradient(145deg, #ff006e, #d90062) !important;
  color: #fff !important;
  border: 1px solid #ff006e !important;
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.4);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* CLASSIC THEME PREVIEW */
.preview-classic-header {
  background: linear-gradient(135deg, #2c5f2d, #97cc04) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #97cc04;
}

.preview-classic-body {
  background: #1a2a1a !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.preview-classic-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #2a3a2a !important;
  border: 1px solid #97cc04 !important;
  border-radius: 4px;
  min-width: 100px;
  justify-content: center;
}

.preview-classic-stat-card .sample-value {
  font-size: 16px;
  font-weight: bold;
  color: #97cc04 !important;
}

.preview-classic-button {
  padding: 8px 24px;
  background: linear-gradient(145deg, #97cc04, #7aa803) !important;
  color: #fff !important;
  border: 1px solid #97cc04 !important;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Shared icon styling */
.sample-icon {
  font-size: 16px;
}

/* ============================================
   Power Card Theme Previews
   ============================================ */

.power-card-theme-preview {
  border: 2px solid #333;
  border-radius: 8px;
  padding: 12px;
  background: #1a1a1a;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.power-card-theme-preview:hover {
  border-color: #4a9eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2);
}

.power-card-theme-preview.active {
  border-color: #4a9eff;
  background: #252525;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.3);
}

/* Power card preview samples - apply theme CSS variables */
.power-card-preview-sample[data-power-card-theme="standard"] .pc-card {
  background: var(--pct-card-bg, linear-gradient(135deg, #2d3436 0%, #1b1f20 78%));
  border: var(--pct-card-border, 2px solid #222);
  box-shadow: var(--pct-card-shadow, 2px 2px 0 #000, 0 0 0 1px #222 inset);
  color: var(--pct-text, #ececec);
}

.power-card-preview-sample[data-power-card-theme="standard"] .pc-card-header {
  background: var(--pct-header-bg, linear-gradient(135deg, #3b4245, #23272a));
  border: var(--pct-header-border, 2px solid #000);
  box-shadow: var(--pct-header-shadow, 2px 2px 0 #000, 0 0 0 2px #222 inset);
  color: var(--pct-accent, #ffcf33);
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.power-card-preview-sample[data-power-card-theme="standard"] .pc-card-cost {
  background: var(--pct-cost-bg, #111);
  color: var(--pct-accent, #ffcf33);
  box-shadow: 2px 2px 0 #000;
}

.power-card-preview-sample[data-power-card-theme="standard"] .pc-card-description {
  color: var(--pct-text-secondary, #b0b0b0);
}

/* Minimal theme preview */
.power-card-preview-sample[data-power-card-theme="minimal"] .pc-card {
  background: #2a2a2a;
  border: 1px solid #444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
}

.power-card-preview-sample[data-power-card-theme="minimal"] .pc-card-header {
  background: #333;
  border: 1px solid #555;
  box-shadow: none;
  color: #8ab4f8;
  text-shadow: none;
  font-family: 'Inter', sans-serif;
}

.power-card-preview-sample[data-power-card-theme="minimal"] .pc-card-cost {
  background: #1a1a1a;
  color: #8ab4f8;
  box-shadow: none;
}

.power-card-preview-sample[data-power-card-theme="minimal"] .pc-card-description {
  color: #b0b0b0;
}

/* Vibrant theme preview */
.power-card-preview-sample[data-power-card-theme="vibrant"] .pc-card {
  background: linear-gradient(135deg, #000 0%, #1a1a1a 78%);
  border: 3px solid #ffcf33;
  box-shadow: 0 0 20px rgba(255, 207, 51, 0.4), 2px 2px 0 #000;
  color: #fff;
}

.power-card-preview-sample[data-power-card-theme="vibrant"] .pc-card-header {
  background: linear-gradient(135deg, #ffcf33, #ffaa00);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 207, 51, 0.5);
  color: #000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: bold;
}

.power-card-preview-sample[data-power-card-theme="vibrant"] .pc-card-cost {
  background: #000;
  color: #ffcf33;
  box-shadow: 2px 2px 0 #ffcf33, 0 0 10px rgba(255, 207, 51, 0.5);
  border: 1px solid #ffcf33;
}

.power-card-preview-sample[data-power-card-theme="vibrant"] .pc-card-description {
  color: #e0e0e0;
}

/* ========================================
   Settings Tab Navigation (Dev Tools & Others)
   ======================================== */

/* Settings tabs sticky header */
.settings-tabs-header {
  position: sticky;
  top: -15px;
  z-index: 10;
  background: #1a1a1a;
  padding: 16px 20px;
  margin: -20px -20px 20px -20px; /* Extend to edges of modal */
  border-bottom: 1px solid #333;
  display: block; /* Override any flex from other contexts */
}

.settings-tabs-header .section-title {
  margin: 0 0 8px 0;
  font-size: 26px;
}

.settings-tabs-header p {
  display: block;
  margin: 0;
}

/* Dev Tools tab layout container */
/* Tab layout with navigation sidebar */
.tab-nav-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Tab content area with navigation */
.tab-nav-content {
  flex: 1;
  min-width: 0; /* Prevent flex overflow */
  padding-top: 12px;
}

/* Navigation sidebar */
.settings-tab-nav {
  position: sticky;
  top: 0;
  flex: 0 0 220px;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  height: 100vh !important;
  align-self: flex-start; /* Important for sticky to work */
}

.settings-tab-nav .nav-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}

.settings-tab-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #999;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 13px;
  cursor: pointer;
}

.settings-tab-nav .nav-link:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #e4e4e4;
}

.settings-tab-nav .nav-link.active {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  border-left: 3px solid #ffd700;
  padding-left: 9px;
}

.settings-tab-nav .nav-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* Section intro at top of content */
.section-intro {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #333;
}

.section-intro .section-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffd700;
  margin: 0 0 8px 0;
  border: none;
  padding: 0;
}

/* Content sections - maintain original vertical layout */
.tab-content[data-tab-content="devtools"] .content-section,
.tab-content[data-tab-content="ai"] .content-section,
.tab-content[data-tab-content="interface"] .content-section {
  scroll-margin-top: 20px; /* Smooth scroll offset for navigation */
}

.tab-content[data-tab-content="devtools"] .content-section-title,
.tab-content[data-tab-content="ai"] .content-section-title,
.tab-content[data-tab-content="interface"] .content-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffd700;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #444;
}

/* Mobile: Stack navigation on top instead of side */
@media (max-width: 1024px) {
  .settings-tab-layout {
    flex-direction: column;
  }
  
  .settings-tab-nav {
    flex: 0 0 auto;
    max-height: 200px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    padding: 12px;
  }
  
  .settings-tab-nav .nav-link {
    flex-shrink: 0;
  }
  
  .settings-tab-content {
    max-height: 50vh;
  }
}