/* Page header + shared chrome cho trang .dashboard-wrapper */

.page-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-8, 2rem);
    padding-bottom: var(--spacing-6, 1.5rem);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.page-header__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-500, #014aad), var(--primary-400, #049ee0));
    box-shadow: 0 4px 14px rgba(1, 74, 173, 0.22);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.page-header__icon .oi,
.page-header__icon .bi {
    line-height: 1;
    font-size: 1.25rem;
    color: #fff;
    display: inline-block;
    transform: translateY(1px);
}

.page-header__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--gray-900, #111827);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.page-header__meta {
    margin-left: auto;
    color: var(--gray-500, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 999px;
    border: 1px solid var(--gray-200, #e5e7eb);
}

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

    .page-header__meta {
        margin-left: 0;
    }
}

/* .app-page: đánh dấu trang nội dung (đồng bộ với Dashboard app-page--*) */
.app-main .dashboard-wrapper {
    padding: clamp(1.15rem, 2.2vw, 1.65rem) clamp(1rem, 2.8vw, 2rem) 2.5rem;
    max-width: 1720px;
    margin-inline: auto;
    min-height: min-content;
}

.app-main .dashboard-wrapper .page-header {
    margin-bottom: 1.5rem;
}