/* External dependencies */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

/* Base styles */
@import url('./base/_variables.css');
@import url('./base/_reset.css');

/* Theme styles */
@import url('./themes/_light.css');

/* Layout styles */
@import url('./layout/_header.css');
@import url('./layout/_header_mobile.css');
@import url('./layout/_sidebar.css');

/* Component styles */
@import url('./components/_buttons.css');
@import url('./components/_video-card.css');
@import url('./components/_stats-ticker.css');
@import url('./components/_cookie-management.css');
@import url('./components/animated_logo.css');
@import url('./notifications.css');
@import url('./thumbnail_selector.css');

/* MODAL SYSTEM - Cleaned and optimized */
@import url('./modals/_base.css');
@import url('./modals/_base-mobile.css');
@import url('./modals/settings.css');
@import url('./modals/addvideo.css');
@import url('./modals/_addvideo-form.css');
/* Keep legacy modals temporarily for compatibility */
@import url('./download.css');
@import url('./jobs.css');
@import url('./job_details_modal.css');

/* Mobile unified overrides - loads last to override everything */
@import url('./mobile-unified.css');

/* Main content layout */
.content-wrapper {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--header-height));
  width: 100%;
  margin-top: var(--header-height);
}

.main-content {
  flex-grow: 1;
  padding: 24px;
  padding-bottom: 36px;
  overflow-y: auto;
  width: calc(100% - var(--sidebar-width));
  transition: margin 0.3s ease, width 0.3s ease, transform 0.3s ease;
  margin-top: 0;
  margin-left: var(--sidebar-width);
  position: relative;
  min-height: calc(100vh - var(--header-height));
  cursor: default;
}

@media (min-width: 769px) {
  .app-container.sidebar-collapsed .main-content {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }

  .content-wrapper {
    flex-direction: column;
    margin-top: 0;
  }

  .main-content {
    width: 100%;
    margin-left: 0;
    padding: 16px;
    padding-bottom: calc(var(--header-height) + 20px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
  }
}

/* Grid layout */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 24px;
  min-height: 100px;
  position: relative;
  cursor: default;
}

@media (max-width: 1200px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 992px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    padding: 16px;
  }
}

@media (max-width: 375px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 12px;
  }
}

@media (max-width: 520px) {
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px 0;
  }
}

/* Mobile adjustments */

/* Container styles */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Utility classes */
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }

/* Form validation styles */
.invalid-feedback {
  color: var(--theme-red);
}

.valid-feedback {
  color: var(--theme-green);
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--theme-green);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--theme-red);
}

/* Select2 customization */
.select2-container--default .select2-selection--multiple {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-text-muted);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--theme-accent);
  color: var(--theme-background);
  border: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #21182a;
  color: #ab92cf;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: var(--theme-surface);
}

.select2-dropdown {
  background-color: var(--theme-background);
  border: 1px solid var(--theme-text-muted);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-text-muted);
}

.modal-body {
    display: flex;
    flex-direction: column;
}

.auto-cut-section {
    max-height: 100%;
}

/* Make method select same width as max duration input */
.method-select {
    width: 100%;
    box-sizing: border-box;
}

/* Progress bar styling */
#autoCutProgress {
    height: 20px;
}

#autoCutProgress .progress-bar {
    line-height: 20px;
    font-size: 0.875rem;
}

/* Performance: CSS Containment for faster rendering */
/* Limits style recalculation scope to prevent cascade overhead */

.video-card {
    contain: layout style paint;
}

.modal-content {
    contain: layout style;
}

/* GPU acceleration for interactive elements */
.video-card,
.modal,
.sidebar {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body.sidebar-open {
  overflow: hidden;
}

/* ============================================
   Smooth Bootstrap Dropdown Animations
   ============================================ */
/* Apply smooth animations to all Bootstrap dropdowns */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition:
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.2s;
    pointer-events: none;
    display: block !important; /* Keep display: block to allow transitions */
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
    pointer-events: auto;
}