/**
 * ==========================================================================
 * RSA Universal Page Header Component (rsa-page-header.css)
 * Standardizes title, subtitle, breadcrumb, and action toolbar across pages.
 * Fully responsive with strict mobile-first architecture.
 * ==========================================================================
 */

.rsa-page-header:not(.d-none),
.page-header-row:not(.d-none),
.container-p-y > .page-header-row:not(.d-none),
.container-p-y > .rsa-page-header:not(.d-none) {
  display: flex !important;
  flex-direction: column;
  min-height: var(--bs-control-height, 44px) !important;
  gap: 1rem;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Zero out top margin when header follows session warning alert banner */
#globalSessionAlertSection + .rsa-page-header,
#globalSessionAlertSection + .page-header-row {
  margin-top: 0 !important;
}

/* Elements immediately following a page header must NEVER receive injected sibling margin-top */
.container-p-y > .page-header-row + *,
.container-p-y > .rsa-page-header + *,
.page-header-row + *,
.rsa-page-header + * {
  margin-top: 0 !important;
}

/* Ensure Bootstrap row and columns following a header start at 0 so visual distance to all cards is identical & sejajar */
.container-p-y > .page-header-row + .row,
.container-p-y > .rsa-page-header + .row,
.page-header-row + .row,
.rsa-page-header + .row {
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  .page-header-row + .row > [class*="col-"],
  .rsa-page-header + .row > [class*="col-"],
  .container-p-y > .page-header-row + .row > [class*="col-"],
  .container-p-y > .rsa-page-header + .row > [class*="col-"],
  .container-p-y > .alert + .row > [class*="col-"] {
    margin-top: 0 !important;
  }

  .container-p-y > .alert,
  .page-header-row + .alert,
  .rsa-page-header + .alert {
    margin-bottom: var(--layout-section-gap, 1.5rem) !important;
  }
}

/* Toolbar Clearance:
   1. Default (when NO pills or pills hidden):
      Matches the 16px (1rem) rhythm between the main action button above and the content below.
   2. When followed by pills:
      Tightens to 12px (calc(0.75rem - 2px) + 2px scroll padding) as an internal filter group.
*/
.search-filter-toolbar {
  margin-bottom: 1rem !important;
}

.search-filter-toolbar:has(+ .toolbar-pills-wrapper:not(.d-none):not([style*="display: none"])),
.search-filter-toolbar:has(+ .class-role-pills-wrapper:not(.d-none):not([style*="display: none"])),
.search-filter-toolbar.has-pills:not(:has(+ .toolbar-pills-wrapper.d-none)):not(:has(+ .toolbar-pills-wrapper[style*="display: none"])):not(:has(+ .class-role-pills-wrapper.d-none)):not(:has(+ .class-role-pills-wrapper[style*="display: none"])) {
  /* Compensates for 2px top padding inside .toolbar-pills-scroll for exact 12px visual clearance */
  margin-bottom: calc(0.75rem - 2px) !important;
}

.rsa-page-header__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rsa-page-header__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bs-heading-color, #242424);
  margin: 0 !important;
}

.rsa-page-header__subtitle {
  font-size: 0.875rem;
  color: var(--bs-secondary, #707070);
  margin: 0;
}

.rsa-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

/* Typography & Height Normalization:
   Regardless of whether a page header has NO buttons, BACK button only,
   ACTION button only, or BOTH buttons, the row height and text centering are identical. */
.page-header-row h4,
.page-header-row .page-header-title,
.rsa-page-header .rsa-page-header__title,
.page-header-row .page-header-left h4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
  font-size: 1.375rem;
}

.page-header-row .btn-back,
.page-header-row a.btn-back {
  width: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  min-width: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  flex-shrink: 0 !important;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
  .rsa-page-header:not(.d-md-none),
  .page-header-row:not(.d-md-none),
  .container-p-y > .page-header-row:not(.d-md-none),
  .container-p-y > .rsa-page-header:not(.d-md-none),
  .page-header-row.d-md-flex,
  .container-p-y > .page-header-row.d-md-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--bs-control-height, 44px) !important;
    gap: 1.5rem;
    margin-top: 0 !important;
    margin-bottom: var(--layout-section-gap, 1.5rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Left-aligned title + back button grouping: firmly placed on the left */
  .page-header-row > .d-flex.align-items-center:first-child,
  .page-header-row > .page-header-left,
  .page-header-row .page-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .page-header-row .btn-back,
  .page-header-row a.btn-back,
  .rsa-page-header .btn-back,
  #btnBackToDetail {
    display: inline-flex !important;
  }

  .page-header-row h4,
  .page-header-row .page-header-title,
  .rsa-page-header .rsa-page-header__title,
  .page-header-row .page-header-left h4 {
    font-size: 1.5rem;
  }

  .search-filter-toolbar {
    margin-bottom: 1rem !important;
  }

  .search-filter-toolbar:has(+ .toolbar-pills-wrapper:not(.d-none):not([style*="display: none"])),
  .search-filter-toolbar:has(+ .class-role-pills-wrapper:not(.d-none):not([style*="display: none"])),
  .search-filter-toolbar.has-pills:not(:has(+ .toolbar-pills-wrapper.d-none)):not(:has(+ .toolbar-pills-wrapper[style*="display: none"])):not(:has(+ .class-role-pills-wrapper.d-none)):not(:has(+ .class-role-pills-wrapper[style*="display: none"])) {
    margin-bottom: calc(0.75rem - 2px) !important;
  }

  .rsa-page-header__actions {
    width: auto;
    justify-content: flex-end;
  }

  .rsa-page-header__actions .btn,
  .page-header-row .page-header-actions .btn,
  .rsa-page-header__actions .dropdown > .btn,
  .page-header-row .dropdown > .btn {
    min-height: var(--bs-control-height, 44px) !important;
    height: var(--bs-control-height, 44px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] .rsa-page-header__title {
  color: var(--bs-heading-color, #e9e9e9);
}

[data-bs-theme="dark"] .rsa-page-header__subtitle {
  color: var(--bs-body-color, #a9a9a9);
}

/* ==========================================================================
   Search Toolbar Filter & Sort Buttons (Full-Rounded / Pill Harmony)
   ========================================================================== */
.toolbar-filter-btn,
.toolbar-sort-btn,
button[data-bs-target="#modalFilters"],
#classesMobileSortWrapper>button,
#materialsMobileSortWrapper>button,
#repeatMobileSortWrapper>button,
#usersSortWrapper>button,
#teamMobileSortWrapper>button,
.dropdown:has(> [id*="SortDropdown"])>button,
.dropdown:has(> [id*="sortDropdown"])>button,
[id*="SortWrapper"]>button,
[id*="sortWrapper"]>button {
  height: var(--bs-control-height, 44px) !important;
  min-height: var(--bs-control-height, 44px) !important;
  max-height: var(--bs-control-height, 44px) !important;
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: var(--btn-transition, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease) !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Desktop: Equal height (44px) and balanced padding matching Search Input */
@media (min-width: 768px) {
  /* Sembunyikan tombol urutkan di desktop secara global karena tabel desktop sudah memiliki sortable header kolom */
  .toolbar-sort-btn,
  #classesMobileSortWrapper,
  #materialsMobileSortWrapper,
  #repeatMobileSortWrapper,
  #usersSortWrapper,
  #teamMobileSortWrapper,
  .dropdown:has(> [id*="SortDropdown"]),
  .dropdown:has(> [id*="sortDropdown"]),
  [id*="SortWrapper"],
  [id*="sortWrapper"] {
    display: none !important;
  }

  .toolbar-filter-btn,
  button[data-bs-target="#modalFilters"] {
    padding: 0 1.25rem !important;
    min-width: var(--bs-control-height, 44px) !important;
    font-size: var(--bs-font-size-btn, 0.9375rem) !important;
  }
}

/* Mobile: Perfectly circular 44px x 44px icon buttons & desktop header suppression */
@media (max-width: 767.98px) {
  /* Strictly hide desktop-only page headers on mobile (< 768px) */
  .page-header-row.d-none,
  .rsa-page-header.d-none,
  .container-p-y > .page-header-row.d-none,
  .container-p-y > .rsa-page-header.d-none,
  .page-header-row.d-md-flex:not(.d-flex):not(.d-block):not(.d-inline-flex),
  .rsa-page-header.d-md-flex:not(.d-flex):not(.d-block):not(.d-inline-flex),
  .container-p-y > .page-header-row.d-md-flex:not(.d-flex):not(.d-block):not(.d-inline-flex),
  .container-p-y > .rsa-page-header.d-md-flex:not(.d-flex):not(.d-block):not(.d-inline-flex) {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* In-page desktop back buttons are strictly hidden on mobile (handled by mobile top navbar) */
  .btn-back,
  a.btn-back,
  .page-header-row .btn-back,
  .rsa-page-header .btn-back,
  .container-p-y > .page-header-row .btn-back,
  .container-p-y .btn-back,
  #btnBackToDetail {
    display: none !important;
  }

  .search-filter-toolbar .toolbar-filter-btn,
  .search-filter-toolbar .toolbar-sort-btn,
  .search-filter-toolbar button[data-bs-target="#modalFilters"],
  .toolbar-filter-btn,
  .toolbar-sort-btn,
  button.toolbar-filter-btn,
  button.toolbar-sort-btn,
  button[data-bs-target="#modalFilters"],
  #classesMobileSortWrapper>button,
  #materialsMobileSortWrapper>button,
  #repeatMobileSortWrapper>button,
  #usersSortWrapper>button,
  #teamMobileSortWrapper>button,
  .dropdown:has(> [id*="SortDropdown"])>button,
  .dropdown:has(> [id*="sortDropdown"])>button,
  [id*="SortWrapper"]>button,
  [id*="sortWrapper"]>button {
    width: var(--bs-control-height, 44px) !important;
    height: var(--bs-control-height, 44px) !important;
    min-width: var(--bs-control-height, 44px) !important;
    max-width: var(--bs-control-height, 44px) !important;
    min-height: var(--bs-control-height, 44px) !important;
    max-height: var(--bs-control-height, 44px) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
  }
}

/* Ensure toolbar filter & sort button border and icon color match perfectly */
.toolbar-filter-btn:not(.btn-primary):not(.btn-label-primary),
.toolbar-sort-btn:not(.btn-primary):not(.btn-label-primary) {
  border-color: currentColor !important;
}