/* ============================================================
   /data/css/ui/headers.css
   - Shared page headers / intros
   - Uses legacy page class names so no markup changes are needed
   ============================================================ */

/* ============================================================
   Header rows
   ============================================================ */

.clients-head,
.accounting-head,
.hosting-head,
.domains-head,
.invoices-head,
.client-form-head,
.settings-header-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.accounting-head,
.hosting-head,
.domains-head,
.invoices-head,
.settings-header-row {
    align-items: flex-start;
}

.clients-head,
.client-form-head {
    align-items: flex-end;
}

.settings-header-row {
    align-items: center;
}

.clients-title {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Main titles
   ============================================================ */

.clients-h1,
.accounting-h1,
.hosting-h1,
.domains-h1,
.invoices-h1,
.client-form-title,
.settings-title,
.frontpage-title {
    margin: 0;
}

.clients-h1,
.client-form-title {
    margin-bottom: 6px;
}

.domains-h1,
.invoices-h1 {
    font-size: 22px;
    letter-spacing: .2px;
}

.frontpage-title {
    margin-bottom: 8px;
}

.settings-title {
    margin-bottom: 10px;
}

/* ============================================================
   Subtitles / muted intros
   ============================================================ */

.clients-sub,
.accounting-sub,
.hosting-sub,
.domains-sub,
.invoices-sub,
.client-form-sub,
.settings-subtitle,
.frontpage-lead {
    color: var(--muted);
}

.clients-sub,
.client-form-sub,
.settings-subtitle,
.frontpage-lead {
    margin: 0;
}

.accounting-sub,
.hosting-sub {
    margin: 6px 0 0;
}

.domains-sub,
.invoices-sub {
    margin: 4px 0 0;
    font-size: 13px;
}

.clients-empty,
.hosting-empty,
.muted,
.inv-total,
.frontpage-muted {
    color: var(--muted);
}

/* ============================================================
   Common spacers
   ============================================================ */

.clients-gap,
.domains-gap,
.invoices-gap,
.frontpage-spacer {
    height: 14px;
}

.accounting-receipts-gap {
    height: 18px;
}

.settings-gap {
    height: 16px;
}

.settings-help-gap {
    height: 10px;
}

.cf-gap-md {
    height: 12px;
}

.cf-gap-lg {
    height: 14px;
}

.cf-gap-xl {
    height: 16px;
}

.page-back-row,
.projects-form-toplink,
.projects-view-toplink {
    margin-bottom: 14px;
}

/* Keep invoices page back row exact */
.page-back-row {
    margin-bottom: 12px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 760px) {
    .accounting-head,
    .hosting-head {
        flex-direction: column;
        align-items: stretch;
    }
}