/* tools/uuid-generator/css/style.css */

/* Action bar */
#action-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #1e1e2e; border-bottom: 2px solid #45475a;
  flex-wrap: wrap; gap: 8px;
}
#action-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
#action-buttons button {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#action-buttons button:hover { background: #45475a; }

#btn-generate { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }
#btn-generate:hover { background: #74c7ec; border-color: #74c7ec; }
#btn-generate-10 { background: #a6e3a1; color: #1e1e2e; border-color: #a6e3a1; font-weight: 600; }
#btn-generate-10:hover { background: #94d3a2; border-color: #94d3a2; }
#btn-generate-100 { background: #cba6f7; color: #1e1e2e; border-color: #cba6f7; font-weight: 600; }
#btn-generate-100:hover { background: #b4a0e8; border-color: #b4a0e8; }

/* Options toggles */
#action-options { display: flex; gap: 16px; align-items: center; }
.toggle-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #a6adc8; cursor: pointer; user-select: none;
}
.toggle-label input[type="checkbox"] {
  accent-color: #89b4fa; cursor: pointer;
  width: 14px; height: 14px;
}
.toggle-label:hover { color: #cdd6f4; }

/* Single UUID section */
#single-uuid-section {
  display: flex; justify-content: center; align-items: center;
  padding: 28px 20px 20px;
  background: #181825;
  border-bottom: 2px solid #313244;
}

#single-uuid-box {
  display: flex; align-items: center; gap: 14px;
  background: #1e1e2e; border: 2px solid #45475a; border-radius: 8px;
  padding: 18px 24px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  max-width: 700px; width: 100%;
}
#single-uuid-box:hover { border-color: #89b4fa; background: #252535; }
#single-uuid-box:active { background: #2a2a3e; }

#single-uuid-value {
  flex: 1; font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 22px; letter-spacing: 0.04em; color: #cdd6f4;
  word-break: break-all;
}

#btn-copy-single {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; padding: 4px; border-radius: 4px;
  color: #6c7086; transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
#btn-copy-single:hover { color: #89b4fa; background: #313244; }

/* Bulk section */
#bulk-section {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 0;
}

#bulk-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; background: #181825; font-size: 12px; color: #6c7086;
  border-bottom: 1px solid #313244;
  text-transform: uppercase; letter-spacing: 0.05em;
}

#count-badge {
  font-size: 12px; color: #89b4fa; font-weight: 600;
  font-family: 'Fira Code', monospace;
}

#bulk-output {
  flex: 1; background: #1e1e2e; color: #cdd6f4; border: none; outline: none;
  padding: 12px 14px; font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px; line-height: 1.7; resize: none;
  min-height: 160px;
}

#bulk-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #1e1e2e; border-top: 2px solid #45475a;
}

#btn-copy-all {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#btn-copy-all:hover { background: #45475a; }
#btn-copy-all:disabled { opacity: 0.4; cursor: default; }

#status-badge { font-size: 13px; padding: 4px 12px; border-radius: 4px; }
#status-badge.success { color: #a6e3a1; }
#status-badge.error { color: #f38ba8; }