/* App page-header — the project-wide "title box" system (SAP flat, approved 2026-08-11).
   Reference look: white box, 1px --tbl-border, sharp 4px corners, compact height,
   title on the reading side + actions (blue primary) on the opposite side.
   Render via app_render_page_header() (public/shared/components/page-header.php);
   hand-rolled page title bars should migrate to this component/classes. */

.app-page-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid var(--tbl-border,#bcc3cd);border-radius:var(--tbl-radius,4px);background:var(--tbl-surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:10px}
.app-page-header__eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-text-muted,#6b7a8a);margin-bottom:2px}
.app-page-header__title{margin:0;font-size:16px;line-height:1.25;font-weight:700;color:var(--tbl-text,#1a2026)}
.app-page-header__subtitle{margin:3px 0 0;color:var(--tbl-text-muted,#6b7a8a);font-size:12.5px}
.app-page-header__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* SAP flat controls inside the title box (any module, no page scoping needed) */
.app-page-header__actions .btn,
.app-page-header__actions .app-button{min-height:28px;border:1px solid var(--tbl-border,#bcc3cd);border-radius:var(--tbl-radius-sm,2px);background:var(--tbl-control-bg,#f0f2f5);color:var(--tbl-text-secondary,#3d4a5a);font-size:12px;font-weight:600;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.app-page-header__actions .btn:hover,
.app-page-header__actions .app-button:hover{background:#e2e7ee}
.app-page-header__actions .btn-primary,
.app-page-header__actions .btn.btn-primary,
.app-page-header__actions .app-button--primary{background:var(--tbl-brand,#005c9e);border-color:var(--tbl-brand,#005c9e);color:#fff}
.app-page-header__actions .btn-primary:hover,
.app-page-header__actions .btn.btn-primary:hover,
.app-page-header__actions .app-button--primary:hover{background:var(--tbl-brand-hover,#004b82)}

@media(max-width:760px){.app-page-header{align-items:stretch;flex-direction:column}}