/* Component-specific styles for standalone-edl-converter */

/* Error Boundary Styles */
.error-boundary-container {
  padding: 20px;
  text-align: center;
}

/* Loading States */
.loading-container {
  padding: 20px;
  text-align: center;
}

.loading-subtext {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

/* Hidden File Inputs */
.hidden-file-input {
  display: none;
}

/* Project Manager Styles */
.project-manager-container {
  /* Add any specific project manager styles here if needed */
}

/* Simple Projects Page Styles */
.simple-projects-container {
  /* Add any specific simple projects styles here if needed */
}

/* Context Styles */
.context-container {
  padding: 20px;
  text-align: center;
}

.context-subtext {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

/* Professional Cue Sheet Form Styles */
.cue-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}

.cue-sheet-table-header {
  background-color: var(--table-header-bg, #f5f5f5);
}

.cue-sheet-table-cell {
  border: 1px solid var(--table-border-color, #ddd);
  padding: 4px;
  color: var(--text-color, #333);
}

.cue-sheet-table-header-cell {
  border: 1px solid var(--table-border-color, #ddd);
  padding: 4px;
  text-align: left;
  font-weight: bold;
  color: var(--text-color, #333);
}

/* Theme-aware print styles for cue sheet */
@media print {
  .cue-sheet-table,
  .cue-sheet-table-header,
  .cue-sheet-table-cell,
  .cue-sheet-table-header-cell {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #000000 !important;
  }
  
  .cue-sheet-table-header {
    background-color: #f5f5f5 !important;
  }
}

/* Dark mode specific styles */
.theme-dark .cue-sheet-table-cell,
.theme-dark .cue-sheet-table-header-cell {
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.theme-dark .cue-sheet-table-header {
  background-color: var(--background-secondary);
}

/* Light mode specific styles */
.theme-light .cue-sheet-table-cell,
.theme-light .cue-sheet-table-header-cell {
  color: #000000;
  border-color: #000000;
}

.theme-light .cue-sheet-table-header {
  background-color: #f5f5f5;
}
body {
  margin: 0;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f5;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

* {
  box-sizing: border-box;
}

#root {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Loading animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

/* Fade animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Slide animations */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* Pulse animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Defer focus styles to GlobalThemeProvider - remove conflicting overrides */

/* Print styles */
@media print {
  body {
    background: white !important;
  }
  
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
}

/* iOS Safe Area Support */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Touch-friendly styles for iOS devices */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for touch devices */
  button,
  a,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better tap feedback */
  button:active,
  a:active,
  [role="button"]:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
  
  /* Prevent text selection on tap */
  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    user-select: none;
  }
}

/* Responsive utilities */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Tablet-specific utilities */
@media (min-width: 600px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* iPad-specific utilities */
@media (min-width: 768px) and (max-width: 1024px) {
  .hide-ipad {
    display: none !important;
  }
}

/* Custom utility classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gap-1 {
  gap: 8px;
}

.gap-2 {
  gap: 16px;
}

.gap-3 {
  gap: 24px;
}

.gap-4 {
  gap: 32px;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* Dark mode utilities */
.dark .text-white {
  color: white;
}

.dark .bg-dark {
  background-color: #1a1a1a;
}

.dark .border-dark {
  border-color: #333;
}

/* Dark mode file upload zone */
.dark .file-upload-zone {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
}

.dark .file-upload-zone:hover {
  border-color: #00d4ff;
  background-color: rgba(0, 212, 255, 0.1);
}

.dark .file-upload-zone.dragover {
  border-color: #00d4ff;
  background-color: rgba(0, 212, 255, 0.2);
}

/* Custom component styles */
.edl-converter-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.edl-converter-header {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.edl-converter-content {
  flex: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Dark theme support for content background */
.dark .edl-converter-content {
  background: rgba(26, 26, 46, 0.95);
}

/* File upload styles */
.file-upload-zone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload-zone:hover {
  border-color: #1976d2;
  background-color: rgba(25, 118, 210, 0.05);
}

.file-upload-zone.dragover {
  border-color: #1976d2;
  background-color: rgba(25, 118, 210, 0.1);
}

/* Data table styles */
.data-table-container {
  height: 100%;
  overflow: auto;
}

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

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: none;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

/* Analytics card styles */
.analytics-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 24px;
}

/* Dark mode analytics card */
.dark .analytics-card {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.analytics-card h3 {
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.analytics-card .value {
  font-size: 2rem;
  font-weight: 700;
  margin: 8px 0;
}

.analytics-card .label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.success {
  background-color: #4caf50;
}

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

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

.status-indicator.info {
  background-color: #2196f3;
}

/* Loading states */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.toast {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  margin-bottom: 12px;
  min-width: 300px;
  animation: slideIn 0.3s ease-out;
}

.toast.success {
  border-left: 4px solid #4caf50;
}

.toast.error {
  border-left: 4px solid #f44336;
}

.toast.warning {
  border-left: 4px solid #ff9800;
}

.toast.info {
  border-left: 4px solid #2196f3;
}

/* Electron App Region Drag & Interactive Controls */
.no-drag,
.no-drag *,
button,
button *,
input,
input *,
select,
select *,
textarea,
textarea *,
a,
a *,
[role="button"],
[role="button"] *,
.MuiButtonBase-root,
.MuiButtonBase-root *,
.MuiChip-root,
.MuiChip-root *,
.MuiIconButton-root,
.MuiIconButton-root *,
.MuiInputBase-root,
.MuiInputBase-root *,
.MuiInputBase-input,
.MuiSvgIcon-root,
.MuiSvgIcon-root *,
.MuiAvatar-root,
.MuiAvatar-root * {
  -webkit-app-region: no-drag !important;
}

/**
 * Global Styles - CSS Variables and Essential Overrides
 * 
 * This file contains CSS variables and essential styling that complements
 * the GlobalThemeProvider. All component styling is handled by the Theme Provider.
 */

/* CSS Custom Properties (Variables) */
:root {
  /* Color System */
  --color-primary-main: #00d4ff;
  --color-primary-light: #4dd0e1;
  --color-primary-dark: #00acc1;
  --color-primary-contrast: #000000;
  --color-primary-hover: #00bcd4;
  --color-primary-active: #0097a7;
  --color-primary-disabled: rgba(0, 212, 255, 0.3);

  --color-secondary-main: #9c27b0;
  --color-secondary-light: #ba68c8;
  --color-secondary-dark: #7b1fa2;
  --color-secondary-contrast: #ffffff;
  --color-secondary-hover: #8e24aa;
  --color-secondary-active: #7b1fa2;
  --color-secondary-disabled: rgba(156, 39, 176, 0.3);

  --color-success-main: #4caf50;
  --color-success-light: #81c784;
  --color-success-dark: #388e3c;
  --color-success-contrast: #ffffff;
  --color-success-background: rgba(76, 175, 80, 0.1);

  --color-warning-main: #ff9800;
  --color-warning-light: #ffb74d;
  --color-warning-dark: #f57c00;
  --color-warning-contrast: #000000;
  --color-warning-background: rgba(255, 152, 0, 0.1);

  --color-error-main: #f44336;
  --color-error-light: #e57373;
  --color-error-dark: #d32f2f;
  --color-error-contrast: #ffffff;
  --color-error-background: rgba(244, 67, 54, 0.1);

  --color-info-main: #2196f3;
  --color-info-light: #64b5f6;
  --color-info-dark: #1976d2;
  --color-info-contrast: #ffffff;
  --color-info-background: rgba(33, 150, 243, 0.1);

  /* Background Colors */
  --color-background-primary: #0a0a0a;
  --color-background-secondary: #1a1a2e;
  --color-background-tertiary: #16213e;
  --color-background-elevated: #1e1e1e;
  --color-background-overlay: rgba(0, 0, 0, 0.8);
  --color-background-glass: rgba(255, 255, 255, 0.03);

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.3);
  --color-text-inverse: #000000;
  --color-text-accent: #00d4ff;

  /* Border Colors */
  --color-border-primary: rgba(255, 255, 255, 0.12);
  --color-border-secondary: rgba(255, 255, 255, 0.08);
  --color-border-focus: #00d4ff;
  --color-border-error: #f44336;
  --color-border-success: #4caf50;
  --color-border-disabled: rgba(255, 255, 255, 0.06);

  /* Shadow System */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Typography */
  --font-family-primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-secondary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 20px;
  --border-radius-3xl: 24px;
  --border-radius-full: 9999px;
}

/* Global Base Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-disabled { color: var(--color-text-disabled); }
.text-inverse { color: var(--color-text-inverse); }
.text-accent { color: var(--color-text-accent); }

.bg-primary { background-color: var(--color-background-primary); }
.bg-secondary { background-color: var(--color-background-secondary); }
.bg-tertiary { background-color: var(--color-background-tertiary); }
.bg-elevated { background-color: var(--color-background-elevated); }

.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }
.border-focus { border-color: var(--color-border-focus); }

/* Essential Material-UI Component Overrides */
.MuiTypography-root {
  font-family: var(--font-family-primary);
}

.MuiInputBase-root {
  font-family: var(--font-family-primary);
}

/* Essential styling for consistent appearance */
.MuiPaper-root {
  background-color: var(--color-background-elevated);
  color: var(--color-text-primary);
}

/* Override for transparent tables */
.transparent-table.MuiPaper-root,
.MuiTableContainer-root.transparent-table {
  background-color: transparent !important;
}

/* Remove borders from transparent tables to match Indexed Files styling */
.transparent-table .MuiTable-root,
.transparent-table .MuiTableCell-root,
.transparent-table .MuiTableCell-head,
.transparent-table .MuiTableRow-root {
  border: none !important;
  border-bottom: none !important;
  border-collapse: separate !important;
}

/* Ensure transparent table headers have subtle background */
.transparent-table .MuiTableCell-head {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Force remove borders from ALL tables in EDL Converter */
.MuiTable-root,
.MuiTableCell-root,
.MuiTableCell-head,
.MuiTableRow-root,
.MuiTableHead-root,
.MuiTableBody-root {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-collapse: separate !important;
}

/* Ensure table headers have subtle background */
.MuiTableCell-head {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Additional overrides for EDL Converter tables specifically */
[role="tabpanel"] .MuiTable-root,
[role="tabpanel"] .MuiTableCell-root,
[role="tabpanel"] .MuiTableCell-head,
[role="tabpanel"] .MuiTableRow-root {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-collapse: separate !important;
}

/* Override any remaining border styles */
.MuiTableCell-root {
  border-bottom: none !important;
}

.MuiTableCell-head {
  border-bottom: none !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Nuclear option - force remove ALL borders from tables */
* .MuiTable-root,
* .MuiTableCell-root,
* .MuiTableCell-head,
* .MuiTableRow-root,
* .MuiTableHead-root,
* .MuiTableBody-root {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-collapse: separate !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Force table headers to have subtle background */
* .MuiTableCell-head {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: none !important;
}

.MuiMenu-paper {
  background-color: var(--color-background-elevated);
  color: var(--color-text-primary);
}

.MuiPopover-paper {
  background-color: var(--color-background-elevated);
  color: var(--color-text-primary);
}

.MuiSelect-select {
  color: var(--color-text-primary);
}

/* Global scrollbar hiding - hide scrollbars but keep functionality */
* {
  /* Firefox scrollbar hiding */
  scrollbar-width: none;
}

/* Webkit scrollbar hiding for all elements */
*::-webkit-scrollbar {
  display: none;
}

/* Ensure scrolling still works */
html, body {
  overflow: auto;
}

/* Scrollable containers - maintain scroll functionality but hide scrollbars */
.scrollable-container,
.MuiTableContainer-root,
.MuiTable-root,
.MuiBox-root,
.MuiPaper-root,
.MuiDialog-root,
.MuiDrawer-root,
.MuiList-root,
.MuiMenu-root,
.MuiPopover-root {
  /* Firefox scrollbar hiding */
  scrollbar-width: none;
  /* Ensure scrolling works */
  overflow: auto;
}

.scrollable-container::-webkit-scrollbar,
.MuiTableContainer-root::-webkit-scrollbar,
.MuiTable-root::-webkit-scrollbar,
.MuiBox-root::-webkit-scrollbar,
.MuiPaper-root::-webkit-scrollbar,
.MuiDialog-root::-webkit-scrollbar,
.MuiDrawer-root::-webkit-scrollbar,
.MuiList-root::-webkit-scrollbar,
.MuiMenu-root::-webkit-scrollbar,
.MuiPopover-root::-webkit-scrollbar {
  display: none;
}

/* Ensure all scrollable areas maintain functionality */
.scrollable-container,
.MuiTableContainer-root,
.MuiTable-root {
  /* Maintain scroll behavior */
  overflow: auto;
  /* Smooth scrolling */
  scroll-behavior: smooth;
}

/* Additional scrollbar hiding for specific elements */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
select {
  scrollbar-width: none;
}

textarea::-webkit-scrollbar,
input[type="text"]::-webkit-scrollbar,
input[type="email"]::-webkit-scrollbar,
input[type="password"]::-webkit-scrollbar,
select::-webkit-scrollbar {
  display: none;
}

/* Utility class to show scrollbars when needed */
.show-scrollbar {
  scrollbar-width: thin !important;
  scrollbar-color: var(--color-text-disabled) var(--color-background-secondary) !important;
}

.show-scrollbar::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
}

.show-scrollbar::-webkit-scrollbar-track {
  background-color: var(--color-background-secondary) !important;
  border-radius: 4px !important;
}

.show-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-text-disabled) !important;
  border-radius: 4px !important;
}

.show-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary) !important;
}

/* Ensure the main app container allows scrolling */
#root {
  overflow: auto;
  scrollbar-width: none;
}

#root::-webkit-scrollbar {
  display: none;
}

/* Utility class for hidden file inputs (for accessibility compliance) */
.hidden-file-input {
  display: none;
}

/* File input label wrapper */
.file-input-label {
  display: block;
}

/* Visually hidden label text for accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}