/**
 * Sena Design System
 * Page Header Component
 *
 * Requires: theme.css + buttons.css (+ search-bar.css if a search is used)
 *
 * Top-of-page panel containing the page title (with optional icon) and
 * optional right-aligned controls (search bar, action buttons).
 * Sits as its own panel above the main content area.
 *
 *   <header class="page-header">
 *     <div class="page-header-left">
 *       <i class="page-header-icon fa-duotone fa-grid-2" aria-hidden="true"></i>
 *       <h1 class="page-header-title">Title</h1>
 *     </div>
 *     <div class="page-header-right">
 *       <div class="search-bar"> ... </div>
 *       <button class="btn btn-primary btn-sm"> ... </button>
 *     </div>
 *   </header>
 */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  height: 52px;
  padding: 0 var(--spacing-16) 0 var(--spacing-24);
  background: var(--bg-panel);
  border: 1px solid var(--stroke-panel-sides);
  border-top-color: var(--stroke-panel);
  border-radius: var(--spacing-8);
  box-shadow: var(--shadow-panel);
  flex-shrink: 0;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
}

.page-header-icon {
  font-size: 18px;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.page-header-title {
  font-family: var(--ff-text);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.page-header-right .search-bar {
  width: 260px;
}