/* Startup - ACLBot v11.0 */

/* === From startup-override.css === */
/* ============================================
   STARTUP PAGE - Paramètres de démarrage
   ============================================ */
/* Page Wrapper */
[class*="startup-page-wrapper"] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
@media (max-width: 640px) {
[class*="startup-page-wrapper"] {
  padding: 16px;
}
}
/* Header */
[class*="startup-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
[data-theme="dark"] [class*="startup-header"] {
  background: var(--border-subtle);
}
[class*="startup-header-content"] {
  flex: 1;
}
[class*="startup-title"] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
[class*="startup-title"] svg {
  color: var(--accent);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
[class*="startup-subtitle"] {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
/* Startup Button (tous les variants) */
[class*="startup-btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
[class*="startup-btn"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Reset Button */
[class*="startup-btn"][data-variant="reset"] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
}
[class*="startup-btn"][data-variant="reset"]:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* Copy Button */
[class*="startup-btn"][data-variant="copy"] {
  background: var(--accent-muted);
  color: var(--accent);
}
[class*="startup-btn"][data-variant="copy"]:hover:not(:disabled) {
  background: var(--accent);
  color: white;
}
[class*="startup-btn"][data-variant="copy"][data-copied="true"] {
  background: var(--success);
  color: white;
}
/* Edit Button */
[class*="startup-btn"][data-variant="edit"] {
  background: var(--accent);
  color: white;
}
[class*="startup-btn"][data-variant="edit"]:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px var(--accent-glow);
}
/* Save Button */
[class*="startup-btn"][data-variant="save"] {
  background: var(--success);
  color: white;
}
[class*="startup-btn"][data-variant="save"]:hover:not(:disabled) {
  background: var(--success-hover);
  box-shadow: 0 4px 12px var(--success-glow);
}
/* Cancel Button */
[class*="startup-btn"][data-variant="cancel"] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
}
[class*="startup-btn"][data-variant="cancel"]:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* Startup Grid */
[class*="startup-grid"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
[class*="startup-grid"] {
  grid-template-columns: 1fr;
}
}
/* Startup Card */
[class*="startup-card"] {
  background: var(--bg-secondary);
  border: none;
  border-radius: 20px;
  overflow: hidden;
}
[data-theme="dark"] [class*="startup-card"] {
  background: var(--border-subtle);
}
[class*="startup-card-header"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: transparent;
  border-bottom: none;
}
[data-theme="dark"] [class*="startup-card-header"] {
  background: transparent;
}
[class*="startup-card-title"] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
[class*="startup-card-title"] svg {
  color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
[class*="startup-card-body"] {
  padding: 24px;
}
/* Startup Command Display */
[class*="startup-command"] {
  position: relative;
  padding: 20px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
  word-break: break-all;
}
[data-theme="dark"] [class*="startup-command"] {
  background: var(--bg-tertiary);
}
/* Button Group in Command */
[class*="startup-button-group"] {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
/* Startup Textarea */
[class*="startup-textarea"] {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 12px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: all 0.15s ease;
}
[class*="startup-textarea"]:focus {
  box-shadow: 0 0 0 3px var(--accent-muted);
}
[data-theme="dark"] [class*="startup-textarea"] {
  background: var(--bg-tertiary);
}
/* Edit Buttons Row */
[class*="edit-buttons-row"] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: flex-end;
}
/* Help Text */
[class*="startup-help-text"] {
  margin: 16px 0 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
/* Docker Select/Input */
[class*="docker-select"],
[class*="startup-select"] {
  width: 100%;
  padding: 12px 40px 12px 16px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  transition: all 0.15s ease;
}
[class*="docker-select"]:focus,
[class*="startup-select"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-muted);
}
[data-theme="dark"] [class*="docker-select"],
[data-theme="dark"] [class*="startup-select"] {
  background-color: var(--bg-tertiary);
}
[class*="docker-input"],
[class*="startup-input"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}
[class*="docker-input"]:focus,
[class*="startup-input"]:focus {
  box-shadow: 0 0 0 3px var(--accent-muted);
}
[class*="docker-input"]:disabled,
[class*="startup-input"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-theme="dark"] [class*="docker-input"],
[data-theme="dark"] [class*="startup-input"] {
  background-color: var(--bg-tertiary);
}
/* Section Header */
[class*="startup-section-header"] {
  margin: 32px 0 20px 0;
  padding-bottom: 16px;
  border-bottom: none;
}
[class*="startup-section-title"] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
[class*="startup-section-title"] svg {
  color: var(--accent);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
/* Variables Grid */
[class*="variables-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
@media (max-width: 640px) {
[class*="variables-grid"] {
  grid-template-columns: 1fr;
}
}
/* Variable Card */
[class*="variable-card"] {
  background: var(--bg-secondary);
  border: none;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.15s ease;
}
[class*="variable-card"]:hover {
  background: var(--bg-tertiary);
}
[data-theme="dark"] [class*="variable-card"] {
  background: var(--border-subtle);
}
[data-theme="dark"] [class*="variable-card"]:hover {
  background: var(--bg-tertiary);
}
[class*="variable-header"] {
  margin-bottom: 16px;
}
[class*="variable-name"] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
[class*="variable-description"] {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
/* Readonly Badge */
[class*="readonly-badge"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--warning-muted);
  color: var(--warning);
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
}
[class*="readonly-badge"] svg {
  font-size: 10px;
}
/* Empty State */
[class*="startup-empty-state"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-tertiary);
}
[class*="startup-empty-state"] svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--text-quaternary);
}
[class*="startup-empty-state"] p {
  margin: 0;
  font-size: 14px;
}
/* ============================================
   FLASH MESSAGES - Alertes & Notifications
   ============================================ */
.flash-message {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: 1px solid !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Remove any left bar pseudo-element */
.flash-message::before {
  display: none !important;
}

/* Success */
.flash-message.flash-message-success {
  background: var(--success-muted);
  border-color: var(--success-glow);
}
[data-theme="dark"] .flash-message.flash-message-success {
  background: rgba(48, 209, 88, 0.1);
  border-color: rgba(48, 209, 88, 0.3);
}

/* Error */
.flash-message.flash-message-error {
  background: var(--error-muted);
  border-color: var(--error-glow);
}
[data-theme="dark"] .flash-message.flash-message-error {
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.3);
}

/* Warning */
.flash-message.flash-message-warning {
  background: var(--warning-muted);
  border-color: var(--warning-glow);
}
[data-theme="dark"] .flash-message.flash-message-warning {
  background: rgba(255, 159, 10, 0.1);
  border-color: rgba(255, 159, 10, 0.3);
}

/* Info */
.flash-message.flash-message-info {
  background: var(--accent-muted);
  border-color: var(--accent-glow);
}
[data-theme="dark"] .flash-message.flash-message-info {
  background: rgba(0, 113, 227, 0.1);
  border-color: rgba(0, 113, 227, 0.3);
}

/* Flash Title - inline badge style */
.flash-message-title {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 0 !important;
  margin-right: 4px !important;
  letter-spacing: 0 !important;
}
.flash-message-success .flash-message-title {
  background: var(--success-muted);
  color: var(--success);
}
.flash-message-error .flash-message-title {
  background: var(--error-muted);
  color: var(--error);
}
.flash-message-warning .flash-message-title {
  background: var(--warning-muted);
  color: var(--warning);
}
.flash-message-info .flash-message-title {
  background: var(--accent-muted);
  color: var(--accent);
}

/* Flash Icon */
.flash-message-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}
.flash-message-success .flash-message-icon {
  background: var(--success-muted);
  color: var(--success);
}
.flash-message-error .flash-message-icon {
  background: var(--error-muted);
  color: var(--error);
}
.flash-message-warning .flash-message-icon {
  background: var(--warning-muted);
  color: var(--warning);
}
.flash-message-info .flash-message-icon {
  background: var(--accent-muted);
  color: var(--accent);
}
.flash-message-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Flash Content */
.flash-message-content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding-left: 0 !important;
}

/* Flash Text */
.flash-message-text {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
}
[data-theme="dark"] .flash-message-text {
  color: rgba(255, 255, 255, 0.6);
}
/* Spinning Animation for Reset Button */
[class*="spinning"] {
  animation: spin 1s linear infinite;
}
@keyframes spin {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}