/**
 * Content Card Header
 * 
 * Standardized header for all content cards with title, actions, and controls.
 * Uses CSS variables from style.css :root
 * 
 * Structure:
 * .v-content-header
 *   .v-content-title
 *     .v-title (h1-h6)
 *     .verimus-btn (optional action button)
 *   .v-content-controls
 *     (search, filters, etc.)
 * 
 * @package Verimus
 * @since 2.0.0
 */

/* ==========================================================================
   Content Header Container
   ========================================================================== */

.v-content-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Title Section
   ========================================================================== */

.v-content-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.v-content-title .v-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
  line-height: 1.2;
}

/* Smaller title variant */
.v-content-title .v-title--sm {
  font-size: var(--font-size-xl);
}

/* Large title variant */
.v-content-title .v-title--lg {
  font-size: var(--font-size-5xl);
}

/* Title with icon */
.v-content-title .v-title-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.v-content-title .v-title-icon img {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* ==========================================================================
   Controls Section
   ========================================================================== */

.v-content-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Stretch controls to full width (for mobile or specific layouts) */
.v-content-controls--full {
  width: 100%;
  justify-content: flex-end;
}

/* ==========================================================================
   Content Card Container (optional wrapper)
   ========================================================================== */

.v-content-card {
  background-color: white;
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--card-padding-lg);
}

.dark-mode .v-content-card {
  background-color: var(--grayscale-800);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Flush padding variant (for cards containing tables) */
.v-content-card--flush-body {
  padding-bottom: 0;
}

.v-content-card--flush-body .v-content-body {
  margin-left: calc(-1 * var(--card-padding-lg));
  margin-right: calc(-1 * var(--card-padding-lg));
  margin-bottom: calc(-1 * var(--card-padding-lg));
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .v-content-header {
    gap: var(--spacing-sm);
  }
  
  .v-content-title .v-title {
    font-size: var(--font-size-2xl);
  }
}

@media (max-width: 768px) {
  .v-content-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .v-content-title {
    justify-content: space-between;
    width: 100%;
  }
  
  .v-content-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .v-content-controls > * {
    width: 100%;
  }
  
  .v-content-title .v-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 480px) {
  .v-content-title {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }
  
  .v-content-title .verimus-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Two-Row Header Layout
   Enabled when search_callback is provided to content-card-header.
   Row 1: Title (left) | Search (right)
   Row 2: CTA + Archive (left) | Filters (right)
   ========================================================================== */

.v-content-header--two-row {
  flex-direction: column;
  align-items: stretch;
}

.v-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

/* Top row: title left, search right — full width */
.v-header-row--top {
  flex-wrap: nowrap;
}

.v-header-row--top .v-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
  line-height: 1.2;
  flex-shrink: 0;
}

.v-header-search {
  flex-shrink: 0;
  margin-left: auto;
}

/* Bottom row: actions left + filters right */
.v-header-row--bottom {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-200, #e5e7eb);
  flex-wrap: wrap;
}

.v-content-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Push controls to the right in bottom row */
.v-header-row--bottom .v-content-controls {
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}

/* Constrain filter widths inside two-row header at ALL breakpoints */
.v-header-row--bottom .v-filter-wrap,
.v-header-row--bottom .dt-table-select-wrap {
  max-width: 170px;
  min-width: 0;
  flex-shrink: 1;
}

/* Ensure nested controls containers don't expand */
.v-header-row--bottom .v-table-controls,
.v-header-row--bottom .v-controls-row {
  flex-wrap: nowrap;
  min-width: 0;
}

/* Force Select2 containers to respect parent width in header */
.v-header-row--bottom .select2-container {
  max-width: 100% !important;
}

/* Ghost buttons in action area */
.v-content-actions .ghost-verimus-btn {
  white-space: nowrap;
}

/* ==========================================================================
   Two-Row Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  /* Re-assert filter constraints inside two-row header even at tablet */
  .v-header-row--bottom .v-filter-wrap,
  .v-header-row--bottom .dt-table-select-wrap {
    max-width: 170px;
  }

  /* Allow bottom row controls to wrap on tablets */
  .v-header-row--bottom .v-table-controls,
  .v-header-row--bottom .v-controls-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .v-header-row--top {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .v-header-row--top .v-title {
    font-size: var(--font-size-lg);
  }

  .v-header-search {
    width: 100%;
    margin-left: 0;
  }

  .v-header-search .v-search-wrap {
    width: 100%;
  }

  .v-header-search .v-search-wrap input[type="text"],
  .v-header-search .v-search-wrap input[type="search"] {
    width: 100%;
    max-width: none;
    min-width: auto;
  }

  .v-header-row--bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .v-header-row--bottom .v-content-controls {
    margin-left: 0;
    width: 100%;
  }

  .v-content-actions {
    width: 100%;
  }

  .v-content-actions .verimus-btn {
    flex: 1;
    justify-content: center;
  }

  /* Let filters go full width on mobile */
  .v-header-row--bottom .v-filter-wrap,
  .v-header-row--bottom .dt-table-select-wrap {
    max-width: none;
    width: 100%;
  }
}

/* ==========================================================================
   Ghost Button Alignment (single-row fallback)
   ========================================================================== */

.v-content-title .ghost-verimus-btn {
  white-space: nowrap;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

.dark-mode .v-content-title .v-title {
  color: #ffffff;
}

.dark-mode .v-header-row--bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Quick Actions & Task Tag Overrides (consolidated)
   ========================================================================== */

/* Remove card styling when nested inside content-body to avoid double borders */
#quick-actions,
.quick-actions,
.content-body .v-content-card {
  background: unset !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.task__tags .tag-author {
  padding: 6px 7px;
  height: 32px;
}

.task__tags .tag-author .author-name {
  font-weight: 500;
}

.task-out-of-date {
  border: none !important;
}

/* ==========================================================================
   Full Width Stacked Header Layout
   ========================================================================== */

/* Header with title row above controls row */
.v-content-header--stacked {
  flex-direction: column;
  align-items: stretch;
}

.v-content-header--stacked .v-content-title {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.v-content-header--stacked .v-content-controls {
  width: 100%;
  justify-content: flex-end;
}

/* Documents page specific - ensure full width header */
.dt-table-wrap .v-content-header,
#documents-table_wrapper .v-content-header,
.documents-table-container .v-content-header {
  width: 100%;
}