/* =====================================================
   CPB_LAYOUT_V1
   Uniformização visual do portal interno
   ===================================================== */

/* 1. Estrutura geral */

body.backoffice {
    --cpb-page-width: 1480px;
    --cpb-page-gutter: clamp(16px, 2vw, 32px);
    --cpb-header-gap: 28px;
}

body.backoffice main.container {
    width: 100%;
    max-width: var(--cpb-page-width) !important;
    padding-left: var(--cpb-page-gutter) !important;
    padding-right: var(--cpb-page-gutter) !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* 2. Cabeçalhos das páginas */

body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head,
    .detail-head,
    .customer-head,
    .account-head,
    .os-head,
    .iw-head,
    .block-top,
    .v3-head,
    .ev32-head
) {
    margin-top: 0 !important;
    margin-bottom: var(--cpb-header-gap) !important;
}

/* 3. Títulos principais */

body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head,
    .detail-head,
    .customer-head,
    .account-head,
    .os-head,
    .iw-head,
    .block-top,
    .v3-head,
    .ev32-head
) h1 {
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em;
    color: #20384e;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* 4. Subtítulos */

body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head,
    .detail-head,
    .customer-head,
    .account-head,
    .os-head,
    .iw-head,
    .block-top,
    .v3-head,
    .ev32-head
) p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: #71869b;
    line-height: 1.55;
}

/* 5. Botões nos cabeçalhos */

body.backoffice :is(
    .calendar-head,
    .client-list-head,
    .stats-head,
    .detail-head,
    .block-top,
    .v3-head,
    .ev32-head
) :is(
    .calendar-head-actions,
    .client-head-actions,
    .stats-actions,
    .document-actions,
    .v3-actions
) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* 6. Alinhamento dos botões */

body.backoffice :is(
    .calendar-head,
    .client-list-head,
    .stats-head,
    .block-top,
    .v3-head,
    .ev32-head
) a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 750;
    text-decoration: none;
}

/* 7. Telemóvel */

@media (max-width: 767px) {

    body.backoffice {
        --cpb-page-gutter: 14px;
        --cpb-header-gap: 20px;
    }

    body.backoffice main.container {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }

    body.backoffice :is(
        .ops-head,
        .calendar-head,
        .orders-head,
        .task-head,
        .client-list-head,
        .stats-head,
        .detail-head,
        .customer-head,
        .account-head,
        .os-head,
        .iw-head,
        .block-top,
        .v3-head,
        .ev32-head
    ) h1 {
        font-size: clamp(27px, 6vw, 34px) !important;
    }

    body.backoffice :is(
        .calendar-head,
        .client-list-head,
        .stats-head,
        .block-top,
        .v3-head,
        .ev32-head
    ) :is(
        .calendar-head-actions,
        .client-head-actions,
        .stats-actions,
        .v3-actions
    ) {
        justify-content: flex-start;
    }
}