/*
 CPB LAYOUT V1.1
 Cabeçalhos e ações superiores do backoffice.
 Não altera formulários, filtros ou cartões.
*/

body.backoffice {
  --cpb-head-ink:#20384e;
  --cpb-head-muted:#708497;
  --cpb-head-blue:#0756a3;
}

/* 1. Cabeçalhos das páginas principais */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head,
  .stats-head
) {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 24px;
  margin:12px 0 28px;
}

/* Apenas o primeiro bloco de texto do cabeçalho */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head,
  .stats-head
) > div:first-child {
  min-width:0;
}

/* 2. Títulos */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head,
  .stats-head
) h1 {
  font-size:clamp(30px,3.2vw,42px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-1.1px;
  color:var(--cpb-head-ink);
  margin:7px 0 10px;
}

/* 3. Subtítulos */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head,
  .stats-head
) > div:first-child > p {
  font-size:15px;
  line-height:1.55;
  color:var(--cpb-head-muted);
  margin:0;
}

/* 4. Identificadores superiores */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head,
  .stats-head
) .eyebrow {
  font-size:12px;
  font-weight:850;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--cpb-head-blue);
}

/* 5. Ações dos cabeçalhos */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head
) > :is(a.btn,button.btn),
body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head
) > :is(.client-head-actions) > :is(a.btn,button.btn),
body.backoffice .calendar-head > div:last-child > :is(a.btn,button.btn) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 17px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:none;
}

/* 6. Alinhamento dos grupos de ações */

body.backoffice :is(
  .calendar-head,
  .client-list-head
) > div:last-child:not(:first-child) {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

/* 7. Botões principais */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head
) .btn-primary {
  background:#0756a3;
  border-color:#0756a3;
  color:#fff;
}

/* 8. Botões secundários */

body.backoffice :is(
  .ops-head,
  .calendar-head,
  .orders-head,
  .task-head,
  .client-list-head
) .btn-light {
  background:#eaf3ff;
  border:1px solid #a8cff8;
  color:#0756a3;
}

/* 9. Páginas de gestão de indisponibilidades */

body.backoffice .cpb-bloqueios-v3 .v3-head,
body.backoffice .cpb-block-v2 .block-top {
  align-items:flex-start;
}

body.backoffice .cpb-bloqueios-v3 h1,
body.backoffice .cpb-block-v2 h1 {
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.12;
  letter-spacing:-1.1px;
}

body.backoffice .cpb-bloqueios-v3 .v3-actions,
body.backoffice .cpb-block-v2 .block-top-actions {
  align-items:center;
  gap:10px;
}

/* 10. Telemóveis */

@media (max-width:700px) {

  body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head
  ) {
    gap:14px;
    margin:8px 0 22px;
  }

  body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head
  ) h1 {
    font-size:clamp(28px,7vw,34px);
  }

  body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head,
    .stats-head
  ) > div:first-child {
    flex-basis:100%;
  }

  body.backoffice .calendar-head > div:last-child:not(:first-child),
  body.backoffice .client-head-actions {
    justify-content:flex-start;
  }

  body.backoffice :is(
    .ops-head,
    .calendar-head,
    .orders-head,
    .task-head,
    .client-list-head
  ) :is(a.btn,button.btn) {
    min-height:44px;
  }
}