/* ============================================
   INLINE STYLES UTILITY CLASSES
   For index.html migration - replacing inline styles
   ============================================ */

/* Display Utilities */
.hidden-inline { display: none !important; }
.flex-inline { display: flex; }
.inline-flex-inline { display: inline-flex; }
.block-inline { display: block; }
.grid-inline { display: grid; }

/* Flexbox Utilities */
.flex-center { display: flex; align-items: center; }
.flex-center-gap-sm { display: flex; align-items: center; gap: var(--space-sm); }
.flex-center-gap-md { display: flex; align-items: center; gap: var(--space-md); }
.flex-center-gap-lg { display: flex; align-items: center; gap: var(--space-lg); }
.flex-end { display: flex; align-items: flex-end; }
.flex-end-gap-md { display: flex; align-items: flex-end; gap: var(--space-md); }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

/* Flexbox Combinations */
.flex-center-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.flex-center-wrap-md {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.flex-center-wrap-lg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

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

.inline-flex-center-md {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.inline-flex-center-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
}

.flex-end-wrap {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.flex-stretch-wrap {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-120 { width: 120px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w-320 { width: 320px; }
.min-w-120 { min-width: 120px; }
.min-w-150 { min-width: 150px; }
.min-w-180 { min-width: 180px; }
.min-w-200 { min-width: 200px; }
.min-w-220 { min-width: 220px; }
.max-w-100 { max-width: 100%; }
.max-w-320 { max-width: 320px; }
.max-w-400 { max-width: 400px; }
.max-w-46ch { max-width: 46ch; }

/* Height Utilities */
.h-auto { height: auto; }
.h-full { height: 100%; }
.min-h-18 { min-height: 18px; }
.min-h-120 { min-height: 120px; }

/* Spacing Utilities - Margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.m-4 { margin: 4px; }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.mr-6 { margin-right: 6px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing Utilities - Padding */
.p-4 { padding: 4px; }
.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }

/* Typography Utilities */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 13px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }
.text-muted { color: var(--text-muted); }
.text-muted-sm { font-size: 12px; color: var(--text-muted); }
.text-muted-xs { font-size: 11px; color: var(--text-muted); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 600; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text Utilities */
.whitespace-nowrap { white-space: nowrap; }
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Border Utilities */
.border-default { border: 1px solid var(--border-default); }
.border-radius-sm { border-radius: var(--radius-sm); }
.border-radius-md { border-radius: var(--radius-md); }
.border-radius-lg { border-radius: 10px; }

/* Background Utilities */
.bg-card { background: rgba(255, 255, 255, 0.02); }
.bg-card-light { background: rgba(255, 255, 255, 0.04); }
.bg-transparent { background: transparent; }

/* Position Utilities */
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
.position-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Common Form Input Patterns */
.input-style {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

.input-style-sm {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
}

.textarea-style {
  resize: vertical;
  width: 100%;
  min-height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Panel Backgrounds */
.panel-bg-blue {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.2);
}

.panel-bg-purple {
  background: rgba(168, 85, 247, 0.05);
  border-color: rgba(168, 85, 247, 0.2);
}

.dashed-border {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* Flex Shrink */
.flex-shrink-0 { flex-shrink: 0; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* List Reset */
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Opacity */
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* Common Combinations */
.mt-6-text-sm {
  margin-top: 6px;
  font-size: 12px;
}

.mt-8-p-10 {
  margin-top: 8px;
  padding: 10px;
}

.flex-1-min-w-200 {
  flex: 1;
  min-width: 200px;
}

.flex-1-min-w-220 {
  flex: 1;
  min-width: 220px;
}

.flex-1-overflow {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Table Styles */
.table-header {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  font-size: 12px;
  color: #9ca3af;
}

.table-cell {
  padding: 6px 8px;
}

.table-full {
  width: 100%;
  border-collapse: collapse;
}

/* Grid */
.grid-1fr {
  grid-template-columns: 1fr;
}

/* Specific Component Styles */
.voice-library-container {
  display: none;
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.voice-library-row {
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.voice-library-label {
  min-width: 200px;
}

.voice-library-label-wide {
  min-width: 220px;
}

.voice-library-status {
  min-height: 18px;
}

.voice-library-list {
  max-height: 220px;
  overflow: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.voice-library-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-library-prov {
  width: 88px;
  font-size: 12px;
  text-transform: uppercase;
}

.voice-library-name {
  flex: 1;
  min-width: 140px;
}

.voice-library-id {
  flex: 1;
  min-width: 140px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress Bar */
.progress-container {
  display: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
  transition: width 0.2s ease;
}

/* Audio Player */
.audio-player {
  display: none;
  width: 100%;
  margin-top: 6px;
}

/* Load More Container */
.load-more-container {
  display: none;
  text-align: center;
  padding: 16px;
}

.load-more-status {
  display: none;
  margin-left: 12px;
}

/* Queue Wrap */
.queue-wrap {
  display: none;
  margin: 0 0 8px 0;
}

/* Flowboard Specific */
.flowboard-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  gap: 12px;
}

.flowboard-controls-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.flowboard-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: row;
}

.flowboard-voiceover-controls {
  display: none;
  align-items: center;
  gap: 6px;
}

.flowboard-voiceover-name {
  font-size: 11px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbd5e1;
}

.flowboard-btn-small {
  padding: 4px 8px;
  height: 24px;
  font-size: 12px;
}

.flowboard-btn-icon {
  padding: 4px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flowboard-title-input {
  margin-left: auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  padding: 4px 8px;
  min-width: 200px;
  max-width: 300px;
  transition: border-color 0.2s ease;
}

/* Icon Spacing */
.icon-mr-6 {
  margin-right: 6px;
}

/* Section Header */
.section-header-title {
  margin: 0;
}

.section-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header-full {
  width: 100%;
}

/* Controls Inline Variations */
.controls-inline-gap-sm {
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.controls-inline-gap-md {
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.controls-inline-wrap {
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.controls-inline-wrap-md {
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Field Spacing */
.field-mt-8 {
  margin-top: 8px;
}

/* Status Text */
.status-text {
  font-size: 12px;
}

.status-text-sm {
  font-size: 11px;
  margin-top: 4px;
}

/* Link Button Spacing */
.link-ml-6 {
  margin-left: 6px;
}

/* Video Length Input */
.video-length-input {
  font-size: 16px;
  font-weight: 600;
}

/* Video Length Label */
.video-length-label {
  font-size: 12px;
  opacity: 0.8;
}

/* Toggle Label */
.toggle-label {
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Hidden Input */
.hidden-input {
  display: none;
}

/* Auto Split Field */
.auto-split-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.auto-split-text {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
}

/* Duration Input Wrapper */
.duration-input-wrapper {
  gap: 8px;
  align-items: center;
}

/* Thumbnail Preview */
.thumbnail-preview {
  max-width: 400px;
  max-height: 225px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Sticky Panel */
.sticky-panel {
  position: sticky;
  top: 8px;
  z-index: 10;
  background: rgba(17, 24, 39, 0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Preview Wrap */
.preview-wrap {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 6px 0 8px;
}

/* Preview Video */
.preview-video {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Splitter */
.splitter {
  height: 6px;
  cursor: row-resize;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 6px;
}

/* Time Display */
.time-display {
  min-width: 60px;
  text-align: right;
}

/* Scrubber */
.scrubber {
  flex: 1;
}

/* Output Settings Row */
.output-settings-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.output-settings-col {
  flex: 1 1 220px;
}

.output-settings-label {
  font-size: 12px;
  opacity: 0.9;
}