/* ==========================================================================
   Application Layout
   Video Production Manager

   Layout primitives and structural components for the app shell.
   Built on the M3 design tokens.
   ========================================================================== */

/* ==========================================================================
   APP SHELL
   Main application layout: top bar + optional navigation rail + content
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-rows: var(--md-sys-top-app-bar-height) 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "topbar  topbar"
    "rail    main";
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--md-sys-color-background);
}

/* When there is no navigation rail */
.app-shell.no-rail {
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "main";
}

.app-shell > .md-top-app-bar {
  grid-area: topbar;
}

.app-shell > .md-navigation-rail {
  grid-area: rail;
}

.app-shell > .app-main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ==========================================================================
   PAGE HEADER
   Title area at the top of each page/view
   ========================================================================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 24px 8px;
}

.page-header .page-title {
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  color: var(--md-sys-color-on-background);
}

.page-header .page-subtitle {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
}

.page-header .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   CONTENT AREA
   Main content padding container
   ========================================================================== */

.content-area {
  padding: 16px 24px 32px;
}

/* Narrow content (for forms, single-column pages) */
.content-area.narrow {
  max-width: 720px;
  margin: 0 auto;
}

/* Wide content (full width with max) */
.content-area.wide {
  max-width: 1600px;
  margin: 0 auto;
}

/* ==========================================================================
   GRID CONTAINER
   Auto-fill responsive card grid
   ========================================================================== */

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Smaller minimum for compact grids */
.grid-container.compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Larger minimum for wide cards */
.grid-container.wide-cards {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

/* Admin dashboard grid */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Table container: always allow horizontal scroll */
.md-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Compact input for inline table editing */
.admin-compact-input {
  width: 90px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-medium-size);
  transition: border-color var(--md-sys-motion-transition-standard);
}

.admin-compact-input:hover {
  border-color: var(--md-sys-color-on-surface);
}

.admin-compact-input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 0 9px;
}

/* ==========================================================================
   VIDEO GRID
   Specific grid for video thumbnails / video cards
   ========================================================================== */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.video-grid .video-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  background-color: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
  transition:
    box-shadow var(--md-sys-motion-transition-standard),
    transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-expressive);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.video-grid .video-card:hover {
  box-shadow: var(--md-sys-elevation-level2);
  transform: translateY(-2px);
}

.video-grid .video-card:active {
  transform: scale(0.98);
}

.video-card .video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}

.video-card .video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card .video-thumbnail .video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
}

.video-card .video-thumbnail .video-status-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
}

.video-card .video-info {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.video-card .video-title {
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  line-height: var(--md-sys-typescale-title-small-line-height);
  color: var(--md-sys-color-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card .video-meta {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   TWO-PANEL LAYOUT
   Two-column layout for ranking page or comparison views
   ========================================================================== */

.two-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 0; /* allow content to scroll */
}

.two-panel .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.two-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: sticky;
  top: 0;
  background-color: var(--md-sys-color-background);
  z-index: 1;
}

.two-panel .panel-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   SIDEBAR LAYOUT
   Layout with collapsible right sidebar
   ========================================================================== */

.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
  transition: grid-template-columns var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
}

.sidebar-layout.sidebar-open {
  grid-template-columns: 1fr 360px;
}

.sidebar-layout .main-content {
  overflow-y: auto;
  min-width: 0;
}

.sidebar-layout .sidebar-panel {
  overflow-y: auto;
  border-left: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container);
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized),
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.sidebar-layout.sidebar-open .sidebar-panel {
  transform: translateX(0);
  opacity: 1;
}

/* ==========================================================================
   EMPTY STATE
   Centered message with icon when no content is available
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  gap: 16px;
  min-height: 320px;
}

.empty-state .empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 40px;
  margin-bottom: 8px;
}

.empty-state .empty-state-title {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  color: var(--md-sys-color-on-surface);
}

.empty-state .empty-state-description {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
  max-width: 400px;
}

.empty-state .empty-state-action {
  margin-top: 8px;
}

/* ==========================================================================
   ACTION BAR
   Toolbar with grouped actions (filters, search, bulk actions)
   ========================================================================== */

.action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.action-bar .action-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-bar .action-spacer {
  flex: 1;
}

.action-bar .action-divider {
  width: 1px;
  height: 24px;
  background-color: var(--md-sys-color-outline-variant);
}

/* Chip row for filter chips */
.action-bar .chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.action-bar .chip-row::-webkit-scrollbar {
  display: none;
}

/* Search in action bar */
.action-bar .action-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-sys-motion-transition-standard),
    width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  min-width: 200px;
}

.action-bar .action-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-body-large-size);
  width: 100%;
}

.action-bar .action-search input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================================================
   FORM LAYOUTS
   ========================================================================== */

/* Form section */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 0;
}

.form-section .form-section-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
}

.form-section .form-section-description {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: -16px;
}

/* Form row (horizontal group) */
.form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.form-row > * {
  flex: 1;
}

/* Form group (label + input pair) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group > label,
.form-label {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Form actions (submit row) */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Inline form (horizontal) */
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

.gap-xs { gap: var(--md-sys-spacing-xs); }
.gap-sm { gap: var(--md-sys-spacing-sm); }
.gap-md { gap: var(--md-sys-spacing-md); }
.gap-lg { gap: var(--md-sys-spacing-lg); }
.gap-xl { gap: var(--md-sys-spacing-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--md-sys-spacing-xs); }
.p-sm { padding: var(--md-sys-spacing-sm); }
.p-md { padding: var(--md-sys-spacing-md); }
.p-lg { padding: var(--md-sys-spacing-lg); }
.p-xl { padding: var(--md-sys-spacing-xl); }

.px-md { padding-left: var(--md-sys-spacing-md); padding-right: var(--md-sys-spacing-md); }
.py-md { padding-top: var(--md-sys-spacing-md); padding-bottom: var(--md-sys-spacing-md); }

.m-0 { margin: 0; }
.mt-sm { margin-top: var(--md-sys-spacing-sm); }
.mt-md { margin-top: var(--md-sys-spacing-md); }
.mt-lg { margin-top: var(--md-sys-spacing-lg); }
.mt-xl { margin-top: var(--md-sys-spacing-xl); }
.mb-sm { margin-bottom: var(--md-sys-spacing-sm); }
.mb-md { margin-bottom: var(--md-sys-spacing-md); }
.mb-lg { margin-bottom: var(--md-sys-spacing-lg); }

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-on-surface { color: var(--md-sys-color-on-surface); }
.text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.text-primary { color: var(--md-sys-color-primary); }
.text-error { color: var(--md-sys-color-error); }
.text-success { color: var(--md-sys-color-success); }

/* ==========================================================================
   VISIBILITY / DISPLAY UTILITIES
   ========================================================================== */

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   SCROLL CONTAINER
   ========================================================================== */

.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ==========================================================================
   SECTION DIVIDER WITH LABEL
   ========================================================================== */

.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--md-sys-color-outline-variant);
}

.section-divider .section-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

/* ==========================================================================
   DRAG & DROP ZONE (for video uploads)
   ========================================================================== */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--md-sys-motion-transition-standard),
    background-color var(--md-sys-motion-transition-standard),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-expressive);
}

.drop-zone:hover {
  border-color: var(--md-sys-color-primary);
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 4%, var(--md-sys-color-surface-container-low));
}

.drop-zone.dragover {
  border-color: var(--md-sys-color-primary);
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
  transform: scale(1.01);
}

.drop-zone .drop-zone-icon {
  font-size: 48px;
  color: var(--md-sys-color-primary);
}

.drop-zone .drop-zone-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
}

.drop-zone .drop-zone-subtitle {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================================================
   STATS / METRIC CARDS
   ========================================================================== */

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container);
}

.stat-card .stat-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.stat-card .stat-value {
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.stat-card .stat-change {
  font-size: var(--md-sys-typescale-body-small-size);
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-card .stat-change.positive {
  color: var(--md-sys-color-success);
}

.stat-card .stat-change.negative {
  color: var(--md-sys-color-error);
}