@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;

// Page shell, header and toolbar — the listing-page layout primitives.
//
//   <section class="qo-page">
//     <header class="qo-page-header"> … </header>
//     <div class="qo-toolbar"> … </div>
//   </section>

.qo-page {
  min-height: 100%;
  padding: sp.$space-4 sp.$space-5 sp.$space-5;
  background-color: cl.$background-light;
  color: cl.$text-dark;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-base;
  line-height: ft.$line-height-base;

  @media (max-width: 768px) { padding: sp.$space-3; }
}

.qo-page-header {
  min-height: 56px;
  padding: 0 sp.$space-4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background-color: cl.$background-default;
  border: bo.$border-width-sm solid cl.$border-light;
  border-radius: bo.$border-radius-md bo.$border-radius-md 0 0;

  @media (max-width: 768px) {
    grid-template-columns: 1fr auto;
    row-gap: sp.$space-2;
    padding: sp.$space-2 sp.$space-3;
  }
}

.qo-page-title {
  margin: 0;
  color: cl.$text-darker;
  font-size: ft.$font-size-xxl;
  font-weight: ft.$font-weight-bold;
  line-height: ft.$line-height-xxs;
}

.qo-page-subtitle {
  margin: 0;
  color: cl.$text-secondary;
  font-size: ft.$font-size-sm;
  font-weight: ft.$font-weight-regular;
}

.qo-page-action { justify-self: end; }

// Toolbar — search + actions, wrapping to its own row when narrow.
.qo-toolbar {
  display: flex;
  align-items: center;
  gap: sp.$space-2;

  &.qo-toolbar-between { justify-content: space-between; }
  &.qo-toolbar-end { justify-content: flex-end; }
  &.qo-toolbar-wrap { flex-wrap: wrap; }

  @media (max-width: 1200px) { flex-wrap: wrap; }

  @media (max-width: 768px) {
    align-items: stretch;
    // A text button stretches to fill the row; an icon button keeps its square.
    > .qo-btn:not(.qo-btn-icon) { flex: 1 1 auto; }
  }
}

// The flexible search region inside a toolbar.
.qo-toolbar-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 280px;

  @media (max-width: 1200px) { flex-basis: 100%; }
}

.qo-toolbar-spacer { flex: 1 1 auto; }