/**
 * 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;
}

.v-content-actions .upload-document {
  margin-bottom: 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;
  }

  .v-content-actions > .v-btn,
  .v-content-actions > .verimus-btn,
  .hrc-page-controls > .v-btn,
  .hrc-page-controls > .verimus-btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .v-content-actions > .ms-3,
  .v-content-actions .hrc-template-archived-toggle {
    margin-left: 0 !important;
  }

  .v-content-actions .upload-document,
  .v-content-actions .ghost-verimus-btn {
    min-width: min(100%, 11rem);
  }

  /* 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%;
}


/* Opt-in page header contract: Employees, HR Guides and Recruitment. */
.content-body .hrc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #171717;
}
.hrc-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}
.content-body .hrc-page-header h1 {
    font-family: "Eudoxus", Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #171717;
    margin: 0;
    overflow-wrap: anywhere;
}
.content-body .hrc-page-header p {
    font-family: "Eudoxus", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #171717;
    margin: 12px 0 0;
}
.content-body .hrc-page-header .hrc-page-header__primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #ff8030;
    border-radius: 8px;
    background: #ff8030;
    color: #fff;
    font-family: "Eudoxus", Arial, sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}
.content-body .hrc-page-header .hrc-page-header__primary:hover {
    background: #ed7020;
    border-color: #ed7020;
    color: #fff;
    filter: none;
}
.content-body .hrc-page-header .hrc-page-header__primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgb(255 128 48 / 35%), 0 0 0 6px rgb(255 128 48 / 18%);
}
.hrc-page-metrics { margin: 0 0 24px; }
.hrc-page-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.hrc-page-controls .hrc-employees-archived-toggle { margin-left: 0 !important; }
.hrc-playbook .hrc-page-metrics { max-width: 420px; min-width: 0; }
.dark-mode .content-body .hrc-page-header,
.dark-mode .content-body .hrc-page-header h1,
.dark-mode .content-body .hrc-page-header p { color: #fff; }
@media (max-width: 767px) {
    .content-body .hrc-page-header,
    .hrc-page-header__row { flex-direction: column; gap: 16px; }
    .content-body .hrc-page-header h1 { font-size: 24px; }
}

/* Page-title adapters for the legacy theme and custom-plugin page shells. */
.main-content .hrc-page-title,
.content-body .hrc-page-header .hrc-page-title,
.main-content .hrc-integration-dashboard > h1,
.main-content .review-overview-page .page-header h2,
.main-content .um-topbar h1,
.main-content .hrc-ps-heading h1,
.main-content .whs-page-header h1,
.main-content .whs-report-header .whs-title,
.main-content .hrc-calendar-header h1,
.main-content > .content-body > h1 {
  font-family: "Eudoxus", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary, #171717);
  margin-top: 0;
}
.main-content .hrc-page-title { margin-bottom: 24px; }
.content-body .hrc-page-header .hrc-page-title { margin-bottom: 0; }
.hrc-page-controls { margin-bottom: 24px; }
.hrc-page-controls:empty { display: none; }
.hrc-page-controls > .ms-3 { margin-left: 0 !important; }
.hrc-page-controls > .hrc-document-archived-toggle {
  order: 1;
  margin-left: auto !important;
}
/* Keep template-library controls grouped from the left rather than spread
 * across the available row width. Other page types retain their placement. */
.tax-template-category .hrc-page-controls {
  justify-content: flex-start;
}
.tax-template-category .hrc-page-controls > .hrc-document-archived-toggle {
  margin-left: 0 !important;
}
.main-content .hrc-knowledge-header .hrc-page-header { display: block; margin: 0; }
.main-content .hrc-knowledge-header .hrc-page-header p { margin-top: 12px; }
.main-content .whs-report-header {
  background: var(--card-bg, #fff);
  color: var(--text-primary, #171717);
  text-align: left;
  border-bottom: 1px solid var(--border-color, #dbe0e8);
  box-shadow: none;
}
.main-content .whs-report-header .whs-title { color: var(--text-primary, #171717); }
.main-content .hrc-page-header :is(.primary-verimus-btn,.v-btn--primary,.whs-btn-primary) {
  background: #ff8030;
  border-color: #ff8030;
  color: #fff;
  font-size: 16px;
  min-height: 44px;
}
.main-content .hrc-page-header :is(.whs-header-actions,.um-topbar-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dark-mode .main-content :is(.hrc-page-title,.um-topbar h1,.hrc-ps-heading h1,.whs-page-header h1) { color: #fff; }
@media (max-width: 767px) {
  .main-content :is(.hrc-page-title,.um-topbar h1,.hrc-ps-heading h1,.whs-page-header h1,.whs-report-header .whs-title,.hrc-calendar-header h1),
  .content-body .hrc-page-header .hrc-page-title { font-size: 24px; }
}

@media (max-width: 767px) {
 .main-content .hrc-integration-dashboard > h1,
 .main-content .review-overview-page .page-header h2 { font-size: 24px; }
 .main-content .review-overview-page .page-header > .d-flex {
   flex-direction: column;
   align-items: flex-start !important;
   gap: 16px;
 }
}

.main-content .review-overview-page .page-header p,
.main-content .hrc-ps-heading > div > p {
  color: var(--text-primary, #171717);
  font-family: "Eudoxus", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Keep the report header on the same dark surface as its form. */
.dark-mode .main-content .whs-report-header {
  background: var(--dark-bg-secondary);
}